RecyclerView多条目及GridView和ListView混合条目效果实现

在项目开发中会碰到RecyclerView多条目的效果,设置是GridView和ListView混合条目的效果,在实现中会去重写getItemViewType设置条目的类型,然后在onCreateViewHolder方法中去加载不对应的item布局,最后在onBindViewHolder中根据item布局的类型去加载数据;这里大致也是采用这样的思路来实现,不过是将ViewHolder和Adapter分开写,进行了相应的隔离,以便降低代码的耦合度,在后期的迭代过程中,如果只是涉及到其中一个item条目布局的改动时,不需对adapter中的代码逻辑做过多的改动,只需要改动对应ViewHolder的代码逻辑就可以了。
先来看下RecyclerView的多条目实现:
对于RecyclerView的Adapter使用都需要有一个对应的ViewHolder,这里不讲对应的ViewHolder写在Adapter中,将其放在一个单独的类中,并提供一个view绑定数据的方法,在onBindViewHolder方法中进行调用从而进行view和数据的绑定,假定有三个不同的布局条目,就新建三个对应的ViewHolder;

public class TypeOneViewHolder extends BaseViewHolder<DataModel> {
    public ImageView avatar;
    public TextView name;

    public TypeOneViewHolder(@NonNull View itemView) {
        super(itemView);
        avatar = itemView.findViewById(R.id.avatar);
        name = itemView.findViewById(R.id.name);
        itemView.setBackgroundColor(Color.GRAY);
    }
    @Override
    public void bindHolder(DataModel model){
        avatar.setBackgroundResource(model.avatarColor);
        name.setText(model.name);
    }
}
public class TypeTwoViewHolder extends BaseViewHolder<DataModel> {
    public ImageView avatar;
    public TextView name;
    public TextView content;

    public TypeTwoViewHolder(@NonNull View itemView) {
        super(itemView);
        avatar = itemView.findViewById(R.id.avatar);
        name = itemView.findViewById(R.id.name);
        content = itemView.findViewById(R.id.content);
        itemView.setBackgroundColor(Color.BLUE);
    }

    @Override
    public void bindHolder(DataModel model) {
        avatar.setBackgroundResource(model.avatarColor);
        name.setText(model.name);
        content.setText(model.content);
    }
}
public class TypeThreeViewHolder extends BaseViewHolder<DataModel> {
    public ImageView avatar;
    public TextView name;
    public TextView content;
    public ImageView avatarRightIcon;

    public TypeThreeViewHolder(@NonNull View itemView) {
        super(itemView);
        avatar = itemView.findViewById(R.id.avatar);
        name = itemView.findViewById(R.id.name);
        content = itemView.findViewById(R.id.content);
        avatarRightIcon = itemView.findViewById(R.id.avatar_right);
        itemView.setBackgroundColor(Color.GREEN);
    }

    @Override
    public void bindHolder(DataModel model) {
        avatar.setBackgroundResource(model.avatarColor);
        name.setText(model.name);
        content.setText(model.content);
        avatarRightIcon.setBackgroundResource(model.contentColor);
    }
}

在对应的ViewHolder中的bindHolder方法中进行view和数据的绑定,发现每个ViewHolder中都需要写这样的一个方法,就将其抽取出来定义在一个抽象的ViewHolder中,具体的ViewHolder就继承自该抽象的ViewHolder,就不用继承自RecyclerView的ViewHolder了;

public abstract class BaseViewHolder<T> extends RecyclerView.ViewHolder {
    public BaseViewHolder(@NonNull View itemView) {
        super(itemView);
    }
    public abstract void bindHolder(T t);
}

接下来就去实现下adapter的逻辑;

public class DemoAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
    private LayoutInflater mInflater;
    private List<DataModel> mList = new ArrayList<>();
    private OnItemClickListener listener;

    public DemoAdapter(Context context) {
        mInflater = LayoutInflater.from(context);
    }

    @NonNull
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int viewType) {
        switch (viewType) {
            case DataModel.TYPE_ONE:
                return new TypeOneViewHolder(mInflater.inflate(R.layout.item_type_one, viewGroup, false));
            case DataModel.TYPE_TWO:
                return new TypeTwoViewHolder(mInflater.inflate(R.layout.item_type_two, viewGroup, false));
            case DataModel.TYPE_THREE:
                return new TypeThreeViewHolder(mInflater.inflate(R.layout.item_type_three, viewGroup, false));
        }
        return null;
    }

    @Override
    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder viewHolder, final int position) {
        BaseViewHolder<DataModel> holder = (BaseViewHolder<DataModel>) viewHolder;
        holder.bindHolder(mList.get(position));
        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (listener != null) {
                    listener.onItemClick(position);
                }
            }
        });
    }

    @Override
    public int getItemCount() {
        return mList.size();
    }

    @Override
    public int getItemViewType(int position) {
        return mList.get(position).type;
    }

    public void addList(List<DataModel> list) {
        mList = list;
        notifyDataSetChanged();
    }

    public void setOnItemClickListener(OnItemClickListener listener) {
        this.listener = listener;
    }

    public interface OnItemClickListener {
        void onItemClick(int position);
    }
}

在onCreateViewHolder方法中根据viewType的类型实例化建好的ViewHolder,在onBindViewHolder绑定数据时,就不需要去判断viewType的类型去给view绑定数据,直接调用抽象类中的bindHolder方法就数据模型传入就可以实现view和数据的绑定了,通过这样就将不同的viewType及viewType和adapter之间代码逻辑进行了解耦;使用的时候还是照样实例化该adapter,然后通过RecyclerView的setAdapter设置数据适配器;

public class MainActivity extends AppCompatActivity {
    private RecyclerView recyclerview;
    private DemoAdapter adapter;
    private int colors[] = {android.R.color.holo_blue_dark, android.R.color.holo_red_dark
            , android.R.color.holo_orange_dark};
    private List<DataModel> list = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        recyclerview = findViewById(R.id.recyclerview);
        recyclerview.setLayoutManager(new LinearLayoutManager(this));
        adapter = new DemoAdapter(this);
        recyclerview.setAdapter(adapter);

        adapter.setOnItemClickListener(new DemoAdapter.OnItemClickListener() {
            @Override
            public void onItemClick(int position) {
                DataModel dataModel = list.get(position);
                Toast.makeText(MainActivity.this, "type--" + dataModel.type + "name" + dataModel.name + "content" + dataModel.content, Toast.LENGTH_LONG).show();
            }
        });
        initData();
    }

    private void initData() {
        for (int i = 0; i < 30; i++) {
            int type;
            if (i < 5 || (i > 15 && i < 20)) {
                type = 1;
            } else if (i < 10 || i > 26) {
                type = 2;
            } else {
                type = 3;
            }
            DataModel data = new DataModel();
            data.avatarColor = colors[type - 1];
            data.type = type;
            data.name = "name:" + i;
            data.content = "content:" + i;
            data.contentColor = colors[(type - 1) % 3];
            list.add(data);
        }
        adapter.addList(list);
    }
}

这了的数据采用的是模拟数据,实际项目开发中替换成后台返回的数据,根据实际的数据做相应的代码调整;这样大致效果就实现了;


device-2019-03-24-182922.gif

接下来看下GridView和ListView混合条目的效果实现,在上面RecyclerView多条目的基础来实现,首先将RecyclerView的LayoutManager换成GridLayoutManager,其实系统GridLayoutManager是继承自LinearLayoutManager,其实将GridLayoutManager的spanSize设置成1就是ListView的列表效果了;

        final GridLayoutManager gridLayoutManager = new GridLayoutManager(this, 2);
        gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
            @Override
            public int getSpanSize(int position) {
                int type = recyclerview.getAdapter().getItemViewType(position);
                if (type == DataModel.TYPE_THREE) {
                    return gridLayoutManager.getSpanCount();
                } else {
                    return 1;
                }
            }
        });
        recyclerview.setLayoutManager(gridLayoutManager);

根据viewType的类型去设置返回SpanSize的值就可以实现GridView和ListView混合条目的效果了;

device-2019-03-24-183658.gif

源码地址

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,376评论 6 491
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,126评论 2 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,966评论 0 347
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,432评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,519评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,792评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,933评论 3 406
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,701评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,143评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,488评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,626评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,292评论 4 329
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,896评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,742评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,977评论 1 265
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,324评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,494评论 2 348