Android - Bố cục giao diện người dùng
Khối xây dựng cơ bản cho giao diện người dùng là Viewđối tượng được tạo từ lớp View và chiếm một vùng hình chữ nhật trên màn hình và chịu trách nhiệm vẽ và xử lý sự kiện. View là lớp cơ sở cho các widget, được sử dụng để tạo các thành phần UI tương tác như các nút, trường văn bản, v.v.
Các ViewGroup là một lớp con của View và cung cấp vùng chứa vô hình chứa các Chế độ xem khác hoặc Nhóm Xem khác và xác định các thuộc tính bố cục của chúng.
Ở cấp độ thứ ba, chúng tôi có các bố cục khác nhau, là các lớp con của lớp ViewGroup và một bố cục điển hình xác định cấu trúc trực quan cho giao diện người dùng Android và có thể được tạo tại thời điểm chạy bằng cách sử dụng View/ViewGroup các đối tượng hoặc bạn có thể khai báo bố cục của mình bằng tệp XML đơn giản main_layout.xml nằm trong thư mục res / layout của dự án của bạn.
Thông số bố cục
Hướng dẫn này thiên về cách tạo GUI của bạn dựa trên các bố cục được xác định trong tệp XML. Một bố cục có thể chứa bất kỳ loại tiện ích nào như nút, nhãn, hộp văn bản, v.v. Sau đây là một ví dụ đơn giản về tệp XML có LinearLayout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is a TextView" />
<Button android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is a Button" />
<!-- More GUI components go here -->
</LinearLayout>Khi bố cục của bạn đã được tạo, bạn có thể tải tài nguyên bố cục từ mã ứng dụng của mình, trong triển khai gọi lại Activity.onCreate () của bạn như được hiển thị bên dưới -
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}Các loại bố cục Android
Có một số Bố cục do Android cung cấp mà bạn sẽ sử dụng trong hầu hết các ứng dụng Android để cung cấp các giao diện, giao diện khác nhau.
| Sr.No | Bố cục & Mô tả |
|---|---|
| 1 | Bố cục tuyến tính LinearLayout là một nhóm chế độ xem căn chỉnh tất cả các phần tử con theo một hướng, theo chiều dọc hoặc chiều ngang. |
| 2 | Giao diện tương đối RelativeLayout là một nhóm dạng xem hiển thị các dạng xem con ở các vị trí tương đối. |
| 3 | Bố cục bảng TableLayout là một dạng xem nhóm các dạng xem thành các hàng và cột. |
| 4 | Bố cục tuyệt đối AbsoluteLayout cho phép bạn chỉ định vị trí chính xác của các phần tử con của nó. |
| 5 | Bố cục khung hình FrameLayout là một trình giữ chỗ trên màn hình mà bạn có thể sử dụng để hiển thị một chế độ xem duy nhất. |
| 6 | Xem danh sách ListView là một nhóm dạng xem hiển thị danh sách các mục có thể cuộn được. |
| 7 | Chế độ hiển thị theo ô GridView là một ViewGroup hiển thị các mục trong lưới hai chiều, có thể cuộn. |
Thuộc tính bố cục
Mỗi bố cục có một tập hợp các thuộc tính xác định các thuộc tính trực quan của bố cục đó. Có một số thuộc tính chung trong số tất cả các bố cục và chúng là các thuộc tính khác dành riêng cho bố cục đó. Sau đây là các thuộc tính phổ biến và sẽ được áp dụng cho tất cả các bố cục:
| Sr.No | Thuộc tính & Mô tả |
|---|---|
| 1 | android:id Đây là ID xác định duy nhất chế độ xem. |
| 2 | android:layout_width Đây là chiều rộng của bố cục. |
| 3 | android:layout_height Đây là chiều cao của bố cục |
| 4 | android:layout_marginTop Đây là không gian thừa ở phía trên cùng của bố cục. |
| 5 | android:layout_marginBottom Đây là không gian thừa ở phía dưới cùng của bố cục. |
| 6 | android:layout_marginLeft Đây là không gian thừa ở phía bên trái của bố cục. |
| 7 | android:layout_marginRight Đây là không gian phụ ở phía bên phải của bố cục. |
| số 8 | android:layout_gravity Điều này chỉ định cách Chế độ xem con được định vị. |
| 9 | android:layout_weight Điều này chỉ định lượng không gian thừa trong bố cục sẽ được phân bổ cho Chế độ xem. |
| 10 | android:layout_x Điều này chỉ định tọa độ x của bố cục. |
| 11 | android:layout_y Điều này chỉ định tọa độ y của bố cục. |
| 12 | android:layout_width Đây là chiều rộng của bố cục. |
| 13 | android:paddingLeft Đây là phần đệm bên trái được lấp đầy cho bố cục. |
| 14 | android:paddingRight Đây là phần đệm bên phải được lấp đầy cho bố cục. |
| 15 | android:paddingTop Đây là phần đệm trên cùng được lấp đầy cho bố cục. |
| 16 | android:paddingBottom Đây là phần đệm dưới cùng được lấp đầy cho bố cục. |
Ở đây chiều rộng và chiều cao là kích thước của bố cục / chế độ xem có thể được chỉ định theo dp (Điểm ảnh độc lập với mật độ), sp (Điểm ảnh không phụ thuộc vào tỷ lệ), pt (Điểm bằng 1/72 inch), px ( Điểm ảnh), mm (Milimét) và cuối cùng là (inch).
Bạn có thể chỉ định chiều rộng và chiều cao với các phép đo chính xác nhưng thường xuyên hơn, bạn sẽ sử dụng một trong các hằng số này để đặt chiều rộng hoặc chiều cao -
android:layout_width=wrap_content yêu cầu chế độ xem của bạn tự định kích thước theo các kích thước mà nội dung của nó yêu cầu.
android:layout_width=fill_parent cho chế độ xem của bạn trở nên lớn bằng chế độ xem gốc của nó.
Thuộc tính Gravity đóng vai trò quan trọng trong việc định vị đối tượng view và nó có thể nhận một hoặc nhiều (phân tách bằng dấu '|') trong số các giá trị không đổi sau đây.
| Không thay đổi | Giá trị | Sự miêu tả |
|---|---|---|
| hàng đầu | 0x30 | Đẩy đối tượng lên đầu hộp chứa của nó, không thay đổi kích thước của nó. |
| đáy | 0x50 | Đẩy đối tượng xuống đáy thùng chứa, không thay đổi kích thước của nó. |
| trái | 0x03 | Đẩy đối tượng sang bên trái vùng chứa của nó, không thay đổi kích thước của nó. |
| đúng | 0x05 | Đẩy đối tượng sang bên phải vùng chứa của nó, không thay đổi kích thước của nó. |
| center_vertical | 0x10 | Đặt đối tượng vào tâm thẳng đứng của vùng chứa, không thay đổi kích thước của nó. |
| fill_vertical | 0x70 | Tăng kích thước thẳng đứng của đối tượng nếu cần để nó lấp đầy hoàn toàn vùng chứa của nó. |
| center_horizontal | 0x01 | Đặt đối tượng vào tâm nằm ngang của vùng chứa, không thay đổi kích thước của nó. |
| fill_horizontal | 0x07 | Tăng kích thước chiều ngang của đối tượng nếu cần để nó lấp đầy vùng chứa của nó. |
| trung tâm | 0x11 | Đặt đối tượng vào giữa thùng chứa của nó theo cả trục dọc và trục ngang, không thay đổi kích thước của nó. |
| lấp đầy | 0x77 | Tăng kích thước ngang và dọc của đối tượng nếu cần để nó lấp đầy hoàn toàn vùng chứa của nó. |
| clip_vertical | 0x80 | Tùy chọn bổ sung có thể được đặt để các cạnh trên và / hoặc dưới cùng của phần con được cắt theo giới hạn của vùng chứa của nó. Kẹp sẽ dựa trên trọng lực thẳng đứng: trọng lực trên cùng sẽ kẹp mép dưới, trọng lực dưới sẽ kẹp mép trên và cả hai mép cũng không. |
| clip_horiz Ngang | 0x08 | Tùy chọn bổ sung có thể được đặt để các cạnh bên trái và / hoặc bên phải của trẻ được cắt theo giới hạn của vùng chứa của nó. Kẹp sẽ dựa trên trọng lực ngang: trọng lực bên trái sẽ kẹp mép bên phải, trọng lực bên phải sẽ kẹp mép bên trái và cả hai mép đều không kẹp. |
| khởi đầu | 0x00800003 | Đẩy đối tượng về đầu thùng chứa của nó, không thay đổi kích thước của nó. |
| kết thúc | 0x00800005 | Đẩy đối tượng đến cuối vùng chứa của nó, không thay đổi kích thước của nó. |
Xem nhận dạng
Một đối tượng dạng xem có thể có một ID duy nhất được gán cho nó. ID này sẽ xác định dạng xem duy nhất trong cây. Cú pháp cho một ID, bên trong thẻ XML là:
android:id="@+id/my_button"Sau đây là mô tả ngắn gọn về dấu hiệu @ và + -
Ký hiệu at (@) ở đầu chuỗi chỉ ra rằng trình phân tích cú pháp XML nên phân tích cú pháp và mở rộng phần còn lại của chuỗi ID và xác định nó là tài nguyên ID.
Ký hiệu dấu cộng (+) có nghĩa là đây là tên tài nguyên mới phải được tạo và thêm vào tài nguyên của chúng tôi. Để tạo một phiên bản của đối tượng xem và chụp nó từ bố cục, hãy sử dụng cách sau:
Button myButton = (Button) findViewById(R.id.my_button);