Bài giảng Lập trình di động - Bài 4: Một số loại widget thông dụng và cách kĩ thuật xử lý sự kiện trên widget

Nội dung text: Bài giảng Lập trình di động - Bài 4: Một số loại widget thông dụng và cách kĩ thuật xử lý sự kiện trên widget

1. LẬP TRÌNH DI ĐỘNG Bài 4: một số loại widget thông dụng và cách kĩ thuật xử lý sự kiện trên widget
2. Nhắc lại bài trước ▪Khái niệm: View/Widget/ViewGroup/Layout ▪Layout: ▪ Là ViewGroup, có cách bố trí các view con bên trong riêng biệt, là đặc trưng của từng loại layout ▪ Nạp từ XML hoặc bằng code ▪ LayoutParameters quyết định vị trí đặt view con ▪Các loại layout: ▪ LinearLayout: view con nằm thành hàng dọc hoặc ngang ▪ RelativeLayout: các view con phụ thuộc lẫn nhau ▪ FrameLayout: các view con chồng lên nhau ở vị trí (0,0) 2
3. Nhắc lại bài trước ▪Các loại layout: ▪ ScrollView & HorizontalScrollView: view cha hỗ trợ thêm thanh trượt nếu view con quá lớn ▪ TableLayout: chia màn hình theo lưới ▪Widget: TextView / EditText / Button / ImageButton / TonggleButton / CheckBox / RadioGroup & RadioButton ▪Cách tương tác với view qua findViewById và các phương thức của view 3
4. Nội dung 1. ProgressBar & ProgressDialog ▪ Hiển thị ProgressDialog ▪ Tiến trình chạy ngầm cập nhật dữ liệu lên ProgressBar 2. AutoComplete TextView 3. TimePicker/DatePicker 4. ListView 5. Spinner 6. WebView 7. Vài phương pháp xử lý sự kiện 4
5. Phần 1 ProgressBar & ProgressDialog 5
6. ProgressBar 6
7. ProgressBar ▪ProcessBar cung cấp một thông tin phản hồi trực quan về một tác vụ đang thực thi ▪ VD: thể hiện phần trăm dữ liệu đã xử lý được ▪Mặc định ProcessBar ở chế độ Indeterminate: thể hiện hiệu ứng xoay tròn vô tận ▪ Thích hợp cho những tác vụ không xác định rõ được khi nào nó sẽ hoàn tất 7
8. ProgressBar ▪ Các thuộc tính thường được sử dụng ▪ Thuộc tính max (mặc định 100) giá trị giới hạn toàn progress ▪ Thuộc tính progress giá trị gán trước ▪ Getprogress() lấy giá trị progressBar ▪ Setprogress(int) gán giá trị cho progressBar Giá trị progress Giá trị max (100) 7
9. ProgressBar (ví dụ) Yêu cầu: - mỗi lần click vào nút Chạy (btnRunProgress) thì thanh progress tăng lên (10) - Khi đầy thanh thì trở lại giá trị ban đầu 7
10. ProgressBar (ví dụ) Code xử lý sự kiện click nút Chạy : 7
11. ProgressBar (thảo luận) Tìm hiểu thuộc tính SecondaryProgress() 7
12. SeekBar và RatingBar ▪SeekBar và RatingBar là mở rộng của ProgressBar ▪RatingBar hiển thị giá trị (số thực) bởi các dấu sao ▪SeekBar cho chọn giá trị trực tiếp trên thanh trượt ▪ Muốn xử lý khi giá trị trên thanh SeekBar thay đổi: dùng SeekBar.OnSeekBarChangeListener ▪Một số thuộc tính thường dùng ▪ “android:max”: giá trị tối đa của ProgressBar ▪ “android:progress”: giá trị hiện tại của ProgressBar ▪ “android:minHeight”: chiều cao của ProgressBar ▪ “android:indeterminate”: đặt chế độ vô tận 8
13. SeekBar (ví dụ) Yêu cầu: khi thay đổi giá trị seekbar(skSize) thì textView chứa Example (tvSize) cũng thay đổi độ lớn (size) theo giá trị của seekbar 8
14. SeekBar (ví dụ) Code xử lý cho sự kiện OnSeekBarChangeListener 8
15. RatingBar (ví dụ) Code xử lý cho sự kiện OnRatingChangeListener Các thuộc tính thường dùng 8
16. Hiển thị một ProgressDialog ProgressDialog: cửa sổ hiện thị một ProgressBar, đáp ứng sự kiện hủy bằng nút back 9
17. Hiển thị một ProgressDialog Giải thích thêm: Trong ví dụ trên có sử dụng: - Một luồng (thread) với mục đích tạo một tiến trình chạy ngầm - hàm sleep() tạo độ trễ thời gian để thanh progress chạy chậm lại giúp dễ quan sát. - Đối tượng random sinh số ngẫu nhiên làm cho thời gian trễ có tính nhanh/chậm 9
18. Phần 2 AutoComplete TextView 11
19. AutoComplete TextView 12
20. AutoComplete TextView ▪AutoComplete là một loại view tương tự EditText ▪Có khả năng đưa ra một danh sách các gợi ý tương tự như phần text mà người dùng nhập vào ▪Một số chú ý sử dụng: ▪ Thuộc tính “android:completionThreshold”: số kí tự tối thiểu để bắt đầu hiện các gợi ý (nếu code thì dùng setThreshold) ▪ Dùng setAdapter để thiết lập các string gợi ý cho người nhập liệu (xem ví dụ ở trang sau) 13
21. Phần 3 TimePicker/DatePicker 15
22. TimePicker & TimePickerDialog ▪TimePicker là view (ViewGroup) cho phép người sử dụng chọn thời gian trong một ngày ▪Hàm setCurrentHour(h) và setCurrentMinute(m) để chỉnh thời gian hiển thị ▪Hàm getCurrentHour() và getCurrentMinute() để lấy thời gian do người dùng nhập ▪Không có cách thiết lập thời gian bằng design ▪TimePickerDialog hiển thị dialog cho phép thiết lập một giờ ban đầu và người dùng hiệu chỉnh sau 17
23. TimePicker & TimePickerDialog • Ví dụ: – Có một textView(tvTimePicker) – Khi click vào textView thì xuất hiện TimePickerDialog – Trên TimePickerDialog hiển thị thời gian hiện tại – Chọn xong thời gian trên TimePickerDialog thì tvTimePicker sẽ hiển thị thời gian đã chọn 16
24. TimePicker & TimePickerDialog • Code sự kiện click vào tvTimePicker 16
25. TimePicker & TimePickerDialog • Code hàm ChonThoiGian 16
26. TimePicker & TimePickerDialog • Giải thích thêm: – Đối tượng calendar: lấy thời gian hiện hành – Khởi tạo đối tượng timepickerDialog có 5 tham số: • Ngữ cảnh – (this) • Sự kiện thiết lập thời gian: OnTimeSetListener() – code xử lý trả thời gian được chọn được viết tại đây • Giờ thiết lập cho TimePicker: lấy giá trị giờ hiện tại từ calendar • Phút thiết lập cho TimePicker: giống như giờ • Hiển thị kiểu 24h – Dùng đối tượng simpleDateFormat() để định dạng thời gian hiển thị ra tvTimePicker 16
27. TimePicker & TimePickerDialog 16
28. TimePicker & TimePickerDialog 16
29. DatePicker ▪DatePicker cho phép người dùng chọn ngày ▪Cơ chế hoạt động tương tự TimePicker ▪DatePickerDialog hiển thị dialog nhập ngày 18
30. DatePicker • Ví dụ (giống như TimePickerDialog) • Xem như bài tập (thảo luận) 18
31. DatePicker • Gợi ý: 18
32. Phần 4 ListView 21
33. ListView ListView hiển thị một danh sách các phần tử trên một giao diện cho phép cuộn theo chiều dọc 22
34. ListView: thiết lập nội dung • Mảng dữ liệu kiểu string – mỗi phần tử là một dòng trong listView 23
35. ListView: thiết lập nội dung • Nạp dữ liệu vào listView thông qua Mảng Adapter – khởi tạo đối tượng ArrayAdapter gồm 3 đối số: – Biến context – Biến giao diện – Mảng dữ liệu 23
36. ListView: thiết lập nội dung • Ánh xạ và nạp dữ liệu adapter vào listView 23
37. ListView: sự kiện thông dụng • Sự kiện setOnItemClickListener lvExample.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView parent, View view, int position, long id) { String s = lvExample.getItemAtPosition(position).toString(); Toast.makeText(getApplicationContext(), "Giá trị " + s + " Tại vị trí " + id,Toast.LENGTH_SHORT).show(); } }); • Sự kiện con OnItemClick: chứa tham số position và id trả về giá trị là vị trí của dự liệu khi click vào listView • Phương thức getItemAtPosition() lấy giá trị tại vị trí chọn trên listView 23
38. ListView: sự kiện thông dụng 23
39. Phần 5 SpinnerView 25
40. Spinner View • Spinner View là loại view được dùng để hiển thị một danh mục cho phép người dùng lựa chọn • Spinner tương tự như ComboBox trong C#, tương tự như JComboBox trong Java. • Cách sử dụng cơ bản giống như ListView 26
41. Spinner View: sự kiện thông dụng • Sự kiện setOnItemSelectedListener() với 2 sự kiện con được nạp chồng: – onItemSelected(): có chọn dữ liệu – onNothingSelected(): không chọn 27
42. Spinner View: sự kiện thông dụng • Sự kiện setOnItemSelectedListener() với 2 sự kiện con được nạp chồng: – onItemSelected(): có chọn dữ liệu – onNothingSelected(): không chọn 27
43. Spinner View: sự kiện thông dụng spinnerView.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() { @Override public void onItemSelected(AdapterView parent, View view, int position, long id) { String s = spinnerView.getItemAtPosition(position).toString(); Toast.makeText(getApplicationContext(),s,Toast.LENGTH_ SHORT).show(); } @Override public void onNothingSelected(AdapterView parent) { } }); 27
44. Spinner View: sự kiện thông dụng 27
45. Phần 6 WebView 28
46. WebView ▪Là view hiển thị nội dung HTML, thực hiện mã js và một số loại dữ liệu online ▪Cấp quyền sử dụng Internet trong manifest file Bật hỗ trợ javascript: myWebView.getSettings().setJavaScriptEn abled(true); ▪Cần chú ý một số phím mặc định trong trường hợp WebView được focus (chẳng hạn phím back) 29
47. WebView 30
48. Thảo luận Yêu cầu: - Thiết kế giao diện gồm: - editText: edtAdd - Button: btnGo - Webview - Xử lý: - Khi nhập địa chỉ website – nhấn nút Go, khi đó webView sẽ hiển thị nội dung của website đã nhập 32
49. Phần 7 Vài phương pháp xử lý sự kiện 33
50. Sự kiện trong android ▪Sự kiện được tạo ra để đáp ứng với một hành động do tác động từ bên ngoài, thường là tương tác bởi người dùng ▪Có 4 cách chính để cài đặt sự kiện trong lập trình Android như: ▪ Cài đặt hàm xử lý trong class Activity và khai báo sử dụng ngoài layout ▪ Cài đặt động thông qua các hàm setListener trong class Activity ▪ Implements Listener trong khai báo lớp ▪ Dùng biến lưu trữ 34
51. C1: Onclick in XML TRONG FILE CODE JAVA TRONG FILE LAYOUT XML 35
52. C2: Inline anonymous listener 36
53. C3: Activity is listener 37
54. C4: Listener in variable 38
55. Một số kĩ thuật ít thông dụng hơn ▪Cách 5: Explicit listener class ▪ Viết class độc lập xử lý sự kiện ▪ Class có thể là inner class hoặc hoàn toàn độc lập ▪Cách 6: Anonymous view subclassing layout.addView(new Button(this) { @Override public boolean performClick() { // đoạn mã xử lý nút bấm return false; } }); 39
56. Xử lý sự kiện: thảo luận ▪Trong 6 cách trên bạn thích cách nào nhất? Lý do? ▪Hãy chỉ ra ưu điểm, nhược điểm của các cách ▪Khuyến cáo: ▪ Nên sử dụng cách 1 nếu có thể ▪ Xử lý sự kiện không được quá lâu, nếu hàm xử lý có thể cần quá 500ms để xử lý, hãy chuyển thành background thread hoặc tương đương ▪ Nên tuân theo những tiêu chuẩn về xử lý sự kiện, tránh tạo ra những trải nghiệm khác lạ (người dùng có thể hiểu nhầm thành lỗi của ứng dụng) 40