使用RecyclerView实现多样的View

最新推荐文章于 2024-07-18 11:35:02 发布
最新推荐文章于 2024-07-18 11:35:02 发布
阅读量344 收藏 1
点赞数 1
分类专栏： android 文章标签： Android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013073760/article/details/51169594
版权

根据（https://developer.android.com/intl/zh-cn/training/material/lists-cards.html）简单的学习了使用RecyclerView 和 CardView 来创建列表与卡片后，就想怎么让一个RecyclerView 根据数据呈现不同类型的CardView.

具体步骤：
PS:如果创建CardView和RecyclerView的方式都知道的话可以直接跳到第三步

第一步

：RecyclerView和Cardview 是Support Library的一部分。所以只需要在app/build.gradle中添加以下依赖，便能立即使用

    compile 'com.android.support:cardview-v7:24.0.0-alpha1'
    compile 'com.android.support:recyclerview-v7:24.0.0-alpha1'

第二步

创建cardview 和RecyclerView

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="160dp"
    app:cardElevation="8dp"
    android:layout_marginTop="4dp"
    android:layout_margin="16dp"
    app:cardBackgroundColor="@color/title_cardview">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="16sp"
            android:id="@+id/text"
            android:textColor="@color/white"
            android:layout_margin="16dp"
            android:text="日期"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/date"
            android:text="@string/date"
            android:textSize="16sp"
            android:textColor="@color/white"
            android:layout_marginLeft="0dp"
            android:layout_alignTop="@+id/text"
            android:layout_toEndOf="@+id/text" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/white"
            android:textSize="32sp"
            android:text="@string/task"
            android:layout_below="@+id/text"
            android:layout_alignStart="@+id/text"
            android:id="@+id/textView" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="添加任务"
            android:textColor="@color/white"
            style="?attr/borderlessButtonStyle"
            android:id="@+id/button"
            android:layout_above="@+id/textView"
            android:layout_alignParentEnd="true"
            android:layout_marginEnd="25dp" />
    </RelativeLayout>
</android.support.v7.widget.CardView>

第二个： cardviewtwo.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="160dp"
    app:cardElevation="8dp"
    android:layout_marginTop="4dp"
    android:layout_margin="16dp">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
  <TextView android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:textSize="24sp"
      android:id="@+id/text"
      android:layout_margin="16dp"
      android:text="我是天气预报哦"/>
  <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:id="@+id/score"
      android:text="32℃"
      android:textSize="72sp"
      android:layout_marginLeft="0dp"
      android:layout_below="@+id/text"
      android:layout_alignStart="@+id/text" />
    </RelativeLayout>
</android.support.v7.widget.CardView>

在activity_main.xml 中添加RecyclerView

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="#ffffff"
        app:elevation="1dp"
        app:theme="@style/AppTheme"
        >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="我是APP"
            android:textSize="@dimen/abc_text_size_title_material_toolbar">
        </TextView>
    </android.support.v7.widget.Toolbar>
    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        ></android.support.v7.widget.RecyclerView>
</LinearLayout>

在MainActivity中：

        ArrayList<Data> itemList = new ArrayList<>();
        itemList.add(new Data("4月17日","交作业",1));
        itemList.add(new Data("4月17日","25℃",2));
        itemList.add(new Data("4月18日","减肥减肥\n记得跑圈",1));
        itemList.add(new Data("4月17日","23℃",2));

        RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerview);
        RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(layoutManager);
        MyRecyclerAdapter myRecyclerAdapter =new MyRecyclerAdapter(itemList,this);
        recyclerView.setAdapter(myRecyclerAdapter);

在这里，我想实现的是根据参数使用不同的CardVIew,所以搞了个Data类

 public class Data{
        private int type;
        private String data1;
        private String data2;

        public Data(String data1, String data2, int type) {
            this.data1 = data1;
            this.data2 = data2;
            this.type = type;
        }

        public String getData1() {
            return data1;
        }

        public String getData2() {
            return data2;
        }

        public int getType() {
            return type;
        }
    }

好了，这些都设完了之后重头戏就来了

第三步

设置自定义的Adapter,想要让它显示各种各样的View的话,主要靠的是重载getItemViewType

@Override
        public int getItemViewType(int position) {

            return ItemList.get(position).getType();
        }

为每一种View设置一个ViewHolder类

 public class OneViewHolder extends CustomViewHolder
        {
            private TextView date;
            private TextView task;
            private Button add;
            public OneViewHolder(View itemView) {
                super(itemView);
                date = (TextView)itemView.findViewById(R.id.date);
                task = (TextView)itemView.findViewById(R.id.textView);
                add = (Button)itemView.findViewById(R.id.button);
            }
        }
        public class TwoViewHolder extends CustomViewHolder
        {
            private TextView date;
            private TextView temp;
            public TwoViewHolder(View itemView) {
                super(itemView);
                date = (TextView)itemView.findViewById(R.id.text);
                temp = (TextView)itemView.findViewById(R.id.score);
            }
        }

重载onCreateViewHolder函数

        private static final int TASK = 1;
        private static final int WEATHER =2;
        @Override
        public CustomViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            if(TASK == viewType)
            {
                View v =          LayoutInflater.from(mcontext).inflate(R.layout.cardview_one,parent,false);
                return new OneViewHolder(v);
            }
            else if(WEATHER == viewType)
            {
                View v = LayoutInflater.from(mcontext).inflate(R.layout.cardview_two,parent,false);
                return new TwoViewHolder(v);
            }
            return null;
        }

期中 viewType 就是之前getItemViewType 返回的拉

最后一步：onBindViewHolder()绑定数据到正确的Item视图上。

    @Override
        public void onBindViewHolder(CustomViewHolder holder, int position) {
            int type = ItemList.get(position).type;
            switch (type){
                case TASK:
                    OneViewHolder oneViewHolder = (OneViewHolder)holder;
                    oneViewHolder.date.setText(ItemList.get(position).getData1());
                    oneViewHolder.task.setText(ItemList.get(position).getData2());

                    break;
                case WEATHER:
                    TwoViewHolder twoViewHolder = (TwoViewHolder)holder;
                    twoViewHolder.date.setText(ItemList.get(position).getData1());
                    twoViewHolder.temp.setText(ItemList.get(position).getData2());
                    break;
            }
        }

贴一下全貌：

    public class MyRecyclerAdapter extends RecyclerView.Adapter<MyRecyclerAdapter.CustomViewHolder>{

        private static final int TASK = 1;
        private static final int WEATHER =2;

        public ArrayList<Data> ItemList;
        private Context mcontext;

        public MyRecyclerAdapter(ArrayList<Data> itemList, Context mcontext) {
            ItemList = itemList;
            this.mcontext = mcontext;
        }

        @Override
        public int getItemViewType(int position) {

            return ItemList.get(position).getType();
        }


        @Override
        public CustomViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            if(TASK == viewType)
            {
                View v = LayoutInflater.from(mcontext).inflate(R.layout.cardview_one,parent,false);
                return new OneViewHolder(v);
            }
            else if(WEATHER == viewType)
            {
                View v = LayoutInflater.from(mcontext).inflate(R.layout.cardview_two,parent,false);
                return new TwoViewHolder(v);
            }
            return null;
        }

        @Override
        public void onBindViewHolder(CustomViewHolder holder, int position) {
            int type = ItemList.get(position).type;
            switch (type){
                case TASK:
                    OneViewHolder oneViewHolder = (OneViewHolder)holder;
                    oneViewHolder.date.setText(ItemList.get(position).getData1());
                    oneViewHolder.task.setText(ItemList.get(position).getData2());

                    break;
                case WEATHER:
                    TwoViewHolder twoViewHolder = (TwoViewHolder)holder;
                    twoViewHolder.date.setText(ItemList.get(position).getData1());
                    twoViewHolder.temp.setText(ItemList.get(position).getData2());
                    break;
            }
        }

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

        public class CustomViewHolder extends RecyclerView.ViewHolder {
            public CustomViewHolder(View itemView) {
                super(itemView);
            }
        }

        public class OneViewHolder extends CustomViewHolder
        {
            private TextView date;
            private TextView task;
            private Button add;
            public OneViewHolder(View itemView) {
                super(itemView);
                date = (TextView)itemView.findViewById(R.id.date);
                task = (TextView)itemView.findViewById(R.id.textView);
                add = (Button)itemView.findViewById(R.id.button);
            }
        }
        public class TwoViewHolder extends CustomViewHolder
        {
            private TextView date;
            private TextView temp;
            public TwoViewHolder(View itemView) {
                super(itemView);
                date = (TextView)itemView.findViewById(R.id.text);
                temp = (TextView)itemView.findViewById(R.id.score);
            }
        }

    }

效果图
啊，成功了，虽然有点丑

虽然很丑，但是成功了
推荐阅读：RecyclerView技术栈（http://www.jianshu.com/p/16712681731e）

Aimee喜欢吃蓝莓
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
viewtype_Android RecyclerView示例–多个ViewType
从零开始的教程世界
07-09 836
viewtypeUp until now we’ve displayed same type of Views within a RecyclerView. In this tutorial, we’ll implement heterogeneous layouts inside a RecyclerView. 到目前为止，我们已经在RecyclerView中显示了相同类型的View。 在本教程...
RecyclerView通过GridLayoutManager实现多样式布局的示例
08-28
今天，我们将讨论如何使用 RecyclerView 通过 GridLayoutManager 实现多样式布局。 首先，让我们了解一下 GridLayoutManager 的基本概念。GridLayoutManager 是 Android 提供的一个 LayoutManager，用于实现网格...
Android RecyclerView 使用完全解析 体验艺术般的控件
weixin_30390075的博客
04-16 2570
转载请标明出处： http://blog.csdn.net/lmj623565791/article/details/45059587； 本文出自:【张鸿洋的博客】 概述 RecyclerView出现已经有一段时间了，相信大家肯定不陌生了，大家可以通过导入support-v7对其进行使用。 据官方的介绍，该控件用于在有限的窗口中展示大量数据集，其实...
recyclerview实现多种布局
最新发布
qq_68599810的博客
07-18 292
recyclerview实现多种布局
多类型的RecyclerView
ljngya的博客
10-14 425
1.由于recyclerView没有提供像Listview一样的addheadView的方法，就需要我们自己设置head。 布局很简单上下两个头和脚布局。内容写了一些假数据。贴一下adapter中的代码：public class HeadFootAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> { /**
RecyclerView的实现
qq_44844973的博客
04-07 539
移动开发作业二：
recyclerview简单实现
csdn
07-07 493
3.在MainActivity里面实例化这个控件 rv = (RecyclerView) findViewById(R.id.rv); 4.接下来设置 线性布局管理器 rv.setLayoutManager(new LinearLayoutManager(this)); 5.写一个假的数据源 List&lt;String&gt; jiadeshu...
商城类APP的商品分类页面实现，使用RecyclerView结合GridLayout减少嵌套
06-26
本示例将详细讲解如何通过使用RecyclerView结合GridLayout来实现这一目标，从而避免视图层级过深导致的性能问题。 首先，RecyclerView是一个高效的视图复用组件，它可以管理大量数据集并只渲染屏幕上可见的视图，...
安卓动画效果相关-RecyclerView加载不同view实现效果.rar
07-29
这个压缩包文件"安卓动画效果相关-RecyclerView加载不同view实现效果.rar"显然包含了一些关于如何在RecyclerView中实现不同视图（View）的动画效果的示例代码。RecyclerView通过其强大的Adapter和ViewHolder机制，...
RecyclerView加载不同view实现效果
06-07
本教程将深入探讨如何使用RecyclerView加载不同类型的视图（View）来实现丰富的显示效果。 RecyclerView的核心在于其适配器（Adapter）和布局管理器（LayoutManager），适配器负责数据的绑定和视图的创建，而布局...
RecyclerView实现瀑布流
07-04
RecyclerView实现瀑布流效果。
RecyclerView实现复杂布局（如淘宝京东首页）
07-16
RecyclerView实现复杂布局 包含了轮播图 头条滚动banner 沉浸式效果，viewpager等等 完美运行！效果不错！使用适配器 BaseRecyclerviewAdaperHelper。模仿购物app的首页 功能齐全！
RecyclerView 实现多种布局
11-10
写了个Demo，RecyclerView实现不同布局的demo，上半部分是Gridview，下半部分是ListView，目前还没有添加点击的监听回调，大家可以自行添加。
RecyclerView
04-11
RecyclerView实现ListView，GridView功能，横向纵向，瀑布流，多item列表
Android开发-RecyclerView实现加载多类型列表视图样式
_彼岸雨敲窗_的博客
01-18 1703
前 言 在平常的业务场景中RecyclerView加载列表视图样式都是单一的类型，但是有些应用场景下需要在RecyclerView下加载不同的列表视图样式。比如以下应用场景： 从上图中可以看出，在一个RecyclerView控件中可以同时加载两种不同的视图列表。那么下面就来看看如何实现这种效果。 编码实现 创建一个用于加载视图列表的Adapter public class FilmReviewAdapter extends RecyclerView.Adapter<RecyclerView.
RecyclerView的简单实现
LI_YUANQI的博客
11-19 353
public class MainActivity extends AppCompatActivity implements View.OnClickListener { private Button delete; private Button insert; private RecyclerView rlv; private Myadapter mMyadapter; int pager = ...
1.3 Recyclerview的实现与确定
qq_51108920的博客
07-20 71
实现Recyclervieew
RecyclerView实现多样Item布局教程
"RecyclerView的使用之多种Item加载布局详解" 在Android开发中，RecyclerView是一个强大的可滚动的视图，用于展示数据列表，尤其是在处理大量数据时。本文主要讲解如何在RecyclerView中实现多Item布局的加载，即...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值