ByRecyclerView多布局:实现列数不同效果

976 阅读1分钟

1.先看效果图

2.分析首页布局

备注:标题栏吸顶效果先忽略,如果想了解滑动吸顶效果,可以去我的首页查看其他文章(酷炫吸顶效果)

a.首先,整个布局是一个ByRecyclerView

b.ByRecyclerView实现多布局

c.顶部的轮播图和分类按钮,是ByRecyclerView的第一项

d.下面才是真正的列表数据

适配器中代码,分类部分:

    //根据条件返回条目的类型
    @Override
    public int getItemViewType(int position) {
        if (position == 0) {
            return ITEM_TYPE_1;
        } else {
            return ITEM_TYPE_2;
        }
    }
    
        @NonNull
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
        RecyclerView.ViewHolder holder = null;
        //如果条目的类型等于1,加载轮播图,否则加载文章列表

        if (i == ITEM_TYPE_1) {
            View viewTop = LayoutInflater.from(activity).inflate(R.layout.home_tab,  viewGroup, false);
            if (holder == null) {
                holder = new BannnerViewHolder(viewTop);
            }
        } else if (i == ITEM_TYPE_2) {
            View view = LayoutInflater.from(activity).inflate(R.layout.item_layout_like1, viewGroup, false);
            /**
             * 用此方法margin无效果
             */
//            View view = LayoutInflater.from(activity).inflate(R.layout.item_layout_like1, null);
            if (holder == null) {
                holder = new ArticleViewHolder(view);
            }
        }
        return holder;
    }

3.为ByRecyclerView添加适配器

可以看到,recyclerView被设置为2列

GridLayoutManager manager = new GridLayoutManager(getActivity(), 2);
recyclerView.setLayoutManager(manager);
homeLikeAdapter = new HomeAdapter3(activity);
homeLikeAdapter.setHasStableIds(true);
recyclerView.setAdapter(homeLikeAdapter);

4.那么如何让position=0的第一项,可以占独占一列呢,重点来咯:

        /**
         * 解决recyclerview多布局,动态控制列数
         * 第一个item是1列,后面都是2列
         */
        manager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
            @Override
            public int getSpanSize(int position) {
                int spanSize;
                if (homeLikeAdapter.getItemViewType(position) == HomeAdapter1.ITEM_TYPE_1) {
                    spanSize = 2;//跨2列
                } else if (homeLikeAdapter.getItemViewType(position) == HomeAdapter1.ITEM_TYPE_2) {
                    spanSize = 1;//跨1列
                } else {
                    spanSize = 2;
                }
                return spanSize;
            }
        });

为了让单篇文章的篇幅简单,我会一个个问题独立出来写哦~