2x2 按钮网格布局
Posted
技术标签:
【中文标题】2x2 按钮网格布局【英文标题】:2x2 Button Grid layout 【发布时间】:2014-03-31 15:16:37 【问题描述】:我正在尝试创建一个包含 2x2 按钮网格的布局(总共 4 个)。我得到了以下内容,但它只在左上角创建了按钮网格。我希望按钮网格填满整个屏幕。
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tableLayout1"
android:layout_
android:layout_ >
<TableRow
android:id="@+id/tableRow1"
android:layout_
android:layout_ >
<Button
android:id="@+id/button1"
android:layout_
android:layout_ />
<Button
android:id="@+id/button2"
android:layout_
android:layout_ />
</TableRow>
<TableRow
android:id="@+id/tableRow2"
android:layout_
android:layout_ >
<Button
android:id="@+id/button3"
android:layout_
android:layout_ />
<Button
android:id="@+id/button4"
android:layout_
android:layout_ />
</TableRow>
【问题讨论】:
【参考方案1】:试试这个代码。
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tableLayout1"
android:layout_
android:layout_ >
<TableRow
android:id="@+id/tableRow1"
android:layout_
android:layout_
android:layout_weight="1" >
<Button
android:id="@+id/button1"
android:layout_
android:layout_
android:layout_weight="1" />
<Button
android:id="@+id/button1"
android:layout_
android:layout_
android:layout_weight="1" />
</TableRow>
<TableRow
android:id="@+id/tableRow1"
android:layout_
android:layout_
android:layout_weight="1" >
<Button
android:id="@+id/button1"
android:layout_
android:layout_
android:layout_weight="1" />
<Button
android:id="@+id/button1"
android:layout_
android:layout_
android:layout_weight="1" />
</TableRow>
</TableLayout>
你应该为按钮使用权重
【讨论】:
我也非常接近回答这个问题:( 谢谢!很干净【参考方案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_
android:layout_ >
<View
android:id="@+id/centerVerticalShim"
android:layout_
android:layout_
android:layout_centerVertical="true"
android:visibility="invisible" />
<View
android:id="@+id/centerHorizontalShim"
android:layout_
android:layout_
android:layout_centerHorizontal="true"
android:visibility="invisible" />
<TextView
android:layout_
android:layout_
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_
android:layout_
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_
android:layout_
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_
android:layout_
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>
上面的布局结果如下:
【讨论】:
这个答案非常好,更快更有效。应该是公认的答案。【参考方案3】:我希望这是你正在寻找的:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tableLayout1"
android:layout_
android:layout_
android:stretchColumns="*" >
<TableRow
android:id="@+id/tableRow1"
android:layout_
android:layout_
android:layout_weight="1" >
<Button
android:id="@+id/button1"
android:layout_
android:layout_ />
<Button
android:id="@+id/button2"
android:layout_
android:layout_ />
</TableRow>
<TableRow
android:id="@+id/tableRow2"
android:layout_
android:layout_
android:layout_weight="1" >
<Button
android:id="@+id/button3"
android:layout_
android:layout_ />
<Button
android:id="@+id/button4"
android:layout_
android:layout_ />
</TableRow>
</TableLayout>
【讨论】:
【参考方案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_
android:layout_>
<GridLayout
android:id="@+id/gridLayout"
android:layout_
android:layout_
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>
【讨论】:
以上是关于2x2 按钮网格布局的主要内容,如果未能解决你的问题,请参考以下文章