专业IM即时通讯软件开发,值得信赖!

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

即时通讯软件开发 云聊IM 724℃

项目地址: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);
}

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

  1. 无论是3列还是2列,item等宽
  2. 图片只有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

版权声明:部分文章、图片等内容为用户发布或互联网整理而来,仅供学习参考。如有侵犯您的版权,请联系我们,将立刻删除。
喜欢 (0)
仿微信聊天软件开发
点击这里给我发消息