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

Thử cách 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 →

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

Bạn có thể tạo nút trong bố cục theo một trong ba cách, tuỳ thuộc vào cho dù 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 như sau:

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

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

Để khai báo trình xử lý sự kiện theo cách lập trình, hãy tạo một 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:

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

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 giữa các thiết bị, vì thiết bị của các nhà sản xuất khác nhau thường có các kiểu mặc định khác nhau cho đầ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 một đối tượng có thể vẽ hoặc tài nguyên màu. Ngoài ra, bạn có thể áp dụng một kiểu cho nút. Hoạt động tương tự như 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, xem 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 với 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 ở các trạng thái khác nhau, chẳng hạn như khi nhấn vào.

Để tạo nút không đường viền, hãy áp dụng borderlessButtonStyle tạo kiểu 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 tùy chỉnh

Nếu muốn định nghĩa lại hình thức 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 danh sách trạng thái tài nguyên 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 một tệp XML xác định 3 hình ảnh hoặc màu sắc để 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 đại diện cho giá trị mặc định, được nhấn và lấy làm tâm điểm trạng thái nút. Để đảm bảo hình ảnh của bạn vừa với các nút có kích thước khác nhau, hãy tạo bitmap dưới dạng bitmap 9-patch.
2. Đặt bitmap vào thư mục res/drawable/ của dự án. Đặt tên cho mỗi bitmap để phản ánh trạng thái nút mà nó đại diện, chẳng hạn như button_default.9.png, button_pressed.9.png và button_focused.9.png.
3. Tạo một tệp XML mới trong thư mục res/drawable/. Đặt tên như sau 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>
   

   Thao tác 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 nhấn nút này (đã kích hoạt).
   • <item> thứ hai xác định bitmap cần sử dụng khi nút này được lấy làm tâm điểm, chẳng hạn như chẳng hạn như khi nút này đượ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 ở chế độ mặc định trạng thái, không được nhấn vào cũng không được đặt làm tâm điểm.

   Tệp XML này đại diện cho một tài nguyên có thể vẽ duy nhất. Khi được Button tham chiếu cho hình ảnh hiển thị sẽ thay đổi theo 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 nút bị vô hiệu hoá, đã di chuột hoặc ở trạng thái khác, đọc về StateListDrawable.