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

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>

element_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 子视图将组件保存在关联的细胞群。” - http://developer.android.com/reference/android/widget/GridLayout.html

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

Answer 2

一个肯定可行的选择是将每个 TextView 放在具有属性 android:layout_weight="1" 的 LinearLayout 中，并且会自动为每个 LinearLayout（以及每个相应的 TextView）分配相等的空间。

虽然，我不能肯定地说，另一种选择是直接将属性 android:layout_weight="1" 添加到每个 TextView - 我认为它应该可以工作，但我以前没有使用过这个。我很想看看这是否也有效。