recyclerview实现多条目

来源：互联网发布：域名如何做泛解析编辑：程序博客网时间：2024/05/16 06:51

本技术博客来自 http://blog.csdn.net/qq_35353487
在项目中基本上都会用到的多种item(条目)的加载比如大家常见的app( <网易新闻>app的新闻的列表,<新闻头条>app的新闻列表) 都是采用了加载多种item的布局我们先来看一下效果.

这是一张来自今日头条的新闻界面我们今天就按着这个界面的布局来写 . 首先看这个界面分为三部分第一条item 是加载的大图片,第二个item 左边是文字右边是一个小图片,第三个item上面是文字,底部分为三个相同的小图片

这里写图片描述

下面这张图是咱们今天所实现的图

:**
(有点丑但是和<今日头条>实现的逻辑,所编写的代码还是一样的..不要在意细节不要在意细节…)

这里写图片描述

今天咱们是用RecyclerView来实现这个多种Item的加载.
其实最关键的是要复写RecyclerView的Adapter中的getItemViewType()方法这个方法就根据条件返回条目的类型这个MoreTypeBean 是用来传数据的没必要跟我写的一样,
其实就是从activity中传到adapter中的数据中必须要有一个type字段来判断这个item对象需要那种视图,然后return出一个标记,在onCreateViewHolder中在引用所对应的item布局.

//重写getItemViewType方法 根据条件返回条目的类型    @Override    public int getItemViewType(int position) {        MoreTypeBean moreTypeBean = mData.get(position);        if (moreTypeBean.type == 0) {            return TYPE_PULL_IMAGE;        } else if (moreTypeBean.type == 1) {            return TYPE_RIGHT_IMAGE;        } else {            return TYPE_THREE_IMAGE;        }    }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

一般有多少种类型我们定义多少种常量.(我今天写了三种布局所以我定义了三个)

  //定义三种常量  表示三种条目类型    public static final int TYPE_PULL_IMAGE = 0;    public static final int TYPE_RIGHT_IMAGE = 1;    public static final int TYPE_THREE_IMAGE = 2;1
2
3
4

有了上面定义的常量之后在onCreateViewHolder里根据viewtype来判断所引用的item布局类型这样每一条item就会不一样了

    @Override    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {        //创建不同的 ViewHolder        View view;        //根据viewtype来判断        if (viewType == TYPE_PULL_IMAGE) {            view =View.inflate(parent.getContext(),R.layout.item_pull_img,null);            return new PullImageHolder(view);        } else if (viewType == TYPE_RIGHT_IMAGE) {            view =View.inflate(parent.getContext(),R.layout.item_right_img,null);            return new RightImageHolder(view);        } else {            view =View.inflate(parent.getContext(),R.layout.item_three_img,null);            return new ThreeImageHolder(view);        }    }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

创建三种不同的ViewHolder

    private class PullImageHolder extends RecyclerView.ViewHolder {        public PullImageHolder(View itemView) {            super(itemView);        }    }    private class RightImageHolder extends RecyclerView.ViewHolder {        public RightImageHolder(View itemView) {            super(itemView);        }    }    private class ThreeImageHolder extends RecyclerView.ViewHolder {        public ThreeImageHolder(View itemView) {            super(itemView);        }    }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

下面把所有的代码都给大家:
Activity中的代码

public class Recycler_variety_Activity extends Activity {    private int[] icons = {R.drawable.test, R.drawable.test1, R.drawable.test2, R.drawable.test3, R.drawable.test4, R.drawable.test5, R.drawable.test6};    private RecyclerView mRecy;    private List<MoreTypeBean> mData;    @Override    protected void onCreate(@Nullable Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.recycler_variety_activity);        initView();        initData();        initViewOper();    }    private void initView() {        mRecy = (RecyclerView) findViewById(R.id.act_recycler_variety_recycler);    }    private void initData() {        mData = new ArrayList<>();//        随机数 用来标记item界面的类型        Random random = new Random();        for (int i = 0; i < icons.length; i++) {            MoreTypeBean more = new MoreTypeBean();            more.pic = icons[i];            more.type = random.nextInt(3);            mData.add(more);        }    }    private void initViewOper() {        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);        mRecy.setLayoutManager(linearLayoutManager);        Recycler_variety_Adapter adapter = new Recycler_variety_Adapter(mData);        mRecy.setAdapter(adapter);    }}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

recyclerview_test_layout的布局就是只有一个RecyclerView

   <android.support.v7.widget.RecyclerView        android:id="@+id/act_recycler_variety_recycler"        android:layout_width="match_parent"        android:background="#d3d3d3"        android:layout_height="match_parent"/>1
2
3
4
5

RecyclerView的Adapter

public class Recycler_variety_Adapter extends RecyclerView.Adapter {    //定义三种常量  表示三种条目类型    public static final int TYPE_PULL_IMAGE = 0;    public static final int TYPE_RIGHT_IMAGE = 1;    public static final int TYPE_THREE_IMAGE = 2;    private List<MoreTypeBean> mData;    public Recycler_variety_Adapter(List<MoreTypeBean> data) {        this.mData = data;    }    @Override    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {        //创建不同的 ViewHolder        View view;        //根据viewtype来创建条目        if (viewType == TYPE_PULL_IMAGE) {            view =View.inflate(parent.getContext(),R.layout.item_pull_img,null);            return new PullImageHolder(view);        } else if (viewType == TYPE_RIGHT_IMAGE) {            view =View.inflate(parent.getContext(),R.layout.item_right_img,null);            return new RightImageHolder(view);        } else {            view =View.inflate(parent.getContext(),R.layout.item_three_img,null);            return new ThreeImageHolder(view);        }    }    @Override    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {    }    @Override    public int getItemCount() {        if (mData != null) {            return mData.size();        }        return 0;    }    //根据条件返回条目的类型    @Override    public int getItemViewType(int position) {        MoreTypeBean moreTypeBean = mData.get(position);        if (moreTypeBean.type == 0) {            return TYPE_PULL_IMAGE;        } else if (moreTypeBean.type == 1) {            return TYPE_RIGHT_IMAGE;        } else {            return TYPE_THREE_IMAGE;        }    }    /**     * 创建三种ViewHolder     */    private class PullImageHolder extends RecyclerView.ViewHolder {        public PullImageHolder(View itemView) {            super(itemView);        }    }    private class RightImageHolder extends RecyclerView.ViewHolder {        public RightImageHolder(View itemView) {            super(itemView);        }    }    private class ThreeImageHolder extends RecyclerView.ViewHolder {        public ThreeImageHolder(View itemView) {            super(itemView);        }    }}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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

item_pull_img布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:orientation="vertical"    >    <LinearLayout        android:layout_width="match_parent"        android:padding="7dp"        android:background="#fff"        android:orientation="vertical"        android:layout_height="wrap_content">    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:textColor="#000"        android:text="多种条目类型,多种条目类型,多种条目类型,多种条目类型,多种条目类型"        android:textSize="16sp"        />    <ImageView        android:layout_width="match_parent"        android:layout_height="150dp"        android:background="@drawable/sucai6"        android:scaleType="fitXY"        />    </LinearLayout>    <View        android:layout_marginTop="3dp"        android:layout_width="match_parent"        android:layout_height="1dp"        android:background="#d3d3d3"        /></LinearLayout>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

item_right_img布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="100dp"    android:orientation="vertical"    >    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="#fff"        android:orientation="horizontal"        android:padding="7dp">        <TextView            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:text="多种条目类型,多种条目类型,多种条目类型,多种条目类型,多种条目类型,多种条目类型,多种条目类型,多种条目类型"            android:textColor="#000"            android:textSize="16sp" />        <ImageView            android:layout_width="120dp"            android:layout_height="90dp"            android:background="@drawable/sucai" />    </LinearLayout>    <View        android:layout_marginTop="3dp"        android:layout_width="match_parent"        android:layout_height="1dp"        android:background="#d3d3d3"        /></LinearLayout>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

item_three_img布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:orientation="vertical"    >    <LinearLayout        android:orientation="vertical"        android:layout_width="match_parent"        android:background="#fff"        android:padding="7sp"        android:layout_height="wrap_content">    <TextView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="多种条目类型,多种条目类型,多种条目类型,多种条目类型,多种条目类型,多种条目类型多种条目类型"        android:textColor="#000"        android:textSize="16sp" />    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="horizontal">        <ImageView            android:layout_width="0dp"            android:layout_height="80dp"            android:layout_weight="1"            android:scaleType="fitXY"            android:src="@drawable/sucai3" />        <View            android:layout_width="6dp"            android:layout_height="0dp"/>        <ImageView            android:layout_width="0dp"            android:layout_height="80dp"            android:layout_weight="1"            android:scaleType="fitXY"            android:src="@drawable/sucai4" />        <View            android:layout_width="6dp"            android:layout_height="0dp"/>        <ImageView            android:layout_width="0dp"            android:layout_height="80dp"            android:layout_weight="1"            android:scaleType="fitXY"            android:src="@drawable/sucai5" />    </LinearLayout></LinearLayout>    <View        android:layout_marginTop="3dp"        android:background="#d3d3d3"        android:layout_width="match_parent"        android:layout_height="1dp"/></LinearLayout>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
54
55
56
57
58
59
60
61
62

MoreTypeBean

public class MoreTypeBean {    public int type;    public int pic;}

阅读全文

0 0