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阅读 206,839评论 6赞 482
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,543评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 153,116评论 0赞 344
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,371评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,384评论 5赞 374
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,111评论 1赞 285
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,416评论 3赞 400
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,053评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,558评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2赞 325
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1赞 334
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,756评论 4赞 324
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,324评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1赞 262
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2赞 355
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2赞 345