前言:Material Design Library系列博客写完后总觉得缺少了点什么,后来一想RecyclerView和CardView虽然是android-suport-v7-21中添加的,但也是Material Design不可或缺的一部分,所以在这篇博客中结合SwipeRefreshLayout实现一个下拉刷新的Demo做个笔记。
接下来实现的效果是这样的:
通过下拉刷新增加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/