Question

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

对于排在第一行的我是第6行，第二行我给每个textView一个2的colspan。

我希望这会使一切成比例。但是，它看起来像这样：

enter image description here

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

enter image description here

如何将我的第三行中的三列与屏幕空间相对应，使得第一列位于左侧，第二列位于中央，第三列位于右侧？

到目前为止我所拥有的是：

<?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>

或者，您可以尝试普通边框（更容易处理）：

border.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>

dimens.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来破解重量属性，否则你无法使用它来“超出空间”。。
“一般情况下，不可能配置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中 - 我认为它应该可以工作，但我之前没有使用过它。我很想知道这是否也有效。

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

2 个答案: