Thêm nút vào ứng dụng

Thử cách sử dụng Compose
Jetpack Compose là bộ công cụ giao diện người dùng được đề xuất cho Android. Tìm hiểu cách thêm thành phần trong Compose.

Nút bao gồm văn bản hoặc biểu tượng hoặc cả hai cho biết hành động sẽ xảy ra khi người dùng nhấn vào nút đó.

Bạn có thể tạo nút trong bố cục theo một trong 3 cách, tuỳ thuộc vào việc bạn muốn nút có văn bản, biểu tượng hay cả hai:

  
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:paddingLeft="16dp"
      android:paddingRight="16dp"
      android:orientation="vertical" >
  
      <Button
          android:id="@+id/supabutton"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="I'm a button" />
  
      <ImageButton
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:contentDescription="A tiny Android icon"
          android:src="@drawable/baseline_android_24"
          app:tint="#ff0000" />
  
      <Button
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:drawableStart="@drawable/baseline_android_24"
          android:drawablePadding="4dp"
          android:drawableTint="#ff0000"
          android:text="I'm a button with an icon" />
  </LinearLayout>

Mã trước đó tạo ra nội dung như sau:

Hình ảnh thể hiện 3 loại nút
Hình 1. Ba kiểu nút.

Phản hồi các sự kiện nhấp chuột

Khi người dùng nhấn vào một nút, đối tượng Button sẽ nhận được một sự kiện khi nhấp.

Để khai báo trình xử lý sự kiện theo phương thức lập trình, hãy tạo một đối tượng View.OnClickListener và gán đối tượng đó cho nút bằng cách gọi setOnClickListener(View.OnClickListener), như trong ví dụ sau:

Kotlin

findViewById<Button>(R.id.supabutton)
  .setOnClickListener {
      Log.d("BUTTONS", "User tapped the Supabutton")
  }

Java

Button button = (Button) findViewById(R.id.supabutton);
button.setOnClickListener(new View.OnClickListener() {
    public void onClick(View v) {
      Log.d("BUTTONS", "User tapped the Supabutton");
    }
});

Tạo kiểu cho nút

Hình thức của nút (hình nền và phông chữ) sẽ khác nhau tuỳ theo thiết bị, vì các thiết bị của mỗi nhà sản xuất thường có các kiểu mặc định khác nhau cho các chế độ điều khiển đầu vào.

Để tuỳ chỉnh từng nút với nền khác, hãy chỉ định thuộc tính android:background bằng tài nguyên màu hoặc tài nguyên có thể vẽ. Ngoài ra, bạn có thể áp dụng một kiểu cho nút. Cách này hoạt động tương tự như các kiểu HTML để xác định nhiều thuộc tính kiểu như nền, phông chữ và kích thước. Để biết thêm thông tin về cách áp dụng kiểu, vui lòng xem phần Kiểu và giao diện.

Nút không đường viền

Một thiết kế có thể hữu ích là nút "không đường viền". Các nút không đường viền giống như các nút cơ bản, ngoại trừ việc chúng không có đường viền hoặc nền nhưng vẫn thay đổi giao diện khi có nhiều trạng thái, chẳng hạn như khi được nhấn.

Để tạo nút không đường viền, hãy áp dụng kiểu borderlessButtonStyle cho nút như trong ví dụ sau:

<Button
  android:id="@+id/supabutton"
  style="?android:attr/borderlessButtonStyle"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="I'm a button" />

Nền tuỳ chỉnh

Nếu muốn xác định lại giao diện của nút, bạn có thể chỉ định nền tuỳ chỉnh. Tuy nhiên, thay vì cung cấp một bitmap hoặc màu đơn giản, nền của bạn phải là một tài nguyên danh sách trạng thái thay đổi giao diện tuỳ thuộc vào trạng thái hiện tại của nút.

Bạn có thể xác định danh sách trạng thái trong tệp XML xác định 3 hình ảnh hoặc màu cần sử dụng cho các trạng thái nút khác nhau.

Để tạo danh sách trạng thái có thể vẽ cho nền của nút, hãy làm như sau:

  1. Tạo 3 bitmap cho nền của nút thể hiện các trạng thái nút mặc định, được nhấn và lấy làm tâm điểm. Để đảm bảo rằng hình ảnh của bạn phù hợp với các nút có kích thước khác nhau, hãy tạo các bitmap ở dạng bitmap 9-patch.
  2. Đặt bitmap vào thư mục res/drawable/ của dự án. Đặt tên cho từng bitmap để phản ánh trạng thái nút mà nó biểu thị, chẳng hạn như button_default.9.png, button_pressed.9.pngbutton_focused.9.png.
  3. Tạo tệp XML mới trong thư mục res/drawable/. Đặt tên như button_custom.xml. Chèn XML như sau:
    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@drawable/button_pressed"
              android:state_pressed="true" />
        <item android:drawable="@drawable/button_focused"
              android:state_focused="true" />
        <item android:drawable="@drawable/button_default" />
    </selector>
    

    Thuộc tính này xác định một tài nguyên có thể vẽ duy nhất sẽ thay đổi hình ảnh của tài nguyên đó dựa trên trạng thái hiện tại của nút.

    • <item> đầu tiên xác định bitmap cần sử dụng khi người dùng nhấn vào nút này (được kích hoạt).
    • <item> thứ hai xác định bitmap cần sử dụng khi nút được làm tâm điểm, chẳng hạn như khi nút được làm nổi bật bằng bi xoay hoặc bàn phím di chuyển.
    • <item> thứ ba xác định bitmap cần sử dụng khi nút này ở trạng thái mặc định, cả khi không nhấn lẫn không lấy làm tâm điểm.

    Tệp XML này đại diện cho một tài nguyên có thể vẽ. Khi được Button tham chiếu cho nền, hình ảnh sẽ hiển thị các thay đổi dựa trên trạng thái của nút.

  4. Áp dụng tệp XML có thể vẽ làm nền của nút:
    <Button
        android:id="@+id/button_send"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_send"
        android:onClick="sendMessage"
        android:background="@drawable/button_custom"  />
    

Để biết thêm thông tin về cú pháp XML này, bao gồm cả cách xác định một nút đã bị tắt, bị di chuột hoặc ở một trạng thái khác, hãy đọc nội dung về StateListDrawable.