Question

我想实现这种布局：

enter image description here

我能来的最近的是：

enter image description here

到目前为止的布局是：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_centerInParent="true"
    android:layout_centerVertical="true"
    android:baselineAligned="true"
    android:orientation="vertical"
    android:weightSum="4" >

    <LinearLayout

        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:paddingBottom="8dip" >

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:background="@null"
            android:scaleType="fitCenter"
            android:src="@drawable/myimage" />
    </LinearLayout>

    <LinearLayout

        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:paddingBottom="8dip" 

        >

        <ImageButton

            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:background="@null"
            android:scaleType="fitCenter"
            android:src="@drawable/myimage" 

            />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:background="@null"
            android:scaleType="fitCenter"
            android:src="@drawable/myimage" />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:background="@null"
            android:scaleType="fitCenter"
            android:src="@drawable/myimage" />
    </LinearLayout>

    <LinearLayout

        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:paddingBottom="8dip" >

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:background="@null"
            android:scaleType="fitCenter"
            android:src="@drawable/myimage" />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:background="@null"
            android:scaleType="fitCenter"
            android:src="@drawable/myimage" />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:background="@null"
            android:scaleType="fitCenter"
            android:src="@drawable/myimage" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:paddingBottom="8dip" >

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:background="@null"
            android:scaleType="fitCenter"
            android:src="@drawable/myimage" />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:background="@null"
            android:scaleType="fitCenter"
            android:src="@drawable/myimage" />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:background="@null"
            android:scaleType="fitCenter"
            android:src="@drawable/myimage" />
    </LinearLayout>

</LinearLayout>

如何设计上述布局？

Answer 1

创建三个linearlayouts，其方向设置为垂直和相等的布局权重。每个线性布局的子视图也必须具有相同的布局权重。将第一个和第三个linearlayouts的重力设置为center_vertical。

Answer 2

为什么不留下不必要的布局......？并使用以下内容......

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <LinearLayout
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="100dp"
            android:layout_height="55dp"
            android:orientation="vertical" >
        </LinearLayout>

        <LinearLayout
            android:layout_width="100dp"
            android:layout_height="75dp"
            android:orientation="vertical" >
        </LinearLayout>

        <LinearLayout
            android:layout_width="100dp"
            android:layout_height="95dp"
            android:orientation="vertical" >
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:orientation="vertical" >
        <LinearLayout
            android:layout_width="100dp"
            android:layout_height="55dp"
            android:orientation="vertical" >
        </LinearLayout>

        <LinearLayout
            android:layout_width="100dp"
            android:layout_height="75dp"
            android:orientation="vertical" >
        </LinearLayout>

        <LinearLayout
            android:layout_width="100dp"
            android:layout_height="95dp"
            android:orientation="vertical" >
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:orientation="vertical" >
        <LinearLayout
            android:layout_width="100dp"
            android:layout_height="55dp"
            android:orientation="vertical" >
        </LinearLayout>

        <LinearLayout
            android:layout_width="100dp"
            android:layout_height="75dp"
            android:orientation="vertical" >
        </LinearLayout>

        <LinearLayout
            android:layout_width="100dp"
            android:layout_height="95dp"
            android:orientation="vertical" >
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

Answer 3

如何延长ViewGroup？

如果您查看文档，则有一个示例，说明如何创建自定义子容器。

基本上，在您的布局中，您有以下规则：

孩子的重力垂直居中
对于奇数列，中间元素与从左到右垂直居中的线重叠
对于偶数列，您在该行上有n / 2个元素，而剩余的（n / 2）在同一行下面

如果您能够以更多的开发时间为代价来实现自定义布局，那么您将获得更好的结果，并且您要添加的元素数量无关紧要...将有一个可以管理不同情况的布局。

我建议您查看custom attributes，以便将您需要的属性直接集成到XML声明中。

Answer 4

这种布局实际上符合您的期望：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <!-- Center layout -->
    <LinearLayout
        android:id="@+id/llCenter"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_centerInParent="true"
        android:paddingBottom="8dp"
        android:orientation="vertical"
        >
        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:scaleType="fitCenter"
            android:src="@drawable/ic_launcher"
        />
        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:scaleType="fitCenter"
            android:src="@drawable/ic_launcher"
        />
        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:scaleType="fitCenter"
            android:src="@drawable/ic_launcher"
        />
        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:scaleType="fitCenter"
            android:src="@drawable/ic_launcher"
        />
    </LinearLayout>
    <!-- Left layout -->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@id/llCenter"
        android:paddingBottom="8dp"
        android:orientation="vertical"
        >
        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:scaleType="fitCenter"
            android:src="@drawable/ic_launcher"
        />
        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:scaleType="fitCenter"
            android:src="@drawable/ic_launcher"
        />
        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:scaleType="fitCenter"
            android:src="@drawable/ic_launcher"
        />
    </LinearLayout>
    <!-- Right layout -->
    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@id/llCenter"
        android:paddingBottom="8dp"
        android:orientation="vertical"
        >
        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:scaleType="fitCenter"
            android:src="@drawable/ic_launcher"
        />
        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:scaleType="fitCenter"
            android:src="@drawable/ic_launcher"
        />
        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:scaleType="fitCenter"
            android:src="@drawable/ic_launcher"
        />
    </LinearLayout>
</RelativeLayout>

结果：

enter image description here

实现此布局

4 个答案: