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 {
    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 {
    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 {
    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 extends RecyclerView.ViewHolder {
    public BaseViewHolder(@NonNull View itemView) {
        super(itemView);
    }
    public abstract void bindHolder(T t);
}

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

public class DemoAdapter extends RecyclerView.Adapter {
    private LayoutInflater mInflater;
    private List 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 holder = (BaseViewHolder) 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 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 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

源码地址