RecyclerView加载多类型item 实现淘宝首页布局

主要为大家介绍如何用RecycleView来实现淘宝首页复杂的布局，做电商类app的小伙伴们可以略作参考。

首先上效果图：

下面说一下实现方式，主要思路就是根据不同的数据类型去制定不同的item类型，然后动态地去设置这些item的宽高，设置item的类型相信大家都会，我这里就不做阐述了，主要是说一下给不同类型的item设置不同的宽度。

首先，我们给RecyclerView设置一个列数为x的GridLayoutManager，然后再动态地为不同类型的item分别设置SpanSize。比如GridLayoutManager列数为4，item的SpanSize也为4，那么这个item的宽度就是RecyclerView宽度的100%，最终的效果就跟列表一样。同理，item的SpanSize如果是2，那么就占一行的一半宽度，item的SpanSize是1，占1/4宽度…

比如我在demo里面是把列数设为12：

HomeAdapter adapter = new HomeAdapter(this);
GridLayoutManager layoutManger = new GridLayoutManager(this, 12);
rcHome.setLayoutManager(layoutManger);
rcHome.setAdapter(adapter);

然后在adapter里面重写onAttachedToRecyclerView方法，为不同的ItemViewType设置不同的SpanSize：

    @Override
    public void onAttachedToRecyclerView(RecyclerView recyclerView) {
        super.onAttachedToRecyclerView(recyclerView);
        RecyclerView.LayoutManager manager = recyclerView.getLayoutManager();
        if (manager instanceof GridLayoutManager) {
            final GridLayoutManager gridManager = ((GridLayoutManager) manager);
            gridManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
                @Override
                public int getSpanSize(int position) {
                    int type = getItemViewType(position);
                    switch (type) {
                        case BANNER:
                            return 12;
                        case COLUMN:
                            return 3;
                        case MARQUEE:
                            return 12;
                        case NUM_TWO:
                            return 6;
                        case TITLE:
                            return 12;
                        case NUM_THREE:
                            return 4;
                        case NORMAL:
                            return 6;
                        default:
                            return 12;
                    }
                }
            });
        }
    }

12代表宽度占满全屏，3代表占屏幕的1/4，6代表占屏幕的1/2等等，最终就可以实现上图中的效果。

代码不多，就直接贴在下面了：

MainActivity

public class MainActivity extends AppCompatActivity {
   
    private Unbinder mUnBinder;
    @BindView(R.id.rc_home)
    RecyclerView rcHome;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mUnBinder = ButterKnife.bind(this);
        initView();
    }