2

我有一个 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>
4

2 回答 2

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

于 2014-02-18T22:42:18.120 回答
0

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

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

于 2014-02-18T18:33:35.433 回答