BÀI 15 - OPTIONS MENU VÀ POPUP MENU TRONG LẬP TRÌNH ANDROID
BÀI 15 - OPTIONS MENU VÀ POPUP MENU TRONG LẬP TRÌNH ANDROID
Embedded Files
Trong lập trình androi, ngoài màn hình chính ra thì nó còn có nhiều dạng màn hình khác nữa. Ví dụ như là các menu hay màn hình hỗ trợ khác. Và trong menu thì cũng có nhiều dạng menu khác nhau.
Menu có sẵn trên màn hình chính thường gặp:
Có dấu 3 chấm: options menu
Có 3 đường gạch ngang:
Menu dưới dạng textView hay Button:
Context menu
Popup menu
Menu xác nhận yes/no: Alert Dialog.
Menu tạo layout nhập dữ liệu như một hình: Dialog Custom.
Trong series hướng dẫn của mình chúng ta sẽ thực hành và tìm hiểu toàn bộ các menu này trong 1 ứng dụng luôn. Bắt đầu nhé!
Đối với tính năng đăng nhập của ứng dụng, điều đầu tiên người dùng cần làm đó là tạo tài khoản mới. Và khi chúng ta code chúng ta cũng sẽ thiết kế giao diện đăng nhập cho người dùng này trước tiên luôn. Phải có dữ liệu thì mới if else được đúng không...
Trong bài giới thiệu này, người dùng chỉ có 1 cách duy nhất để tạo tài khoản. Đó là phải nhập email/số điện thoại, tạo mật khẩu và 1 key (key là giới hạn chỉ cho những người quen biết hoặc khi người dùng mua sản phẩm nào đó sẽ được cung cấp mã đăng nhập, điều này nghĩa là khi người dùng mua bản quyền thì mới được sử dụng ứng dụng của chúng ta).
Mình chỉ hướng dẫn sơ sơ thôi, ứng dụng thực tế sẽ phải kiểm tra xem email người dùng nhập có hợp lệ hay không? mật khẩu phải bao gồm ký tự hay gì? số điện thoại nữa có đúng số thiệt hay không? những điều này có lẽ mình sẽ học và hướng dẫn trong một bài khác.
Ok bắt đầu nhe, có nhiều cách để tạo màn hình tạo tài khoản. Nhưng mình thì thích kiểu mới vô chỉ cần mail/ số điện thoại và mật khẩu là được rồi, còn những thông tin cá nhân khác có thể cập nhật sau. Nếu chúng ta thiết kế luôn một màn hình để người dùng đăng ký tài khoản thì nó sẽ hơi thừa với yêu cầu mới vô đơn giản dễ hiểu thôi. Nên mình sẽ sử dụng Dialog Custom để làm menu cho người dùng tạo tài khoản mới.
Video bài học
Để xài Dialog Custom thì phải chuẩn bị layout trước. Các bạn vào mục res>layout> và tạo mới file layout.xml (có thể thiết kế giống hình dưới).
Sau khi có file layout.xml rồi thì trở về layout mainactivity.xml để tạo một cái nút hoặc một button để khi bấm vào nó sẽ hiển ra Dialog của chúng ta. Ngoài ra, mình còn kết hợp với Popup menu hoặc các menu khác để hiển thị Dialog Custom vẫn được.
Để gọi được Dialog thì các bạn chỉ cần tạo một hàm cho nó là được. Khi được gọi tên hàm này sẽ thực hiện tất cả công việc của Dialog Custom. Đi vào cụ thể hơn he!
private void DialogNewAcount(){
Dialog dialog =new Dialog(this);
//Tắt dòng title của dialog custom
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
//Giữ lại dialog dù có bấm vào màn hình bên ngoài hộp thoại này dialog.setCanceledOnTouchOutside(false);
//Gọi layout.xml thiết kế vào
dialog.setContentView(R.layout.activity_dialog_newacount);
//Giống như Toast nó cần thuộc tính .show(); để hiện thị trên màn hình
dialog.show();
//Ánh xạ
EditText edtInputAcount = (EditText) dialog.findViewById(R.id.textInputAcount);
EditText editInputPass = (EditText) dialog.findViewById(R.id.textInputPass);
EditText edtInputKey = (EditText) dialog.findViewById(R.id.textInputKey);
Button btnCreate = (Button) dialog.findViewById(R.id.buttonCreate);
Button btnCancel = (Button) dialog.findViewById(R.id.buttonCancel);
}}
4 dòng code gần như mặc định của Dialog Custom, trừ dòng tiêu đề (title) thôi. Khi đã khai báo các thuộc tính cho Dialog thì tiếp theo sẽ phải ánh xạ các editText và button hay bất cứ điều gì có trong layout mà bạn thiết kế.
*Ngoài ra bạn cần khai báo thêm 2 biến toàn cục là (email và mật khẩu) để khi người dùng tạo app sẽ lưu lại và chuyển được sang màn hình khác.
String Address, PassWord, Key;
Đây là code java của Dialog Tạo tài khoản.
Key = "abcd";
btnCancel.setOnClickListener(v -> {
dialog.dismiss(); //Button Cancel trong Dialog Custom
});
btnCreate.setOnClickListener(v -> {
if (edtInputKey.getText().toString().trim().equals(Key)) { //So sánh 3 điều kiện
Address = edtInputAcount.getText().toString().trim(); //Đọc các ký tự người dùng nhập vào
PassWord = edtInputPass.getText().toString().trim();
dialog.cancel(); //Tắt Dialog Custom
Toast.makeText(MainActivity.this, getResources().getString(R.string.text_createna_createAcount), Toast.LENGTH_LONG).show();
//Hiển thị thông báo tạo tài khoản thành công
edtAcount.setText(Address); //In thông tin người đăng ký lên ô đăng nhập
edtPassword.setText(PassWord);
}else{
Toast.makeText(MainActivity.this, getResources().getString(R.string.text_createna_InvalidKey), Toast.LENGTH_LONG).show();
//Nếu nhập sai key bảo mật thì hiện thông báo lỗi
}
});
Để dễ hiểu hơn, các bạn có thể xem mẫu như bên dưới:
Ngoài ra, bài tiếp theo mình sẽ chuyển sang hướng dẫn tạo giao diện đăng nhập bằng textInputLayout
Bạn nên xem 3 bài tiếp theo trước khi tham khảo code của mình giới thiệu nhé!
Ứng dụng của mình có giao diện như hình bên:
Nó gồm 1 options menu góc trên bên phải.
1 popup menu ở nút Chưa có tài khoản.
Khi bấm vào các menu này nó sẽ hiện ra các tùy chọn tương ứng.
Mình sẽ hướng dẫn phần options menu trước rồi mới đến popup menu.
Options menu
Options menu
Như ví dụ của mình ở trên options menu mình đánh giá là dễ nhất trong các menu của android. Bình chỉ cần viết code trong java là được. Nó sẽ tự động hiển thị trong mục title của ứng dụng, nếu bạn tắt title này đi (mình có chỉ cách tắt rồi ấy) thì sẽ không sử dụng được options menu đâu nha.
Ngoài việc, bấm vào là thực hiện lệnh được code thì options menu cũng cho phép chúng ta tạo thêm các menu con cho nó. Trong lập trình người ta gọi các menu cha, mẹ là item nên chúng ta cũng sử dụng thuật ngữ này luôn nhé! Trong item chủ đề (theme) mình đã set thêm 3 menu con nữa là sáng, tối và mặc định đó. Mình làm cái này đơn giản thôi chỉ thay đổi background của ứng dụng. Mình sẽ tìm hiểu thêm về code từ hệ thống để nó tự động thay đổi màu chữ cũng như ánh sáng khác cho hợp lý hơn.
Bấm vào item context thì nó hiển thị text cho textView dưới 2 button đăng nhập ấy. Bạn có thể thêm các thông tin như email/số điện thoại.
Item exit thì thông thường bấm vào sẽ tắt ứng dụng luôn. Nhưng mình chỉ code cho nó reset lại ứng dụng và không tắt màn hình đi (nghe thì tưởng xịn ha nhưng thật ra nó chỉ gọi lại tên màn hình hiển thị thôi à). Còn để code cho tắt ứng dụng luôn thì mình sẽ hướng dẫn trong những bài tiếp theo.
Rồi bây giờ thì vào code. Để bật options menu như mình nói:
Không được tắt title option bar của ứng dụng (coi như là để mặc định như khởi tạo luôn ấy).
Trong thư mục resource (res) >> new >> directory (Tạo thư mục tên "menu").
Trong thư mục menu >> new >> Menu resource file (Đặt tên có chữ options cho dễ phân biệt nhé).
Vào code java - gọi thuộc tính onCreateOptionsMenu
Gọi tiếp thuộc tính để code cho item onOptionsItemSelected . Rồi code nữa là xong.
Các menu được thiết kế giao diện như này nè. Bạn phải tạo thư mục menu trong resource thì phần mềm sẽ hiểu bạn muốn khởi tao menu.
Để tạo các item bạn sử dụng thẻ <item /> nhe!
Để tạo menu con bạn sử dụng cặp thẻ <item> <menu> "trong này tạo các item như trên" </menu> </item>
Các item sẽ cần 2 dòng code chính là tạo id và tên hiển thị (title).
orderInCategory sẽ cho phép bạn sắp xếp thứ tự các item.
Ngoài ra bạn có thể thêm icon nữa. Và cũng có thể hiển thị icon theo thuộc tính item trên cái tiêu đề màu dương của ứng dụng luôn. (app:showAsAction="always" - thuộc tính này sẽ cho phép item của bạn hiển thị trên các hàng màu xanh dương đó). Bạn nên thêm icon nếu như muốn làm như vậy nhé, nếu không nó sẽ lấy cái tên bạn đặt cho item để hiển thị đấy, nhìn sẽ xấu hoắc.
Để khởi tạo options menu bạn sử dụng thuộc tính onCreateOptionsMenu >> gọi inflate như bên dưới
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_options, menu);
return super.onCreateOptionsMenu(menu);
}
Các item sẽ hiển thị theo sự kiện click vì vậy bạn sẽ sử dụng lệnh switch case cho các item nhé. Và tất nhiên bạn phải tạo thuộc tính nhấn vào item cái đã onOptionsItemSelected
Ngoài ra, cuối item exit mình có sử dụng lệnh finish() lệnh này nghĩa là kết thúc vòng lặp của menu, nếu trên màn hình bạn đang bật menu nào thì khi tất cả sẽ đều bị tắt và trở lại như lúc bạn vừa ứng dụng.
Như vậy, chúng ta đã code xong Options Menu...
@SuppressLint("NonConstantResourceId")
@Override
public boolean onOptionsItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()){
case R.id.contextLight:
manHinh.setBackgroundColor(Color.WHITE);
break;
case R.id.contextNight:
manHinh.setBackgroundColor(Color.BLACK);
break;
case R.id.contextSystem:
manHinh.setBackgroundColor(R.drawable.background_theme);
break;
case R.id.menuContact:
txtNoiDung.setText(MessageFormat.format("{0}\n{1}\n{2}", getResources().getString(R.string.text_options_Context1), getResources().getString(R.string.text_options_Context2), getResources().getString(R.string.text_options_Context3)));
break;
case R.id.menuExit:
Intent intent = new Intent(MainActivity.this, MainActivity.class);
//Từ màn hình chính, đến màn hình chính
startActivity(intent);
Toast.makeText(this, getResources().getString(R.string.text_options_exit), Toast.LENGTH_SHORT).show();
finish();
return true;
}
return super.onOptionsItemSelected(item);
}
Popup menu
Popup menu
Tương tự như Options menu, Popup menu cũng cần có layout menu để hiển thị và bạn cũng là 4 bước như này nhé:
Chọn thuộc tính để gán vào (button, textView, listView...) - không gán được với các loại menu khác nhé.
Trong thư mục resource (res) >> new >> directory (Tạo thư mục tên "menu").
Trong thư mục menu >> new >> Menu resource file (Đặt tên có chữ options cho dễ phân biệt nhé).
Vào code java - tạo một hàm để chứa layout menu.
Viết như này nè:
private void showPopupMenu(){
PopupMenu popupMenu = new PopupMenu(this, btnNoAcount);
popupMenu.getMenuInflater().inflate(R.menu.menu_popup, popupMenu.getMenu()); //menu_popup là tên layout tự tạo
popupMenu.setOnMenuItemClickListener(item -> {
switch (item.getItemId()){
case R.id.PopupNewAcount: //id trong layout menu tự tạo
code gì đó
break;
case R.id.PopupForgotPassword: //id trong layout menu tự
code gì đó
break;
}
return false;
});
popupMenu.show(); //nhập cái này để hiển thị popup lên nhé
}
Sau khi có được hàm để hiển thị, việc bây giờ là bạn cần có 1 cái button hay một cái gì đó có thể chạm vào mà chức năng giống như một cái nút và viết code bình code thường là: tên nút. setOnClickListener(new On){ showPopupMenu();}
Như vậy là xong!
Ví dụ trên mình tạo một popup menu và nó được gán trong một cái button có tên là "chưa có tài khoản" và popup menu sẽ hiện ra 2 tùy chọn là tạo tài khoản mới và quên mật khẩu như ảnh minh họa ấy.
Page updated
Google Sites
Report abuse