同等间隔的多元素Android布局

Question

我试图在两列中设置8个圆形按钮，这些按钮将与按钮的大小相符，并且在纵向或横向模式下可以很好地改变。

我开始尝试一个绝对没有用的GridLayout。然后我尝试了两个LinearLayouts，但似乎你根本没有多个LinearLayouts（我对Android btw来说很新）。

我目前的尝试是使用TableLayout，但这似乎与内容完美搭配。按钮被拉伸以填充每个单元格，并且不遵守在每个元素上设置的显式尺寸。此表也不会垂直拉伸以填充可用空间。

我目前的代码是：

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:stretchColumns="0,1">
    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <Button
            style="@style/button_text"
            android:layout_width="100sp"
            android:layout_height="100sp"
            android:background="@drawable/homebutton"
            android:gravity="center_vertical"
            android:text="Button1"
            android:textColor="#fff"
            android:isScrollContainer="true" />
        <Button
            style="@style/button_text"
            android:layout_width="100sp"
            android:layout_height="100sp"
            android:background="@drawable/homebutton"
            android:gravity="center_vertical"
            android:text="Button2"
            android:textColor="#fff" />
    </TableRow>
    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <Button
            style="@style/button_text"
            android:layout_width="100sp"
            android:layout_height="100sp"
            android:background="@drawable/homebutton"
            android:gravity="center_vertical"
            android:text="Button3"
            android:textColor="#fff" />
        <Button
            style="@style/button_text"
            android:layout_width="100sp"
            android:layout_height="100sp"
            android:background="@drawable/homebutton"
            android:gravity="center_vertical"
            android:text="Button4"
            android:textColor="#fff" />
    </TableRow>
    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <Button
            style="@style/button_text"
            android:layout_width="100sp"
            android:layout_height="100sp"
            android:background="@drawable/homebutton"
            android:gravity="center_vertical"
            android:text="Button5"
            android:textColor="#fff" />
        <Button
            style="@style/button_text"
            android:layout_width="100sp"
            android:layout_height="100sp"
            android:background="@drawable/homebutton"
            android:gravity="center_vertical"
            android:text="Button6"
            android:textColor="#fff" />
    </TableRow>
    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <Button
            style="@style/button_text"
            android:layout_width="100sp"
            android:layout_height="100sp"
            android:background="@drawable/homebutton"
            android:gravity="center_vertical"
            android:text="Button7"
            android:textColor="#fff" />
        <Button
            style="@style/button_text"
            android:layout_width="100sp"
            android:layout_height="100sp"
            android:background="@drawable/homebutton"
            android:gravity="center_vertical"
            android:text="Button8"
            android:textColor="#fff" />
    </TableRow>
</TableLayout>

我想要实现的是垂直方向：

这是风景：

对于如何最好地使这种布局有效，证明有点难以捉摸。

Answer 1

问题的第一部分是如何设置这些圈子，以便它们在每个设备上均匀分布。

我们将使用根LinearLayout，其中两个孩子LinearLayout的权重相等。在这些子布局中，您将再创建另外4个LinearLayout个垂直加权。这将屏幕空间减少到2x4。在每个按钮中放一个按钮，然后我们实现我们想要的布局：

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">

            <Button
                style="@style/button_text"
                android:layout_width="100sp"
                android:layout_height="100sp"
                android:background="@drawable/homebutton"
                android:gravity="center_vertical"
                android:isScrollContainer="true"
                android:text="Button1"
                android:textColor="#fff"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">

            <Button
                style="@style/button_text"
                android:layout_width="100sp"
                android:layout_height="100sp"
                android:background="@drawable/homebutton"
                android:gravity="center_vertical"
                android:isScrollContainer="true"
                android:text="Button1"
                android:textColor="#fff"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">

            <Button
                style="@style/button_text"
                android:layout_width="100sp"
                android:layout_height="100sp"
                android:background="@drawable/homebutton"
                android:gravity="center_vertical"
                android:isScrollContainer="true"
                android:text="Button1"
                android:textColor="#fff"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">

            <Button
                style="@style/button_text"
                android:layout_width="100sp"
                android:layout_height="100sp"
                android:background="@drawable/homebutton"
                android:gravity="center_vertical"
                android:isScrollContainer="true"
                android:text="Button1"
                android:textColor="#fff"/>
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">

            <Button
                style="@style/button_text"
                android:layout_width="100sp"
                android:layout_height="100sp"
                android:background="@drawable/homebutton"
                android:gravity="center_vertical"
                android:isScrollContainer="true"
                android:text="Button1"
                android:textColor="#fff"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">

            <Button
                style="@style/button_text"
                android:layout_width="100sp"
                android:layout_height="100sp"
                android:background="@drawable/homebutton"
                android:gravity="center_vertical"
                android:isScrollContainer="true"
                android:text="Button1"
                android:textColor="#fff"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">

            <Button
                style="@style/button_text"
                android:layout_width="100sp"
                android:layout_height="100sp"
                android:background="@drawable/homebutton"
                android:gravity="center_vertical"
                android:isScrollContainer="true"
                android:text="Button1"
                android:textColor="#fff"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">

            <Button
                style="@style/button_text"
                android:layout_width="100sp"
                android:layout_height="100sp"
                android:background="@drawable/homebutton"
                android:gravity="center_vertical"
                android:isScrollContainer="true"
                android:text="Button1"
                android:textColor="#fff"/>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

现在我们已经完成了纵向版本，您必须稍微重新构建一个重复版本的布局 - 以便在设备处于横向时特别使用。我不会为你完成那个版本 - 因为这应该很容易用上面的代码弄清楚;但是，这里有一个关于你完成景观布局的地方的资源。 - Orientation-Specific Layouts

Answer 2

示例布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/linearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="horizontal">

    <LinearLayout
        android:id="@+id/linearLayout2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <Button
            android:layout_width="100sp"
            android:layout_height="100sp"
            android:background="@drawable/abc_btn_radio_to_on_mtrl_000"
            android:gravity="center_vertical"
            android:isScrollContainer="true"
            android:textColor="#fff" />

        <Button
            android:layout_width="100sp"
            android:layout_height="100sp"
            android:background="@drawable/abc_btn_radio_to_on_mtrl_000"
            android:gravity="center_vertical"
            android:isScrollContainer="true"
            android:textColor="#fff" />

        <Button
            android:layout_width="100sp"
            android:layout_height="100sp"
            android:background="@drawable/abc_btn_radio_to_on_mtrl_000"
            android:gravity="center_vertical"
            android:isScrollContainer="true"
            android:textColor="#fff" />

        <Button
            android:layout_width="100sp"
            android:layout_height="100sp"
            android:background="@drawable/abc_btn_radio_to_on_mtrl_000"
            android:gravity="center_vertical"
            android:isScrollContainer="true"
            android:textColor="#fff" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <Button
            android:layout_width="100sp"
            android:layout_height="100sp"
            android:background="@drawable/abc_btn_radio_to_on_mtrl_000"
            android:gravity="center_vertical"
            android:isScrollContainer="true"
            android:textColor="#fff" />

        <Button
            android:layout_width="100sp"
            android:layout_height="100sp"
            android:background="@drawable/abc_btn_radio_to_on_mtrl_000"
            android:gravity="center_vertical"
            android:isScrollContainer="true"
            android:textColor="#fff" />

        <Button
            android:layout_width="100sp"
            android:layout_height="100sp"
            android:background="@drawable/abc_btn_radio_to_on_mtrl_000"
            android:gravity="center_vertical"
            android:isScrollContainer="true"
            android:textColor="#fff" />

        <Button
            android:layout_width="100sp"
            android:layout_height="100sp"
            android:background="@drawable/abc_btn_radio_to_on_mtrl_000"
            android:gravity="center_vertical"
            android:isScrollContainer="true"
            android:textColor="#fff" />
    </LinearLayout>
</LinearLayout>

放入覆盖方法OnCreateView的示例代码，它将更改布局的方向：

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

    View view = (LinearLayout) inflater.inflate(R.layout.fragment_main, container, false);
    final LinearLayout linearLayout1 = (LinearLayout) view.findViewById(R.id.linearLayout1);
    final LinearLayout linearLayout2 = (LinearLayout) view.findViewById(R.id.linearLayout2);
    final LinearLayout linearLayout3 = (LinearLayout) view.findViewById(R.id.linearLayout3);

    final int currentOrientation = getResources().getConfiguration().orientation;
    if (currentOrientation == Configuration.ORIENTATION_LANDSCAPE) {
        linearLayout1.setOrientation(LinearLayout.VERTICAL);
        linearLayout2.setOrientation(LinearLayout.HORIZONTAL);
        linearLayout3.setOrientation(LinearLayout.HORIZONTAL);
    }
    else {
        linearLayout1.setOrientation(LinearLayout.HORIZONTAL);
        linearLayout2.setOrientation(LinearLayout.VERTICAL);
        linearLayout3.setOrientation(LinearLayout.VERTICAL);
    }
    return view;
}

Answer 3

我想推荐一种方法，其中您使用一个水平方向的LinearLayout，其权重与您希望的视图数相同，并且在内部放置的RelativeLayouts与权数相同。在代码中，应该像这样：

<LinearLayout
                        android:id="@+id/mealLinearLayout"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/addNewMealButton"
                        android:layout_marginTop="50dp"
                        android:layout_marginBottom="50dp"

                        android:weightSum="4">

                        <RelativeLayout
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_weight="1">

                            <ImageButton
                                android:id="@+id/breakfastImageButton"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_centerHorizontal="true"
                                android:background="@drawable/bigcircle" />
                        </RelativeLayout>

                        <RelativeLayout
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_weight="1">

                            <ImageButton
                                android:id="@+id/lunchImageButton"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_centerHorizontal="true"
                                android:background="@drawable/bigcircle" />
                        </RelativeLayout>

                        <RelativeLayout
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_weight="1">

                            <ImageButton
                                android:id="@+id/dinnerImageButton"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_centerHorizontal="true"
                                android:background="@drawable/bigcircle" />
                        </RelativeLayout>

                        <RelativeLayout
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_weight="1">

                            <ImageButton
                                android:id="@+id/favoriteImageButton"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_centerHorizontal="true"
                                android:background="@drawable/bigcircle" />
                        </RelativeLayout>

 </LinearLayout>