Android自定义九宫格布局

一、先看一下运行的效果图

效果图.jpg

二、为什么要自定义？

1. 在列表中，不用嵌套GridView
2. 可以定义一些自己的规则
3. 嵌套GridView会有条目只显示一行的高度问题
4. 解决了高度显示问题，又会出现一个条目测量多次的问题，比起嵌套GridView，自定义性能更好

三、自定义View的一般套路

1. 效果分析，自定义属性
2. 测量控件的宽高
3. 摆放控件的位置
4. 绘制控件
5. 用户交互（事件处理）

四、效果图分析

1. 定义一共有多少列
2. 定义水平的Item的间距
3. 定义垂直的Item的间距
4. 定义最大的Item个数

五、自定义View的属性

<declare-styleable name="GridLayout">
    <!--一列有多少个Item-->
    <attr name="gridSpan" format="integer" />
    <!--水平间距-->
    <attr name="gridHorizontalSpace" format="dimension" />
    <!--垂直间距-->
    <attr name="gridVerticalSpace" format="dimension" />
    <!--最大子View的个数-->
    <attr name="gridMaxItem" format="integer" />
</declare-styleable>

六、创建自定义ViewGroup，并找到自定义的属性值

/**
 * 类似QQ空间的网格布局
 */

public class GridLayout extends ViewGroup {
    /**
     * 列数
     */
    private int mSpan = 3;
    /**
     * Item 水平之间的间距
     */
    private int mHorizontalSpace = 0;
    /**
     * Item 垂直之间的间距
     */
    private int mVerticalSpace = 0;
    /**
     * 最大的Item数量
     */
    private int mMaxItem = 9;

    public GridLayout(Context context) {
        this(context, null);
    }

    public GridLayout(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public GridLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        // 获取自定义属性
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.GridLayout);
        mSpan = array.getInteger(R.styleable.GridLayout_gridSpan, mSpan);
        mHorizontalSpace = (int) array.getDimension(R.styleable.GridLayout_gridHorizontalSpace, mHorizontalSpace);
        mVerticalSpace = (int) array.getDimension(R.styleable.GridLayout_gridHorizontalSpace, mVerticalSpace);
        mMaxItem = array.getInteger(R.styleable.GridLayout_gridMaxItem, mMaxItem);
        array.recycle();
    }
}

六、测量子View的宽高，设置自已的宽高

1. 获取自已宽度
2. 根据自己的宽度，计算子View的宽度
3. 对比一下子View的个数和最大限制子View的个数
4. 计算自己的高度
5. 给自己设置宽高
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    // 获取控件的宽度
    int width = MeasureSpec.getSize(widthMeasureSpec);
    // 计算单个子View的宽度
    int itemWidth = (width - getPaddingLeft() - getPaddingRight() - mHorizontalSpace * (mSpan - 1)) / mSpan;
    // 测量子View的宽高
    int childCount = getChildCount();
    // 计算一下最大的条目数量
    childCount = Math.min(childCount, mMaxItem);
    if (childCount <= 0) {
        setMeasuredDimension(0, 0);
        return;
    }
    for (int i = 0; i < childCount; i++) {
        View child = getChildAt(i);
        int itemSpec = MeasureSpec.makeMeasureSpec(itemWidth, MeasureSpec.EXACTLY);
        measureChild(child, itemSpec, itemSpec);
    }
    int height = itemWidth * (childCount % mSpan == 0 ? (childCount / mSpan) : (childCount / mSpan + 1))
            + mVerticalSpace * ((childCount - 1) / mSpan);
    // 指定自己的宽高
    setMeasuredDimension(width, height);
}

七、摆放子View，代码简单，关键地方都写了注释

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
    int childCount = getChildCount();
    // 计算一下最大的条目数量
    childCount = Math.min(childCount, mMaxItem);
    if (childCount <= 0) {
        return;
    }
    int cl = getPaddingLeft();
    int ct = 0;
    for (int i = 0; i < childCount; i++) {
        View child = getChildAt(i);
        if (child.getVisibility() == GONE) {
            continue;
        }
        int width = child.getMeasuredWidth();
        int height = child.getMeasuredHeight();
        child.layout(cl, ct, cl + width, ct + height);
        // 累加宽度
        cl += width + mHorizontalSpace;
        // 如果是换行
        if ((i + 1) % mSpan == 0) {
            // 重置左边的位置
            cl = getPaddingLeft();
            // 叠加高度
            ct += height + mVerticalSpace;
        }
    }
}

八、方便使用，引入Adapter设计模式

/**
 * 适配器
 */

public abstract class BaseAdapter {
    private DataSetObservable mObservable = new DataSetObservable();

    /**
     * 数量
     */
    public abstract int getCount();

    /**
     * 条目的布局
     */
    public abstract View getView(int position, ViewGroup parent);

    /**
     * 注册数据监听
     */
    public void registerDataSetObserver(DataSetObserver observer) {
        mObservable.registerObserver(observer);
    }

    /**
     * 移除数据监听
     */
    public void unregisterDataSetObserver(DataSetObserver observer) {
        mObservable.unregisterObserver(observer);
    }

    /**
     * 内容改变
     */
    public void notifyDataSetChanged() {
        mObservable.notifyChanged();
    }

}

九、完整代码的编写

/**
 * QQ空间类似的网格布局
 */

public class GridLayout extends AdapterViewGroup {
    /**
     * 列数
     */
    private int mSpan = 3;
    /**
     * Item 水平之间的间距
     */
    private int mHorizontalSpace = 0;
    /**
     * Item 垂直之间的间距
     */
    private int mVerticalSpace = 0;
    /**
     * 最大的Item数量
     */
    private int mMaxItem = 9;
    
    protected BaseAdapter mAdapter;
    protected DataSetObserver mObserver;

    public GridLayout(Context context) {
        this(context, null);
    }

    public GridLayout(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public GridLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        // 获取自定义属性
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.GridLayout);
        mSpan = array.getInteger(R.styleable.GridLayout_gridSpan, mSpan);
        mHorizontalSpace = (int) array.getDimension(R.styleable.GridLayout_gridHorizontalSpace, mHorizontalSpace);
        mVerticalSpace = (int) array.getDimension(R.styleable.GridLayout_gridHorizontalSpace, mVerticalSpace);
        mMaxItem = array.getInteger(R.styleable.GridLayout_gridMaxItem, mMaxItem);
        array.recycle();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        // 获取控件的宽度
        int width = MeasureSpec.getSize(widthMeasureSpec);
        // 计算单个子View的宽度
        int itemWidth = (width - getPaddingLeft() - getPaddingRight() - mHorizontalSpace * (mSpan - 1)) / mSpan;
        // 测量子View的宽高
        int childCount = getChildCount();
        // 计算一下最大的条目数量
        childCount = Math.min(childCount, mMaxItem);
        if (childCount <= 0) {
            setMeasuredDimension(0, 0);
            return;
        }
        for (int i = 0; i < childCount; i++) {
            View child = getChildAt(i);
            int itemSpec = MeasureSpec.makeMeasureSpec(itemWidth, MeasureSpec.EXACTLY);
            measureChild(child, itemSpec, itemSpec);
        }
        int height = itemWidth * (childCount % mSpan == 0 ? (childCount / mSpan) : (childCount / mSpan + 1))
                + mVerticalSpace * ((childCount - 1) / mSpan);
        // 指定自己的宽高
        setMeasuredDimension(width, height);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int childCount = getChildCount();
        // 计算一下最大的条目数量
        childCount = Math.min(childCount, mMaxItem);
        if (childCount <= 0) {
            return;
        }
        int cl = getPaddingLeft();
        int ct = 0;
        for (int i = 0; i < childCount; i++) {
            View child = getChildAt(i);
            if (child.getVisibility() == GONE) {
                continue;
            }
            int width = child.getMeasuredWidth();
            int height = child.getMeasuredHeight();
            child.layout(cl, ct, cl + width, ct + height);
            // 累加宽度
            cl += width + mHorizontalSpace;
            // 如果是换行
            if ((i + 1) % mSpan == 0) {
                // 重置左边的位置
                cl = getPaddingLeft();
                // 叠加高度
                ct += height + mVerticalSpace;
            }
        }
    }
    /**
     * 设置Adapter
     */
    public void setAdapter(BaseAdapter adapter) {
        // 移除监听
        if (mAdapter != null && mObserver != null) {
            mAdapter.unregisterDataSetObserver(mObserver);
            mAdapter = null;
            mObserver = null;
        }
        if (adapter == null) {
            throw new NullPointerException("FlowBaseAdapter is null");
        }
        mAdapter = adapter;
        resetLayout();
        mObserver = new DataSetObserver() {
            @Override
            public void onChanged() {
                resetLayout();
            }
        };
        mAdapter.registerDataSetObserver(mObserver);

    }
    /**
     * 重新添加布局
     */
    protected void resetLayout() {
        removeAllViews();
        int count = mAdapter.getCount();
        count = Math.min(count, mMaxItem);
        for (int i = 0; i < count; i++) {
            View view = mAdapter.getView(i, this);
            addView(view);
        }
    }
}

十、测试自定义的ViewGroup

// 1. Activity的布局：R.layout.activity_grid_layout
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</FrameLayout>

// 2. Activity列表条目的Item的布局：R.layout.grid_item
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:paddingLeft="8dp"
    android:paddingRight="8dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:scaleType="center"
            android:src="@mipmap/ic_launcher_round" />

        <TextView
            android:id="@+id/tv_content"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:text="我是发表内容"
            android:textSize="18dp" />
    </LinearLayout>

    <com.wen.routerdemo.view.GridLayout
        android:id="@+id/grid_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="90dp"
        android:background="#66666666"
        app:gridHorizontalSpace="3dp"
        app:gridSpan="3"
        app:gridVerticalSpace="3dp" />
</LinearLayout>

// 3. 自定义GridLayout的Item的布局：R.layout.grid_item_image
<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#75412458"
    android:scaleType="center"
    android:src="@mipmap/ic_launcher">

</ImageView>

// 4. 测试Activity的代码
public class GridLayoutActivity extends AppActivity {
    private RecyclerView mRecyclerView;

    @Override
    protected Object getContentLayout() {
        return R.layout.activity_grid_layout;
    }

    @Override
    protected void initTitle(DefTitleBar titleBar) {
        titleBar.setTitle("GridLayout Test");
    }

    @Override
    protected void initView(View contentView) {
        mRecyclerView = findViewById(R.id.recycler_view);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
        List<String> data = new ArrayList<>();
        for (int i = 0; i < 20; i++) {
            data.add("我是发表内容测试" + i);
        }
        mRecyclerView.setAdapter(new QuickAdapter<String>(this, data, R.layout.grid_item) {
            @Override
            protected void convert(QuickViewHolder holder, String item, int position) {
                Log.e("convert", "convert-->" + position);
                holder.setText(R.id.tv_content, item);
                // 测试GridLayout
                GridLayout gridLayout = holder.getView(R.id.grid_layout);
                List<String> gData = new ArrayList<>();
                int count = 0;
                if (position % 3 == 0) {
                    count = 3;
                } else if (position % 3 == 1) {
                    count = 5;
                } else if (position % 3 == 2) {
                    count = 4;
                }
                for (int i = 0; i < count; i++) {
                    gData.add("test" + i);
                }
                gridLayout.setAdapter(new CommAdapter<String>(GridLayoutActivity.this, gData, R.layout.grid_item_image) {
                    @Override
                    public void convert(QuickViewHolder holder, String item, int position) {

                    }
                });
            }
        });
    }
}

1. 测试只是模拟数据，实际开发是后台返回的数据
2. 测试条目加载的结果：条目不会加载多次
   测试条目加载的结果.jpg
   3.运行结果，在开始的时候已经贴过
   效果图.jpg
   4.看我的下篇文章：Android自定义网格布局，九宫格布局加强版