RecyclerView和CardView的使用
2016-07-05 15:16
260 查看
前言:Material Design Library系列博客写完后总觉得缺少了点什么,后来一想RecyclerView和CardView虽然是android-suport-v7-21中添加的,但也是Material Design不可或缺的一部分,所以在这篇博客中结合SwipeRefreshLayout实现一个下拉刷新的Demo做个笔记。
接下来实现的效果是这样的:
通过下拉刷新增加item
![](https://oscdn.geek-share.com/Uploads/Images/Content/201908/20/731d01803fe7a4ae59b472e5bcd6a2de)
1.新建工程并添加依赖:
2.新建一个布局recycler_item.xml作为RecyclerView的每个item,代码如下:
这里只是在CardView下简单放置了一个TextView。
CardView下有三个重要的属性:
cardBackgroundColor用来设置卡片的背景颜色
cardCornerRadius用来设置卡片的四个圆角尺寸
elevation用来设置卡片在Z轴上的悬浮尺寸
3.修改activity_main.xml代码如下:
这里用SwipeRefreshLayout将RecyclerView包裹住,需要注意的是SwipeRefreshLayout下只能有一个直接子View。
4.新建一个适配器类MyRecyclerAdapter用于RecyclerView的数据适配,代码如下:
可以看到MyRecyclerView类重写了三个方法:
onCreateViewHolder() => inflater出每个item的view,返回一个包含了具体view的ViewHolder
onBindViewHolder() => 该方法通过接收ViewHolder和position这两个参数来确定是RecyclerView中的哪个item,然后将data与ViewHolder进行绑定,此时的ViewHolder已经是一个具有View和data的完整对象了
getItemCount() => 顾名思义,获取item的数目
5.在onCreate()方法中加入RecyclerView部分的代码,如下:
RecyclerView的使用主要分为三步:获取实例 -> 设置LayoutManager -> 添加适配器
/**----------到了这里RecyclerView的使用其实已经完成了,接下来的代码主要是为了增加对下拉刷新的支持!---------*/
6.在onCreate()方法中加入SwipeRefreshLayout的设置监听代码:
7.添加handler处理部分代码:
SwipeRefreshLayout下主要有5个方法:
setOnRefreshListener() => 设置手势滑动监听器
setProgressBackgroundColor() => 设置进度圈的背景颜色
setColorSchemeResources() => 设置进度动画的颜色
setRefreshing() => 设置组件是否在刷新,一般在刷新完成后设置为false
setSize() => 设置进度圈的大小,只有两个值:DEFAULT、LARGE
源码地址:http://download.csdn.net/detail/chenhao0428/9567747
想全面完整地学习Material Design可以参考这里:http://www.mobileui.cn/material-design/
接下来实现的效果是这样的:
通过下拉刷新增加item
1.新建工程并添加依赖:
compile 'com.android.support:recyclerview-v7:23.4.0' compile 'com.android.support:cardview-v7:23.4.0'
2.新建一个布局recycler_item.xml作为RecyclerView的每个item,代码如下:
<?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:id="@+id/id_card_view" android:layout_width="match_parent" android:layout_height="60dp" android:layout_margin="4dp" app:cardBackgroundColor="#AABBCC" app:cardCornerRadius="8dp" android:elevation="2dp"> <TextView android:id="@+id/id_item_tv" android:layout_width="match_parent" android:layout_height="wrap_content" android:textSize="40sp" android:layout_gravity="center"/> </android.support.v7.widget.CardView>
这里只是在CardView下简单放置了一个TextView。
CardView下有三个重要的属性:
cardBackgroundColor用来设置卡片的背景颜色
cardCornerRadius用来设置卡片的四个圆角尺寸
elevation用来设置卡片在Z轴上的悬浮尺寸
3.修改activity_main.xml代码如下:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v4.widget.SwipeRefreshLayout android:id="@+id/id_swipe_refresh" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v7.widget.RecyclerView android:id="@+id/id_recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" android:scrollbars="vertical"/> </android.support.v4.widget.SwipeRefreshLayout> </LinearLayout>
这里用SwipeRefreshLayout将RecyclerView包裹住,需要注意的是SwipeRefreshLayout下只能有一个直接子View。
4.新建一个适配器类MyRecyclerAdapter用于RecyclerView的数据适配,代码如下:
class MyRecyclerAdapter extends RecyclerView.Adapter<MyRecyclerAdapter.ViewHolder> { private LayoutInflater inflater; public MyRecyclerAdapter(Context context) { inflater = LayoutInflater.from(context); mItemNum = 5; mItemDatas = new ArrayList<String>(); for (int i=0; i<mItemNum; i++) { mItemDatas.add(i, "item" + (i+1)); } } @Override public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { View view = inflater.inflate(R.layout.recycler_item, parent, false); ViewHolder viewHolder = new ViewHolder(view); return viewHolder; } @Override public void onBindViewHolder(ViewHolder holder, int position) { holder.itemTv.setText(mItemDatas.get(position)); } @Override public int getItemCount() { return mItemDatas.size(); } //自定义的ViewHolder,持有每个Item的所有界面元素 public class ViewHolder extends RecyclerView.ViewHolder { public CardView itemCV; public TextView itemTv; public ViewHolder(View view) { super(view); itemCV = (CardView) view.findViewById(R.id.id_card_view); itemTv = (TextView) view.findViewById(R.id.id_item_tv); } } }
可以看到MyRecyclerView类重写了三个方法:
onCreateViewHolder() => inflater出每个item的view,返回一个包含了具体view的ViewHolder
onBindViewHolder() => 该方法通过接收ViewHolder和position这两个参数来确定是RecyclerView中的哪个item,然后将data与ViewHolder进行绑定,此时的ViewHolder已经是一个具有View和data的完整对象了
getItemCount() => 顾名思义,获取item的数目
5.在onCreate()方法中加入RecyclerView部分的代码,如下:
mRecyclerView = (RecyclerView) findViewById(R.id.id_recycler_view); //设置固定大小 mRecyclerView.setHasFixedSize(true); //创建线性布局 mRecyclerLayoutManager = new LinearLayoutManager(this); //垂直方向 mRecyclerLayoutManager.setOrientation(OrientationHelper.VERTICAL); //给RecyclerView设置布局管理器 mRecyclerView.setLayoutManager(mRecyclerLayoutManager); //创建适配器 mAdapter = new MyRecyclerAdapter(this); mRecyclerView.setAdapter(mAdapter);
RecyclerView的使用主要分为三步:获取实例 -> 设置LayoutManager -> 添加适配器
/**----------到了这里RecyclerView的使用其实已经完成了,接下来的代码主要是为了增加对下拉刷新的支持!---------*/
6.在onCreate()方法中加入SwipeRefreshLayout的设置监听代码:
swipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.id_swipe_refresh); swipeRefreshLayout.setColorSchemeResources(R.color.colorPrimary); swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() { @Override public void onRefresh() { new Thread(new Runnable() { @Override public void run() { mItemDatas.add(mItemNum, "item" + (mItemNum+1)); mItemNum++; try { Thread.sleep(1000); } catch (InterruptedException e) { e.printStackTrace(); } mHandler.sendEmptyMessage(0); } }).start(); } });
7.添加handler处理部分代码:
private Handler mHandler = new Handler(){ @Override public void handleMessage(Message msg) { super.handleMessage(msg); swipeRefreshLayout.setRefreshing(false); mAdapter.notifyDataSetChanged(); } };
SwipeRefreshLayout下主要有5个方法:
setOnRefreshListener() => 设置手势滑动监听器
setProgressBackgroundColor() => 设置进度圈的背景颜色
setColorSchemeResources() => 设置进度动画的颜色
setRefreshing() => 设置组件是否在刷新,一般在刷新完成后设置为false
setSize() => 设置进度圈的大小,只有两个值:DEFAULT、LARGE
源码地址:http://download.csdn.net/detail/chenhao0428/9567747
想全面完整地学习Material Design可以参考这里:http://www.mobileui.cn/material-design/
相关文章推荐
- .sh文件无法执行
- [异常解决] Keil安装好nRF51822开发环境,运行DEMO报错:Error:“GPIOTE_CONFIG_NUM_OF_LOW_POWER_ENVENTS” is undefined
- JSON.stringify 语法实例讲解 字符串
- APICloud携技术入滇 助力互联网创业
- 转 整理 Linux服务器部署系列之一—Apache篇2
- 调整Oracle应用系统性能的原则和方法(1)
- R语言常用函数汇总
- CoreData轻量级版本迁移
- TortoiseGit连接github不用每次输入用户名和密码的方法
- SAP物料删除标记
- 0705 每日小记 Fragment的onActivityResult()方法
- Java如何实现对Mysql数据库的行锁
- iOS开发-关闭/收起键盘方法总结
- ViewPage判断左右滑动
- hdu_5145_NPY and girls(莫队算法+组合)
- 右结合性
- mmap
- Linux vi命令使用
- 使用JXL进行后台生成excel文件
- 储蓄银行不良贷款增加