Android客户端之“微服私访”App的系统学习（六）RecyclerView 展现复杂数据列表以及水波纹效果+CardView显示头像

今天我们要实现的是项目中首页中的资讯数据展示，首先先来看一下获取资讯的流程逻辑图：

接着我们先来对项目的实现一睹为快

一、RecyclerView

.什么是RecyclerView?
.RecyclerView的优势在哪里？
.如何使用RecyclerView？

1.介绍

RecyclerView是Google在Android 5.0推出的一个升级版的ListView。官方介绍，用于在有限的窗口展现大量的数据 。RecylerView是support-v7包中的新组件，是一个强大的滑动组件。

2.优势

在RecyclerView问世之前，大家都习惯于用ListView和GridView来实现大量数据的列表展示。那么RecyclerView的为何更胜一筹？
(1).RecylerView标准化了ViewHolder,Recycler负责实现ViewHolder的回收重用，来实现高度解耦
(2).LayoutManager负责实现itemview的布局，控制其显示的方式，
(3).ItemDecoration负责在LayoutManager的基础上，控制Item间的间隔（可绘制），添加分割线
(4).ItemAnimator,控制Item增删的动画，俩实现更炫酷的动画效果

3.使用

3.1基本使用:

大家在使用时，导入support-v7即可对其使用。compile 'com.android.support:appcompat-v7:25.3.1'
RecyclerView的使用代码如下：
布局代码：

 <android.support.v7.widget.RecyclerView                android:id="@+id/fragment_home_task_list"                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:background="@color/white"                android:paddingLeft="@dimen/home_fragment_title_left"                android:paddingRight="@dimen/home_fragment_title_left"                />

基本设置：

mRecyclerView = (RecyclerView) view.findViewById(R.id.fragment_home_task_list);        //设置布局管理器        mRecyclerView.setLayoutManager(new LinearLayoutManager(mContext,      LinearLayoutManager.VERTICAL, false));        //设置adapter        mRecyclerView.setAdapter(task_adapter);        //设置Item增加、移除动画        mRecyclerView.setItemAnimator(new DefaultItemAnimator());        //添加分割线        mRecyclerView.addItemDecoration(new DividerItemDecoration(getActivity(), DividerItemDecoration.HORIZONTAL_LIST));

上面代码块是RecyclerView的基本使用设置。其重点在于对view回收与复用，来实现高度的解耦，其余的属性可以自己设置，方便开发者自由定制。因此可以实现炫酷的ListView,GridView,瀑布流等效果。

3.2 LayoutManager:

RecyclerView.LayoutManager是一个抽象类，系统提供了如下三个实现类
1.LinearLayoutManager 线性布局管理器，支持横向、纵向。
2.GridLayoutManager 网格布局管理器
3.StaggeredGridLayoutManager 瀑布流式布局管理器
这里我们采用的是LinearLayoutManager实现类

3.3 ItemDecoration:

RecyclerView并没有像List View那样有divider属性，因此可以通过以下两种方法来设计RecyclerView的分割线:
1.通过实现抽象类ItemDecoration，来自己定义一个MyItemDecoration,通过mRecyclerView.addItemDecoration(ItemDecoration decor, int index)
来设置自己的分割线，在实现ItemDecoration的实现类时我们需要根据添加不同的LayoutManager来特别定制相对应的ItemDecoration实现类，在这里就不详细介绍ItemDecoration的实现方式了，感兴趣的小伙伴可以参考 http://blog.csdn.net/lmj623565791/article/details/45059587

2.也可以自己在自己的adapter中的Item布局实现，通过添加View控件来实现。

3.4 ItemAnimator:

ItemAnimator也是一个抽象类，系统为我们提供了一个默认的实现类DefaultItemAnimator，在添加或者删除item时，可以通过ItemAnimator的实现类来设置动画，Github上有很多自定义的动画实现类，比如RecyclerViewItemAnimators。

// 设置item动画mRecyclerView.setItemAnimator(new DefaultItemAnimator());更新数据不是 adapter.notifyDataSetChanged()而是 notifyItemInserted(position) 与 notifyItemRemoved(position)

3.5 OnItemClick和OnItemLongClick:

RecyclerView并没有提供 OnItemClick和OnItemLongClick这两个接口，因此我们可以再adapter封装类中的onBindViewHolder方法中来给控件添加点击事件的回调

holder.root.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                //跳转到任务详情                Toast.makeText(mContxt, "任务详情界面敬请期待", Toast.LENGTH_SHORT).show();            }        });

3.6 水波纹效果:

为了给用户更加良好的体验效果，这里我们给RecyclerView添加一个点击时的水波纹效果，有如下两种实现方式
1.在item中设置，添加系统的水波纹效果：
在item布局中设置android:background="?android:attr/selectableItemBackground即可。
2.自己定义selector资源文件：
针对5.0以上的系统产生水波纹效果，所以我们新建一个drawable-v21目录来存放drawable文件

5.0以下drawable文件 ：

recyclerview_bg.xml

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_pressed="true" >        <shape android:shape="rectangle">            <solid android:color="#cfb34e"></solid>        </shape>    </item></selector>

5.0以上 drawable-v21：

recyclerview_rectangle.xml

<!--点击出现的水波纹效果是矩形的 --><?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">    <solid android:color="#FFFFFF" /></shape>

recyclerview_bg.xml

<?xml version="1.0" encoding="utf-8"?><!-- ripple 是5.0才出现的新标签--><ripple xmlns:android="http://schemas.android.com/apk/res/android"    android:color="#cfb34e" ><!-- 点击出现的水波纹的颜色 -->    <item android:drawable="@drawable/recyclerview_rectangle"/></ripple>

二、CardView

1.介绍

5.0推出的，在V7包中另一个向下兼容的新控件CardView，查看CardView的源码你会发现其实CardView继承于Framelayout，因此CardView其本质也是一个ViewGroup,即其他空间的容器，所以CardView具有Framelayout的所有属性。CardView的个性功能在于其自己的属性：

• CardView_cardBackgroundColor 设置背景色
• CardView_cardCornerRadius 设置圆角大小
• CardView_cardElevation 设置z轴阴影
• CardView_cardMaxElevation 设置z轴最大高度值
• CardView_cardUseCompatPadding 是否使用CompadPadding
• CardView_cardPreventCornerOverlap 是否使用PreventCornerOverlap
• CardView_contentPadding 内容的padding
• CardView_contentPaddingLeft 内容的左padding
• CardView_contentPaddingTop 内容的上padding
• CardView_contentPaddingRight 内容的右padding
• CardView_contentPaddingBottom 内容的底padding

通过自定义属性的设置，就可以达到特殊的图片展示效果，可以不再写shape文件就可以实现圆角和阴影的展示效果。

2.使用

1.之前我们在使用CyclerVie时，只需要导入V7包即可，但是在使用CardView的时候却需要手动添加。
compile 'com.android.support:cardview-v7:25.3.1'

2.本项目中采用CardView来设计用户头像和item中的imageview展示：
Item中imageView设置：

<android.support.v7.widget.CardView        android:id="@+id/cv"        android:layout_width="100dp"        android:layout_height="60dp"        android:layout_marginRight="10dp"        app:cardCornerRadius="12dp">        <ImageView            android:id="@+id/fragment_home_info_item_img"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:scaleType="centerCrop"            android:src="@mipmap/ic_launcher"            />    </android.support.v7.widget.CardView>

用户头像设置：

 <android.support.v7.widget.CardView                    android:layout_width="@dimen/width_120"                    android:layout_height="@dimen/height_120"                    android:layout_marginTop="@dimen/margin_16"                    android:background="@color/white"                    app:cardBackgroundColor="@color/colorAccent"                    app:cardCornerRadius="60dp"                    app:cardElevation="20dp">                    <ImageView                        android:layout_gravity="center"                        android:id="@+id/iv_header"                        android:layout_width="match_parent"                        android:layout_height="match_parent"                        android:src="@drawable/touxiang"/>                </android.support.v7.widget.CardView>

看一下头像的展示效果：

今天的内容就说到这里了，最近因为工作原因，博客更新的速度放慢了好多，难得周末，所以花时间持续更新后续几篇，欢迎小伙伴们一起学习交流~

至此，依旧为大家推荐几个干活福利：
1:开发工具类集合 https://github.com/Blizzard-liu/AndroidUtils
2：电脑控制手机 totalControl AirDroid vysor
3：在线工具集合 http://tool.lu/
4:插件 sexyeditor activate-power-mode

参考资料：
RecyclerView: http://blog.csdn.net/lmj623565791/article/details/45059587
水波纹：http://blog.csdn.net/qq_29262849/article/details/50449044
CardView:http://blog.csdn.net/javacainiao931121/article/details/51720807

代码资料，请戳这里~