THIẾT KẾ GIAO DIỆN TRÊN ANDROID Bài 2: Tổng quan về UI (tiếp)

THIẾT KẾ GIAO DIỆN TRÊN ANDROID Bài 2: Tổng quan UI (tiếp) Nội dung học Các Layout (tiếp) • Table layout • Relative Layout • Absolute Layout • ScrollView Layout Style and Themes 2 Các layout  TableLayout  Cho phép control theo dạng lưới (dòng cột)  Các cột thu nhỏ dãn rộng tùy thuộc vào nội dung chứa  TableLayout làm việc với TableRow  TableLayout xem dòng có số lượng control nhiều để xác định có cột (lấy dòng có số lượng control nhiều làm số cột chuẩn) Các layout  TableLayout (tiếp)  Dùng layout_span để trộn cột: thẻ EditText trộn cột hàng đầu hình Các layout  TableLayout (tiếp) Các layout  RelativeLayout (tiếp)  RelativeLayout cho phép xếp control theo vị trí tương đối control khác giao diện (kể control chứa nó)  Thường ta dựa vào Id control khác để xếp theo vị trí tương đối  Do làm RelativeLayout phải ý đặt Id control cho chuẩn xác, sau Layout xong mà lại đổi Id control giao diện bị xáo trộn (do đổi ID phải đổi ln tham chiếu khác cho khớp với Id đổi) Các layout  RelativeLayout (tiếp) Ví dụ cho thấy  A đứng đầu ,  C bên A phía bên phải,  B bên A bên trái C Các layout  RelativeLayout (tiếp) Một số thuộc tính xếp widget với layout chứa nó:  android:layout_alignParentTop: widget phải đặt đầu layout mà nằm  android:layout_alignParentBottom đặt  android:layout_alignParentLeft đặt bên trái  android:layout_alignParentRight : đặt bên phải  android:layout_centerInParent : đặt trung tâm  android:layout_centerHorizontal: đặt trung tâm theo chiều ngang  android:layout_centerVertical: đặt trung tâm theo chiều dọc Các layout  RelativeLayout (tiếp) Một số thuộc tính xếp widget với widget control khác:  android:layout_above widget phải đặt widget tham chiếu  android:layout_below widget phải đặt widget tham chiếu  android:layout_toLeftOf widget phải đặt bên trái widget tham chiếu  android:layout_toRightOf widget phải đặt bên phải widget tham chiếu Các layout  ScrollView Layout Các layout  Demo  AbsoluteLayout ScrollViewLayout Style Devices Displays  Android tảng hệ điều hành sử dụng nhiều thiết bị lớn nhỏ khác như: tablet, phone  Khi thiết kế cần phải đảm bảo flexible (linh hoạt): dãn nén layout tùy theo độ rộng cao hình, xu hướng thiết kế multi-pane layout (layout đáp ứng cho nhiều kiểu giao diện) Style Color  Chọn màu sắc phù hợp với ứng dụng tăng hiệu sử dụng Chú ý thiết kế người mù màu thường không phân biệt màu đỏ xanh Palettle  Mỗi màu có dải màu từ tối đến sáng cho người thiết kế lựa chọn Style Metrics Grids  Các thiết bị khác không khác kích thước vật lý mà mật độ hình(DPI) Thơng thường thiết kế, ứng dụng phải đáp ứng cho nhiều kiểu hình khác Vì để linh hoạt cần hướng tới thiết kế control với kích thước phù hợp cho nhiều hình  Sử dụng kích thước 48dp (khoảng 9mm): phù hợp với thao tác chạm vào hình đối tượng  Khoảng cách control nên 8dp Style Metrics Grids  Một ví dụ thiết kế bố trí hình: Style & Theme Thiết kế Style  Android cung cấp theme Holo Light Holo Dark để lựa chọn xây dựng ứng dụng  Một style attribute/value khai báo sẵn để apply vào look & feel (một nói khác GUI) view  Style kế thừa cách thêm thuộc tính parent = “@android: style/…”  Thêm thuộc tính style vào view để apply  Để thực style theme, tạo tệp XML thư mục /res/values/ project Ví dụ tệp xác định style sau: style.xml Style & Theme fill_parent wrap_content #00FF00 monospace Để gán thuộc tính style cho phần tử ví dụ với dòng text thực khai báo: style=“@style/CodeFont” Tương đương với đoạn code sau Style & Theme Theme  Theme style mà apply cho tồn activity chí tồn application  Thêm thuộc tính andoid:theme vào activity manifest  Khi style apply thành theme tồn thuộc tính khai báo style ghi đè giá trị mặc định view Activity Style & Theme Theme  Bạn thuộc tính theme qua câu lệnh :?android:attr Câu lệnh có nghĩa tham chiếu tới thuộc tính style theme  Ví dụ ?android:attr/listPreferredItemHeight nghĩa là: sử dụng giá trị xác định thuộc tính gọi listPreferredItemHeight theme Style & Theme Fonts  Để thêm font vào ứng dụng android, thực bước sau:  Tạo thư mục /fonts/ thư mục /assets  Copy fonts cần dùng vào /fonts/  Sử dụng code Java để sử dụng font cho UI widget cần hiển thị  Sử dụng font copy xml: Style & Theme Fonts  Sử dụng code Java: TextView tvCustom= (TextView) findViewById (R.id.custom); Typeface myNewFace= Typeface.createFromAsset( getAssets(), “fonts/Jokerman.TTF”); tvCustom.setTypeface(myNewFace); Style & Theme  Demo  Style & Theme Tổng kết buổi học  Các Layout (tiếp)  Table layout  Relative Layout  Absolute Layout  ScrollView Layout  Style and Themes ... xmlns :android= "http://schemas .android android: layout_width ="120dip”