[Android Tutorial] Bài 3: Giới thiệu về Button và cách xử lí sự kiện trên Button

Để tiếp nối series bài viết Android, hôm nay mình sẽ giới thiệu với mọi người một view mà rất quan trọng trong Android là Button. Button xuất hiện trong hầu hết các application của Android và mình sẽ nói qua về những thứ cơ bản nhất của nó.

Có 2 cách để thêm Button vào file layout:

  • Kéo thả Button từ thư mục widget và đặt vào trên màn hình

  • Thêm Button từ file xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/activity_main"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:paddingBottom="@dimen/activity_vertical_margin"
  android:paddingLeft="@dimen/activity_horizontal_margin"
  android:paddingRight="@dimen/activity_horizontal_margin"
  android:paddingTop="@dimen/activity_vertical_margin"
  tools:context="com.example.yourself.button.MainActivity">
  <Button
    android:layout_width="100dp"
    android:layout_height="50dp"
    android:id="@+id/button"
    android:text="Button"/>
</RelativeLayout>

Sau khi thêm button vào file xml thì ta chuyển sang file MainActivity.java để có thể gán cho Button những sự kiện.

public class MainActivity extends AppCompatActivity {



Button button;



@Override



protected void onCreate(Bundle savedInstanceState) {



super.onCreate(savedInstanceState);



setContentView(R.layout.activity_main);



button = (Button) findViewById(R.id.button);



button.setOnClickListener(new View.OnClickListener() {



@Override



public void onClick(View v) {



}



});



}



}

Đầu tiên ta khai báo một đối tượng Button (dòng 2), sau đó ta ánh xạ đối tượng button này với Button ở file layout (dòng 8). Có rất nhiều sự kiện mà Button có thể xử lý được, nhưng sự kiện hay dùng nhất là setOnClickListener. Method onClick được override lại sẽ xảy ra khi chúng ta click vào Button nên tất cả những thứ chúng ta muốn nó xảy ra khi button được click sẽ viết bên trong method onClick này.

Ví dụ giờ chúng ta muốn click vào Button thì sẽ có dòng chữ Hello World hiện ra trên màn hình thì chúng ta làm như sau:

  • Đầu tiên là thêm TextView để hiện thị kí tự:
<?xml version="1.0" encoding="utf-8"?>



<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"



xmlns:tools="http://schemas.android.com/tools"



android:id="@+id/activity_main"



android:layout_width="match_parent"



android:layout_height="match_parent"



android:paddingBottom="@dimen/activity_vertical_margin"



android:paddingLeft="@dimen/activity_horizontal_margin"



android:paddingRight="@dimen/activity_horizontal_margin"



android:paddingTop="@dimen/activity_vertical_margin"



tools:context="com.example.yourself.button.MainActivity">



<Button



android:layout_width="100dp"



android:layout_height="50dp"



android:id="@+id/button"



android:text="Button"



android:layout_centerVertical="true"



android:layout_centerHorizontal="true" />



<TextView



android:textSize="30sp"



android:textColor="#111111"



android:layout_width="wrap_content"



android:layout_height="wrap_content"



android:id="@+id/textView"



android:layout_above="@+id/button"



android:layout_centerHorizontal="true"



android:layout_marginBottom="74dp" />



</RelativeLayout>
  • Sau đó trong method onClick ta gán sự kiện setText cho TextView
public class MainActivity extends AppCompatActivity {



Button button;



TextView textView;



@Override



protected void onCreate(Bundle savedInstanceState) {



super.onCreate(savedInstanceState);



setContentView(R.layout.activity_main);



button = (Button) findViewById(R.id.button);



textView = (TextView) findViewById(R.id.textView);



button.setOnClickListener(new View.OnClickListener() {



@Override



public void onClick(View v) {



textView.setText("Hello World!");



}



});



}



}
  • Run app và chạy thử!!!!

Ngoài cách trên ra thì ta có thể xử lí sự kiện setOnClickListener bằng cách khác, đó là implements interfaces class View.OnClickListener

public class MainActivity extends AppCompatActivity implements View.OnClickListener{



Button button;



TextView textView;



@Override



protected void onCreate(Bundle savedInstanceState) {



super.onCreate(savedInstanceState);



setContentView(R.layout.activity_main);



button = (Button) findViewById(R.id.button);



textView = (TextView) findViewById(R.id.textView);



button.setOnClickListener(this);



}



@Override



public void onClick(View v) {



int id = v.getId();



switch (id){



case R.id.button: {



textView.setText("Hello World!");



break;



}



}



}



}

Cách làm thì cũng gần tương tự với cách bên trên, tất cả các hành động xảy ra khi click sẽ được để trong method onClick. Cách này sẽ thuận tiện hơn khi ta có nhiều button cần được xử lí.

Vậy là đã xong sự kiện setOnClickListener, ngoài ra trên button có một số sự kiện khác cũng hay được sử dụng là setOnLongClickListener. Sự kiện này xảy ra khi ra bấm và giữ button một thời gian đủ dài đúng như cái tên của nó (long click). Sự kiện này hay được dùng để hiển thị một hộp thoại tùy chọn (dialog), một đoạn thông báo …… tùy vào mục đích của người lập trình viên.

Cách sử dụng sự kiện này thì cũng khá là giống với setOnClickListener, sau đây là một ví dụ:

public class MainActivity extends AppCompatActivity implements View.OnLongClickListener{



Button button;



TextView textView;



@Override



protected void onCreate(Bundle savedInstanceState) {



super.onCreate(savedInstanceState);



setContentView(R.layout.activity_main);



button = (Button) findViewById(R.id.button);



textView = (TextView) findViewById(R.id.textView);



button.setOnLongClickListener(this);



}



@Override



public boolean onLongClick(View v) {



Toast.makeText(this,"Long Click", Toast.LENGTH_SHORT).show();



return false;



}



}

Khi bấm giữ button thì sẽ có một Toast hiện ra. Khá dễ đúng không nào. Và tiếp đến mình sẽ hướng dẫn một sự kiện khó hơn đó là setOnTouchListener.Sự kiện này xảy ra khi ra chạm vào button

Ở method onTouch có hai tham số phải truyền vào là View và MotionEvent. MotionEvent là một lớp dùng để báo về những sự chuyển động. Một số hằng số của lớp MotionEvent là : ACTIONDOWN (đại diện cho một cử chỉ bắt đầu), ACTIONUP (đại diện cho một cử chỉ kết thúc), ACTIONMOVE (đại diện cho sự xảy ra trong suốt quá trình chạm — xảy ra sau ACTIONDOWN và trước ACTION_UP)….

Sau đây là một ví dụ

public class MainActivity extends AppCompatActivity implements View.OnTouchListener{



Button button;



TextView textView;



@Override



protected void onCreate(Bundle savedInstanceState) {



super.onCreate(savedInstanceState);



setContentView(R.layout.activity_main);



button = (Button) findViewById(R.id.button);



textView = (TextView) findViewById(R.id.textView);



button.setOnTouchListener(this);



}



@Override



public boolean onTouch(View v, MotionEvent event) {



switch (event.getAction()){



case MotionEvent.ACTION_DOWN:{



textView.setText("Gesture start");



break;



}



case MotionEvent.ACTION_MOVE:{



textView.setText("Gesture is happening");



break;



}



case MotionEvent.ACTION_UP:{



textView.setText("Gesture finish");



break;



}



}



return true;



}



}

Sau khi dùng method getAction sẽ trả về id của cử chỉ, và textView sẽ hiển thị text theo từng cử chỉ. Do MotionEvent có rất nhiều cử chỉ nên các bạn tìm hiểu thêm ở đây để sử dụng vào nhiều mục đích sau này : https://developer.android.com/reference/android/view/MotionEvent.html

Ngoài ra Button cũng có rất nhiều thứ hay ho nữa nên bạn có thể tìm hiểu thêm ở đây: https://developer.android.com/reference/android/view/View.html(Do Button là class con của View nên nó cũng có nhiều thuộc tính được kế thừa từ View)

Để các bạn có thể quen với việc sử dụng Button và TextView (bài trước) thì mình có một project nhỏ như sau: “Thiết kế một ứng dụng gồm một số button sau: 1 button làm ẩn chữ trên màn hình, 1 button làm hiện chữ đó lên, và 3 button dùng để đổi màu chữ đó thành 3 màu là đen, đỏ, xanh”

Link source code: https://github.com/h2physics/ButtonExample

Hãy theo dõi fanpage của VTeam để đón xem những bài viết mới nhé ^^

Previous: Project Java web Quizlet G3

Next: Closure trong Swift — Không phải chỉ if, for, while mới được mở block