Question

我正在创建一个应用程序，该应用程序将在启动时显示GridLayout，并且在点击任何切片后，用户将转到新的Activity。我想让布局看起来像这样

Sketch Layout

我想知道如何使布局看起来像这样。我需要2 TextViews - 1大和小1我希望我的盒子总是形成矩形（在平板电脑上它看起来像5x2，在手机上它将是2x5）并留下尽可能少的空白区域。

我正在考虑制作一个自定义View来填充GridLayout，但我不确定如何使这种布局成为可能。如果有人可以分享链接或示例代码来创建类似的内容，我将感激不尽。

Answer 1

根据您正在做的事情，您可以简单地获得4个RelativeLayouts。例如：

<GridLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center_horizontal">

    <RelativeLayout
        android:layout_width="188dp"
        android:layout_height="186dp"
        android:layout_row="0"
        android:layout_column="0">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="Large Text"
            android:id="@+id/textView"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="23dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="Small Text"
            android:id="@+id/textView2"
            android:layout_centerVertical="true"
            android:layout_centerHorizontal="true" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="188dp"
        android:layout_height="186dp"
        android:layout_row="0"
        android:layout_column="1" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="Large Text"
            android:id="@+id/textView3"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="23dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="Small Text"
            android:id="@+id/textView4"
            android:layout_centerVertical="true"
            android:layout_centerHorizontal="true" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="188dp"
        android:layout_height="186dp"
        android:layout_row="1"
        android:layout_column="0" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="Large Text"
            android:id="@+id/textView5"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="23dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="Small Text"
            android:id="@+id/textView6"
            android:layout_centerVertical="true"
            android:layout_centerHorizontal="true" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="188dp"
        android:layout_height="186dp"
        android:layout_row="1"
        android:layout_column="1" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="Large Text"
            android:id="@+id/textView7"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="23dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="Small Text"
            android:id="@+id/textView8"
            android:layout_centerVertical="true"
            android:layout_centerHorizontal="true" />
    </RelativeLayout>

</GridLayout>

它适合您的示例，但仅适用于一个屏幕尺寸。如果你想动态地设计这个设计，你需要使用一个函数，如下所示：

public void fillview(android.support.v7.widget.GridLayout gl)
{
    Button buttontemp;

//Stretch buttons
int idealChildWidth = (int) ((gl.getWidth()-20*gl.getColumnCount())/gl.getColumnCount());
for( int i=0; i< gl.getChildCount();i++)
{
    buttontemp = (Button) gl.getChildAt(i);
    buttontemp.setWidth(idealChildWidth);
}
}

点击here了解有关此主题的更多信息。 :)

但是，如果您想使用除GridLayout之外的其他内容，则LinearLayouts可以很好地满足您的需求：

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:weightSum="1">

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="Large Text"
            android:id="@+id/textView"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_marginLeft="38dp"
            android:layout_marginStart="38dp"
            android:layout_marginTop="31dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="Small Text"
            android:id="@+id/textView2"
            android:layout_centerVertical="true"
            android:layout_alignRight="@+id/textView"
            android:layout_alignEnd="@+id/textView" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="Large Text"
            android:id="@+id/textView3"
            android:layout_alignTop="@+id/textView"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true"
            android:layout_marginRight="50dp"
            android:layout_marginEnd="50dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="Small Text"
            android:id="@+id/textView4"
            android:layout_alignTop="@+id/textView2"
            android:layout_alignRight="@+id/textView3"
            android:layout_alignEnd="@+id/textView3" />
    </RelativeLayout>
</LinearLayout>

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="Large Text"
            android:id="@+id/textView5"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_marginLeft="38dp"
            android:layout_marginStart="38dp"
            android:layout_marginTop="31dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="Small Text"
            android:id="@+id/textView6"
            android:layout_centerVertical="true"
            android:layout_alignRight="@+id/textView5"
            android:layout_alignEnd="@+id/textView5" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="Large Text"
            android:id="@+id/textView7"
            android:layout_alignTop="@+id/textView5"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true"
            android:layout_marginRight="50dp"
            android:layout_marginEnd="50dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="Small Text"
            android:id="@+id/textView8"
            android:layout_alignTop="@+id/textView6"
            android:layout_alignRight="@+id/textView7"
            android:layout_alignEnd="@+id/textView7" />
    </RelativeLayout>
    </LinearLayout>
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.33">
</LinearLayout>

祝你好运，我希望能提供帮助。

GridLayout设计自定义网格

1 个答案: