2x2 按钮网格布局

Question

我正在尝试创建一个包含 2x2 按钮网格（总共 4 个）的布局。 我有以下但它只在左上角创建按钮网格。 我希望按钮网格填满整个屏幕。

<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tableLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >

<TableRow
    android:id="@+id/tableRow1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <Button
        android:id="@+id/button1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

    <Button
        android:id="@+id/button2"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />
</TableRow>

<TableRow
    android:id="@+id/tableRow2"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <Button
        android:id="@+id/button3"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

    <Button
        android:id="@+id/button4"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />
</TableRow>

Answer 1

试试这个代码。

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tableLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >

        <Button
            android:id="@+id/button1"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1" />

        <Button
            android:id="@+id/button1"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1" />
    </TableRow>

    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >

        <Button
            android:id="@+id/button1"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1" />

        <Button
            android:id="@+id/button1"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1" />
    </TableRow>

</TableLayout>

你应该对按钮使用权重

Answer 2

我建议您使用简单的 RelativeLayout 而不会陷入使用权重的麻烦（使用 LinearLayout、TableLayout 或两者的组合）。 这是一个示例布局，展示了如何仅使用 RelativeLayout 来实现覆盖整个屏幕的 2 X 2 网格，从而使其更高效、更快。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<View
    android:id="@+id/centerVerticalShim"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_centerVertical="true"
    android:visibility="invisible" />

<View
    android:id="@+id/centerHorizontalShim"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_centerHorizontal="true"
    android:visibility="invisible" />

<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@+id/centerVerticalShim"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_toLeftOf="@+id/centerHorizontalShim"
    android:background="#42A5F5"
    android:gravity="center"
    android:text="@string/one"
    android:textColor="#FFFFFF" >
</TextView>

<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@+id/centerVerticalShim"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:layout_toRightOf="@+id/centerHorizontalShim"
    android:background="#EF5350"
    android:gravity="center"
    android:text="@string/two"
    android:textColor="#FFFFFF" >
</TextView>

<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_below="@+id/centerVerticalShim"
    android:layout_toLeftOf="@+id/centerHorizontalShim"
    android:background="#66BB6A"
    android:gravity="center"
    android:text="@string/three"
    android:textColor="#FFFFFF" >
</TextView>

<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_below="@+id/centerVerticalShim"
    android:layout_toRightOf="@+id/centerHorizontalShim"
    android:background="#5C6BC0"
    android:gravity="center"
    android:text="@string/four"
    android:textColor="#FFFFFF" >
</TextView></RelativeLayout>

上面的布局结果如下：

Answer 3

我希望这就是你正在寻找的：

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tableLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:stretchColumns="*" >

    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1" >

        <Button
            android:id="@+id/button1"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />

        <Button
            android:id="@+id/button2"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />
    </TableRow>

    <TableRow
        android:id="@+id/tableRow2"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1" >

        <Button
            android:id="@+id/button3"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />

        <Button
            android:id="@+id/button4"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />
    </TableRow>

</TableLayout>

Answer 4

还有一种方法。 尝试这个！！

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <GridLayout
        android:id="@+id/gridLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:columnCount="2"
        android:rowCount="2">

        <Button
            android:id="@+id/button1"
            android:layout_gravity="fill"
            android:layout_rowWeight="1"
            android:layout_columnWeight="1"
            android:text="Button 1" />
        <Button
            android:id="@+id/button2"
            android:layout_gravity="fill"
            android:layout_rowWeight="1"
            android:layout_columnWeight="1"
            android:text="Button 2" />
        <Button
            android:id="@+id/button3"
            android:layout_gravity="fill"
            android:layout_rowWeight="1"
            android:layout_columnWeight="1"
            android:text="Button 3" />
        <Button
            android:id="@+id/button4"
            android:layout_gravity="fill"
            android:layout_rowWeight="1"
            android:layout_columnWeight="1"
            android:text="Button 4" />

    </GridLayout>

</android.support.constraint.ConstraintLayout>