崇拜下鸿洋大神,原文地址:http://blog.csdn.net/lmj623565791/article/details/45059587java
RecyclerView出现已经有一段时间了,相信你们确定不陌生了,你们能够经过导入support-v7对其进行使用。
据官方的介绍,该控件用于在有限的窗口中展现大量数据集,其实这样功能的控件咱们并不陌生,例如:ListView、GridView。android
那么有了ListView、GridView为何还须要RecyclerView这样的控件呢?总体上看RecyclerView架构,提供了一种插拔式的体验,高度的解耦,异常的灵活,经过设置它提供的不一样LayoutManager,ItemDecoration , ItemAnimator实现使人瞠目的效果。git
鉴于咱们对于ListView的使用特别的熟悉,对比下RecyclerView的使用代码:github
mRecyclerView = findView(R.id.id_recyclerview); //设置布局管理器
mRecyclerView.setLayoutManager(layout); //设置adapter
mRecyclerView.setAdapter(adapter) //设置Item增长、移除动画
mRecyclerView.setItemAnimator(new DefaultItemAnimator()); //添加分割线
mRecyclerView.addItemDecoration(new DividerItemDecoration( getActivity(), DividerItemDecoration.HORIZONTAL_LIST));
ok,相比较于ListView的代码,ListView可能只须要去设置一个adapter就能正常使用了。而RecyclerView基本须要上面一系列的步骤,那么为何会添加这么多的步骤呢?架构
那么就必须解释下RecyclerView的这个名字了,从它类名上看,RecyclerView表明的意义是,我只管Recycler View,也就是说RecyclerView只管回收与复用View,其余的你能够本身去设置。能够看出其高度的解耦,给予你充分的定制自由(因此你才能够轻松的经过这个控件实现ListView,GirdView,瀑布流等效果)。app
package com.zhy.sample.demo_recyclerview; import java.util.ArrayList; import java.util.List; import android.os.Bundle; import android.support.v7.app.ActionBarActivity; import android.support.v7.widget.LinearLayoutManager; import android.support.v7.widget.RecyclerView; import android.support.v7.widget.RecyclerView.ViewHolder; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView; public class HomeActivity extends ActionBarActivity { private RecyclerView mRecyclerView; private List<String> mDatas; private HomeAdapter mAdapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_single_recyclerview); initData(); mRecyclerView = (RecyclerView) findViewById(R.id.id_recyclerview); mRecyclerView.setLayoutManager(new LinearLayoutManager(this)); mRecyclerView.setAdapter(mAdapter = new HomeAdapter()); } protected void initData() { mDatas = new ArrayList<String>(); for (int i = 'A'; i < 'z'; i++) { mDatas.add("" + (char) i); } } class HomeAdapter extends RecyclerView.Adapter<HomeAdapter.MyViewHolder> { @Override public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { MyViewHolder holder = new MyViewHolder(LayoutInflater.from( HomeActivity.this).inflate(R.layout.item_home, parent, false)); return holder; } @Override public void onBindViewHolder(MyViewHolder holder, int position) { holder.tv.setText(mDatas.get(position)); } @Override public int getItemCount() { return mDatas.size(); } class MyViewHolder extends ViewHolder { TextView tv; public MyViewHolder(View view) { super(view); tv = (TextView) view.findViewById(R.id.id_num); } } } }
<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:divider="#ffff0000" android:dividerHeight="10dp" 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="wrap_content" >
<TextView android:id="@+id/id_num" android:layout_width="match_parent" android:layout_height="50dp" android:gravity="center" android:text="1" />
</FrameLayout>
这么看起来用法与ListView的代码基本一致哈~~
看下效果图:ide
看起来好丑,Item间应该有个分割线,当你去找时,你会发现RecyclerView并无支持divider这样的属性。那么怎么办,你能够给Item的布局去设置margin,固然了这种方式不够优雅,咱们文章开始说了,咱们能够自由的去定制它,固然咱们的分割线也是能够定制的。布局
咱们能够经过该方法添加分割线: mRecyclerView.addItemDecoration()
该方法的参数为RecyclerView.ItemDecoration,该类为抽象类,官方目前并无提供默认的实现类(我以为最好能提供几个)。
该类的源码:测试
public static abstract class ItemDecoration { public void onDraw(Canvas c, RecyclerView parent, State state) { onDraw(c, parent); } public void onDrawOver(Canvas c, RecyclerView parent, State state) { onDrawOver(c, parent); } public void getItemOffsets(Rect outRect, View view, RecyclerView parent, State state) { getItemOffsets(outRect, ((LayoutParams) view.getLayoutParams()).getViewLayoutPosition(), parent); } @Deprecated public void getItemOffsets(Rect outRect, int itemPosition, RecyclerView parent) { outRect.set(0, 0, 0, 0); }
当咱们调用mRecyclerView.addItemDecoration()
方法添加decoration的时候,RecyclerView在绘制的时候,去会绘制decorator,即调用该类的onDraw和onDrawOver方法,动画
接下来咱们看一个RecyclerView.ItemDecoration
的实现类,该类很好的实现了RecyclerView添加分割线(当使用LayoutManager为LinearLayoutManager时)。
该类参考自:DividerItemDecoration
package com.zhy.sample.demo_recyclerview; /* * Copyright (C) 2014 The Android Open Source Project * * Licensed under the Apache License, Version 2.0 (the "License"); * limitations under the License. */
import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Rect; import android.graphics.drawable.Drawable; import android.support.v7.widget.LinearLayoutManager; import android.support.v7.widget.RecyclerView; import android.support.v7.widget.RecyclerView.State; import android.util.Log; import android.view.View; /** * This class is from the v7 samples of the Android SDK. It's not by me! * <p/> * See the license above for details. */
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); } } }
该实现类能够看到经过读取系统主题中的 Android.R.attr.listDivider
做为Item间的分割线,而且支持横向和纵向。若是你不清楚它是怎么作到的读取系统的属性用于自身,请参考个人另外一篇博文:Android 深刻理解Android中的自定义属性
获取到listDivider之后,该属性的值是个Drawable,在getItemOffsets
中,outRect去设置了绘制的范围。onDraw中实现了真正的绘制。
咱们在原来的代码中添加一句:
mRecyclerView.addItemDecoration(new DividerItemDecoration(this, DividerItemDecoration.VERTICAL_LIST));
ok,如今再运行,就能够看到分割线的效果了。
该分割线是系统默认的,你能够在theme.xml中找到该属性的使用状况。那么,使用系统的listDivider有什么好处呢?就是方便咱们去随意的改变,该属性咱们能够直接声明在:
<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
<item name="android:listDivider">@drawable/divider_bg</item>
</style>
而后本身写个drawable便可,下面咱们换一种分隔符:
<?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>
如今的样子是:
固然了,你能够根据本身的需求,去随意的绘制,反正是画出来的,随便玩~~
ok,看到这,你可能以为,这玩意真尼玛麻烦,彻底不能比拟的心爱的ListView。那么继续看。
好了,上面实现了相似ListView样子的Demo,经过使用其默认的LinearLayoutManager。
RecyclerView.LayoutManager吧,这是一个抽象类,好在系统提供了3个实现类:
上面咱们已经初步体验了下LinearLayoutManager,接下来看GridLayoutManager。
咱们尝试去实现相似GridView,秒秒钟的事情:
//mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
mRecyclerView.setLayoutManager(new GridLayoutManager(this,4));
只须要修改LayoutManager便可,仍是很nice的。
固然了,改成GridLayoutManager之后,对于分割线,前面的DividerItemDecoration就不适用了,主要是由于它在绘制的时候,好比水平线,针对每一个child的取值为:
final int left = parent.getPaddingLeft(); final int right = parent.getWidth() - parent.getPaddingRight();
由于每一个Item一行,这样是没问题的。而GridLayoutManager时,一行有多个childItem,这样就屡次绘制了,而且GridLayoutManager时,Item若是为最后一列(则右边无间隔线)或者为最后一行(底部无分割线)。
针对上述,咱们编写了DividerGridItemDecoration
。
package com.zhy.sample.demo_recyclerview; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Rect; import android.graphics.drawable.Drawable; import android.support.v7.widget.GridLayoutManager; import android.support.v7.widget.RecyclerView; import android.support.v7.widget.RecyclerView.LayoutManager; import android.support.v7.widget.RecyclerView.State; import android.support.v7.widget.StaggeredGridLayoutManager; import android.view.View; /** * * @author zhy * */
public class DividerGridItemDecoration extends RecyclerView.ItemDecoration { private static final int[] ATTRS = new int[] { android.R.attr.listDivider }; private Drawable mDivider; public DividerGridItemDecoration(Context context) { final TypedArray a = context.obtainStyledAttributes(ATTRS); mDivider = a.getDrawable(0); a.recycle(); } @Override public void onDraw(Canvas c, RecyclerView parent, State state) { drawHorizontal(c, parent); drawVertical(c, parent); } private int getSpanCount(RecyclerView parent) { // 列数
int spanCount = -1; LayoutManager layoutManager = parent.getLayoutManager(); if (layoutManager instanceof GridLayoutManager) { spanCount = ((GridLayoutManager) layoutManager).getSpanCount(); } else if (layoutManager instanceof StaggeredGridLayoutManager) { spanCount = ((StaggeredGridLayoutManager) layoutManager) .getSpanCount(); } return spanCount; } public void drawHorizontal(Canvas c, RecyclerView parent) { 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.getLeft() - params.leftMargin; final int right = child.getRight() + params.rightMargin + mDivider.getIntrinsicWidth(); final int top = child.getBottom() + params.bottomMargin; final int bottom = top + mDivider.getIntrinsicHeight(); mDivider.setBounds(left, top, right, bottom); mDivider.draw(c); } } public void drawVertical(Canvas c, RecyclerView parent) { 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 top = child.getTop() - params.topMargin; final int bottom = child.getBottom() + params.bottomMargin; final int left = child.getRight() + params.rightMargin; final int right = left + mDivider.getIntrinsicWidth(); mDivider.setBounds(left, top, right, bottom); mDivider.draw(c); } } private boolean isLastColum(RecyclerView parent, int pos, int spanCount, int childCount) { LayoutManager layoutManager = parent.getLayoutManager(); if (layoutManager instanceof GridLayoutManager) { if ((pos + 1) % spanCount == 0)// 若是是最后一列,则不须要绘制右边
{ return true; } } else if (layoutManager instanceof StaggeredGridLayoutManager) { int orientation = ((StaggeredGridLayoutManager) layoutManager) .getOrientation(); if (orientation == StaggeredGridLayoutManager.VERTICAL) { if ((pos + 1) % spanCount == 0)// 若是是最后一列,则不须要绘制右边
{ return true; } } else { childCount = childCount - childCount % spanCount; if (pos >= childCount)// 若是是最后一列,则不须要绘制右边
return true; } } return false; } private boolean isLastRaw(RecyclerView parent, int pos, int spanCount, int childCount) { LayoutManager layoutManager = parent.getLayoutManager(); if (layoutManager instanceof GridLayoutManager) { childCount = childCount - childCount % spanCount; if (pos >= childCount)// 若是是最后一行,则不须要绘制底部
return true; } else if (layoutManager instanceof StaggeredGridLayoutManager) { int orientation = ((StaggeredGridLayoutManager) layoutManager) .getOrientation(); // StaggeredGridLayoutManager 且纵向滚动
if (orientation == StaggeredGridLayoutManager.VERTICAL) { childCount = childCount - childCount % spanCount; // 若是是最后一行,则不须要绘制底部
if (pos >= childCount) return true; } else
// StaggeredGridLayoutManager 且横向滚动
{ // 若是是最后一行,则不须要绘制底部
if ((pos + 1) % spanCount == 0) { return true; } } } return false; } @Override public void getItemOffsets(Rect outRect, int itemPosition, RecyclerView parent) { int spanCount = getSpanCount(parent); int childCount = parent.getAdapter().getItemCount(); if (isLastRaw(parent, itemPosition, spanCount, childCount))// 若是是最后一行,则不须要绘制底部
{ outRect.set(0, 0, mDivider.getIntrinsicWidth(), 0); } else if (isLastColum(parent, itemPosition, spanCount, childCount))// 若是是最后一列,则不须要绘制右边
{ outRect.set(0, 0, 0, mDivider.getIntrinsicHeight()); } else { outRect.set(0, 0, mDivider.getIntrinsicWidth(), mDivider.getIntrinsicHeight()); } } }
主要在getItemOffsets
方法中,去判断若是是最后一行,则不须要绘制底部;若是是最后一列,则不须要绘制右边,整个判断也考虑到了StaggeredGridLayoutManager
的横向和纵向,因此稍稍有些复杂。最重要仍是去理解,如何绘制什么的不重要。通常若是仅仅是但愿有空隙,仍是去设置item的margin方便。
最后的效果是:
ok,看到这,你可能还以为RecyclerView不够强大?
可是若是咱们有这么个需求,纵屏的时候显示为ListView,横屏的时候显示两列的GridView,咱们RecyclerView能够轻松搞定,而若是使用ListView去实现仍是须要点功夫的~~~
固然了,这只是皮毛,下面让你心服口服。
瀑布流式的布局,其实他能够实现GridLayoutManager
同样的功能,仅仅按照下列代码:
// mRecyclerView.setLayoutManager(new GridLayoutManager(this,4));
mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(4, StaggeredGridLayoutManager.VERTICAL));
这两种写法显示的效果是一致的,可是注意StaggeredGridLayoutManager构造的第二个参数传一个orientation,若是传入的是StaggeredGridLayoutManager.VERTICAL
表明有多少列;那么传入的若是是StaggeredGridLayoutManager.HORIZONTAL
就表明有多少行,好比本例若是改成:
mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(4, StaggeredGridLayoutManager.HORIZONTAL));
那么效果为:
能够看到,固定为4行,变成了左右滑动。有一点须要注意,若是是横向的时候,item的宽度须要注意去设置,毕竟横向的宽度没有约束了,应为控件能够横向滚动了。
若是你须要同样横向滚动的GridView,那么恭喜你。
ok,接下来准备看大招,若是让你去实现个瀑布流,最起码不是那么随意就能够实现的吧?可是,若是使用RecyclerView,分分钟的事。
那么如何实现?其实你什么都不用作,只要使用StaggeredGridLayoutManager
咱们就已经实现了,只是上面的item布局咱们使用了固定的高度,下面咱们仅仅在适配器的onBindViewHolder
方法中为咱们的item设置个随机的高度(代码就不贴了,最后会给出源码下载地址),看看效果图:
是否是棒棒哒,经过RecyclerView去实现ListView、GridView、瀑布流的效果基本上没有什么区别,并且能够仅仅经过设置不一样的LayoutManager便可实现。
还有更nice的地方,就在于item增长、删除的动画也是可配置的。接下来看一下ItemAnimator。
ItemAnimator也是一个抽象类,好在系统为咱们提供了一种默认的实现类,期待系统多
添加些默认的实现。
借助默认的实现,当Item添加和移除的时候,添加动画效果很简单:
// 设置item动画
mRecyclerView.setItemAnimator(new DefaultItemAnimator());
系统为咱们提供了一个默认的实现,咱们为咱们的瀑布流添加以上一行代码,效果为:
若是是GridLayoutManager呢?动画效果为:
注意,这里更新数据集不是用adapter.notifyDataSetChanged()
而是 notifyItemInserted(position)
与notifyItemRemoved(position)
不然没有动画效果。
上述为adapter中添加了两个方法:
public void addData(int position) { mDatas.add(position, "Insert One"); notifyItemInserted(position); } public void removeData(int position) { mDatas.remove(position); notifyItemRemoved(position); }
Activity中点击MenuItem触发:
@Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.main, menu); return super.onCreateOptionsMenu(menu); } @Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case R.id.id_action_add: mAdapter.addData(1); break; case R.id.id_action_delete: mAdapter.removeData(1); break; } return true; }
好了,到这我对这个控件已经不是通常的喜欢了~~~
固然了只提供了一种动画,那么咱们确定能够去自定义各类nice的动画效果。
高兴的是,github上已经有不少相似的项目了,这里咱们直接引用下:RecyclerViewItemAnimators,你们本身下载查看。
提供了SlideInOutLeftItemAnimator
,SlideInOutRightItemAnimator
, SlideInOutTopItemAnimator
,SlideInOutBottomItemAnimator
等动画效果。
不过一个挺郁闷的地方就是,系统没有提供ClickListener和LongClickListener。
不过咱们也能够本身去添加,只是会多了些代码而已。
实现的方式比较多,你能够经过mRecyclerView.addOnItemTouchListener去监听而后去判断手势,
固然你也能够经过adapter中本身去提供回调,这里咱们选择后者,前者的方式,你们有兴趣本身去实现。
那么代码也比较简单:
class HomeAdapter extends RecyclerView.Adapter<HomeAdapter.MyViewHolder> { //...
public interface OnItemClickLitener { void onItemClick(View view, int position); void onItemLongClick(View view , int position); } private OnItemClickLitener mOnItemClickLitener; public void setOnItemClickLitener(OnItemClickLitener mOnItemClickLitener) { this.mOnItemClickLitener = mOnItemClickLitener; } @Override public void onBindViewHolder(final MyViewHolder holder, final int position) { holder.tv.setText(mDatas.get(position)); // 若是设置了回调,则设置点击事件
if (mOnItemClickLitener != null) { holder.itemView.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { int pos = holder.getLayoutPosition(); mOnItemClickLitener.onItemClick(holder.itemView, pos); } }); holder.itemView.setOnLongClickListener(new OnLongClickListener() { @Override public boolean onLongClick(View v) { int pos = holder.getLayoutPosition(); mOnItemClickLitener.onItemLongClick(holder.itemView, pos); return false; } }); } } //...
}
adapter中本身定义了个接口,而后在onBindViewHolder中去为holder.itemView去设置相应
的监听最后回调咱们设置的监听。
最后别忘了给item添加一个drawable:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true" android:drawable="@color/color_item_press"></item>
<item android:drawable="@color/color_item_normal"></item>
</selector>
Activity中去设置监听:
mAdapter.setOnItemClickLitener(new OnItemClickLitener() { @Override public void onItemClick(View view, int position) { Toast.makeText(HomeActivity.this, position + " click", Toast.LENGTH_SHORT).show(); } @Override public void onItemLongClick(View view, int position) { Toast.makeText(HomeActivity.this, position + " long click", Toast.LENGTH_SHORT).show(); mAdapter.removeData(position); } });
测试效果:
ok,到此咱们基本介绍了RecylerView常见用法,包含了:
能够看到RecyclerView能够实现:
整个体验下来,感受这种插拔式的设计太棒了,若是系统再能提供一些经常使用的分隔符,多添加些动画效果就更好了。
经过简单改变下LayoutManager,就能够产生不一样的效果,那么咱们能够根据手机屏幕的宽度去动态设置LayoutManager,屏幕宽度通常的,显示为ListView;宽度稍大的显示两列的GridView或者瀑布流(或者横纵屏幕切换时变化,有点意思~);显示的列数和宽度成正比。甚至某些特殊屏幕,让其横向滑动~~再选择一个nice的动画效果,相信这种插件式的编码体验必定会让你迅速爱上RecyclerView。