华丽丽的GridLayout－使用案例

最新推荐文章于 2024-07-26 09:57:08 发布

翼德兄

最新推荐文章于 2024-07-26 09:57:08 发布

阅读量2k

点赞数 2

文章标签： GridLayout Space 网格 Android

本文链接：https://blog.csdn.net/yide55/article/details/51262329

版权

最近在阅读一份开源代码时，发现有一个页面中并不是明显的网格样式，但layout里的根控件用的是GridLayout，才发现原来它是可以这样用的，原来不一定拘泥于页面布局是明显的网格形式，而是需要我们来把明显不是网格样式的布局来当成网格看待。–这里大家可能不一定立马理解，不急，先继续看看后面的内容。

因为RelativeLayout和加了weight的Linearlayout都存的onMeasure两次的坑，如果子布局很复杂的情况下，，对界面的绘制性能会产生很大的影响，，直接的影响就是inflate方法耗时明显。这个问题困扰了很久，一直没有一个完美的解决办法，直到发现GridLayout可以一定程度上替代它们。
GridLayout有三个优点：
1）不存在measure多次的问题
2）能像RelativeLayout一样解决嵌套过深的问题
3）能够较简单的保证控件之间的对齐
我碰到有些四五层深度的布局，改用GridLayout后，子控件一层即解决，跟RelativeLayout一样，这就是为什么给它加上‘华丽丽’的原因。

下面以一个实例来验证，并提供使用参考：

先看这样一张图，我将会用GridLayout做为根控件嵌套一层来实现这种布局：
这里写图片描述

实现代码：

<?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:background="#ffffff"
            android:columnCount="5"
            android:orientation="horizontal">

    <include
        layout="@layout/titlebar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/d_k2_title_h_96px"
        android:layout_columnSpan="5"/>

    <View
        android:layout_height="10dp"
        android:layout_columnSpan="5"
        android:background="#f3f3f3"/>

    <ImageView
        android:id="@+id/logo_image"
        android:layout_width="55dp"
        android:layout_height="55dp"
        android:layout_centerVertical="true"
        android:contentDescription="@string/app_name"
        android:padding="10dp"/>

    <TextView
        android:id="@+id/name_text"
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:maxLength="20"
        android:gravity="center_vertical"
        android:text="Email:"
        android:textColor="@color/textcolor_default"
        android:textSize="@dimen/textsize_30px"/>

    <TextView
        android:layout_gravity="center_vertical|fill"
        android:clickable="true"
        android:layout_columnSpan="2"
        android:drawablePadding="5dp"
        android:drawableRight="@drawable/icon_arrow_right"
        android:gravity="center_vertical|right"
        android:onClick="bindClk"
        android:padding="10dp"
        android:text="change"
        android:textColor="@color/textcolor_focus"
        android:textSize="@dimen/textsize_28px"/>

    <View
        android:layout_height="10dp"
        android:layout_columnSpan="5"
        android:background="#f3f3f3"/>

    <TextView
        android:layout_width="65dp"
        android:layout_height="45dp"
        android:gravity="center"
        android:text="Email:"
        android:textColor="#333333"
        android:textSize="@dimen/textsize_24px"/>


    <Button
        android:layout_width="50dp"
        android:layout_height="25dp"
        android:layout_gravity="center_vertical"
        android:background="@drawable/shape_stoke_ff6c00"
        android:text="Email:"
        android:textColor="@color/textcolor_focus"
        android:textSize="@dimen/textsize_28px"/>


    <EditText
        android:layout_columnSpan="3"
        android:layout_gravity="fill"
        android:background="@null"
        android:digits="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLIMNOPQRSTUVWXYZ"
        android:gravity="center_vertical"
        android:hint="Email:"
        android:maxLength="5"
        android:textColor="@color/textcolor_main"
        android:textSize="@dimen/textsize_28px"/>

    <View
        android:layout_height="10dp"
        android:layout_columnSpan="5"
        android:background="#f3f3f3"/>

    <TextView
        android:layout_width="65dp"
        android:layout_height="45dp"
        android:gravity="center"
        android:text="Email:"
        android:textColor="#333333"
        android:textSize="@dimen/textsize_24px"/>

    <ImageView
        android:layout_width="22dp"
        android:layout_height="22dp"
        android:layout_gravity="center_vertical"
        android:onClick="onWenHaoClk"
        android:src="@drawable/car_ques"/>

    <EditText
        android:layout_columnSpan="3"
        android:layout_gravity="fill"
        android:background="@null"
        android:digits="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLIMNOPQRSTUVWXYZ"
        android:gravity="center_vertical"
        android:hint="Email:"
        android:maxLength="6"
        android:textColor="@color/textcolor_main"
        android:textSize="@dimen/textsize_28px"/>

    <View
        android:layout_height="10dp"
        android:layout_columnSpan="5"
        android:background="#f3f3f3"/>

    <TextView
        android:layout_width="62.5dp"
        android:layout_height="45dp"
        android:gravity="center"
        android:text="Email:"
        android:textColor="#333333"
        android:textSize="@dimen/textsize_24px"/>

    <ImageView
        android:layout_width="22dp"
        android:layout_height="22dp"
        android:layout_gravity="center_vertical"
        android:src="@drawable/car_ques"/>

    <EditText
        android:layout_gravity="fill"
        android:layout_columnSpan="3"
        android:layout_marginRight="@dimen/margin_edge"
        android:background="@null"
        android:digits="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLIMNOPQRSTUVWXYZ"
        android:gravity="center_vertical"
        android:hint="Email:"
        android:maxLength="6"
        android:textColor="@color/textcolor_main"
        android:textSize="@dimen/textsize_28px"/>

    <View
        android:layout_height="10dp"
        android:layout_columnSpan="5"
        android:background="#f3f3f3"/>

    <TextView
        android:layout_width="62.5dp"
        android:layout_height="45dp"
        android:gravity="center"
        android:text="Email:"
        android:textColor="#333333"
        android:textSize="@dimen/textsize_24px"/>

    <TextView
        android:layout_columnSpan="2"
        android:layout_marginLeft="@dimen/margin_edge"
        android:layout_gravity="fill"
        android:paddingRight="10dp"
        android:background="@null"
        android:clickable="true"
        android:drawableRight="@drawable/carset_corner"
        android:gravity="center_vertical"
        android:hint="Email:"
        android:textColor="@color/textcolor_main"
        android:textSize="@dimen/textsize_28px"/>


    <TextView
        android:layout_columnSpan="2"
        android:layout_marginRight="@dimen/margin_edge"
        android:background="@null"
        android:clickable="true"
        android:gravity="center_vertical"
        android:hint="Email:"
        android:textColor="@color/textcolor_main"
        android:textSize="@dimen/textsize_28px"
        android:visibility="visible"/>

    <TextView
        android:layout_width="62.5dp"
        android:layout_height="45dp"
        android:gravity="center"
        android:text="Email:"
        android:textColor="#333333"
        android:textSize="@dimen/textsize_24px"/>

    <TextView
        android:layout_columnSpan="4"
        android:layout_gravity="fill"
        android:layout_marginLeft="@dimen/margin_edge"
        android:layout_marginRight="@dimen/margin_edge"
        android:layout_weight="1"
        android:background="@null"
        android:clickable="true"
        android:gravity="center_vertical"
        android:hint="Email:"
        android:textColor="@color/textcolor_main"
        android:textSize="@dimen/textsize_28px"/>


    <TextView
        android:layout_width="62.5dp"
        android:layout_height="45dp"
        android:gravity="center"
        android:text="Email:"
        android:textColor="#333333"
        android:textSize="@dimen/textsize_24px"/>

    <TextView
        android:layout_columnSpan="4"
        android:layout_gravity="fill"
        android:layout_marginLeft="10dp"
        android:background="@null"
        android:clickable="true"
        android:gravity="center_vertical"
        android:hint="Email:"
        android:layout_marginRight="30dp"
        android:drawableRight="@drawable/carset_corner"
        android:textColor="@color/textcolor_main"
        android:textSize="@dimen/textsize_28px"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_columnSpan="5"
        android:layout_marginLeft="@dimen/margin_edge"
        android:layout_marginTop="@dimen/margin_edge"
        android:drawableLeft="@drawable/bulb"
        android:gravity="center_vertical"
        android:text="Email:"
        android:textColor="#666666"
        android:textSize="@dimen/textsize_24px"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:layout_columnSpan="5"
        android:layout_gravity="bottom"
        android:background="@color/color_main"
        android:gravity="center"
        android:onClick="saveClk"
        android:text="save"
        android:textColor="#ffffff"
        android:textSize="@dimen/textsize_30px"/>
</GridLayout>

再上一张显示布局边界的图让大家理解我的布局思路：
这里写图片描述

这里有个技巧，如果你开发中碰到类似问题可以留意下：
虽然这里横向上可以明显看成是三个控件，也就是可能会分成三列，但是为了对齐和布局方便，拆分更多列可以更好的控制布局显示达到需要的效果。
比如下面这个：
这里写图片描述
GridLayout本身很简单，但还是要学会灵活使用它。

翼德兄

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
华丽丽的GridLayout－使用案例

最近在阅读一份开源代码时，发现有一个页面中并不是明显的网格样式，但layout里的根控件用的是GridLayout，才发现原来它是可以这样用的，原来不一定拘泥于页面布局是明显的网格形式，而是需要我们来把明显不是网格样式的布局来当成网格看待。–这里大家可能不一定立马理解，不急，先继续看看后面的内容。因为RelativeLayout和加了weight的Linearlayout都存的onMeasure两次
复制链接

扫一扫