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


  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过设置每个单元格的列宽比例来实现GridLayout中2列宽度不同的效果。例如,如果第一列宽度是第二列的两倍,可以将比例设置为2:1。 以下是一个简单的示例代码,演示如何在GridLayout中实现不同列宽度: ``` <GridLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:columnCount="2" android:rowCount="2" android:orientation="horizontal" android:useDefaultMargins="true" > <TextView android:text="Column 1" android:layout_columnWeight="2" android:layout_gravity="fill_horizontal" /> <TextView android:text="Column 2" android:layout_columnWeight="1" android:layout_gravity="fill_horizontal" /> <TextView android:text="Column 1" android:layout_columnWeight="2" android:layout_gravity="fill_horizontal" /> <TextView android:text="Column 2" android:layout_columnWeight="1" android:layout_gravity="fill_horizontal" /> </GridLayout> ``` 在这个例子中,我们创建了一个包含2列和2行的GridLayout。我们使用`android:layout_columnWeight`属性为第一列设置了一个权重值为2,而第二列的权重值为1。这意味着第一列将会占据布局中两倍的宽度,而第二列将占据它的一半宽度。 注意,我们还设置了`android:layout_gravity="fill_horizontal"`属性,以确保每个单元格中的内容水平填充整个单元格。 这个例子只是一个简单的演示,你可以根据你的需求设置不同的列宽度比例来创建更复杂的布局
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值