Tìm hiểu về Button và cách dùng Button trong Android.

Trong những bài tìm hiểu về Android trước, chúng ta đã hiểu cơ bản một Android Project, hay vài thao tác trong Emulator Android. Bắt đầu từ bài này, chúng ta hãy cùng tìm hiểu về UI trong Android nhé.

UI là viết tắt của User Interface. Cái này gọi là giao diện người dùng(tương tác với người dùng). UI trong android cơ bản gồm nhiều thành phần tạo nên như :

• Button
• Text Fields
• Text View
• Check box
• Radio Button
• …

Trong bài mình viết hôm nay chúng ta hãy cùng tìm hiểu về thành phần cơ bản đầu tiên của UI đó là Button.

Button là nút nhấn. nó xử lý các sự kiện khi ta nhấn vào. Button có thể là một Button Text, một Button bằng Image hay một Button bao gồm cả Image và Text.

Bây giờ hãy mở Eclipse và tạo Android Project mới tên ButtonDemo và thực hành nào.

Trong AndroidProject vừa tạo. Các bạn đến mục layout->activity_main.xml để thiết kế giao diện người dùng nhé. Trước tiên mình có vài cách tạo một button như sau :

Bạn có thể tạo Button Text thường thấy với code :

<TextView
android:id="@+id/tv1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/text" />

Tạo một Button Image với code :

<ImageButton
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher"
android:onClick="clickImageButton" />

Tạo Button gồm cả Image và Text với code :

<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:drawableLeft="@drawable/ic_launcher"
android:text="ButtonImage"
android:onClick="clickBothTextImageButton"/>

Bạn sẽ thấy mình sử dụng thuộc tính :

android:drawableLeft="@drawable/ic_launcher"

Thuộc tính này sẽ đưa hình ảnh sang bên trái Text, Nếu bạn muốn hình ảnh bên phải, trên, dưới thì thay nó bằng :

android:drawableRight="@drawable/ic_launcher"

android:drawableTop="@drawable/ic_launcher"

android:drawableBottom="@drawable/ic_launcher"

Như mình đã nói ở trên thì Button xử lý một event khi ta click vào nó. Vừa rồi ta mới chỉ tạo hình cho Button của mình, bây giờ ta cần xử lý event khi Button được click.

Có hai cách xử lý event của Button.

• Bạn thêm thuộc tính android:onClick=”eventClick” và trong chương trình chính bạn dùng phương thức

public void eventClick(View view) {

     //Làm cái gì đó khi button được click

}

• Bạn để thuộc tính android:id=”@+id/idButton” và trong chương trình chính bạn dùng

Button buttonClick = (Button) findViewById(R.id.idButton);

buttonClick.setOnClickListener(new OnClickListener() {

public void onClick(View v)  {

      //Làm gì đó khi Button được click.

   }

});

Bầy giờ mình sẽ thực hiện từng bước để chúng ta nắm bắt rõ hơn.

• Trước tiên cần thiết kế giao diện. Vào res->layout->activity_main.xml và code :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical" >
 <TextView 
 android:id="@+id/tv1"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:text="@string/text"
 />
 <Button 
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:text="@string/button1"
 android:onClick="clickButton" />
 <ImageButton 
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:src="@drawable/ic_launcher"
 android:onClick="clickImageButton" />
 <Button 
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:drawableLeft="@drawable/ic_launcher"
 android:text="ButtonImage"
 android:onClick="clickBothTextImageButton"/>
</LinearLayout>

• Tạo các giá trị string trong mục res->values->strings. Các giá trị này được gọi trong activity_main.xml với code @string/

<?xml version="1.0" encoding="utf-8"?>
<resources>

 <string name="app_name">ButtonDemo</string>
 <string name="hello_world">Hello world!</string>
 <string name="action_settings">Settings</string>
 <string name="text">This is demo Button</string>
 <string name="button1">Click Button</string>
 <string name="button2">Click Button Image</string>

</resources>

• Chỉnh sử code ở MainActivity.java. Chỉ cần thêm đoạn code sau vào dưới phương thức onOptionItemSelected(MenuItem item)

 public void clickButton(View view) {
       tv1.setText("Button Text was Clicked !");
   }
 public void clickImageButton(View view) {
      tv1.setText("ImageButton was Clicked !");
   }
 public void clickBothTextImageButton(View view) {
      tv1.setText("BothTextImageButton was Clicked !");
   }