Bài giảng Android nâng cao: Bài 2 Custom Viewcung cấp cho người học những kiến thức như: Kiến trúc chung của View; Hiểu đúng về custom view; Các mức độ custom view; Ví dụ custom view mức 2: ProgressBar; Ví dụ custom view mức 3: Spinner; Ví dụ custom view mức 4: ClockView. Mời các bạn cùng tham khảo!
MobiPro ANDROID NÂNG CAO BÀI 2: Custom View MobiPro Nội dung Kiến trúc chung View Hiểu custom view Các mức độ custom view – – – – Mức 1: tinh chỉnh chi tiết Mức 2: viết lại phần Mức 3: viết lại phần lớn (giữ lại hành vi) Mức 4: viết lại toàn Ví dụ custom view mức 2: ProgressBar Ví dụ custom view mức 3: Spinner Ví dụ custom view mức 4: ClockView TRƯƠNG XUÂN NAM MobiPro Phần Kiến trúc chung view TRƯƠNG XUÂN NAM MobiPro Kiến trúc chung View Thiết kế View Android biến thể cấu trúc MVC – Model: liệu cần thể – View: phần hình giao diện người dùng – Controller: business logic ứng dụng Ví dụ MVC với ListView – Model: mảng object (String) – View: mảng view, view hiển thị object – Controller: xử lý kiện người dùng scroll ListView, click vào view con,… TRƯƠNG XUÂN NAM MobiPro Kiến trúc chung View View Model (data) Controller TRƯƠNG XUÂN NAM MobiPro Kiến trúc chung View Tại lựa chọn MVC cho thiết kế giao diện? – Giao diện thực chất gồm phần riêng biệt: liệu, minh họa tương tác – Với loại liệu, có nhiều cách minh họa khác dẫn đến nhiều kiểu tương tác khác • Bảng chấm công với chi tiết ngày làm việc người • Bảng chấm cơng liệt kê số ngày làm việc người Kiến trúc MVC giúp lập trình viên thay phần class thay phải viết lại tồn Thiết kế quán giúp LTV nhanh chóng nắm vững việc sử dụng thành phần UI tương tự TRƯƠNG XUÂN NAM MobiPro Phần Hiểu custom view TRƯƠNG XUÂN NAM MobiPro Hiểu custom view Custom view hoạt động bắt buộc xây dựng giao diện, hoạt động đặc biệt Có nhiều mức độ custom view khác nhau: Tinh chỉnh view có: màu, lề, nền,… Tinh chỉnh phần view: ListView, Spinner cho phép ta thay đổi phần view Viết lại phần lớn view Viết lại hoàn toàn view, tạo loại kiện trải nghiệm riêng người dùng Không nên lạm dụng custom view: với vấn đề, sử dụng cấp độ thấp tốt TRƯƠNG XUÂN NAM MobiPro Hiểu custom view Thay đổi thành phần MVC tác động đến view? – Thay đổi model: tùy theo yêu cầu toán – Thay đổi view: thay đổi hình dạng view – Thay đổi controller: thay đổi tương tác view (thay đổi trải nghiệm người dùng) Như vậy: – Muốn thể liệu riêng: đổi Model + View – Muốn tạo view có hình ảnh mới: đổi View – Muốn có đặc biệt tương tác: đổi Controller TRƯƠNG XUÂN NAM MobiPro Phần Các mức độ custom view TRƯƠNG XUÂN NAM 10 MobiPro Custom view mức 2: ProgressBar Thiết lập thuộc tính phù hợp cho ProgressBar minh họa // ProgressBar dạng ngang // ProgressBar dạng xoay tròn Viết mã minh họa hoạt động ProgressBar TRƯƠNG XUÂN NAM 21 MobiPro Custom view mức 2: ProgressBar Giải thích hoạt động: – Trong trường hợp thứ nhất: ta định mẫu tô, mẫu cho background mẫu cho progress, mẫu đặt vào layer-list truyền cho ProgressBar – Trong trường hợp thứ hai: ta định mẫu tô cho ProgressBar TRƯƠNG XUÂN NAM 22 MobiPro Phần Ví dụ custom view mức 3: Spinner TRƯƠNG XUÂN NAM 23 MobiPro Custom view mức 3: Spinner Bài toán: hiển thị danh sách quốc gia Spinner gồm có tên cờ quốc gia Bước 1: chuẩn bị liệu (image cờ quốc gia) Bước 2: chuẩn bị cách bố cục liệu dòng – Thiết kế layout cho dòng spinner – Nếu thích thiết kế nhiều phương án Bước 3: viết class Adapter phù hợp (đây yêu cầu tối thiểu, thực tế cần viết 3-4 class viết mã đạt chuẩn chuyên nghiệp) TRƯƠNG XUÂN NAM 24 MobiPro Custom view mức 3: Spinner class MyAdapter extends ArrayAdapter { // hàm cung cấp view dòng spinner public View getView(int pos, View view, ViewGroup parent) { LayoutInflater inflater = getLayoutInflater(); View v = inflater.inflate(layout, parent, false); TextView t = (TextView) v.findViewById(R.id.textView1); t.setText(name[pos]); ImageView iv = (ImageView) v.findViewById(R.id.image1); iv.setImageResource(icon[pos]); return v; } TRƯƠNG XUÂN NAM 25 MobiPro Custom view mức 3: Spinner public View getDropDownView(int p, View v, ViewGroup g) { return getView(p, v, g); } int layout; String[] name; int[] icon; // constructor: layout l, danh sách tên n, danh sách icon i public MyAdapter(Context c, int l, String[] n, int[] i) { super(c, l, n); layout = l; name = n; icon = i; } } TRƯƠNG XUÂN NAM 26 MobiPro Custom view mức 3: Spinner Giải thích: – Ở level 3, viết lại Model View, viết chuẩn mực lý nên tách thành class độc lập, class Model class View – Để đơn giản hóa, ghép class thành class MyAdapter, MyAdapter có chứa Model thân View – Đối với số thiết kế có tính triết lý cao: • Tách thành class: class View, class Data dòng class Model (data tất dịng) • Tách thành class: View, Model, RowData, DataBuilder • Quy luật đánh đổi: dễ viết – khó dùng, khó viết – dễ dùng TRƯƠNG XUÂN NAM 27 MobiPro Các tùy biến level thông dụng Tùy biến cho ListView: đơn giản Spinner, cần viết lại “public View getView(int position, View convertView, ViewGroup parent)” đủ Tùy biến cho ExpandableListView: phức tạp, cần tìm hiểu kĩ, phương thức cần viết lại – public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parentView) – public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parentView) – Một số phương thức model: getChild, getChildID,… TRƯƠNG XUÂN NAM 28 MobiPro Các tùy biến level thông dụng Tùy biến GridView: đơn giản, ListView (viết lại getView) – Chú ý GridView sử dụng cực nhiều ứng dụng đại, cần tìm hiểu kĩ Tùy biến Gallery: đơn giản, tương tự ListView Tùy biến StackView: tương tự ListView Chú ý: Trong tất ví dụ trên, tập trung vào View, số vấn đề cần tìm hiểu thêm – Xử lý thêm/bớt/thay đổi liệu – Xử lý action từ phía người dùng (tùy thuộc nhiều vào loại view) TRƯƠNG XUÂN NAM 29 MobiPro Phần Ví dụ custom view mức 4: ClockView TRƯƠNG XUÂN NAM 30 MobiPro Custom view mức 4: ClockView Bài toán: viết view thể đồng hồ thời gian Lựa chọn: để đơn giản hóa toán nhất, viết lại TextView, sử dụng text để hiển thị Thiết kế trạng thái API – – – – Trạng thái ban đầu không hoạt động void setClock(hour, minute, second) để định void stop() để dừng void start() để bắt đầu chạy Lời giải thật cần nâng cấp bạn muốn sử dụng widget tiêu chuẩn TRƯƠNG XUÂN NAM 31 MobiPro Custom view mức 4: ClockView public class MyClock extends TextView { public MyClock(Context context, AttributeSet attrs) { super(context, attrs); } int hour, minute, second; public void setClock(int h, int m, int s) { hour = h; minute = m; second = s; String str = "" + h + ":" + m + ":" + s; setText(str); } Handler myHandler = new Handler(); TRƯƠNG XUÂN NAM 32 MobiPro Custom view mức 4: ClockView public void start() { stop(); th = new Thread(new Runnable() { public void run() { while (true) { try { Thread.sleep(1000); addSecond(); } catch (Exception ex) {} } } }); th.start(); } TRƯƠNG XUÂN NAM 33 MobiPro Custom view mức 4: ClockView void addSecond() { second++; if (second >= 60) { second = 0; minute++; } if (minute >= 60) { minute = 0; hour++; } myHandler.post(new Runnable() { public void run() { setClock(hour, minute, second); } }); } Thread th = null; @SuppressWarnings("deprecation") public void stop() { if (th != null) th.stop(); } } TRƯƠNG XUÂN NAM 34 MobiPro Custom view mức 4: ClockView Sử dụng custom view app – Custom view hiển thị “Custom & Library Views” giao diện thiết kế layout – Kéo thả thành phần thông thường – Eclipse phát thuộc tính View cha, cửa sổ Properties hiển thị thuộc tính – Có thể dùng XML để thiết lập thuộc tính khác mà Eclipse không nhận biết (phức tạp) – Trường hợp custom view inner class, phải định tên class tag class view cha