RecyclerView多条目

RecyclerView实现加载多种条目类型,仿新闻列表多种item布局.

本技术博客来自 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;
}
阅读更多 登录后自动展开
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页