新推出的GridLayout网格布局
新推出的GridLayout网格布局
本期主要学习的是网格布局是Android 4.0新增的布局，和前面所学的TableLayout表格布局 有点类似，不过他有很多前者没有的东西，也更加好用。
一、认识GridLayout
网格布局实现了控件的交错显示，能够避免因布局嵌套对设备性能的影响，更利于自由布局的开发。网格布局用一组无限细的直线将绘图区域分成行、列和单元，并指定控件的显示区域和控件在该区域的显示方式
下表显示了 GridLayout常用的XML属性及相关方法说明。
XML属性 | 相关方法 | 说明 |
|---|---|---|
android:alignmentMode | SetAlignmentMode(int) | 设置该布局管理器采用的对齐模式 |
android:columnCount | setColumnCount(int) | 设置该网格的列数量 |
android:columnOrderPreserved | setColumnOrderPreserved(boolean) | 设置该网格容器知否保留列序号 |
android:rowCount | setRowCount(int) | 设置该网格的行数量 |
android:rowOrderPreserved | setRowOrderPreserved(boolean) | 设置该网格容器是否保留行序号 |
android:useDefaultMardins | setUseDefaultMardins(boolean) | 设置该布局管理器是否使用默认的页边距 |
为了控制GridLayout布局容器中各子组件的布局分布，GridLayout提供了一个内部类： GridLayout.LayoutParams，该类提供了大量的XML属性来控制GridLayout布局容器中子组件的布局分布。
下表显示了 GridLayout.LayoutParams常用的XML属性及相关方法。
XML属性 | 相关方法 | 说明 |
|---|---|---|
android:layout_column | 设置该子组件在GridLayout的第几列 | |
android:layout_columnSpan | 设置该子组件在GridLayout横向跨几列 | |
android:layout_gravity | setGravity(int) | 设置该子组件采用何种方式占据该网格的空间 |
android:layout_row | 设置该子组件在GridLayout的第几行 | |
android:layout_rowSpan | 设置该子组件在GridLayout纵向上跨几行 |
二、示例
接下来通过一个简单的示例程序来学习GridLayout的使用用法。
同样使用WidgetSample工程，继续使用app/main/res/layout/目录下的activity_main.xml文件，在其中填充如下代码片段：
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="4"
android:rowCount="7">
<TextView
android:id="@+id/result_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_columnSpan="4"
android:background="#eee"
android:text="0"
android:textColor="#000"
android:textSize="50sp" />
<Button
android:id="@+id/clear_btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_columnSpan="4"
android:text="Clear" />
<Button
android:id="@+id/one_btn"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:text="1" />
<Button
android:id="@+id/two_btn"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:text="2" />
<Button
android:id="@+id/three_btn"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:text="3" />
<Button
android:id="@+id/devide_btn"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:text="/" />
<Button
android:id="@+id/four_btn"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:text="4" />
<Button
android:id="@+id/five_btn"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:text="5" />
<Button
android:id="@+id/six_btn"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:text="6" />
<Button
android:id="@+id/multiply_btn"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:text="×" />
<Button
android:id="@+id/seven_btn"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:text="7" />
<Button
android:id="@+id/eight_btn"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:text="8" />
<Button
android:id="@+id/nine_btn"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:text="9" />
<Button
android:id="@+id/minus_btn"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:text="-" />
<Button
android:id="@+id/zero_btn"
android:layout_columnSpan="2"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:layout_rowWeight="1"
android:text="0" />
<Button
android:id="@+id/point_btn"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:text="." />
<Button
android:id="@+id/plus_btn"
android:layout_columnWeight="1"
android:layout_rowSpan="2"
android:layout_rowWeight="1"
android:text="+" />
<Button
android:id="@+id/equal_btn"
android:layout_columnSpan="3"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:text="=" />
</GridLayout>运行程序，可以看到下图所示界面效果：
到此，关于Android中的六种界面布局已经学习完毕，你都掌握了吗？一定要多动手练习哦，从下期开始一起来学习Android事件处理。
腾讯云开发者
