Tạo và quản lý thực đơn tùy chọn (overflow menus) trong Android

Thực đơn tùy chọn (the oveflow menu)

Thực đơn tùy chọn (thường được gọi là overflow menu hay options menu) là thực đơn cho phép người dùng truy cập từ thiết bị và cho phép các nhà phát triển gộp các ứng dụng tùy chọn khác trong giao diện người dùng của ứng dụng. Ví dụ về thực đơn tùy chọn:

Khi danh sách các tùy chọn trong thực đơn đến một giới hạn so với kích cỡ màn hình hiển thị, các tùy chọn có thể được thu gọn lại như hình sau:

Vị trí của thực đơn tùy chọn tùy thuộc vào phiên bản Android. Từ Android 4.0 trở về sau, vị trí của thực đơn tùy chọn là gốc trên bên phải trên thanh tiêu đề của ứng dụng

Tạo một thực đơn tùy chọn

Để tiện lợi, chúng ta sẽ tạo một ứng dụng Android tên MenuExample, chọn API 14 và tên activity là MenuExampleActivity

Một thực đơn (menu) và các tùy chọn (items hay options) của nó có thể được tạo trong một tập tin XML sử dụng phần tử <menu> và các phần tử con <item>. Ví dụ về việc tạo một thực đơn gồm hai tùy chọn RED và GREEN


<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
   <group android:checkableBehavior="single">
      <item
          android:id="@+id/menu_green"
          android:title="Green"
          android:orderInCategory="1"
          app:showAsAction="ifRoom" />
      <item
          android:id="@+id/menu_red"
          android:title="Red"
          android:orderInCategory="2"
          app:showAsAction="ifRoom" />
   </group>
</menu>

Thuộc tính orderInCategory của phần tử <item> quy định thứ tự từ trái sang phải hay từ trên xuống dưới tùy theo cách hiển thị của các tùy chọn trong thực đơn. Thuộc tính showAsAction quy định cách hiển thị của các tùy chọn. Nếu giá trị của showAsAction là never thì các tùy chọn sẽ được ẩn dấu trong thực đơn trên thanh tiêu đề cho đến khi người dùng tương tác:

Nếu giá trị showAsAction là ifRoom thì các tùy chọn sẽ xuất hiện trên thanh tiêu đề:

Nếu danh sách các tùy chọn vượt quá giới hạn cho phép trên thanh tiêu đề thì các phần tử bên phải nhất (có số thứ tự lớn) sẽ được thu gọn

Để tạo một thực đơn, đầu tiên chúng ta sẽ tạo thư mục menu trong thư mục app >res bằng cách tìm đến thư mục app > res và nhấn chuột phải vào thư mục này chọn New > Android Resouce Directory

Nhập thông tin trong hộp thoại kế tiếp

Bước kế tiếp là tìm đến thư mục menu vừa tạo và nhấn chuột phải vào thư mục này chọn New > Menu resource file

Nhập tên tập tin torng File name và nhấn OK

Kết quả

Mở tập tin menu_example.xml trong chế độ Design

Thêm một Group từ thanh Palette đến thanh tiêu đề của giao diện ứng dụng

Vì chúng ta không thấy được Group nên để biết chúng ta thêm Group thành công không chúng ta quan sát trong cửa sổ Component Tree

Chọn Group trong Component Tree và chuyển sang cửa sổ Attributes của Group thiết lập giá trị Single cho thuộc tính checkableBehavior

Điều này cho phép chỉ một tùy chọn được chọn tại một thời điểm.

Kế tiếp chúng ta thêm một Menu Item từ thanh Palette vào thả trên Group trong cửa sổ Component Tree

Kết quả:

Tại cửa sổ Attributes của Menu Item vừa thêm nhập id là menu_red và title là RED

Tương tự thêm một Menu Item thứ hai đến Group và tại cửa sổ Attributes của Menu Item này nhập id là menu_green và title là GREEN

Lúc này trong Component Tree

Chuyển tập tin menu_example.xml qua chế độ Text và xem mã XML như sau:


<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">

     <group android:checkableBehavior="single" >
        <item
            android:id="@+id/menu_green"
            android:title="GREEN" />
        <item
            android:id="@+id/menu_red"
            android:title="RED" />
     </group>
</menu>

Điều chỉnh đoạn mã trên


<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
    <group android:checkableBehavior="single">
       <item
            android:id="@+id/menu_green"
            android:title="GREEN"
            android:orderInCategory="1"
            app:showAsAction="never" />
      <item
            android:id="@+id/menu_red"
            android:title="RED"
            android:orderInCategory="2"
            app:showAsAction="never" />
    </group>
</menu>

Mở tập tin activity_menu_example.xml trong chế độ Design. Xóa TextView mặc định và đặt ID cho ConstraintLayout là layoutView.

Hiển thị thực đơn tùy chọn

Để hiển thị một thực đơn tùy chọn chúng ta dùng phương thức onCreateOptionsMenu. Với thực đơn chúng ta đã tạo ở trên, để hiển thị thực đơn này chúng ta thực hiện như sau:

Mở tập tin MenuExampleActivity.java và thêm phương thức đến lớp MenuExampleActivity


public class MenuExampleActivity extends AppCompatActivity {

     @Override
     protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_menu_example);
     }
     @Override
     public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_example, menu);
        return true;
     }
}

Kết quả

Nhấn chuột vào biểu tượng ba chấm bên phải của thanh tiêu đề

Vì hai Menu Item được đặt trong Group nên bên phải GREEN và RED có các RadioButton. Nếu chúng ta không dùng Group thì kết quả sẽ như thế này:

Xử lý sự kiện khi các tùy chọn của thực đơn được chọn

Khi một Menu Item được người dùng chọn, sự kiện chọn của người dùng sẽ được xử lý thông qua phương thức onOptionsItemSelected(). Các Menu Item sẽ được nhận diện nhờ phương thức getItemId(). Để xử lý sự kiện chọn cho thực đơn được tạo từ menu_example.xml chúng ta thực hiện như sau:

Mở tập tin MenuExampleActivity.java và thêm phương thức onOptionsItemSelected() đến lớp MenuExampleActivity


@Override
public boolean onOptionsItemSelected(MenuItem item) {

    switch (item.getItemId()) {
         case R.id.menu_red:
           // lệnh thực thi khi chọn RED
           return true;
         case R.id.menu_green:
           // lệnh thực thi khi chọn GREEN
           return true;
         default:
           return super.onOptionsItemSelected(item);
     }
}

Thêm các lệnh thực thi khi chọn RED hay GREEN


@Override
public boolean onOptionsItemSelected(MenuItem item) {
    ConstraintLayout mainLayout =
         (ConstraintLayout) findViewById(R.id.layoutView);
    switch (item.getItemId()) {
        case R.id.menu_red:
            if (item.isChecked()) 
                 item.setChecked(false);
            else 
                 item.setChecked(true);
            mainLayout.setBackgroundColor(android.graphics.Color.RED);
            return true;
       case R.id.menu_green:
            if (item.isChecked()) 
                item.setChecked(false);
            else 
                item.setChecked(true);
            mainLayout.setBackgroundColor(android.graphics.Color.GREEN);
            return true;
       default:
            return super.onOptionsItemSelected(item);
    }
}

Kết quả chọn GREEN

Chọn RED

Kết luận

Trong bài này chúng ta đã tìm hiểu về thực đơn tùy chọn, một trong những thành phần quan trọng trên giao diện người dùng, trong Android. Mã nguồn hoàn chỉnh của các tập tin trong ứng dụng MenuExample có thể xem tại GitHub.

Trần Ngọc Minh Notes

Stay hungry, stay foolish!