使用GridLayout布局,可以方便的实现对齐效果。有时候我们放置了好几列,如果屏幕还没有撑满,那么就想用某一列撑满剩余的空间。撑满剩余空间有2种方式。分别是使用layout_gravity或layout_columnWeight属性。
新建一个GridLayout布局页面,比如注册登录页面或者资料编辑页面,都是2列布局,可采用GridLayout布局。如下图所示,是我们创建的2列布局的GridLayout效果。
布局代码如下。
<GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="true"
android:focusableInTouchMode="true"
android:columnCount="2">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="56dp"
android:gravity="center_vertical"
android:paddingLeft="16dp"
android:text="姓名" />
<EditText
android:id="@+id/editText6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:gravity="center_vertical"
android:hint="请输入姓名"
android:inputType="textPersonName"
android:paddingRight="16dp" />
<TextView
android:id="@+id/textView9"
android:layout_width="wrap_content"
android:layout_height="56dp"
android:gravity="center_vertical"
android:paddingLeft="16dp"
android:text="电话" />
<EditText
android:id="@+id/editText7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:gravity="center_vertical"
android:hint="只能输入数字电话号码"
android:inputType="textPersonName"
android:paddingRight="16dp" />
<TextView
android:id="@+id/textView10"
android:layout_width="wrap_content"
android:layout_height="56dp"
android:gravity="center_vertical"
android:paddingLeft="16dp"
android:text="VIP会员" />
<CheckBox
android:id="@+id/checkBox2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="VIP" />
</GridLayout>
现在第2列的输入框并没有占满剩余的空间,我们想让输入框自动的占满剩余空间。那么需要调整布局控件属性。
1、使用layout_gravity属性。
设置右边第2列编辑框的layout_gravity属性,将其值设置为fill或者fill_horizontal,即可。
注意:同时要将该控件的layout_width属性设置为wrap_content,千万不能设置为match_parent,否则无效。
如下图所示,是撑满剩余空间后的设计视图。
其中一个编辑框的代码如下。添加了android:layout_gravity="fill"这行代码。
<EditText
android:id="@+id/editText7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill"
android:ems="10"
android:gravity="center_vertical"
android:hint="只能输入数字电话号码"
android:inputType="textPersonName"
android:paddingRight="16dp" />
2、使用layout_columnWeight属性。
必须要引入v7兼容包,否则在属性视图里面找不到这个属性。我们将布局类由GridLayout修改为:android.support.v7.widget.GridLayout,代码如下。还可以看到columnCount属性的命名空间,必须修改成app而非android。
<android.support.v7.widget.GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="true"
android:focusableInTouchMode="true"
app:columnCount="2">
</android.support.v7.widget.GridLayout>
此时选中GridLayout视图里面的子控件后,在属性面板中就可以找到layout_columnWeight属性了。我们可以搜索到,如下图所示。
把所有行的第2列的layout_columnWeight属性都设置为1,第1列的layout_columnWeight要留空,不能设置。因为只有第2列设置了weight权重,那么第2列就会填充剩余空间。
设置后,运行的效果图如下。
GridLayout的布局代码如下。
<android.support.v7.widget.GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="true"
android:focusableInTouchMode="true"
app:columnCount="2">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="56dp"
android:gravity="center_vertical"
android:paddingLeft="16dp"
android:text="姓名" />
<EditText
android:id="@+id/editText6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:gravity="center_vertical"
android:hint="请输入姓名"
android:inputType="textPersonName"
android:paddingRight="16dp"
app:layout_columnWeight="1" />
<TextView
android:id="@+id/textView9"
android:layout_width="wrap_content"
android:layout_height="56dp"
android:gravity="center_vertical"
android:paddingLeft="16dp"
android:text="电话" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:gravity="center_vertical"
android:hint="只能输入数字电话号码"
android:inputType="textPersonName"
android:paddingRight="16dp"
app:layout_columnWeight="1" />
<TextView
android:id="@+id/textView10"
android:layout_width="wrap_content"
android:layout_height="56dp"
android:gravity="center_vertical"
android:paddingLeft="16dp"
android:text="VIP会员" />
<CheckBox
android:id="@+id/checkBox2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="VIP"
app:layout_columnWeight="1" />
</android.support.v7.widget.GridLayout>
懵逼的注意:在设置layout_columnWeight属性时,只有将所有行的该列都设置为1后,设计视图才会变成我们预期的效果。如果单单只是设置了其中几行的layout_columnWeight属性,那么设置后,该控件会立马缩成宽高都是0,变到左上角;而且此时运行起来,也看不到控件。这的确让当时的我,懵逼了一会。于是大胆的将所有的行设置完,才惊现出预期的效果。