THIẾT KẾ GIAO DIỆN TRÊN ANDROID Bài 1: Tổng quan về UI

THIẾT KẾ GIAO DIỆN TRÊN ANDROID Bài 1: Tổng quan UI Nội dung học Giới thiệu Android UI Các Layout  FrameLayout  LinearLayout Giới thiệu Android User Interface Giới thiệu screen:  Home screen: chứa folder, widgets app shortcuts tùy theo ý người dùng  All apps screen: hiển thị toàn ứng dụng cài máy, đưa ứng dụng hình Home  Recents screen: cung cấp cho người dùng truy cập đến ứng dụng chạy gần cách nhanh Giới thiệu Android User Interface Giới thiệu screen:  System Bar: Status Bar: bên trái hiển thị trạng thái thời gian, mức độ pin, bên phải hiển thị tín hiệu sóng… Navigation Bar: điều khiển chứa nút Back, Home, Recents, thay cho phím cứng thiết kế máy Giới thiệu Android User Interface Giới thiệu screen:  Notifications: thông báo ngắn gọn mà không làm ảnh hưởng tới hoạt động người dùng, truy cập nhanh từ Status Bar  Common App UI  Action Bar  Navigation Drawer  Content Area Giới thiệu Android User Interface  Demo  Giới thiệu hình trực tiếp thiết bị Giới thiệu Android User Interface  Interface tạo từ View & View Group Giới thiệu Android User Interface  Interface tạo từ View & View Group  Lớp View đại diện cho khối thành phần giao diện người dùng  Mỗi View chiếm vùng hình chữ nhật hình chịu trách nhiệm drawing (vẽ) event handling (xử lý kiện)  View lớp sở cho widget, dùng để tạo component tương tác UI (buttons, text fields, …)  Tất view cửa sổ tổ chức cấu trúc  Ta bổ sung view từ mã nguồn định nghĩa cấu trúc view vài file layout XML Giới thiệu Android User Interface  Lớp ViewGroup lớp sở cho layout (bố cục), container vơ hình chứa View (hoặc ViewGroup) khác quy định đặc điểm bố cục chúng  Để gán UI, activity phải gọi setContentView() để trỏ đến file layout mô tả UI  Layout view dễ dàng Eclipse, bao gồm tính kéo thả, tùy chỉnh nhanh thuộc tính, view source, formating source Giới thiệu Android User Interface  Sau tạo view, có số thao tác cần thực hiện: Set properties: ví dụ gán sẵn dòng text TextView Các property biết từ trước đặt sẵn file layout XML Set focus: chế di chuyển focus để đáp ứng input người dùng Để yêu cầu focus cho view cụ thể, gọi hàm requestFocus() Set up listeners: View cho phép đặt listener, listener gọi có kiện xảy view Ví dụ, Button dùng listener để nghe kiện button click Set visibility: Ta che view setVisibility(int) Giới thiệu Android User Interface  Gắn Listener cho Widget (event handling) Button ví dụ ta dùng sau gắn listener cho kiện click: btn.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { updateTime(); } }); private void updateTime() { btn.setText(new Date().toString()); } Giới thiệu Android User Interface Đơn vị đo  Db/dip (Density- independent pixel): không phụ thuộc mật độ pixel, 160dp=1’’ hình  Sp(Scaled independent pixel): thường dùng để set font size  Pt (Point) = 1/72 inch, tùy thuộc vào hình vật lý  Px(Pixel): pixel thực hình Khơng nên dùng đơn vị đơn vị xác hình khác hiển thị không ý muốn Các layout Chi tiết số layout  FrameLayout:  Là loại Layout nhất, đặc điểm gắn control lên giao diện control ln “Neo” góc trái hình, khơng cho phép thay đổi vị trí control theo Location  Các control đưa vào sau đè lên che khuất control trước (trừ ta thiết lập transparent cho control sau)  Xem đoạn cấu trúc XML trang sau: hai hình ln “neo” góc trái hình Hình pic2 đưa vào sau đè lên hình pic1 Các layout  FrameLayout (tiếp)  Tệp myframewoklayout.xml Các layout  Demo  FrameLayout Các layout  LinearLayout  LinearLayout cho phép widgets containers xếp theo hàng cột, theo trước sau  Có thể dùng: orientation, fill model,padding, margin, gravity, weight để hỗ trợ cho việc thiết kế  Ta dùng Properties hỗ trợ sẵn Eclipse để thiết lập thuộc tính cho control Các layout  LinearLayout (tiếp)  Orientation: Trong code (runtime), ta thiết lập orientaion hàm: setOrientaion()  Trong xml, Layout cho phép xếp control theo hướng giao diện:  Hướng từ trái qua phải: android:orientation="vertical“  Hướng từ xuống dưới: android:orientation="horizontal“ Các layout  LinearLayout (tiếp)  Gravity  Được dùng để bố trí control hình  Nếu để mặc định, widgets xếp từ trái qua phải, từ xuống  Dùng thuộc tính android: layout_gravity =“center” để thiết lập cho control đặt vị trí: left, center, right, top, bottom… layout  Chú ý phân biệt với android:gravity= “center” : đặt nội dung bên control Các layout  LinearLayout (tiếp)  Chú ý khác biệt Padding Margin : Các layout  LinearLayout (tiếp)  Padding (internal spacing – khoảng cách nội dung bên so với đường viền control):