本讲内容:RecyclerView控件
一、RecyclerView控件概述
该控件用于在有限的窗口中展示大量数据集,例如:ListView、GridView。
1、可以通过布局管理器LayoutManager控制其显示的方式
2、可以通过ItemDecoration控制Item间的间隔
3、可以通过ItemAnimator控制Item增删的动画
示例一:
下面是res/layout/activity_main.xml 布局文件:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v7.widget.RecyclerView
android:id="@+id/id_recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:background="#44ff0000"
android:layout_height="72dp" >
<TextView
android:id="@+id/id_item"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center" />
</FrameLayout>
public class SimpleAdapter extends RecyclerView.Adapter<MyViewHolder> {
private LayoutInflater mInflater;
private Context mContext;
private List<String> mDatas;
public SimpleAdapter(Context context, List<String> datas) {
this.mContext = context;
this.mDatas = datas;
mInflater = LayoutInflater.from(context);// 加载布局管理器
}
public int getItemCount() {
return mDatas.size();
}
/**
* 绑定ViewHolder
*/
public void onBindViewHolder(MyViewHolder holder, int position) {
holder.tv.setText(mDatas.get(position));
}
/**
* 创建ViewHolder
*/
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
//将xml布局转换为view对象
View view = mInflater.inflate(R.layout.item_textview, parent, false);
MyViewHolder viewHolder = new MyViewHolder(view);
return viewHolder;
}
class MyViewHolder extends ViewHolder {
TextView tv;
public MyViewHolder(View view) {
super(view);
tv = (TextView) view.findViewById(R.id.id_item);
}
}
}
下面是DividerItemDecoration.java文件:(如果要设置分隔线则要用到)
public class DividerItemDecoration extends RecyclerView.ItemDecoration {
private static final int[] ATTRS = new int[] { android.R.attr.listDivider };
public static final int HORIZONTAL_LIST = LinearLayoutManager.HORIZONTAL;
public static final int VERTICAL_LIST = LinearLayoutManager.VERTICAL;
private Drawable mDivider;
private int mOrientation;
public DividerItemDecoration(Context context, int orientation) {
final TypedArray a = context.obtainStyledAttributes(ATTRS);
mDivider = a.getDrawable(0);
a.recycle();
setOrientation(orientation);
}
public void setOrientation(int orientation) {
if (orientation != HORIZONTAL_LIST && orientation != VERTICAL_LIST) {
throw new IllegalArgumentException("invalid orientation");
}
mOrientation = orientation;
}
@Override
public void onDraw(Canvas c, RecyclerView parent) {
Log.v("recyclerview - itemdecoration", "onDraw()");
if (mOrientation == VERTICAL_LIST) {
drawVertical(c, parent);
} else {
drawHorizontal(c, parent);
}
}
public void drawVertical(Canvas c, RecyclerView parent) {
final int left = parent.getPaddingLeft();
final int right = parent.getWidth() - parent.getPaddingRight();
final int childCount = parent.getChildCount();
for (int i = 0; i < childCount; i++) {
final View child = parent.getChildAt(i);
android.support.v7.widget.RecyclerView v = new android.support.v7.widget.RecyclerView(
parent.getContext());
final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
.getLayoutParams();
final int top = child.getBottom() + params.bottomMargin;
final int bottom = top + mDivider.getIntrinsicHeight();
mDivider.setBounds(left, top, right, bottom);
mDivider.draw(c);
}
}
public void drawHorizontal(Canvas c, RecyclerView parent) {
final int top = parent.getPaddingTop();
final int bottom = parent.getHeight() - parent.getPaddingBottom();
final int childCount = parent.getChildCount();
for (int i = 0; i < childCount; i++) {
final View child = parent.getChildAt(i);
final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
.getLayoutParams();
final int left = child.getRight() + params.rightMargin;
final int right = left + mDivider.getIntrinsicHeight();
mDivider.setBounds(left, top, right, bottom);
mDivider.draw(c);
}
}
@Override
public void getItemOffsets(Rect outRect, int itemPosition,
RecyclerView parent) {
if (mOrientation == VERTICAL_LIST) {
outRect.set(0, 0, 0, mDivider.getIntrinsicHeight());
} else {
outRect.set(0, 0, mDivider.getIntrinsicWidth(), 0);
}
}
}
下面是MainActivity.java主界面文件:
public class MainActivity extends Activity {
private RecyclerView mRecyclerView;
private List<String> mDatas;
private SimpleAdapter mAdapter;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initViews();
initDatas();
mAdapter = new SimpleAdapter(this, mDatas);
mRecyclerView.setAdapter(mAdapter);
// 设置RecyclerView的布局管理:1、创建一个线性布局管理器2、设置布局管理器
LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this,
LinearLayoutManager.VERTICAL, false);
mRecyclerView.setLayoutManager(linearLayoutManager);
// 设置RecyclerView的Item间分隔线
mRecyclerView.addItemDecoration(new DividerItemDecoration(this,
DividerItemDecoration.VERTICAL_LIST));
}
private void initViews() {
mRecyclerView = (RecyclerView) findViewById(R.id.id_recyclerview);
}
private void initDatas() {
mDatas = new ArrayList<String>();
for (int i = 'A'; i <= 'z'; i++) {
mDatas.add("" + (char) i);
}
}
}
该白色分割线是系统默认的,可以在theme.xml中找到该属性的使用情况。那么,使用系统的listDivider有什么好处呢?就是方便我们去随意的改变,该属性我们可以直接声明在:(注意在不同版本values-v11和values-v14也写上)
<style name="AppTheme" parent="AppBaseTheme">
<!-- All customizations that are NOT specific to a particular API-level can go here. -->
<item name="android:listDivider">@drawable/divider</item>
</style>
下面是res/drawable/divider.xml 自定义分隔线文件:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:centerColor="#ff00ff00"
android:endColor="#ff0000ff"
android:startColor="#ffff0000"
android:type="linear" />
<size android:height="4dp" />
</shape>
二、LayoutManager
上面实现了类似ListView样子的Demo,通过使用其默认的LinearLayoutManager。
RecyclerView.LayoutManager吧,这是一个抽象类,好在系统提供了3个实现类:
- LinearLayoutManager 现行管理器,支持横向、纵向。
- GridLayoutManager 网格布局管理器
- StaggeredGridLayoutManager 瀑布就式布局管理器
示例二:实现类似GridView
//mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
mRecyclerView.setLayoutManager(new GridLayoutManager(this,4));
下面是res/layout/item_textview.xml 布局文件:(去掉设置分隔线,通过背景色设置分隔线)
<span style="color:#333333;"><?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:background="#44ff0000"
</span><span style="color:#ff0000;">android:layout_margin="3dp"</span><span style="color:#333333;">
android:layout_height="72dp" >
<TextView
android:id="@+id/id_item"
android:layout_width="</span><span style="color:#ff0000;">72dp</span><span style="color:#333333;">"
android:layout_height="match_parent"
android:gravity="center" />
</FrameLayout></span>
示例三: StaggeredGridLayoutManager 瀑布就式布局管理器
mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(4,StaggeredGridLayoutManager.HORIZONTAL));
第二个参数传一个orientation,如果传入的是StaggeredGridLayoutManager.VERTICAL
代表有多少列;那么传入的如果是StaggeredGridLayoutManager.HORIZONTAL
就代表有多少行
示例四:
下面是res/layout/activity_main.xml 布局文件:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v7.widget.RecyclerView
android:id="@+id/id_recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
下面是res/layout/masonry_item.xml 布局文件:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="2dp"
android:background="#ffffff"
android:orientation="vertical" >
<ImageView
android:id="@+id/masonry_item_img"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="centerCrop" />
<TextView
android:id="@+id/masonry_item_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center" />
</LinearLayout>
public class Product {
private int img;
private String title;
public Product(int img, String title) {
this.img = img;
this.title = title;
}
public int getImg() {
return img;
}
public void setImg(int img) {
this.img = img;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
}
下面是SimpleAdapter.java文件:
public class SimpleAdapter extends RecyclerView.Adapter<MyViewHolder> {
private LayoutInflater mInflater;
private Context mContext;
private List<Product> mDatas;
public interface OnItemClickListener{
void onItemClick(View view,int position);
void onItemLongClick(View view,int position);
}
/**
* 自定义接口点击事件
*/
private OnItemClickListener mOnItemClickListener;
public void setOnItemClickListener(OnItemClickListener listener){
this.mOnItemClickListener=listener;
}
public SimpleAdapter(Context context, List<Product> datas) {
this.mContext = context;
this.mDatas = datas;
mInflater = LayoutInflater.from(context);// 加载布局管理器
}
public int getItemCount() {
return mDatas.size();
}
/**
* 绑定ViewHolder
*/
public void onBindViewHolder(final MyViewHolder holder, final int position) {
holder.mImageView.setImageResource(mDatas.get(position).getImg());
holder.mTextView.setText(mDatas.get(position).getTitle());
if(mOnItemClickListener!=null){
holder.mImageView.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
mOnItemClickListener.onItemClick(holder.mImageView, position);
}
});
holder.mImageView.setOnLongClickListener(new OnLongClickListener() {
public boolean onLongClick(View v) {
mOnItemClickListener.onItemLongClick(holder.mImageView, position);
return false;
}
});
}
}
/**
* 创建ViewHolder
*/
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
//将xml布局转换为view对象
View view = mInflater.inflate(R.layout.masonry_item, parent, false);
MyViewHolder viewHolder = new MyViewHolder(view);
return viewHolder;
}
class MyViewHolder extends ViewHolder {
ImageView mImageView;
TextView mTextView;
public MyViewHolder(View view) {
super(view);
mImageView=(ImageView) view.findViewById(R.id.masonry_item_img);
mTextView=(TextView) view.findViewById(R.id.masonry_item_title);
}
}
}
下面是MainActivity.java主界面文件:
public class MainActivity extends Activity {
private RecyclerView mRecyclerView;
private List<Product> productList;
private SimpleAdapter mAdapter;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mRecyclerView = (RecyclerView) findViewById(R.id.id_recyclerview);
mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(2,
StaggeredGridLayoutManager.VERTICAL));
initDatas();
mAdapter = new SimpleAdapter(this, productList);
mRecyclerView.setAdapter(mAdapter);
mAdapter.setOnItemClickListener(new OnItemClickListener() {
public void onItemLongClick(View view, int position) {
Toast.makeText(MainActivity.this, "long click:"+position, Toast.LENGTH_LONG).show();
}
public void onItemClick(View view, int position) {
Toast.makeText(MainActivity.this, "click:"+position, Toast.LENGTH_LONG).show();
}
});
}
private void initDatas() {
productList = new ArrayList<Product>();
Product p1 = new Product(R.drawable.p1, "我是照片1");
productList.add(p1);
Product p2 = new Product(R.drawable.p2, "我是照片2");
productList.add(p2);
Product p3 = new Product(R.drawable.p3, "我是照片3");
productList.add(p3);
Product p4 = new Product(R.drawable.p4, "我是照片4");
productList.add(p4);
Product p5 = new Product(R.drawable.p5, "我是照片5");
productList.add(p5);
Product p6 = new Product(R.drawable.p6, "我是照片6");
productList.add(p6);
Product p7 = new Product(R.drawable.p2, "我是照片7");
productList.add(p7);
Product p8 = new Product(R.drawable.p1, "我是照片8");
productList.add(p8);
Product p9 = new Product(R.drawable.p4, "我是照片9");
productList.add(p9);
Product p10 = new Product(R.drawable.p6, "我是照片10");
productList.add(p10);
Product p11 = new Product(R.drawable.p3, "我是照片11");
productList.add(p11);
}
}
参考文章http://blog.csdn.net/lmj623565791/article/details/45059587