Android GridLayout动态添加元素

作者: 千山万水迷了鹿 | 来源:发表于2016-12-16 19:11 被阅读3838次

    GridLayout 的基本用法,到处都有教程。学习使用GridLayout

    动态添加实现效果

    效果图

    建议使用v7包中的GridLayoutcompile 'com.android.support:gridlayout-v7:25.0.1'

    行高和列宽的确定

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

    填充方式

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

    • center – 不改变元素的大小,仅居中
    • center_horizontal – 不改变大小,水平居中
    • center_vertical – 不改变大小,垂直居中
    • top – 不改变大小,置于顶部
    • left – 不改变大小,置于左边
    • bottom – 不改变大小,置于底部
    • right – 不改变大小,置于右边
    • start – 不改变大小,置于开头(这个是与RTL从右向左读的文字有关的,如果使用start/end,那么当LTR文字时start=left,end=right,当RTL时start=right,end=left,也就是说系统会自动处理了)
    • end – 不改变大小,置于结尾
    • fill – 拉伸元素控件,填满其应该所占的格子
    • fill_vertical – 仅垂直方向上拉伸填充
    • fill_horizontal – 仅水平方向上拉伸填充
    • clip_vertical – 垂直方向上裁剪元素,仅当元素大小超过格子的空间时
    • clip_horizontal – 水平方向上裁剪元素,仅当元素大小超过格子的空间时

    Cell之间的间距如何控制

    默认间距

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

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

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

    动态给Gridlayout添加子元素(Cell)

    <android.support.v7.widget.GridLayout   
       android:id="@+id/grid_layout"    
       android:layout_width="match_parent"  
       android:layout_height="wrap_content"   
       android:layout_gravity="center_horizontal"  
       android:layout_marginTop="10dp"   
       android:background="@android:color/white"   
       app:columnCount="3"    
       app:rowCount="5">
    </android.support.v7.widget.GridLayout>
    
        public void setData() {
            gridLayout.setRowCount(6);
            gridLayout.setColumnCount(3);
            for (int i = 0; i < 6; i++) {
                for (int j = 0; j < 3; j++) {
                    TextView textView = new TextView(mContext);
                    textView.setBackgroundResource(R.drawable.bg_blue_to_cc);
                    textView.setTextColor(mContext.getResources().getColorStateList(R.color.text_color_blue_to_cc));
                    //给TextView添加一个drawable left的icon
                    Drawable drawable = getResources().getDrawable(R.drawable.bg_check_enable_disable);
                    //下面这行必须,要不然图标不会显示
                    drawable.setBounds(0, 0, drawable.getMinimumWidth(), drawable.getMinimumHeight());
                    textView.setCompoundDrawables(drawable, null, null, null);
                    textView.setCompoundDrawablePadding(TO.dp2px(mContext, 7f));
                    //  TO.dp2px() 是个自定义方法可以用TypedValue.applyDimension()代替
                    textView.setPadding(TO.dp2px(mContext, 15f), 0, 0, 0);
                    textView.setGravity(Gravity.LEFT | Gravity.CENTER_VERTICAL);
                    textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 14);
                    textView.setText("嘻哈");
                    //设置它的行 和 权重 有了权重才能水平均匀分布
                    //由于方法重载,注意这个地方的1.0f 必须是float,
                    GridLayout.Spec rowSpec = GridLayout.spec(i, 1.0f);
                    GridLayout.Spec columnSpec = GridLayout.spec(j, 1.0f);
                    GridLayout.LayoutParams params = new GridLayout.LayoutParams(rowSpec, columnSpec);
                    //左边的靠左,右边的靠右,中间的居中,默认居中
                    switch (j) {
                        case 0:
                            params.setGravity(Gravity.LEFT);
                            break;
                        case 1:
                            params.setGravity(Gravity.CENTER);
                            break;
                        case 2:
                            params.setGravity(Gravity.RIGHT);
                            break;
                        default:
                            params.setGravity(Gravity.CENTER);
                            break;
                    }
                    params.bottomMargin = TO.dp2px(mContext, 11.5f);
                    //控制TextView的高度和宽度
                    params.height = TO.dp2px(mContext, 25.0f);
                    params.width = TO.dp2px(mContext, 90.0f);
                    gridLayout.addView(textView, params);
                }
            }
        }
    

    字体颜色
    其中字体颜色是用的ColorStateList 其xml代码(文件位于/res/color/text_color_blue_to_cc.xml)如下:

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
       <item android:color="@color/color_cc" android:state_enabled="false"/>
       <item android:color="@color/new_blue" android:state_enabled="true"/>
    </selector>
    

    TextView背景
    bg_blue_to_cc位于(/res/drawable/bg_blue_to_cc.xml )代码如下:

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    
        <item android:state_enabled="false">
            <shape android:shape="rectangle">
    
                <stroke android:width="0.5dp" android:color="@color/color_cc" />
                <corners android:radius="3dp" />
                <solid android:color="@color/white" />
            </shape>
        </item>
        <item android:state_enabled="true">
            <shape android:shape="rectangle">
    
                <stroke android:width="0.5dp" android:color="@color/new_blue" />
                <corners android:radius="3dp" />
                <solid android:color="@color/white" />
            </shape>
    
        </item>
    </selector>
    

    Drawable Left
    bg_check_enable_disable 位于(/res/drawable/bg_check_enable_disable.xml)其实是两个图片:

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    
        <item android:drawable="@drawable/icon_check_disable" android:state_enabled="false" />
        <item android:drawable="@drawable/icon_check_enable" android:state_enabled="true" />
    
    </selector>
    

    附 两张图片

    icon_check_disable.png icon_check_enable.png

    相关文章

      网友评论

        本文标题:Android GridLayout动态添加元素

        本文链接:https://www.haomeiwen.com/subject/tronmttx.html