Android GridLayout 动态添加子控件 + 平均分配空间

Android GridLayout 动态添加子控件 + 平均分配空间

有时候会遇到这样的需求：
1. 要求子控件网格布局，平均分布
2. 内容根据接口动态加载
3. 父控件充满界面剩余空间，不可滑动

看到1和2的时候GridView和RecyclerView都能胜任，但是不可滑动这个需求就需要对他们做特殊处理，并且不容易做分辨率适配，这时候用GridLayout动态加载做起来更简单。

具体步骤

导入v7包的GridLayout

由于原生GridLayout平均分配子布局要求sdk21+，因此先导入v7包下的GridLayout

compile 'com.android.support:gridlayout-v7:25.3.1'

设置GridLayout布局

下面的布局需要一个自定义轮播图和2个GridLayout按比例分配屏幕空间。
使用app:columnCount和app:rowCount属性定义列数和行数。
使用weight属性时，使用0dp设置动态计算的宽度或高度来进行优化。

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <FrameLayout
            android:id="@+id/viewpager_container"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_marginBottom="@dimen/dp_6"
            android:layout_weight="1.2" />

        <android.support.v7.widget.GridLayout
            android:id="@+id/function_grid"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_marginBottom="@dimen/dp_6"
            android:layout_weight="1"
            app:columnCount="3"
            app:rowCount="2" />

        <android.support.v7.widget.GridLayout
            android:id="@+id/industry_grid"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="2"
            app:columnCount="3"
            app:rowCount="3" />
    </LinearLayout>

---

平均分配空间

如果你只想要子布局平均分配空间即可，那么可以在xml布局中如下设置。
子控件通过app:layout_rowWeight和app:layout_columnWeight声明自己在布局中占据的比重，都设置为1即可平均分布。
子控件的width和height可以wrap_content也可以0dp，但是不可以match_parent

<android.support.v7.widget.GridLayout
            android:id="@+id/function_grid"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_marginBottom="@dimen/dp_6"
            android:layout_weight="1"
            app:columnCount="3"
            app:rowCount="2" >

            <View
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_row="0"
                app:layout_column="0"
                app:layout_rowWeight="1" 
                app:layout_columnWeight="1"/>

            <View
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_row="0"
                app:layout_column="1"
                app:layout_rowWeight="1"
                app:layout_columnWeight="1"/>

            <View
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_row="0"
                app:layout_column="2"
                app:layout_rowWeight="1"
                app:layout_columnWeight="1"/>

            <View
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_row="1"
                app:layout_column="0"
                app:layout_rowWeight="1"
                app:layout_columnWeight="1"/>

            <View
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_row="1"
                app:layout_column="1"
                app:layout_rowWeight="1"
                app:layout_columnWeight="1"/>


        </android.support.v7.widget.GridLayout>

---

动态添加子控件

for (int i = 0, j = list.size(); i < j; i++) {
    ......
    View functionView = new View(getContext());
    functionView.setBackgroundResource(iconResId);
    ......
    //使用Spec定义子控件的位置和比重
    GridLayout.Spec rowSpec = GridLayout.spec(i / 3, 1f);
    GridLayout.Spec columnSpec = GridLayout.spec(i % 3, 1f);
    //将Spec传入GridLayout.LayoutParams并设置宽高为0，必须设置宽高，否则视图异常
    GridLayout.LayoutParams layoutParams = new GridLayout.LayoutParams(rowSpec, columnSpec);
    layoutParams.height = 0;
    layoutParams.width = 0;
    //还可以根据位置动态定义子控件直接的边距，下面的意思是
    //第一行的子控件都有2dp的bottomMargin，中间位置的子控件都有2dp的leftMargin和rightMargin
    if (i / 3 == 0)
        layoutParams.bottomMargin = getResources().getDimensionPixelSize(R.dimen.dp_2);
    if (i % 3 == 1) {
        layoutParams.leftMargin = getResources().getDimensionPixelSize(R.dimen.dp_2);
        layoutParams.rightMargin = getResources().getDimensionPixelSize(R.dimen.dp_2);
    }
    functionGrid.addView(functionView, layoutParams);
}

效果