1

我正在尝试使用 GridLayout 在 android 上模仿这种设计：

在此处输入图像描述

我想我已经使用下面的代码完成了大部分工作：

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

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

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

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

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

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

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

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

</GridLayout>

但是，当我在模拟器中运行它时，它看起来像这样：

在此处输入图像描述

请注意，它在左右两侧留下了太多空间。

问题

  • 如何配置网格布局，使其占据左右两侧的大部分屏幕（就像上面的示例一样）。

  • 如何更改屏幕背景颜色 - 现在它是黑​​色的，我想将其更改为另一种颜色。

4

2 回答 2

0

对于GridLayout，替换这个...

android:layout_width="wrap_content"

和...

android:layout_width="fill_parent"

如下...

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:columnCount="8"
    android:rowCount="4"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="10dp"
    android:orientation="horizontal"
    android:background="@drawable/rounded">
于 2014-02-18T17:53:37.263 回答
0

@Anthony - 您没有在编写的代码中使用 GridLayout 的强大功能和精髓。因为您已经手动为视图分配了填充，以使它们出现在第一个屏幕中，这对于任何其他布局也很有可能。如下所示。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center" >

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"

    android:layout_height="0dp"
    android:layout_weight="2"
    android:text="Some Text Here"
    android:textAppearance="?android:attr/textAppearanceLarge" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1" >

    <TextView
    android:id="@+id/textView1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="2"
    android:text="16"
    android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
    android:id="@+id/textView1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="2"
    android:text="17"
    android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
    android:id="@+id/textView1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="2"
    android:text="18"
    android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1" >

    <TextView
    android:id="@+id/textView1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="2"
    android:text="Text1"
    android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
    android:id="@+id/textView1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="2"
    android:text="Text2"
    android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
    android:id="@+id/textView1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="2"
    android:text="Text3"
    android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>

而且，GridLayout 是关于行和列的。因此，如果您希望您的视图被放置以便更充分地使用它，您可以提供您的视图应该放置的行和列位置，其顺序及其其他属性将加起来。这是一个链接。

试试这个，我相信你会更好地理解它。快乐编码。:)

于 2014-02-18T18:30:27.670 回答