android-layout - 有没有办法将网格布局中的三列与一行成比例对齐？

Question

我有一个包含 6 列的网格布局。

对于第一行，我给它的 colspan 为 6。对于第二行，我给每个 textView 的 colspan 为 2。

我希望这能让一切成比例。然而，它看起来像这样:

但我希望它看起来像这样:

如何使第二行的三列与屏幕空间成比例，使得第一列在左侧，第二列在中间，第三列在右侧？

我目前的情况是这样的:

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:columnCount="6"
    android:rowCount="4"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="10dp"
    android:orientation="horizontal"
    android:layout_marginRight="10dp"
    android:layout_marginLeft="10dp"
    android:background="@drawable/rounded">

    <TextView
        android:layout_gravity="center_horizontal"
        android:text="Some Text"
        android:textStyle="bold"
        android:textColor="#000000"
        android:textSize="30dp"
        android:textAlignment="center"
        android:layout_columnSpan="6"
        android:paddingTop="10dp"
        android:paddingBottom="10dp"
        />



    <TextView
        android:text="96"
        android:textStyle="bold"
        android:paddingRight="70dp"
        android:textColor="#000000"
        android:textSize="18dp"
        android:layout_columnSpan="2"
        android:paddingLeft="10dp"
        android:paddingBottom="5dp"/>

    <TextView
        android:text="107"
        android:textStyle="bold"
        android:paddingRight="70dp"
        android:layout_columnSpan="2"
        android:textSize="18dp"
        android:textColor="#000000"/>

    <TextView
        android:text="62"
        android:textStyle="bold"
        android:layout_columnSpan="2"
        android:textSize="18dp"
        android:paddingRight="10dp"
        android:textColor="#000000"/>

    <TextView
        android:text="Text 1"
        android:paddingRight="20dp"
        android:paddingLeft="10dp"
        android:layout_columnSpan="2"
        android:textSize="18dp"
        android:textColor="#ff565656"
        android:paddingBottom="10dp"/>

    <TextView
        android:text="Text 2"
        android:paddingRight="70dp"
        android:layout_columnSpan="2"
        android:textSize="18dp"
        android:textColor="#ff565656"/>

    <TextView
        android:text="Text 3"
        android:textColor="#ff565656"
        android:layout_columnSpan="2"
        android:textSize="18dp"
        android:paddingRight="10dp"/>

</GridLayout>

Answer 1

我已经设法得到与您发布的内容类似的内容。不过，我正在使用 View hack 来获得那个微妙的分隔线。

布局:

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:background="@drawable/element_bg"
    android:columnCount="3"
    android:orientation="horizontal"
    android:rowCount="4" >

    <!-- Row 1 -->

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_columnSpan="3"
        android:layout_gravity="center_horizontal"
        android:gravity="center"
        android:paddingBottom="10dp"
        android:paddingTop="10dp"
        android:text="Some Text"
        android:textAlignment="center"
        android:textColor="#000000"
        android:textSize="30sp"
        android:textStyle="bold" />

    <!-- Row 2 -->

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_columnSpan="3"
        android:background="@android:color/darker_gray" />

    <!-- Row 3 -->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <!-- Column 1 -->

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="left"
            android:layout_weight="1"
            android:orientation="vertical"
            android:padding="@dimen/row_padding" >

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="107"
                android:textColor="#000000"
                android:textSize="18sp"
                android:textStyle="bold" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Tweets"
                android:textColor="#ff565656"
                android:textSize="18sp" />
        </LinearLayout>

        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="@android:color/darker_gray" />

        <!-- Column 2 -->

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:orientation="vertical"
            android:padding="@dimen/row_padding" >

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="96"
                android:textColor="#000000"
                android:textSize="18sp"
                android:textStyle="bold" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Following"
                android:textColor="#ff565656"
                android:textSize="18sp" />
        </LinearLayout>

        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="@android:color/darker_gray" />

        <!-- Column 3 -->

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:layout_weight="1"
            android:orientation="vertical"
            android:padding="@dimen/row_padding" >

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="56"
                android:textColor="#000000"
                android:textSize="18sp"
                android:textStyle="bold" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Followers"
                android:textColor="#ff565656"
                android:textSize="18sp" />
        </LinearLayout>
    </LinearLayout>

    <!-- Row 4 -->

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_columnSpan="3"
        android:background="@android:color/darker_gray" />

</GridLayout>

元素_bg.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <solid android:color="#ffffff" />

    <corners android:radius="4dp" />

</shape>

或者，您可以尝试普通边框(更容易处理):

边框.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
   <solid android:color="#ffffff" />
   <corners android:radius="4dp"/>
   <stroke android:width="1dip" android:color="@android:color/darker_gray"/>
</shape>

维度.xml。您可以根据需要调整填充值。

<resources>

    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>
    <dimen name="row_padding">15dp</dimen>

</resources>

对于最后一个，您可能会让元素重叠它们的边界，在这些情况下尝试一些边距。

附带说明一下，您可能想使用 TableLayout，因为 GridLayout 只能从 API 14+ 使用，除非您像我那样使用 LinearLayout 来破解 weight 属性，否则您无法使用这种“多余空间” .
“一般来说，因此不可能配置 GridLayout 以在多个组件之间分配多余空间。[...] 为了完全控制行或列中的多余空间分布；使用 LinearLayout subview 将组件保存在关联的细胞群。” - http://developer.android.com/reference/android/widget/GridLayout.html

表 - http://developer.android.com/guide/topics/ui/layout/grid.html