Android客户端之“微服私访”App的系统学习(六)RecyclerView 展现复杂数据列表以及水波纹效果+CardView显示头像
2017-08-05 17:47
826 查看
今天我们要实现的是项目中首页中的资讯数据展示,首先先来看一下获取资讯的流程逻辑图:
接着我们先来对项目的实现一睹为快
.RecyclerView的优势在哪里?
.如何使用RecyclerView?
(1).RecylerView标准化了ViewHolder,Recycler负责实现ViewHolder的回收重用,来实现高度解耦
(2).LayoutManager负责实现itemview的布局,控制其显示的方式,
(3).ItemDecoration负责在LayoutManager的基础上,控制Item间的间隔(可绘制),添加分割线
(4).ItemAnimator,控制Item增删的动画,俩实现更炫酷的动画效果
RecyclerView的使用代码如下:
布局代码:
基本设置:
上面代码块是RecyclerView的基本使用设置。其重点在于对view回收与复用,来实现高度的解耦,其余的属性可以自己设置,方便开发者自由定制。因此可以实现炫酷的ListView,GridView,瀑布流等效果。
1.LinearLayoutManager 线性布局管理器,支持横向、纵向。
2.GridLayoutManager 网格布局管理器
3.StaggeredGridLayoutManager 瀑布流式布局管理器
这里我们采用的是LinearLayoutManager实现类
1.通过实现抽象类ItemDecoration,来自己定义一个MyItemDecoration,通过
来设置自己的分割线,在实现ItemDecoration的实现类时我们需要根据添加不同的LayoutManager来特别定制相对应的ItemDecoration实现类,在这里就不详细介绍ItemDecoration的实现方式了,感兴趣的小伙伴可以参考 http://blog.csdn.net/lmj623565791/article/details/45059587
2.也可以自己在自己的adapter中的Item布局实现,通过添加View控件来实现。
3.6 水波纹效果:
为了给用户更加良好的体验效果,这里我们给RecyclerView添加一个点击时的水波纹效果,有如下两种实现方式
1.在item中设置,添加系统的水波纹效果:
在item布局中设置
2.自己定义selector资源文件:
针对5.0以上的系统产生水波纹效果,所以我们新建一个drawable-v21目录来存放drawable文件
5.0以下drawable文件 :
recyclerview_bg.xml
5.0以上 drawable-v21:
recyclerview_rectangle.xml
recyclerview_bg.xml
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.本项目中采用CardView来设计用户头像和item中的imageview展示:
Item中imageView设置:
用户头像设置:
看一下头像的展示效果:
今天的内容就说到这里了,最近因为工作原因,博客更新的速度放慢了好多,难得周末,所以花时间持续更新后续几篇,欢迎小伙伴们一起学习交流~
至此,依旧为大家推荐几个干活福利:
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
代码资料,请戳这里~
接着我们先来对项目的实现一睹为快
一、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
代码资料,请戳这里~
相关文章推荐
- Android客户端之“微服私访”App的系统学习(七)XRecyclerView快速实现列表界面+自定义Search输入框,软键盘搜索按钮监听+TextView部分样式改变
- Android客户端之“微服私访”App的系统学习(五)使用Picasso实现轮播图以及使用自定义View实现个人中心页面
- Android客户端之“微服私访”App的系统学习(三)基于 OkHttp和Gson 快速获取解析服务数据
- Android客户端之“微服私访”App的系统学习(四)使用ViewPager+Fragment实现Tab
- Android客户端之“微服私访”App的系统学习(二)TextInputLayout实现登录界面和LitePal初始化本地数据库
- Android RecyclerView实现数据列表展示效果
- Android客户端之“微服私访”App的系统学习(一) 本地服务端环境的搭建和部署
- Android给CardView加边框以及水波纹效果
- Android客户端之“微服私访”App的系统学习(八)调用系统摄像头拍照并管理照片并使用Okhttp上传文件至后台
- Android-UI布局---RecyclerView学习(六)item添加删除展现的动画效果
- 用RecyclerView实现新闻列表页,包括头部的图片轮播,两种Item显示方式,下拉刷新和上拉加载以及限制列表的加载条目数
- [Android]自定义EmptyView列表数据为空显示
- Android-UI布局---RecyclerView学习(二)利用它做的相册集效果
- Android开发之TextView垂直显示List列表数据
- Android城市选择列表(一)——RecyclerView数据分组
- Android使用RecyclerView实现自定义列表、点击事件以及下拉刷新
- Android手把手教你实现卡片式瀑布流效果(RecyclerView+CardView,附源码)
- Android开发中Scrollview嵌套recyclerview时,recyclerview不显示数据
- Android中使用RecyclerView和CardView实现瀑布流效果(StaggeredGrid)
- Android——RecyclerView和CardView的学习