2种方式调整GridLayout布局的某一列宽度,使其撑满剩余空间。

使用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,变到左上角;而且此时运行起来,也看不到控件。这的确让当时的我,懵逼了一会。于是大胆的将所有的行设置完,才惊现出预期的效果。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值