Bài giảng Lập trình Android: Bố cục giao diện - ThS.Bùi Trung Úy

Chia sẻ: Cuchoami2510 | Ngày: | Loại File: PDF | Số trang:72

Thêm vào BST

Báo xấu

141
lượt xem 28
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Bài giảng Lập trình Android: Bố cục giao diện cung cấp cho người học những kiến thức như: 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). Mời các bạn cùng tham khảo!

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Bài giảng Lập trình Android: Bố cục giao diện - ThS.Bùi Trung Úy

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