Xem mẫu
- Bố cục giao diện (Layout)
ThS.Bùi Trung Úy
- Giao diện Android
Android tổ chức giao diện thành các View và
ViewGroup lồng vào nhau tạo thành cây giao diện.
RelativeLayout
LinearLayout (vertical)
TextView
EditText
TextView
EditText
LinearLayout (horizontal)
Button Button
10/2/2019 Lập trình di động Android 2
- Nội dung bài học
Các cách tạo giao diện
Bố cục giao diện (layout)
Một số các view cơ bản (tt)
10/2/2019 Lập trình di động Android 3
- Các cách tạo giao diện
Tạo giao diện bằng mã nguồn (Java)
Tạo giao diện bằng XML
Tạo giao diện bằng công cụ trực quan (kéo-thả)
10/2/2019 Lập trình di động Android 4
- Tạo giao diện bằng mã nguồn
Mỗi phần tử (View/ViewGroup) trên giao diện, đều
thuộc một lớp Java trong Android SDK.
Việc tạo ra một view trên giao diện chính là tạo ra một
thể hiện (instance) của lớp View tương ứng.
ViewGroup đầu tiên được hiển thị đến người dùng
nhờ phương thức setContentView().
Các View khác được thêm đến ViewGroup gốc nhờ
phương thức addView().
Như vậy, ta có thể viết code để tạo giao diện cũng như
thay đỗi thuộc tính và vị trí của View trên giao diện.
10/2/2019 Lập trình di động Android 5
- Tạo giao diện bằng mã nguồn
10/2/2019 Lập trình di động Android 6
- Tạo giao diện bằng XML
XML là gì? XML (Extensible Markup Language - ngôn
ngữ đánh dấu mở rộng) là một file dạng văn bản (text)
dùng để đặc tả và lưu dữ liệu.
Các giá trị dữ liệu được lưu thành các phần tử (node).
Mỗi phần tử sẽ bắt đầu bằng một thẻ (tag) mở và kết
thúc bằng thẻ đóng.
Android dùng cú pháp XML để đặc tả giao diện và sau
đó gắn vào Activity.
Sử dụng XML để mô tả giao diện là cách thông dụng
trong lập trình Android (kết hợp với giao diện kéo-thả).
10/2/2019 Lập trình di động Android 7
- Tạo giao diện bằng XML
10/2/2019 Lập trình di động Android 8
- Tạo giao diện trực quan kéo-thả
10/2/2019 Lập trình di động Android 9
- Tạo giao diện trực quan kéo-thả
Các vị trí kéo-thả trên view
Điểm neo (anchor points): các nút hình tròn ở các
cạnh của view, dùng để tạo ràng buộc cho view.
Điểm resize: các nút hình vuông ở các góc của
view, dùng để thay đỗi kích thước view
10/2/2019 Lập trình di động Android 10
- Tạo giao diện trực quan kéo-thả
Ví dụ tạo ràng buộc giữa view:
10/2/2019 Lập trình di động Android 11
- Tạo giao diện trực quan kéo-thả
Cửa sổ thuộc tính:
10/2/2019 Lập trình di động Android 12
- Bố cục giao diện (Layout)
Layout là một cách bố trí, sắp xếp các thành phần
giao diện xuất hiện trên màn hình.
Android SDK cung cấp một số layouts hỗ trợ cho
việc thiết kế giao diện gồm:
FrameLayout: Bố cục khung đơn
LinearLayout: Bố cục dạng tuyến tính
TableLayout: Bố cục dạng bảng
RelativeLayout: Bố cục dạng quan hệ
ConstraintLayout: Bố cục với các ràng buộc
…
10/2/2019 Lập trình di động Android 13
- FrameLayout
FrameLayout là một bố cục dạng khung đơn.
Sử dụng trong các trường hợp xây dựng bố cục
giao diện chỉ hiển thị một đối tượng duy nhất.
Frame Layout có thể chứa nhiều view và các view
này có thể sắp chồng lên nhau
10/2/2019 Lập trình di động Android 14
- LinearLayout
LinearLayout là một bố cục tuyến tính sắp xếp các
view con theo chiều ngang (horizontal) hoặc theo
chiều dọc (vertical)
10/2/2019 Lập trình di động Android 15
- LinearLayout
10/2/2019 Lập trình di động Android 16
- LinearLayout
Các đặc điểm thuộc tính thiết lập cho các view dùng
với LinearLayout
Orientation: hướng bố trí các view con.
View size: Kích thước của view
Weight: Trọng số lấy kích thước
Gravity: Canh hiển thị view
Padding: Khoảng cách vùng đệm
Margin: Khoảng cách vùng lề
10/2/2019 Lập trình di động Android 17
- LinearLayout - Orientation
Hướng bố trí các view con:
vertical: Bố trí view con theo chiều dọc
horizontal: Bố trí view con theo chiều ngang
Thiết lập trong XML:
android:orientaion=“vertical”
android:orientaion=“horizontal”
Dùng code:
layout.setOrientation(LinearLayout.HORIZONTAL);
layout.setOrientation(LinearLayout.VERTICAL);
10/2/2019 Lập trình di động Android 18
- LinearLayout - Orientation
10/2/2019 Lập trình di động Android 19
- LinearLayout – View size
Các view con của LinearLayout đều có 2 thuộc tính
xác định kích thước
android:layout_width: chiều rộng của view
android:layout_height: chiều cao của view
Các giá trị có thể thiết lập:
“wrap_content”
“fill_parent”
“[dip|px]”
10/2/2019 Lập trình di động Android 20
nguon tai.lieu . vn
