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

33 134 1
  • Loading ...
    Loading ...
    Loading ...

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

Tài liệu liên quan

Thông tin tài liệu

Ngày đăng: 06/03/2019, 09:32

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):
- Xem thêm -

Xem thêm: 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 về UI

Từ khóa liên quan