β

Android技巧:学习使用GridLayout

稀有猿诉 299 阅读
 

GridLayout 是一个非常强大的网格类布局,它不但能像 TableLayout 那样,实现网格类布局,但它更为强大的地方在于每个Cell的大小可以横向或者纵向拉伸,每个Cell的对齐方式也有很多种,而且不像TableLayout,需要一个 TableRow ,GridLayout可以通过指定Cell的坐标位置就能实现Cell的拉伸,从而实现,大小不一致的风格卡片式布局。

基本概念

GridLayout把页面分成m行和n列,使用m+1条线和n+1条线,把页面共分成n*m个Cell。指定位置时行坐标是从0到m,列坐标是从0到n。每一个子View占一个或多个Cell。比如(0, 0)到(0, 1)就是占第一个Cell的区域。(0, 0), (0, 2)就是占第一行的2个Cell的区域(横向拉伸).

使用方法

主要介绍一下如何添加Cell,以及设置Cell的位置和拉伸。其他的跟普通的ViewGroup没什么区别的,也没啥好说的。

GridLayout的基本设置

首先需要给GridLayout设置行数和列数:

在添加Cell就需要注意,不能超过设置的最大行数和列数,否则在添加Cell时会有异常。

元素Cell的位置控制

添加Cell时需要指定其位置

行高和列宽的确定

每一行的高度是由这一行中Cell的最大高度决定的,以及每一列的宽度是由每一列中最大的宽度决定的,小于行高和列宽的元素可以设置其对齐方式和填充方式。

填充方式

通过Cell的android:layout_gravity参数来指定,Cell的填充方式,注意仅当Cell元素本身的尺寸小于它所占格子的大小时才有效,比如元素本身尺寸小于行高和列宽,或者当它占多行,或者占多列时:

需要注意的是这些值是可以组合的,比如:

android:layout_gravity="center_vertical|clip_horizontal"

Cell之间的间距如何控制

默认间距

可以使用默认的间距android:useDefaultMargins=“true”或者GridLayout#setUseDefaultMargins()。这个属性默认值是”false”。

另外一种方式就是跟普通布局管理器一样,给每个Cell设置其margins

通常如果不满意系统的默认间距,就可以设置useDefaultMargins=“false”,然后通过给Cell设置margin来控制间距。

居中方法

让一行居中:

<GridLayout
    android:layout_width="wrap_content"
    android:layout_height="200dip"
    android:useDefaultMargins="true"
    android:background="@android:color/white"
    android:rowCount="1"
    android:columnCount="2">
    <Button android:layout_column="0"
        android:layout_row="0"
        android:text="Left Button"
        android:layout_gravity="fill_horizontal|center_vertical"/>
    <Button android:layout_column="1"
        android:layout_row="0"
        android:text="Right Button"
        android:layout_gravity="fill_horizontal|center_vertical"/>
</GridLayout>
让一个元素居中:

<GridLayout
    android:layout_width="200dip"
    android:layout_height="200dip"
    android:useDefaultMargins="true"
    android:background="@android:color/white"
    android:rowCount="1"
    android:columnCount="1">
    <Button android:layout_column="0"
        android:layout_row="0"
        android:text="Left Button"
        android:layout_gravity="center"/>
</GridLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:background="@android:color/darker_gray"
    android:layout_height="200dip">
    <GridLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:useDefaultMargins="true"
        android:background="@android:color/white"
        android:rowCount="2"
        android:columnCount="2">
        <Button android:layout_column="0"
            android:layout_row="0"
            android:text="Left Button"
            android:layout_gravity="fill_horizontal|center_vertical"/>
        <Button android:layout_column="1"
            android:layout_row="0"
            android:text="Right Button"
            android:layout_gravity="fill_horizontal|center_vertical"/>
        <Button android:layout_column="1"
            android:layout_row="1"
            android:text="Right Button 2"
            android:layout_gravity="fill_horizontal|center_vertical"/>
    </GridLayout>
</LinearLayout>

适用场景

GridLayout虽然强大,可以当作LinearLayout使用,也可以当作RelativeLayout使用,甚至也能当FrameLayout使用。但是,我们不可以滥用,对于任意布局都一样,不能是它能实现需求就使用它,而是要根据实际的需求,选择最简单,最方便的,同时也要考虑性能。

通常对于类似于网格的布局就可以考虑用GridLayout来实现,或者用LinearLayout横七竖八的套了好几层时也要考虑使用GridLayout。

GridLayout vs GridView or RecyclerView

当要实现网格布局,或者非均匀风格布局时,可能首先想到的就是GridView,但是这也要看实际的情况而定。GridView,ListView以及RecyclerView是用于无限长度列表或者网格的场景,它们最大的特点是无限长度,因此这几个组件的重点在于如何复用Cell以提升性能,以及处理手势事件(Fling)等。所以,每当遇到列表或者网格的时候,先想一下这个长度大概会是多少,如果是在百个以内,且不会随时增长,这时就可以考虑使用静态(非动态复用)的组件比如LinearLayout或者GridLayout来实现。

实例

说的太多都是废话,来一个实例感觉一下子是最直接的:

<GridLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:background="@android:color/white"
            android:alignmentMode="alignMargins"
            android:useDefaultMargins="true"
            android:columnCount="4"
            android:rowCount="5"
            android:visibility="visible">
            <Button android:layout_column="0"
                android:layout_row="0"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="10dip"
                android:text="1"/>
            <Button android:layout_column="1"
                android:layout_row="0"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="10dip"
                android:text="2"/>
            <Button android:layout_column="2"
                android:layout_row="0"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="10dip"
                android:text="3"/>
            <Button android:layout_column="0"
                android:layout_row="1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="10dip"
                android:text="4"/>
            <Button android:layout_column="1"
                android:layout_row="1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="10dip"
                android:text="5"/>
            <Button android:layout_column="2"
                android:layout_row="1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="10dip"
                android:text="6"/>
            <Button android:layout_column="0"
                android:layout_row="2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="10dip"
                android:text="7"/>
            <Button android:layout_column="1"
                android:layout_row="2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="10dip"
                android:text="8"/>
            <Button android:layout_column="2"
                android:layout_row="2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="10dip"
                android:text="9"/>
            <Button android:layout_column="0"
                android:layout_row="3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="10dip"
                android:text="0"/>
            <Button android:layout_column="1"
                android:layout_row="3"
                android:layout_gravity="fill_horizontal"
                android:layout_columnSpan="2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="10dip"
                android:text="Delete"/>
            <Button android:layout_column="0"
                android:layout_row="4"
                android:layout_columnSpan="2"
                android:layout_gravity="fill_horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="10dip"
                android:text="Clear"/>
            <Button android:layout_column="2"
                android:layout_row="4"
                android:layout_columnSpan="2"
                android:layout_gravity="fill_horizontal"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="10dip"
                android:text="="/>
            <Button android:layout_column="3"
                android:layout_row="0"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="fill"
                android:padding="10dip"
                android:text="+"/>
            <Button android:layout_column="3"
                android:layout_row="1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="fill"
                android:padding="10dip"
                android:text="-"/>
            <Button android:layout_column="3"
                android:layout_row="2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="fill"
                android:padding="10dip"
                android:text="*"/>
            <Button android:layout_column="3"
                android:layout_row="3"
                android:layout_columnSpan="1"
                android:layout_gravity="fill"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="10dip"
                android:text="/"/>
        </GridLayout>

参考资料

 
作者:稀有猿诉
原文地址:Android技巧:学习使用GridLayout, 感谢原作者分享。

发表评论