Cách hợp lý để tạo bố cục này là gì?

Question

Trong hình ảnh bên dưới, hình vuông màu vàng biểu thị một RelativeLayout nằm trong bố cục tổng thể của tôi.

Hàng trên cùng "thông báo trạng thái" là một ViewFlipper phản hồi ToggleButtons (A, B) mà người dùng có thể nhấn. Các nút C, D và E thực hiện các công cụ khác tải lại toàn bộ chế độ xem. Khách hàng của chúng tôi yêu cầu các nút A, B, C, D và E được sắp xếp theo cách thức bên dưới. (Căn chỉnh theo chiều dọc không quan trọng bằng cách căn chỉnh theo chiều ngang.)

CHỈNH SỬA A, B, C, D và E là hình ảnh về độ lệch 20x20; chúng được sắp xếp theo chiều rộng khoảng 300dip. Tôi muốn các nút để duy trì tỷ lệ khung hình của chúng.

tôi đã tạo ra một phần mở rộng của LinearLayout mà bung nút A và B (từ một file xml), và sau đó một LinearLayout mà bung nút C, D, và E trong một file xml.

Buttons A và B (đang thực sự ToggleButtons):

<RelativeLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:baselineAligned="true" 
> 
    <LinearLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_centerHorizontal="true" 
    > 
     <ToggleButton 
      android:id="@+id/A" 
      android:textOn="" 
      android:textOff="" 
      android:background="@layout/A" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_marginLeft="60dp" 
      android:layout_marginRight="30dp" 
     /> 
     <ToggleButton 
      android:id="@+id/B" 
      android:textOn="" 
      android:textOff="" 
      android:background="@layout/B" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_marginLeft="30dp" 
      android:layout_marginRight="30dp" 
     /> 
    </LinearLayout> 
</RelativeLayout> 

Buttons C, D, E tập tin xml:

<RelativeLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:baselineAligned="true" 
> 
    <LinearLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_centerHorizontal="true" 
    > 
     <ImageView 
      android:id="@+id/C" 
      android:src="@drawable/C" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_marginLeft="30dp" 
      android:layout_marginRight="30dp" 
     /> 
     <ImageView 
      android:id="@+id/D" 
      android:src="@drawable/D" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_marginLeft="30dp" 
      android:layout_marginRight="30dp" 
     /> 
     <ImageView 
      android:id="@+id/E" 
      android:src="@drawable/E" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_marginLeft="30dp" 
      android:layout_marginRight="30dp" 
     /> 
    </LinearLayout> 
</RelativeLayout> 

Mã của tôi về cơ bản hoạt động, nhưng tôi phải lận với lề để làm cho mọi thứ xếp hàng chính xác (mà họ chưa làm). Tôi tự hỏi liệu có một số cách thức căn giữa hơn giữa các bộ nút "A B" và "C D E"

ps: trình đọc sắc sảo sẽ nhận thấy rằng tôi đang mở rộng LinearLayout, nhưng tăng cường RelativeLayouts. (Tôi không biết tại sao nó thậm chí có thể làm việc ở tất cả, nhưng) khi tôi cố gắng mở rộng RelativeLayout thay vào đó, "C D E" bố trí thậm chí không xuất hiện trên thiết bị của tôi. Tôi không biết nó đi đâu.

Answer 1

Sử dụng bố cục tuyến tính làm phần chính.

Sau đó sử dụng layout_gravity trên linearlayouts ngang cá nhân để giữ cho nội dung trọng tâm

Sử dụng layout_margin trên mỗi quan điểm con vào không gian phân biệt chúng. Tôi đã chỉ định điều này là 15dip nhưng bạn nên sử dụng thứ nguyên để bạn có thể sửa đổi tất cả chúng lại với nhau.

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 
    <TextView android:id="@+id/some_text" 
     android:layout_height="wrap_content" 
     android:text="Some random string." android:layout_gravity="center" android:layout_width="wrap_content"/> 
    <LinearLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center"> 
     <ToggleButton 
      android:id="@+id/A" 
      android:textOn="" 
      android:textOff="" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:background="@layout/A" 
      android:layout_margin="15dip"/> 
     <ToggleButton 
      android:id="@+id/B" 
      android:textOn="" 
      android:textOff="" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:background="@layout/B" 
      android:layout_margin="15dip"/> 
    </LinearLayout> 
    <LinearLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center"> 
     <ImageView 
      android:id="@+id/C" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:src="@drawable/C" 
      android:layout_margin="15dip"/> 
     <ImageView 
      android:id="@+id/D" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:src="@drawable/D" 
      android:layout_margin="15dip"/> 
     <ImageView 
      android:id="@+id/E" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:src="@drawable/E" 
      android:layout_margin="15dip"/> 
    </LinearLayout> 

</LinearLayout>