Giới thiệu
Chắc hẳn các bạn rất quen thuộc với khái niệm Dialog. Dialog trong Android là một hộp thoại hiển thị dùng để thông báo cho người dùng hoặc cho phép người dùng thực hiện một action nào đó. Vây cách sử dụng Dialog trong Android ra sao thì trong bài viết này và một bài viết sau tôi sẽ giới thiệu cho các bạn cách tất tần tật về cách sử dụng Dialog trong Android.
Dialog trong Android
Để hình dung những Dialog được xây dựng trong bài viết các bạn có thể xem video Demo:
Tất cả các Dialog trong Android đều kế thừa từ lớp abstract Dialog
Lớp này define hai phương thức chính:
- show(): dùng để show Dialog;
- dismiss(): dùng để đóng Dialog
AlertDialog trong Android
Đây là class mà chúng ta sử dụng thường xuyên để xây dựng Dialog. Với AlertDialog chúng ta có thể show
AlertDialog gồm 3 thành phần chính:
Title
Đây là phần tiêu đề của Dialog, phần tiêu đề bạn cũng có thể set icon.
Content
Đây là thành phần quan trọng nhất của Dialog dùng để hiển thị content của Dialog. Các bạn có thể show bất cứ View nào trong này, ví dụ như một message, một listview (single selection, multiple selection), hay một view mà bạn custom.
Action
Thành phần Action của AlertDialog gồm ba button
- NegativeButton
PositiveButton
NeutralButton
Sử dụng AlertDialog trong Android
Để sử dụng Dialog trong Android bạn phải thông qua một AlertDialog.Builder để set các thành phần cho Dialog sau đó sử dụng phương thức create() để trả về đối để trả về đối tượng Dialog.
Nếu các bạn tinh ý thì có thể nhận ra rằng Builder Pattern được sử dụng trong trường hợp này.
Và dưới đây tôi sẽ giới thiệu một số cách sử dụng AlertDialog
Dialog có content là Message
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
AlertDialog dialog = new AlertDialog.Builder(this) .setTitle("This is title") .setMessage("Nguyen Van Nghia") .setNegativeButton("OK", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialogInterface, int i) { Log.e(TAG, "OK"); } }).setPositiveButton("Cancel", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialogInterface, int i) { Log.e(TAG, "Cancle"); } }) .setNeutralButton("Normal", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialogInterface, int i) { Log.e(TAG, "Normal"); } }) .create(); dialog.show(); |
Tôi giải thích một số đoạn mã trên:
Phương thức setTitle dùng để set tiêu đề cho Dialog
Phương thức setMessage dùng để set message cho Dialog hay gọi là content của Dialog.
Ba phương thức setXButton dùng để set Listenner cho ba button đã giới thiệu ở trên với hai đối số là
Đối số thứ nhất: Text hiển thị trên Button
Đối số thứ hai Interface xử lý event khi người dùng click vào Button
Sau khi gọi method show() Dialog ở trên chúng ta sẽ thấy kết quả như dưới đây:
Chúng ta có thể gọi method dismiss để đóng dialog.
Các bạn thấy rõ ba thành phần của Dialog chưa nào.
Khi bạn chạm ngoài dialog thì dialog sẽ dimiss. Nếu bạn không muốn dismiss dialog khi touch ở ngoài dialog thì có thể set như sau:
|
1 |
.setCancelable(false) |
Lưu ý: Bạn không nhất thiết phải set đủ 3 thành phần của AlertDialog.
Dialog có content là custom view
Tôi có một view định nghĩa ở file xml như sau:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/edit_name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:orientation="vertical"> <TextView android:id="@+id/lbl_your_name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="@dimen/activity_horizontal_margin" android:text="Your name" /> <EditText android:id="@+id/txt_your_name" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="@dimen/activity_horizontal_margin" android:imeOptions="actionDone" android:inputType="text" /> </LinearLayout> |
Và tôi sử dụng view này để làm content cho Dialog thông qua phương thức setView như sau:
|
1 2 3 4 5 6 7 8 9 10 11 |
android.support.v7.app.AlertDialog dialogCustom = new android.support.v7.app.AlertDialog.Builder(this) .setTitle("Custom dialog") .setView(R.layout.edit_name_layout) .setNegativeButton("OK", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialogInterface, int i) { } }) .create(); dialogCustom.show(); |
Dialog có content là một ListView
|
1 2 3 4 5 6 7 8 9 10 11 12 |
final ArrayAdapter<String> adapter = new ArrayAdapter<String>(MainActivity.this, android.R.layout.simple_list_item_1, new String[]{"Nguyen Van Nghia", "Nguyen Hoang Minh", "Pham Nguyen Tam Phu", "Tran Van Phuc", "Nguyen Ngoc Tien", "Nguyen Xuan Vien"}); AlertDialog dialogListView = new AlertDialog.Builder(this) .setTitle("Dialog ListView") .setIcon(R.drawable.favicon) .setAdapter(adapter, new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { Log.e(TAG, "onClick: " + adapter.getItem(which)); } }) .create(); dialogListView.show(); |
Dialog có content là ListView Single Selection
Hai kiểu ListView Multiple ListView và Single Selection tôi đã giới thiệu ở bài ListView Multiple Selection Và ListView Single Selection
Để hiển thị Dialog kiểu Single Selection chúng ta viết như sau:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.setTitle("SingleSelect Dialog") .setIcon(R.drawable.favicon) .setSingleChoiceItems(new CharSequence[]{"Nguyen Nghia", "Hoang Minh", "Pham Phu", "Tran Phuc"}, 0, new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialogInterface, int i) { Log.e(TAG, "onClick: " + i); } }) .setNeutralButton("Neutral", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialogInterface, int i) { } }) .create(); singleDialog.show(); |
Dialog có content là ListView Mutiple Selection
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
final android.support.v7.app.AlertDialog multiDialog = new android.support.v7.app.AlertDialog.Builder(this) .setTitle("Multi Dialog") .setIcon(R.drawable.favicon) .setMultiChoiceItems(new CharSequence[]{"Nguyen Nghia", "Hoang Minh", "Pham Phu", "Tran Phuc"}, new boolean[]{false, true, false, false}, new DialogInterface.OnMultiChoiceClickListener() { @Override public void onClick(DialogInterface dialogInterface, int i, boolean b) { } }) .setNeutralButton("Neutral", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialogInterface, int i) { } }) .create(); multiDialog.show(); |
Ngoài ra có một số listener khi chúng ta show hay dismiss dialog như dưới đây:
Khi show Dialog
|
1 2 3 4 5 6 |
dialog.setOnShowListener(new DialogInterface.OnShowListener() { @Override public void onShow(DialogInterface dialog) { } }); |
Khi dialog dismiss
|
1 2 3 4 5 6 |
dialog.setOnDismissListener(new DialogInterface.OnDismissListener() { @Override public void onDismiss(DialogInterface dialog) { } }); |
Khi dialog cancel
|
1 2 3 4 5 6 |
dialog.setOnCancelListener(new DialogInterface.OnCancelListener() { @Override public void onCancel(DialogInterface dialog) { } }); |
Khi chúng ta nhấn phím trên dialog
|
1 2 3 4 5 6 |
dialog.setOnKeyListener(new DialogInterface.OnKeyListener() { @Override public boolean onKey(DialogInterface dialog, int keyCode, KeyEvent event) { return false; } }); |
Ngoài ra còn một số Dialog cũng được sử dụng phổ biến như ProgressDialog, DatePickerDialog, TimePickerDialog nhưng tôi sẽ giới thiệu ở bài viết sau.
Soure code DialogAndroid