一起撸个朋友圈吧(step5) - 控件篇【内容（中）】

最新推荐文章于 2024-05-02 12:26:59 发布

转载最新推荐文章于 2024-05-02 12:26:59 发布 · 141 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5a3223446fb9a045104a82b9

本文介绍了一种图文混合展示的GridView实现方案，通过自定义GridView并覆盖onMeasure方法来适应不同数量的图片显示。针对图片数量为4的情况进行了特殊处理，使其以“田”字形排列，并实现了动态调整列数的功能。

项目地址：github.com/razerdp/Fri…

上篇链接：http://www.jianshu.com/p/885538a261ea

下篇链接：http://www.jianshu.com/p/280058de01bd

本篇将会完成图文类型的GridView。

关于ListView嵌套GridView，满世界的方法都是那个，所以我们也就直接采用了。

继承GridView并覆写onMeasure方法：

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int heightSpec;

        if (getLayoutParams().height == LayoutParams.WRAP_CONTENT) {
            heightSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2, MeasureSpec.AT_MOST);
        } else {
            heightSpec = heightMeasureSpec;
        }

        super.onMeasure(widthMeasureSpec, heightSpec);
    }
复制代码

然后是昨天的第二点和第三点的问题：

无论是3列还是2列，item等宽
图片只有4张的时候，呈“田”字排。

这里解决很简单，，，item宽度固定就好了,在下定的是80*80（事实上，为了适应，我们应该根据屏幕宽度定制的，这个留在以后优化的时候再弄），然后当图片数量==4时，动态设置列数为2即可。

首先弄出我们的Adapter:

public class GridViewAdapter extends MBaseAdapter<String,GridViewAdapter.ViewHolder> {

    public GridViewAdapter(Context context, List<String> datas) {
        super(context, datas);
    }

    @Override
    public int getLayoutRes() {
        return R.layout.item_grid_image;
    }

    @Override
    public ViewHolder initViewHolder() {
        return new ViewHolder();
    }

    public void reSetData(List<String> newDatas){
        datas.clear();
        datas.addAll(newDatas);
        notifyDataSetChanged();
    }

    @Override
    public void onBindView(int position, String data, ViewHolder holder) {
        if (!TextUtils.isEmpty(data)){
            holder.mSuperImageView.loadImageNoFade(data,0);
        }
    }

    class ViewHolder implements MViewHolder {
        public SuperImageView mSuperImageView;

        @Override
        public void onInFlate(View v) {
            mSuperImageView= (SuperImageView) v.findViewById(R.id.img);
        }
    }
}
复制代码

MBaseAdapter是在下撸毕设时抽象出来的一个adapter，意在减少代码量，而且参考了recylerView的思想，文章详情：http://www.jianshu.com/p/56cf20a29a02

最后则是在我们的ItemWithImg写出代码：

/**
 * Created by 大灯泡 on 2016/2/25.
 * 图文
 * type=13
 */
public class ItemWithImg extends BaseItemDelegate {
    private NoScrollGridView mNoScrollGridView;
    private GridViewAdapter mGridViewAdapter;

    public ItemWithImg() {}

    @Override
    public int getViewRes() {
        return R.layout.dynamic_item_with_img;
    }

    @Override
    public void onFindView(@NonNull View parent) {
        if (mNoScrollGridView == null) mNoScrollGridView = (NoScrollGridView) parent.findViewById(R.id.item_grid);
    }

    @Override
    protected void bindData(int position, @NonNull View v, @NonNull MomentsInfo data, int dynamicType) {
        if (data.content.imgurl==null||data.content.imgurl.size()==0||mNoScrollGridView==null)return;
        if (mNoScrollGridView.getAdapter()==null){
            mGridViewAdapter=new GridViewAdapter(context,data.content.imgurl);
            mNoScrollGridView.setAdapter(mGridViewAdapter);
        }
        if (data.content.imgurl.size()==4){
            mNoScrollGridView.setNumColumns(2);
        }else {
            mNoScrollGridView.setNumColumns(3);
        }
        mGridViewAdapter.reSetData(data.content.imgurl);
    }
}
复制代码

onFindView里面在下判断了一下，避免每次都会findViewById。

本次的效果图如下：