Какой разумный способ сделать этот макет?

Question

На изображении ниже желтый квадрат представляет RelativeLayout, который находится в моем общем макете.

Верхняя строка «сообщения о состоянии» - это ViewFlipper, который отвечает на кнопки ToggleButtons (A, B), которые пользователь можетНажмите.Кнопки C, D и E выполняют другие действия, которые перезагружают весь вид.Наш клиент просит, чтобы кнопки A, B, C, D и E были расположены так, как показано ниже.(Выравнивание по вертикали не так важно, как выравнивание по горизонтали.)

ПРАВКА, чтобы сказать, что A, B, C, D и E - это изображения с разрешением 20x20;они выровнены на ширине около 300 dip.Я хочу, чтобы кнопки сохранили свое соотношение сторон.

Я создал расширение LinearLayout, которое раздувает кнопки A и B (из файла XML), а затем еще одно LinearLayout, которое раздувает кнопки C, D и E вдругой XML-файл.

Кнопки A и B (на самом деле 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>

Кнопки C, D, E 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>

Мой код в основномработает, но я должен уклониться от полей, чтобы все выстроилось правильно (чего они еще не делают).Интересно, есть ли какой-нибудь более чистый способ выравнивания по центру наборов кнопок «AB» и «CDE»

ps: проницательный читатель заметит, что я расширяю LinearLayout, но раздуваю RelativeLayouts.(Я не знаю, почему он вообще может работать, но) когда я попытался расширить RelativeLayout, макет «CDE» даже не появился на моем устройстве.Я не знаю, куда это пошло.

Answer 1

Используйте линейный макет в качестве основного тела.

Затем используйте layout_gravity на отдельных горизонтальных линейных разметках, чтобы содержимое центрировалось

Используйте layout_margin на каждом дочернем виде, чтобы разделить их. Я указал это как 15dip, но вы должны использовать измерение, чтобы вы могли изменить их все вместе.

<?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>