GridLayout 设计自定义网格

Question

我正在制作一个应用程序，该应用程序在启动时将具有 GridLayout，在单击任何图块后，用户将转到新的 Activity。我想让布局看起来像这样

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

我正在考虑制作自定义 View 来填充 GridLayout，但我不确定如何使这种布局成为可能。如果有人可以分享 link 或示例代码来创建这样的东西，我将不胜感激。

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 设计自定义网格

GridLayout designing custom grids

android

android-custom-view

grid-layout