Android手把手朋友圈实战教程（十三）控件篇【内容（中）】

项目地址：https://github.com/razerdp/FriendCircle

本篇将会完成图文类型的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 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 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。

本次的效果图如下：

preview