β

Gridview的错误用法及替代方案

Yet Another Summer Rain 241 阅读

九宫格是很常见的一种UI表现形式,当然根据实际情况,有可能是4宫格,6宫格之类的。

常规实现

这样的 m x n 的表现形式,很容易让人想起用GridView。但是数据项又不够多,不够翻页。

有些能够滑动翻页的,是重写GridviewonMeasure 方法,设置一个很大的高度,然后外面包一层 ScrollView

替代方案

对于这样的应用场景,如果不需要复用view也没有翻页的需求,简单绘制每一项就可以了。

  1. 从索引0开始绘制每一项,计算行列位置。根据行列位置以及行列间距,每项大小确定每个view的起始位置。

  2. 使用RelativeLayout做父容器,使用margin 来偏移每项子元素。

  3. 设定每项使用RelativeLayout.LayoutParams,确定每项尺寸大小。尺寸状态都是EXACTLY.


    简要代码如下:

    // 总项数, 每项宽度和长度
    int len = mBlockListAdpater.getCount();
    int w = mBlockListAdpater.getBlockWidth();
    int h = mBlockListAdpater.getBlockHeight();
    int cloumnNum = mBlockListAdpater.getCloumnNum();
    
    // 水平间隔
    int horizontalSpacing = mBlockListAdpater.getHorizontalSpacing();
    
    // 垂直间隔
    int verticalSpacing = mBlockListAdpater.getVerticalSpacing();
    
    for (int i = 0; i < len; i++) {
    
        RelativeLayout.LayoutParams lyp = new RelativeLayout.LayoutParams(w, h);
    
        int row = i / cloumnNum;
        int clo = i % cloumnNum;
    
        int left = 0;
        int top = 0;
    
        // 计算偏移
        if (clo > 0) {
            left = (horizontalSpacing + w) * clo;
        }
        if (row > 0) {
            top = (verticalSpacing + h) * row;
        }
    
        // 用margin 来偏移
        lyp.setMargins(left, top, 0, 0);
    
        // 创建view
        View view = mBlockListAdpater.getView(mLayoutInflater, i);
        addView(view, lyp);
    }
    

在上面代码中,实际创建view是在BlockListAdaptergetView()完成的,这是和ListAdapter类似的Adapter,但是更简单。

例子

源码

BlockListAdapter 源码

BlockListView的源码

例子的源码

作者:Yet Another Summer Rain
原文地址:Gridview的错误用法及替代方案, 感谢原作者分享。

发表评论