Ver 1.0 – 2016, FIT - HCMUP

Lab 05: MENU

Tham khảo: developer.android.com/guide/topics/ui/menus.html

1 Tạo menu bằng XML resource

Gõ nội dung menu:

Ths. Lương Trần Hy Hiến, KHOA CNTT – TRƯỜNG ĐH SƯ PHẠM TP. HCM 1

Ver 1.0 – 2016, FIT - HCMUP

Lab 05: MENU

Viết code gọi menu trong MainActivity:

Ths. Lương Trần Hy Hiến, KHOA CNTT – TRƯỜNG ĐH SƯ PHẠM TP. HCM 2

Ver 1.0 – 2016, FIT - HCMUP

Lab 05: MENU

@Override public boolean onCreateOptionsMenu(Menu menu) { return super.onCreateOptionsMenu(menu); } Sửa lại thành:

Xử lý sự kiện click lên Menu Item:

Override phương thức onOptionsItemSelected

@Override public boolean onOptionsItemSelected(MenuItem item) { //dựa theo id menuitem đang chọn switch(item.getItemId()) { case R.id.item_xemdssv: Toast.makeText(MainActivity.this, "Bạn chọn Xem Danh sách Sinh viên", Toast.LENGTH_LONG).show(); break;

Ths. Lương Trần Hy Hiến, KHOA CNTT – TRƯỜNG ĐH SƯ PHẠM TP. HCM 3

Ver 1.0 – 2016, FIT - HCMUP

Lab 05: MENU

//vâng vâng cho những menuitem khác } return super.onOptionsItemSelected(item); }

2 Tạo menu bằng code

Sử dụng code lúc Runtime để tạo Menu thay vì dùng XML Resource.

@Override public boolean onCreateOptionsMenu(Menu menu) { menu.add("Menu 1"); menu.add("Menu 2"); SubMenu submenu3= menu.addSubMenu("Menu 3"); submenu3.add("SubMenu 1.3"); submenu3.add("SubMenu 2.3); submenu3.add("SubMenu 3.3"); return true; }

Với cách làm như trên sẽ gặp khó khăn khi xác định ID của MenuItem.

@Override public boolean onCreateOptionsMenu(Menu menu) { //Đối số 1 là nhóm //Đối số 2 là Id cho Menu Item //Đối số 3 là thứ tự xuất hiện của Menu Item //Đối số 4 là tiêu đề cho Menu Item int itemId = 1000; menu.add(0, itemId, 0, "Thể thao"); itemId = 1001; menu.add(0,itemId, 1, "Tin tức"); SubMenu sub3= menu.addSubMenu(0, itemId, 2, "Danh mục Tin tức"); itemId = 1002; sub3.add(0, itemId, 0,"VNExpress"); itemId = 1003; sub3.add(0, itemId, 1,"ZING"); itemId = 1004; sub3.add(0, itemId, 2,"Tuổi trẻ"); return true; } Và xử lý sự kiện click lên Menu Item:

@Override public boolean onOptionsItemSelected(MenuItem item) {

Ths. Lương Trần Hy Hiến, KHOA CNTT – TRƯỜNG ĐH SƯ PHẠM TP. HCM 4

Ver 1.0 – 2016, FIT - HCMUP

Lab 05: MENU

//dựa theo id menuitem đang chọn switch(item.getItemId()) { case 1004://TuoiTre startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse("http://tuoitre.vn"))); break; //vâng vâng } return super.onOptionsItemSelected(item); }

3 Popup Menu

3.1 Xây dựng Menu Resource

3.2 Thiết kế giao diện

3.3 Source xử lý

btnShowPopUp = (Button)findViewById(R.id.btnShowPopUp); btnShowPopUp.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { PopupMenu popupMenu = new PopupMenu(MainActivity.this,

Ths. Lương Trần Hy Hiến, KHOA CNTT – TRƯỜNG ĐH SƯ PHẠM TP. HCM 5

Ver 1.0 – 2016, FIT - HCMUP

Lab 05: MENU

v); popupMenu.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() { @Override public boolean onMenuItemClick(MenuItem item) { switch (item.getItemId()) { case R.id.item_comedy: Toast.makeText(MainActivity.this, "Comedy Clicked", Toast.LENGTH_SHORT).show(); return true; case R.id.item_movies: Toast.makeText(MainActivity.this, "Movies Clicked", Toast.LENGTH_SHORT).show(); return true; case R.id.item_music: Toast.makeText(MainActivity.this, "Music Clicked", Toast.LENGTH_SHORT).show(); return true; } return false; } }); popupMenu.inflate(R.menu.popup_menu); popupMenu.show(); } });

3.4 Kết quả chạy chương trình

Sau khi click lên button:

Ths. Lương Trần Hy Hiến, KHOA CNTT – TRƯỜNG ĐH SƯ PHẠM TP. HCM 6

Ver 1.0 – 2016, FIT - HCMUP

Lab 05: MENU

4 Menu ngữ cảnh

Xuất hiện khi người dùng nhấp lâu vào đối tượng.

4.1 Mô tả

Ví dụ: Menu ngữ cảnh trên Button, đổi màu nền Button.

4.2 Thiết kế Menu (my_context_menu.xml)

Ths. Lương Trần Hy Hiến, KHOA CNTT – TRƯỜNG ĐH SƯ PHẠM TP. HCM 7

Ver 1.0 – 2016, FIT - HCMUP

Lab 05: MENU

4.3 Định nghĩa một số màu trong strings.xml

4.4 Viết code xử lý

Viết code cho 2 sự kiện CreateContextMenu và ContextItemSelected @Override public void onCreateContextMenu(ContextMenu menu, View v, ContextMenu.ContextMenuInfo menuInfo) { super.onCreateContextMenu(menu, v, menuInfo); getMenuInflater().inflate(R.menu.my_context_menu, menu); } @Override public boolean onContextItemSelected(MenuItem item) { //return super.onContextItemSelected(item); switch(item.getItemId()) { case R.id.itemBlue: btnShowPopUp.setBackgroundColor( getResources().getColor(R.color.clrBlue)); break; case R.id.itemGreen: btnShowPopUp.setBackgroundColor( getResources().getColor(R.color.clrGreen)); break; case R.id.itemMagenta: btnShowPopUp.setBackgroundColor( getResources().getColor(R.color.clrMagenta)); break; case R.id.itemYellow: btnShowPopUp.setBackgroundColor( getResources().getColor(R.color.clrYellow)); break; }

Ths. Lương Trần Hy Hiến, KHOA CNTT – TRƯỜNG ĐH SƯ PHẠM TP. HCM 8

Ver 1.0 – 2016, FIT - HCMUP

Lab 05: MENU

return super.onContextItemSelected(item); } Đồng thời thiết lập control nhận MenuContext. btnShowPopUp = (Button)findViewById(R.id.btnShowPopUp); registerForContextMenu(btnShowPopUp);

5 Bài tập Custom Layout ListView

5.1 Xây dựng lớp SinhVien

public class SinhVien { public boolean isGioiTinh() { return GioiTinh; } @Override public String toString() { return getMaSV() + " : " + getHoTen(); } public void setGioiTinh(boolean gioiTinh) { GioiTinh = gioiTinh; } public String getHoTen() { return HoTen; } public void setHoTen(String hoTen) { HoTen = hoTen; } public String getMaSV() { return MaSV; } public void setMaSV(String maSV) { MaSV = maSV; } private String MaSV; private String HoTen; private boolean GioiTinh; }

Ths. Lương Trần Hy Hiến, KHOA CNTT – TRƯỜNG ĐH SƯ PHẠM TP. HCM 9

Ver 1.0 – 2016, FIT - HCMUP

Lab 05: MENU

5.2 Thiết kế Layout riêng cho một item

5.3 Tạo lớp CustomAdapter kế thừa từ ArrayAdapter

Xâu dựng lớp CustomAdapter kế thừa để quản lý dữ liệu.

Ths. Lương Trần Hy Hiến, KHOA CNTT – TRƯỜNG ĐH SƯ PHẠM TP. HCM 10

Ver 1.0 – 2016, FIT - HCMUP

Lab 05: MENU

public class MyArrayAdapter extends ArrayAdapter { Activity context = null; ArrayList myArray = null; int layoutId; /** * Constructor này dùng để khởi tạo các giá trị * từ MainActivity truyền vào * @param context : là Activity từ Main * @param layoutId: Là layout custom do ta tạo (my_item_layout.xml) * @param arr : Danh sách sinh viên truyền từ MainActivity */ public MyArrayAdapter(Activity context, int layoutId, ArrayListarr) { super(context, layoutId, arr); this.context = context; this.layoutId = layoutId; this.myArray = arr; } /** * hàm dùng để custom layout, ta phải override lại hàm này * từ MainActivity truyền vào * @param position : là vị trí của phần tử trong danh sách nhân viên * @param convertView: convertView, dùng nó để xử lý Item * @param parent : Danh sách sinh viên truyền từ Main * @return View: trả về chính convertView */ public View getView(int position, View convertView, ViewGroup parent) { LayoutInflater inflater = context.getLayoutInflater(); convertView = inflater.inflate(layoutId, null); //chỉ là test thôi, bạn có thể bỏ If đi if(myArray.size() > 0 && position >= 0) { //dòng lệnh lấy TextView ra để hiển thị Mã và tên lên final TextView txtdisplay = (TextView) convertView.findViewById(R.id.txtitem); //lấy sinh viên thứ position final SinhVien emp = myArray.get(position); //đưa thông tin lên TextView //emp.toString() sẽ trả về Id và Name txtdisplay.setText(emp.toString());

Ths. Lương Trần Hy Hiến, KHOA CNTT – TRƯỜNG ĐH SƯ PHẠM TP. HCM 11

Ver 1.0 – 2016, FIT - HCMUP

Lab 05: MENU

//lấy ImageView ra để thiết lập hình ảnh cho đúng final ImageView imgitem = (ImageView)convertView.findViewById(R.id.imgitem); //nếu là Nữ thì lấy hình con gái if(emp.isGioiTinh()) imgitem.setImageResource(R.drawable.icon_female); else//nếu là Nam thì lấy hình con trai imgitem.setImageResource(R.drawable.icon_male ); } //Vì View là Object là dạng tham chiếu đối tượng, nên //mọi sự thay đổi của các object bên trong convertView //thì nó cũng biết sự thay đổi đó return convertView;//trả về View này, tức là trả luôn //về các thông số mới mà ta vừa thay đổi } }

5.4 Xây dựng giao diện hiển thị

Ths. Lương Trần Hy Hiến, KHOA CNTT – TRƯỜNG ĐH SƯ PHẠM TP. HCM 12

Ver 1.0 – 2016, FIT - HCMUP

Lab 05: MENU

5.5 Code xử lý trong OnCreate()

lvSinhVien = (ListView) findViewById(R.id.lvnhanvien); arrSinhVien = new ArrayList(); //Khởi tạo đối tượng adapter và gán Data source adapter=new MyArrayAdapter( this, R.layout.my_item_layout,// lấy custom layout arrSinhVien/*thiết lập data source*/); lvSinhVien.setAdapter(adapter);//gán Adapter vào Lisview btnNhap.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { String ma = editMa.getText() + ""; String ten = editTen.getText() + ""; boolean gioitinh = false;//Nam =false if (genderGroup.getCheckedRadioButtonId() == R.id.radNu) gioitinh = true; //Tạo một employee SinhVien emp = new SinhVien(); emp.setMaSV(ma); emp.setHoTen(ten); emp.setGioiTinh(gioitinh); //Đưa vào danh sách arrSinhVien.add(emp); //gọi hàm cập nhật giao diện adapter.notifyDataSetChanged(); //Sau khi update thì xóa trắng dữ liệu và cho editma focus editMa.setText(""); editTen.setText(""); editMa.requestFocus(); } }); btnRemoveAll.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //ta nên đi ngược danh sách, kiểm tra phần tử nào checked //thì xóa đúng vị trí đó ra khỏi arrEmployee for(int i = lvSinhVien.getChildCount() - 1; i >=0; i--) { //lấy ra dòng thứ i trong ListView //Dòng thứ i sẽ có 3 phần tử: ImageView, TextView, Checkbox v = lvSinhVien.getChildAt(i); //Ta chỉ lấy CheckBox ra kiểm tra

Ths. Lương Trần Hy Hiến, KHOA CNTT – TRƯỜNG ĐH SƯ PHẠM TP. HCM 13

Ver 1.0 – 2016, FIT - HCMUP

Lab 05: MENU

CheckBox chk = (CheckBox) v.findViewById(R.id.chkitem); //Nếu nó Checked thì xóa ra khỏi arrEmployee if(chk.isChecked()) { //xóa phần tử thứ i ra khỏi danh sách arrSinhVien.remove(i); } } adapter.notifyDataSetChanged(); } });

5.6 Kết quả chương trình

Ths. Lương Trần Hy Hiến, KHOA CNTT – TRƯỜNG ĐH SƯ PHẠM TP. HCM 14

Ver 1.0 – 2016, FIT - HCMUP

Lab 05: MENU

Check chọn các sinh viên và bấm nút (X) để xóa.

Ths. Lương Trần Hy Hiến, KHOA CNTT – TRƯỜNG ĐH SƯ PHẠM TP. HCM 15