GridLayout 的基本用法，到處都有教程。學(xué)習(xí)使用GridLayout

動態(tài)添加實現(xiàn)效果

效果圖

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

行高和列寬的確定

每一行的高度是由這一行中Cell的最大高度決定的，以及每一列的寬度是由每一列中最大的寬度決定的，小于行高和列寬的元素可以設(shè)置其對齊方式和填充方式。

填充方式

通過Cell的android:layout_gravity參數(shù)來指定，Cell的填充方式，注意僅當(dāng)Cell元素本身的尺寸小于它所占格子的大小時才有效，比如元素本身尺寸小于行高和列寬，或者當(dāng)它占多行，或者占多列時：

• center – 不改變元素的大小，僅居中
• center_horizontal – 不改變大小，水平居中
• center_vertical – 不改變大小，垂直居中
• top – 不改變大小，置于頂部
• left – 不改變大小，置于左邊
• bottom – 不改變大小，置于底部
• right – 不改變大小，置于右邊
• start – 不改變大小，置于開頭（這個是與RTL從右向左讀的文字有關(guān)的，如果使用start/end，那么當(dāng)LTR文字時start=left,end=right，當(dāng)RTL時start=right,end=left，也就是說系統(tǒng)會自動處理了)
• end – 不改變大小，置于結(jié)尾
• fill – 拉伸元素控件，填滿其應(yīng)該所占的格子
• fill_vertical – 僅垂直方向上拉伸填充
• fill_horizontal – 僅水平方向上拉伸填充
• clip_vertical – 垂直方向上裁剪元素，僅當(dāng)元素大小超過格子的空間時
• clip_horizontal – 水平方向上裁剪元素，僅當(dāng)元素大小超過格子的空間時

Cell之間的間距如何控制

默認間距

可以使用默認的間距android:useDefaultMargins=“true”或者GridLayout#setUseDefaultMargins()。這個屬性默認值是”false”。

另外一種方式就是跟普通布局管理器一樣，給每個Cell設(shè)置其margins

通常如果不滿意系統(tǒng)的默認間距，就可以設(shè)置useDefaultMargins=“false”，然后通過給Cell設(shè)置margin來控制間距。

動態(tài)給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("嘻哈");
                //設(shè)置它的行 和 權(quán)重 有了權(quán)重才能水平均勻分布
                //由于方法重載，注意這個地方的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