Computer >> Máy Tính >  >> Hệ thống >> Android

Cách hiểu về nhiều bố cục Android

Tuyến tính, Tương đối, Ràng buộc, Bảng, Khung, v.v. Các ứng dụng Android có rất nhiều bố cục để bạn lựa chọn khi muốn thiết kế ứng dụng của mình. Câu hỏi đặt ra là cái nào là tốt nhất?

Trước khi đi vào chi tiết các bố cục khác nhau, trước tiên chúng ta sẽ xem xét phân cấp đối tượng xem và quy trình vẽ của Android.

View và ViewGroup

Hãy coi ViewGroup là lớp cha của bất kỳ chế độ xem nào và cũng là lớp cơ sở cho các bố cục. Nó đại diện cho một đối tượng là vùng chứa cho các khung nhìn khác. Ví dụ: LinearLayout là một ViewGroup vì nó cũng có thể chứa các dạng xem và các bố cục khác.

Mặt khác, View là khối xây dựng cơ bản của các phần tử UI. Chế độ xem có thể là một phần của Nhóm xem. Ví dụ:một TextView là một Chế độ xem .

Cách hiểu về nhiều bố cục Android
Phân cấp ViewGroup và View

Đo -> Bố cục -> Vẽ -> Lặp lại

Các bố cục được lưu dưới dạng tệp XML trong Android. Nhưng làm thế nào để chúng được chuyển đổi thành các đối tượng mà chúng ta nhìn thấy trên màn hình? Mỗi tệp XML được khởi tạo (đọc:phồng lên) và một cây phân cấp chế độ xem được hình thành. Điều này có nghĩa là nếu bạn có bố cục B được lồng bên trong bố cục A, chúng sẽ có mối quan hệ con - mẹ (bố cục A là bố mẹ của bố cục B). Khi cây được hình thành, có 3 giai đoạn sẽ xảy ra:Đo lường, Bố cục và Vẽ. Mỗi giai đoạn trong số này đi qua cây theo thứ tự Tìm kiếm đầu tiên theo chiều sâu.

Đo lường

Trong giai đoạn đầu, mỗi nút cha tìm ra những hạn chế nhất định mà nút con của nó có liên quan đến kích thước của chúng. Nó chuyển những hạn chế này xuống cho con cái của nó, nơi mỗi đứa trẻ sẽ tự đánh giá kích thước của mình (nó muốn lớn như thế nào) và cân nhắc những hạn chế mà nó đã được đưa ra và những hạn chế của con nó.

Bố cục

Tại đây, mỗi nút sẽ quyết định kích thước và vị trí cuối cùng của mỗi nút con của nó trên màn hình.

Vẽ

Bắt đầu từ nút gốc, nút này tự vẽ, sau đó nó bảo các nút con của nó tự vẽ. Theo cách này, điều xảy ra là cha mẹ sẽ được vẽ và con cái của họ sẽ được vẽ trên đó.

Lưu ý quy trình ở trên, bạn nên cố gắng giữ bố cục ứng dụng của mình càng nông càng tốt để giảm thời gian duyệt qua hệ thống phân cấp chế độ xem
Cách hiểu về nhiều bố cục Android
“lô khung ảnh nhiều màu” của Markus Spiske trên Unsplash

Phân tích bố cục

Tuyến tính

Sắp xếp các con của nó thành một hàng theo hướng dọc hoặc ngang. Có nghĩa là, tất cả các chế độ xem sẽ nằm trong một hàng hoặc một cột. Bạn có thể chỉ định hướng bằng cách sử dụng android:direction thuộc tính.

Một tính năng thú vị mà Bố cục tuyến tính có là layout_weight thuộc tính. Điều này được sử dụng để cho Bố trí Tuyến tính biết cách phân chia không gian giữa các chế độ xem con. Nó hữu ích khi bạn muốn bố cục của mình nhất quán giữa các thiết bị và hướng.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="World!"
        />

</LinearLayout>
Một bố cục tuyến tính đơn giản

Giả sử bạn muốn có TextView đầu tiên, chứa từ Xin chào, để luôn chiếm 3/4 chiều rộng của màn hình. Để làm điều này, chúng ta có thể sử dụng thuộc tính layout_weight.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="4"        // <-- We added a total weight for our layout (4)
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="3"   // <-- Will have a weight of 3 out of 4 (3/4)
        android:text="Hello" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="World!"
        android:layout_weight="1"   // <-- Will have a weight of 1 out of 4 (1/4)
        />

</LinearLayout>
layout_weight

Tương đối

Như tên của nó, bố cục này sẽ đặt các khung nhìn con bên trong của nó ở vị trí tương đối. Điều này có thể giữ cho hệ thống phân cấp bố cục của bạn luôn phẳng mà không có nhóm chế độ xem lồng nhau. Tuy nhiên, đồng thời, mỗi Bố cục Tương đối phải trải qua một quá trình gồm hai lần Đo, có thể ảnh hưởng đến hiệu suất.

Một tính năng hữu ích của RelativeLayout là khả năng căn giữa chế độ xem con bằng cách sử dụng centerInParent thuộc tính.

Cách hiểu về nhiều bố cục Android
layout_centerInParent căn giữa TextView

Ràng buộc

A hạn chế là một kết nối hoặc một sự liên kết với phần tử mà ràng buộc được liên kết. Bạn xác định các ràng buộc khác nhau cho mọi dạng xem con so với các dạng xem khác hiện có. Điều này cung cấp cho bạn khả năng xây dựng các bố cục phức tạp với hệ thống phân cấp chế độ xem phẳng (không có Nhóm View lồng nhau). Tương tự như RelativeLayout, bố cục này cũng yêu cầu hai lần đo.

Cách hiểu về nhiều bố cục Android
Lưu ý các ràng buộc trên TextView

Khung

Bố cục này chỉ được sử dụng để giữ một chế độ xem con, do đó sẽ chặn mọi chế độ xem khác trong bố cục. Bản thân bố cục sẽ lớn bằng chế độ xem con lớn nhất của nó (có thể nhìn thấy hoặc không), cộng với một số khoảng đệm.

Tránh có nhiều chế độ xem con bên trong FrameLayout vì sẽ khó tránh các chế độ xem con chồng lên nhau. Bạn có thể kiểm soát vị trí của các chế độ xem con này bằng cách gán layout_gravity thuộc tính cho từng đứa trẻ.

Cách hiểu về nhiều bố cục Android

List View / Grid View

Sử dụng khi bạn có nhu cầu trình bày nhiều món trên màn hình (như menu nhà hàng). Dạng xem Danh sách là một danh sách cột đơn mà người dùng có thể cuộn qua. Bạn có thể coi Chế độ xem lưới là Chế độ xem danh sách có nhiều hơn một cột.

Điều quan trọng cần biết về các bố cục này là Chế độ xem động và được tạo trong thời gian chạy. Để đặt các mục vào thời gian chạy, bạn cần sử dụng một AdapterView.

Cách hiểu về nhiều bố cục Android
Bạn có thể chỉ định vị trí của từng mục trong bố cục bằng cách sử dụng layout_column và layout_row

TableLayout

Rất giống với Grid View, bố cục này sắp xếp các con của nó thành các hàng và cột. Mỗi bố cục sẽ chứa một số đối tượng TableRow, mỗi đối tượng xác định một hàng.

Cách hiểu về nhiều bố cục Android
Chúng tôi có hai phần tử TableRow

Đừng ngại thử các bố cục khác nhau cho đến khi bạn tìm thấy bố cục phù hợp nhất với mình. Vui lòng cho tôi biết trong phần nhận xét bên dưới bố cục nào hữu ích nhất cho bạn và tại sao.