Giới thiệu về phát triển Android khi sử dụng Eclipse và các widget của Android(P3)

Chạy ứng dụng trên trình mô phỏng thiết bị

Để triển khai và chạy ứng dụng này, bạn cần phải xác định một cấu hình chạy. Chọn Open > Run > Dialog hoặc phím tắt trên thanh công cụ trong Eclipse và chọn ứng dụng Android. Nhấn New và điền vào tên của cấu hình chạy này. Chỉ rõ tên dự án của bạn và hoạt động mặc định. Sau đó trong tab đích, chọn một số giá trị cài đặt trình mô phỏng mong muốn và xác định một AVD mà bạn muốn khởi động. Nhấn vào Run (Chạy). Bạn sẽ nhận được một AVD như trong Hình 6. Màn hình của thiết bị được hiển thị bên trái, cùng với một bàn phím QWERTY ở dưới cùng bên trái và các nút di động thông thường như quay số, ngắt kết nối, tắt tiếng, âm lượng và trang chủ ở trên cùng bên trái.

Hình 6. Thiết bị ảo Android (AVD)

Các widget Android

Bây giờ chúng ta biết cách tạo và chạy một ứng dụng Android cơ bản, chúng ta hãy làm đẹp mọi thứ bằng các widget (xem Hình 7):

• textView bao gồm các widget như editText, nút ấn (Button), v.v. Các nút ấn có thể được được phân loại thêm nữa:
  • CheckBox (Hộp kiểm tra).
  • RadioButton (Nút ấn tròn).
  • ToggleButton (Nút ấn đảo chiều), v.v.
• ImageView bao gồm các widget như ImageButton.
• ViewGroup bao gồm các bố trí như:
  • Relative Layout (Bố trí tương đối).
  • Table Layout (Bố trí bảng).
  • Frame Layout (Bố trí khung).
  • Adapter View (Khung nhìn của bộ tiếp hợp).
  • Linear Layout (Khung nhìn tuyến tính).

Để biết thông tin về các widgetHướng dẫn trực quan về các widget Giao diện đồ họa người dùng của Android (GUI Android Widget) là hướng dẫn tốt nhất. Tuy nhiên, hãy thận trọng với các sai lệch có thể xuất hiện ở đó do những thay đổi nhanh chóng của nền tảng Android. Một ví dụ rõ ràng là việc sử dụng id như là một thuộc tính của trình định danh cho một widget trong tệp main.xml trong hướng dẫn nêu trên. Trong nền tảng Android mới nhất, nên sử dụng tên phân biệt đầy đủ android:id.

Hình 7. Hệ thống phân cấp các widget của Android

Một ứng dụng mẫu có sử dụng widget

Bây giờ chúng ta sẽ thay đổi ứng dụng hiện có của mình để trông giống như Hình 8. Mục đích của ví dụ này là làm cho độc giả quen thuộc với việc sử dụng của một số widget cơ bản như textView, editText, Button, và Toast trong một ứng dụng thực tế.

Ứng dụng của chúng ta sẽ bao gồm một thanh tiêu đề với thông điệp "WELCOME!!!" Nó sẽ có ba widget textView bắt đầu từ trên xuống, sắp xếp theo chiều dọc: widget thứ nhất nói "Hello World, how're you (Chào thế giới, Bạn thế nào)?" theo phông chữ mặc định, widget tiếp theo là "Welcome to my first Android app (Chào mừng đến với ứng dụng Android đầu tiên của tôi)" với chữ serif nghiêng, canh chính giữa, có nền trắng; và widget thứ ba nói "Type anything and press the button (Gõ vào gì đó và nhấn nút)" với chữ đậm, độ rộng bằng nhau, có nền màu đỏ. Sau ba widget này là widget editText để lấy đầu vào từ người dùng, theo sau là một widget nút nhấn, nút này đi cùng với thông điệp "Click Me!" (Nhấn vào tôi). Mọi thứ bạn gõ vào trong widget editText sẽ xuất hiện trong một widget Toast ở dưới đáy giữa màn hình khi nhấn vào nút này.

Không có nhiều mã triển khai thực hiện liên quan ở đây. Độc giả nên chú ý rằng các widget có thể được đưa vào trong ứng dụng dễ dàng như thế nào khi sử dụng trình soạn thảo GUI của ADT cho các tệp XML và các đặc tính của widget được thiết lập thuận tiện như thế nào khi sử dụng khung nhìn "properties" (các thuộc tính) do Eclipse cung cấp. Ví dụ này cũng sẽ cho thấy giao diện người dùng và các phần triển khai thực hiện có thể được mã hoá độc lập như thế nào.

Hình 8. Thiết bị ảo Android với các widget

Tệp string.xml

Hãy thêm một số chuỗi mới vào tệp string.xml, thay đổi chuỗi chào mừng hiện có và cuối cùng là chuỗi tiêu đề. Chúng ta cũng xác định các màu trắng và màu đỏ ở đây để làm nền cho hai widget textView.

Liệt kê 2. Tệp string.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="hello">Hello World, how\'re you?</string>
    <string name="app_name">Hello Android</string>
    <string name="title">WELCOME!!!</string>
    <string name="mainText">Welcome to my first android app</string>
    <string name="subText">Type anything and press the button</string>
    <color name="White">#FFFFFF</color>
    <color name="Red">#FF0000</color>
</resources>

Chúng ta thay đổi chuỗi ký tự "hello" để chứa "Hello World, how're you?" Lưu ý ở đây phải có ký tự thoát ('\') đối với dấu nháy đơn. Chúng ta cũng định nghĩa hai chuỗi mới: mainText và subText, và các màu trắng và đỏ.

Tệp main.xml

Hãy sử dụng tab bố trí của tệp main.xml để kéo và thả hai widget textView: một widget editText và một widget nút ấn. Sau đó chúng ta sẽ sử dụng tab các thuộc tính trong tệp main.xml để chỉnh sửa các thuộc tính cho mỗi widget.

Liệt kê 3. Tệp main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/

apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="@string/hello"
    />
<TextView 
    android:layout_height="wrap_content" 
    android:layout_width="fill_parent" 
    android:id="@+id/mainTextView" 
    android:gravity="center" 
    android:text="@string/mainText" 
    android:textStyle="italic" 
    android:typeface="serif" 
    android:background="@color/White">
</TextView>
<TextView 
    android:layout_height="wrap_content" 
    android:layout_width="fill_parent" 
    android:layout_margin="20sp" 
    android:gravity="left" 
    android:id="@+id/subTextView" 
    android:padding="10sp" 
    android:text="@string/subText" 
    android:textStyle="bold" 
    android:typeface="monospace" 
    android:background="@color/Red">
</TextView>
<EditText 
    android:text="Enter text here" 
    android:id="@+id/EditText01" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content">
</EditText>
<Button 
    android:text="Click me!" 
    android:id="@+id/Button01" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content">
</Button>
</LinearLayout>

Với tệp này, chúng ta đã xác định giao diện giao diện người dùng của mình. Bây giờ chúng ta phải liên kết mã hành động của mình với nó.

Tệp MainActivity.java

Đây là tệp thực sự liên kết giao diện người dùng với mã triển khai thực hiện. Cũng giống như ứng dụng HelloWorld, chúng ta sử dụng phương thức Activity.onCreate(Bundle) để trang trí tất cả các phần tử UI trên màn hình. Phương thức onClick(View) bị ghi đè này sẽ chứa chức năng nhấn nút, nơi văn bản đầu vào của người dùng sẽ được đọc và được hiển thị trên màn hình trong một widget toast.

Liệt kê 4. Tệp MainActivity.java

package com.example.helloandroid;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

public class MainActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        String title = getString(R.string.title);
        setTitle(title);  

  // done so that we can change the default title
        
        //get handles to editText and button widgets
        final EditText eText = (EditText) findViewById(R.id.EditText01);
        final Button button = (Button) findViewById(R.id.Button01);
        
        button.setOnClickListener(new Button.OnClickListener(){

            @Override
            public void onClick(View v) {
                //get the String entered into the editText widget
                CharSequence editText = eText.getText();
                
                //display the toast
                Toast.makeText(MainActivity.this,

 editText, Toast.LENGTH_LONG).show();
            }

        });
        
    }
}

Khi sử dụng mã này, chúng ta nhận được các ứng dụng như trong Hình 8.