制作这种布局的合理方法是什么？

Question

在下图中,黄色方块表示在我的整体布局中的RelativeLayout.

顶行"状态消息"是一个ViewFlipper,它响应用户可以按下的ToggleButtons(A,B).按钮C,D和E执行重新加载整个视图的其他内容.我们的客户要求按钮A,B,C,D和E按照下面的方式排列.(垂直对齐不如水平对齐重要.)

编辑说A,B,C,D和E是大约20x20倾角的图像; 它们在约300dip的宽度内对齐.我希望按钮保持其纵横比.

我创建了一个LinearLayout扩展,它扩展了按钮A和B(来自xml文件),然后是另一个LinearLayout,它在另一个xml文件中膨胀了按钮C,D和E.

按钮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>

我的代码基本上可以工作,但是我必须利用边缘来使事情正确排列(他们还没有).我想知道是否有一些更清晰的中心对齐按钮组"A B"和"CD E"的方式

ps:精明的读者会注意到我正在扩展LinearLayout,但是却在膨胀RelativeLayouts.(我不知道为什么它甚至可以在所有的工作,但)当我试图延长的RelativeLayout而是"唯E"布局甚至没有出现在我的设备上.我不知道它去了哪里.

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>