Android RecyclerView 多布局与混排

最新推荐文章于 2024-07-18 11:35:02 发布

爱笑的肉球

最新推荐文章于 2024-07-18 11:35:02 发布

阅读量683

点赞数 1

分类专栏： RecyclerView 文章标签： RecyclerView

本文链接：https://blog.csdn.net/qq_24429935/article/details/74418718

版权

RecyclerView 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

多布局

这里写图片描述
关于RecyclerView的基本用法参考下面三篇博客：
Android RecyclerView之代替ListView与GridView
Android RecyclerView之添加Item分割线
 Android RecyclerView 的瀑布流式布局

多布局思路：

利用Adapter的getItemViewType()方法返回不同的ViewType在onCreateViewHolder中获取不同的布局返回不同的ViewHolder（在本例子中有三种布局所以就出现了三种ViewHolder）

主要思路代码：

//返回不同的type值
  @Override
    public int getItemViewType(int position) {

        return mList.get(position).type;

    }

  @Override
    public MyRecycleViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        MyRecycleViewHolder vh = null;
        //判断viewtype类型返回不同Viewholder
        switch (viewType) {
            case DataModel.TYPE_APPLE:
                vh = new MyRecycleViewHolderOne(mInflater.inflate(R.layout.item_one, parent,false));
                break;
            case DataModel.TYPE_BANANA:
                vh = new MyRecycleViewHolderTwo(mInflater.inflate(R.layout.item_two, parent,false));
                break;
            case DataModel.TYPE_STREWBERRY:
                vh = new MyRecycleViewHolderThree(mInflater.inflate(R.layout.item_three, parent,false));
                break;
        }
        return vh;
    }

 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

完整代码展示

因为三种布局类型分别为
一：只有一个图片（水果图）
二：一个图片一个文本（水果图+水果名）
三：一个图片一个文本一个图片（水果图+水果名+Android小机器人）
item布局简单就不展示代码了。

Activity

public class MyRecyleDemo extends AppCompatActivity {
    private RecyclerView mRecyclerView;
    private MyRecycleAdapter mAdapter;


    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //这里布局里面只有一个RecyclerView
        setContentView(R.layout.recyclerview);
        mRecyclerView= (RecyclerView) findViewById(R.id.recycler);
        //为Recycler设置布局
        mRecyclerView.setLayoutManager(new LinearLayoutManager(this,LinearLayoutManager.VERTICAL,false));
        mAdapter=new MyRecycleAdapter(this);
        mRecyclerView.setAdapter(mAdapter);
        //初始化数据
        initData();
    }

    public void initData(){
        List<DataModel> datas=new ArrayList<>();
        //一共30个数据，三种类型，每种10个数据
        for (int i=0;i<30;i++){
        //前10个数据为类型一
            if(i>=0&&i<10){
                DataModel data=new DataModel();
                data.mImg=R.mipmap.apple;
                data.mName="苹果";
                data.mIcon=R.mipmap.ic_launcher;
                data.type=DataModel.TYPE_APPLE;
                datas.add(data);
            }else if(i>=10&&i<20){
                DataModel data=new DataModel();
                data.mImg=R.mipmap.banana;
                data.mName="香蕉";
                data.mIcon=R.mipmap.ic_launcher;
                data.type=DataModel.TYPE_BANANA;
                datas.add(data);
            }else {
                DataModel data=new DataModel();
                data.mImg=R.mipmap.strewberry;
                data.mName="草莓";
                data.mIcon=R.mipmap.ic_launcher;
                data.type=DataModel.TYPE_STREWBERRY;
                datas.add(data);
            }
        }
        //在adapter中添加数据
        mAdapter.setData(datas);
        mAdapter.notifyDataSetChanged();
    }
}

 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

DataModel

public class DataModel  {
    public static  final int TYPE_APPLE=1;
    public static  final int TYPE_BANANA=2;
    public static final int TYPE_STREWBERRY=3;
    public   int mImg;
    public String mName;
    public int mIcon;
    public int type;
}
 
 1
2
3
4
5
6
7
8
9
 
 1
2
3
4
5
6
7
8
9

Adapter

public class MyRecycleAdapter extends RecyclerView.Adapter<MyRecycleViewHolder> {
    private LayoutInflater mInflater;
    private List<DataModel> mList = new ArrayList<>();

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

    public void setData(List<DataModel> model) {
        mList.addAll(model);
    }

    @Override
    public MyRecycleViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        MyRecycleViewHolder vh = null;
        switch (viewType) {
            case DataModel.TYPE_APPLE:
                vh = new MyRecycleViewHolderOne(mInflater.inflate(R.layout.item_one, parent,false));
                break;
            case DataModel.TYPE_BANANA:
                vh = new MyRecycleViewHolderTwo(mInflater.inflate(R.layout.item_two, parent,false));
                break;
            case DataModel.TYPE_STREWBERRY:
                vh = new MyRecycleViewHolderThree(mInflater.inflate(R.layout.item_three, parent,false));
                break;
        }
        return vh;
    }

    @Override
    public void onBindViewHolder(MyRecycleViewHolder holder, int position) {
        holder.bindHolder(mList.get(position));
    }

    @Override
    public int getItemViewType(int position) {

        return mList.get(position).type;

    }

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

 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

ViewHolder

public  abstract class MyRecycleViewHolder extends RecyclerView.ViewHolder {
    public ImageView mImg;
    public TextView mTextView;
    public ImageView mIcon;
    public MyRecycleViewHolder(View itemView) {
        super(itemView);

    }
    public abstract void bindHolder(DataModel data);
}

 
 1
2
3
4
5
6
7
8
9
10
11
 
 1
2
3
4
5
6
7
8
9
10
11

ViewholderOne

public class MyRecycleViewHolderOne extends MyRecycleViewHolder {

    public MyRecycleViewHolderOne(View itemView) {
        super(itemView);
        mImg = (ImageView) itemView.findViewById(R.id.fruit_img);

    }
    @Override
    public void bindHolder(DataModel data) {
        mImg.setImageResource(data.mImg);
    }
}
 
 1
2
3
4
5
6
7
8
9
10
11
12
 
 1
2
3
4
5
6
7
8
9
10
11
12

ViewHolderTwo

public  class MyRecycleViewHolderTwo extends MyRecycleViewHolder{

    public MyRecycleViewHolderTwo(View itemView) {
        super(itemView);
        mImg = (ImageView) itemView.findViewById(R.id.fruit_img);
        mTextView = (TextView) itemView.findViewById(R.id.fruit_text);

    }

    @Override
    public void bindHolder(DataModel data) {
        mImg.setImageResource(data.mImg);
        mTextView.setText(data.mName);
    }
}
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

混排

未进行混排时：部分布局被压缩
这里写图片描述
进行混排，对第三种布局设置独占一行

混排思路

主要通过对GridLayoutManager 的 setSpanSizeLookup方法中的getSpanSize方法进行返回，如果你的列设置的为2，你的getSpanSize（）方法返回1则表示布局占1/2,也就是占据1列的宽度，如果返回为2则占2/2也就是占据2列宽度即1行。

主要运用代码

gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
            @Override
            public int getSpanSize(int position) {
              return ……;
            }
        });
 
 1
2
3
4
5
6
 
 1
2
3
4
5
6

具体代码如下：

//设置2列
final GridLayoutManager gridLayoutManager=new GridLayoutManager(this,2);
        gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
            @Override
            public int getSpanSize(int position) {
            //通过获取adapter来获取当前item的itemviewtype
                int type=mRecyclerView.getAdapter().getItemViewType(position);

                if (type==DataModel.TYPE_STREWBERRY){
                //返回2，占一行
                    return gridLayoutManager.getSpanCount();
                }else {
                    return 1;
                }
            }
        });
        mRecyclerView.setLayoutManager(gridLayoutManager);

爱笑的肉球

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Android RecyclerView 多布局与混排

多布局关于RecyclerView的基本用法参考下面三篇博客： Android RecyclerView之代替ListView与GridView Android RecyclerView之添加Item分割线 Android RecyclerView 的瀑布流式布局多布局思路：利用Adapter的getItemViewType()方法返回不同的ViewTyp
复制链接

扫一扫