Bài 6: Listview menu

Microsoft PowerPoint Bai 6 ListView Menu pptx 21092021 21092021 21092021 LISTVIEW MENU 1 NỘI DUNG 1 ListView Menu 2 2 LISTVIEW 2017 3 Giới thiệu ListView ListView và Adapter Tạo ListView tùy b. Giới thiệu ListView ListView và Adapter Tạo ListView tùy biến

21/09/2021 LISTVIEW & MENU NỘI DUNG ListView N g u y ễ n C h í H i ế u 21/09/2021 Menu 2 Giới thiệu ListView ListView Adapter LISTVIEW Tạo ListView tùy biến 2017 N g u y ễ n C h í H i ế u 21/09/2021 GIỚI THIỆU LISTVIEW ListView • Là View hiển thị danh sách gồm nhiều • phần tử/dịng (hỗ trợ cuộn) Dữ liệu danh sách khai báo • tĩnh hay động (đọc từ tập tin, sở liệu, Internet) 4 HIỂN THỊ LISTVIEW VỚI DỮ LIỆU TĨNH • Dữ liệu tĩnh • Dữ liệu khởi tạo trước chạy ứng dụng • Các phần tử danh sách khai báo res/values/strings.xml • Trong tập tin thiết kế giao diện, thêm thuộc tính android:entries="@array/ _": nạp liệu tĩnh cho ListView 2017 N g u y ễ n C h í H i ế u 21/09/2021 HIỂN THỊ LISTVIEW VỚI DỮ LIỆU TĨNH • Dữ liệu tĩnh 01/01/2000 Day 1 05/01/2000 Day 2 10/01/2000 Day 3 6 HIỂN THỊ LISTVIEW VỚI DỮ LIỆU TĨNH • Ví dụ 1: Tạo ứng dụng Diary • Thêm vào Activity đặt tên EntryListActivity • Trong activity_entry_list.xml, thêm ListView với thuộc tính sau: 2017 7 N g u y ễ n C h í H i ế u 21/09/2021 HIỂN THỊ LISTVIEW VỚI DỮ LIỆU ĐỘNG • Dữ liệu động • Dữ liệu đọc hay sinh chạy ứng dụng cài đặt tập tin *.java • Dữ liệu đọc từ: tập tin, sở liệu SQLite, Web services, … 8 • Trong EntryListActivity.java HIỂN THỊ LISTVIEW VỚI DỮ LIỆU ĐỘNG N g u y ễ n C h í H i ế u 21/09/2021 L I S TV I E W & AD AP T E R 10 LISTVIEW VÀ ADAPTER • Adapter • Là cầu nối Data Source Adapter View (ListView, Spinner, ) • Adapter lớp đối tượng tạo quản lý dòng ListView 11 N g u y ễ n C h í H i ế u 21/09/2021 LISTVIEW VÀ ADAPTER • Adapter Row Data Source Adapter Row Row Row ArrayList ListView 12 LISTVIEW VÀ ADAPTER • ArrayAdapter • ArrayAdapter tạo view cách gọi phương thức toString() đối tượng danh sách hiển thị lên TextView • Phương thức khởi tạo: ArrayAdapter(Context context, int resource, List objects) • Trong đó, resource layout Android cung cấp sẵn (link): • simple_list_item_1, • simple_list_item_2, … 2017 13 N g u y ễ n C h í H i ế u 13 21/09/2021 LISTVIEW VÀ ADAPTER • Bước Tạo biến chứa liệu cần hiển thị • Bước Tạo biến thuộc lớp ArrayAdapter khởi tạo với tham số gồm: • Context Activity • Kiểu layout (Android cung cấp sẵn/tự thiết kế) • Dữ liệu • Bước Gọi phương thức setAdapter() gán liệu cho ListView 14 14 • Trong EntryListActivity java, thêm phương thức loadEntries() nạp liệu LISTVIEW VÀ ADAPTER N g u y ễ n C h í H i ế u 21/09/2021 15 LISTVIEW VÀ ADAPTER • setOnItemClickListener(AdapterView.OnItemClickListener) : nhấn phần tử ListView • setOnItemLongClickListener(AdapterView.OnItemLongClic kListener): nhấn giữ phần tử ListView • setOnItemSelectedListener(AdapterView.OnItemSelectedLis tener): chọn phần tử ListView • … 16 16 • Xử lý kiện ListView • Trong EntryListActivity.java, thêm vào kiện setOnItemClickListener() cho ListView N g u y ễ n C h í H i ế u 21/09/2021 LISTVIEW VÀ ADAPTER 7 17 TẠO LISTVIEW TÙY BIẾN • ArrayAdapter mặc định sinh liệu dạng chuỗi tương ứng dịng ListView • Mỗi dịng ListView cho phép kết hợp từ view lại với nhằm tạo ListView phù hợp yêu cầu ứng dụng 18 18 TẠO LISTVIEW TÙY BIẾN • Ví dụ Thiết kế giao diện ứng dụng hình bên Mỗi phần tử/dòng ListView gồm TextView: N g u y ễ n C h í H i ế u 21/09/2021 int resource, List objects) { super(context, resource, objects); mResourceId = resource; } } 2017 23 TẠO LISTVIEW TÙY BIẾN • Phương thức khởi tạo EntryAdapter(_, _, _) • context • resource: id layout • object: data source 24 24 TẠO LISTVIEW TÙY BIẾN • Phương thức khởi tạo EntryAdapter(_, _, _) public class EntryAdapter extends ArrayAdapter { N g u y ễ n C h í H i ế u 23 21/09/2021 private final int mResourceId; public EntryAdapter(Context context, int resource, List objects) { super(context, resource, objects); mResourceId = resource; } } 2017 25 • Bước Override phương thức getView() @Override public View getView(int position, View convertView, ViewGroup parent) { View row = convertView; EntryModel entry = getItem(position); if (row == null) { row = LayoutInflater.from(getContext()) inflate(mResourceId, parent, false); } TextView textDate = (TextView) row.findViewById(R.id.textDate); textDate.setText(entry.getDate()); //… return row; } 26 26 N g u y ễ n C h í H i ế u 21/09/2021 • Bước Trong EntryListActivity.java, viết lại phương thức loadEntries() private void loadEntries() { ArrayList entries = new ArrayList(); EntryModel entry = null; entry = new EntryModel("01/01/2000", "Day 1"); entries.add(entry); // if (entries != null) { EntryAdapter adapter = new EntryAdapter( getApplicationContext(), R.layout.entry_list_content, entries); listEntry.setAdapter(adapter); } } 2017 27 XỬ LÝ SỰ KIỆN CỦA LISTVIEW • Trong EntryListActivity.java, thay đổi mã nguồn kiện setOnItemClickListener() listEntry.setOnItemClickListener(new AdapterView OnItemClickListener() { @Override public void onItemClick(AdapterView adapterView, View view, int position, long id) { EntryModel entry = (EntryModel) listEntry getItemAtPosition(position); Toast.makeText(getApplicationContext(),entry.getDate(), Toast.LENGTH_SHORT).show(); } }); 28 28 N g u y ễ n C h í H i ế u 21/09/2021 MENU • Giới thiệu Menu • Options Menu • Context Menu • Popup Menu 2017 29 GIỚI THIỆU MENU • Menu • Là thành phần quan trọng thiết kế giao diện ứng dụng • Hiển thị số thao tác chuyển hướng hay xử lý Activity hay View ứng dụng 30 30 N g u y ễ n C h í H i ế u 21/09/2021 GIỚI THIỆU MENU • Phân loại • Options Menu • Context Menu • Popup Menu 2017 31 GIỚI THIỆU MENU • Thêm menu cho ứng dụng res/menu • Thêm menu từ *.xml hay *.java • Thêm ảnh cho menu (nếu cần) • Các thành phần menu • menu • item • group 32 32 N g u y ễ n C h í H i ế u 21/09/2021 OPTIONS MENU • Tập hợp menu Activity • Giúp thực nhanh số thao tác: tìm kiếm, chia sẻ, cài đặt hệ thống, … • Override phương thức onCreateOptionsMenu() để them vào Activity 2017 33 OPTIONS MENU • Bước Thêm menu mới: new\Android resource file\chọn menu đặt tên • Bước Thiết kế giao diện menu res\menu • Bước Override phương thức onCreateOptionsMenu() • Bước Xử lý kiện chọn menu onOptionsItemSelected() 34 34 N g u y ễ n C h í H i ế u 33 21/09/2021 OPTIONS MENU • Bước Thêm menu mới: new\Android resource file\chọn menu đặt tên 2017 35 N g u y ễ n C h í H i ế u 35 21/09/2021 OPTIONS MENU • Bước < menu Thiết kế giao diện menu xmlns:android="http://schemas.android.com /apk/res/android"> item android:id="@+id/menuAdd" android:title="add"/> < < / menu> 36 OPTIONS MENU • Bước Override phương thức onCreateOptionsMenu() @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.menu_options, menu); return super.onCreateOptionsMenu(menu); } 2017 37 N g u y ễ n C h í H i ế u 21/09/2021 OPTIONS MENU • Bước Xử lý kiện chọn menu onOptionsItemSelected() @Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case R.id.menuAdd: Toast.makeText(getApplicationContext(), "add", Toast.LENGTH_SHORT).show(); return true; default: return super.onOptionsItemSelected(item); } } 38 38 CONTEXT MENU • Menu ngữ cảnh tương ứng với view Activity • Trong onCreate(), phải đăng ký context menu cho view xác định: registerForContextMenu(_) • Các thao tác thêm, xử lý kiện tương tự Options Menu 2017 39 39 N g u y ễ n C h í H i ế u 21/09/2021 CONTEXT MENU • Bước 1, Tương tự Context Menu • Bước Trong onCreate(), đăng ký Context Menu cho ListView registerForContextMenu(listEntry); 40 40 CONTEXT MENU • Bước Override phương thức onCreateContextMenu() @Override public void onCreateContextMenu(ContextMenu menu, View v, ContextMenu.ContextMenuInfo menuInfo) { super.onCreateContextMenu(menu, v, menuInfo); if (v.getId() == R.id.listEntry) { getMenuInflater().inflate(R.menu.menu_context, menu); } } 2017 41 N g u y ễ n C h í H i ế u 21/09/2021 CONTEXT MENU • Bước Xử lý kiện onContextItemSelected() @Override public boolean onContextItemSelected(MenuItem item) { AdapterView.AdapterContextMenuInfo info = (AdapterView.AdapterContextMenuInfo) item.getMenuInfo(); EntryModel entry = (EntryModel) listEntry getItemAtPosition(info.position); switch (item.getItemId()) { case R.id.menuEdit: //… Toast.makeText() return true; // default: return super.onContextItemSelected(item); } } 42 42 POPUP MENU • Có thể tạo hiển thị Popup Menu cho kiện view • Hiển thị bên view • Popup Menu thuộc thư viện widget import android.widget.PopupMenu; 2017 43 N g u y ễ n C h í H i ế u 21/09/2021 POPUP MENU Bước 1, • < Tương tự Options Menu menu xmlns:android="http://schemas.android com/apk/res/android" > item android:id="@+id/menuDateFilter" android:title="date"/> item android:id="@+id/menuContentFilter" android:title="content"/> < < < / menu> 4 44 POPUP MENU • Bước Trong onCreate(), đăng ký Popup Menu cho Button buttonFilter.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { PopupMenu popupMenu = new PopupMenu( getApplicationContext(), view); popupMenu.getMenuInflater() inflate(R.menu.menu_popup, popupMenu.getMenu()); popupMenu.show(); } }); 2017 45 N g u y ễ n C h í H i ế u 21/09/2021 POPUP MENU • Bước Xử lý kiện onMenuItemClick() @Override public boolean onMenuItemClick(MenuItem item) { switch (item.getItemId()) { case R.id.menuDateFilter: Toast.makeText(getApplicationContext(), "date", Toast.LENGTH_SHORT).show(); return true; // } return false; } 46 46 N g u y ễ n C h í H i ế u 21/09/2021 21/09/2021 BÀI TẬP • Thiết kế giao diện cài đặt ứng dụng sau: • Hiển thị danh sách mục nhật ký tương tự ví dụ lớp • Hiển thị danh sách sinh viên chứa: ảnh đại diện, MSSV, họ tên, ngày sinh 2017 47 47 ... onCreateContextMenu(ContextMenu menu, View v, ContextMenu.ContextMenuInfo menuInfo) { super.onCreateContextMenu (menu, v, menuInfo); if (v.getId() == R.id.listEntry) { getMenuInflater().inflate(R .menu. menu_context,... thức onCreateOptionsMenu() @Override public boolean onCreateOptionsMenu (Menu menu) { getMenuInflater().inflate(R .menu. menu_options, menu) ; return super.onCreateOptionsMenu (menu) ; } 2017 37 N g... 21/09/2021 GIỚI THIỆU MENU • Phân loại • Options Menu • Context Menu • Popup Menu 2017 31 GIỚI THIỆU MENU • Thêm menu cho ứng dụng res /menu • Thêm menu từ *.xml hay *.java • Thêm ảnh cho menu (nếu cần)