概述
RecyclerView出现已经有一段时间了,相信大家肯定不陌生了,大家可以通过导入support-v7对其进行使用。据官方的介绍,该控件用于在有限的窗口中展示大量数据集,其实这样功能的控件我们并不陌生,例如:ListView、GridView。那么有了ListView、GridView为什么还需要RecyclerView这样的控件呢?整体上看RecyclerView架构,提供了一种插拔式的体验,高度的解耦,异常的灵活,通过设置它提供的不同LayoutManager,ItemDecoration , ItemAnimator实现令人瞠目的效果。
- 你想要控制其显示的方式,请通过布局管理器LayoutManager
- 你想要控制Item间的间隔(可绘制),请通过ItemDecoration
- 你想要控制Item增删的动画,请通过ItemAnimator
- 你想要控制点击、长按事件,请自己写!
RecyclerView基本的使用代码:mRecyclerView = findView(R.id.id_recyclerview);mRecyclerView.setLayoutManager(layout);//设置布局管理器mRecyclerView.setAdapter(adapter)//设置adaptermRecyclerView.setItemAnimator(new DefaultItemAnimator());//设置Item增加、移除动画mRecyclerView.addItemDecoration(new DividerItemDecoration(getActivity(), DividerItemDecoration.HORIZONTAL_LIST));//添加分割线
相比较于ListView的代码,ListView可能只需要去设置一个adapter就能正常使用了。而RecyclerView基本需要上面一系列的步骤,那么为什么会添加这么多的步骤呢?那么就必须解释下RecyclerView的这个名字了,从它类名上看,RecyclerView代表的意义是,我只管Recycler View,也就是说RecyclerView只管回收与复用View,其他的你可以自己去设置。可以看出其高度的解耦,给予你充分的定制*(所以你才可以轻松的通过这个控件实现ListView,GirdView,瀑布流等效果)。
分割线 ItemDecoration
RecyclerView并没有支持divider这样的属性,你可以给Item的布局去设置margin、background等方式来间接添加分割线,但这种方式不够优雅,我们的分割线可以在代码中通过以下方法添加。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);}@Deprecatedpublic void getItemOffsets(Rect outRect, int itemPosition, RecyclerView parent) {outRect.set(0, 0, 0, 0);}}
若我们调用mRecyclerView.addItemDecoration()方法添加分割线,则RecyclerView在绘制的时候,会去绘制Decoration,即调用该类的onDraw和onDrawOver方法:
- onDraw 方法在drawChildren之前
- onDrawOver在drawChildren之后,一般我们选择复写其中一个即可。
- getItemOffsets 可以通过outRect.set()为每个Item设置一定的偏移量,主要用于绘制Decorator。
代码 Activity
public class MainActivity extends ActionBarActivity implements MyOnItemClickLitener {private RecyclerView mRecyclerView;private List<String> mDatas;//数据private List<Integer> mHeights;//高度private MyRecyclerViewAdapter mRecyclerViewAdapter;//适配器private MyStaggeredAdapter mStaggeredAdapter;private ItemDecoration decoration1;//分割线private ItemDecoration decoration2;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);mRecyclerView = new android.support.v7.widget.RecyclerView(this);setContentView(mRecyclerView);initData();initAdapter();initRecylerView();}protected void initData() {mDatas = new ArrayList<String>();for (int i = 'A'; i < 'z'; i++) {mDatas.add("" + (char) i);}mHeights = new ArrayList<Integer>();for (int i = 0; i < mDatas.size(); i++) {mHeights.add((int) (100 + Math.random() * 500));}}private void initAdapter() {mRecyclerViewAdapter = new MyRecyclerViewAdapter(this, mDatas);mStaggeredAdapter = new MyStaggeredAdapter(this, mDatas, mHeights);mRecyclerViewAdapter.setOnItemClickLitener(this);mStaggeredAdapter.setOnItemClickLitener(this);}private void initRecylerView() {decoration1 = new DividerItemDecoration(this, 0);decoration2 = new DividerItemDecoration(this, 1);mRecyclerView.setPadding(10, 10, 10, 10);mRecyclerView.setAdapter(mRecyclerViewAdapter);//设置adaptermRecyclerView.setLayoutManager(new GridLayoutManager(this, 3));//设置布局管理器mRecyclerView.addItemDecoration(decoration1);//添加一个分割线mRecyclerView.addItemDecoration(decoration2);//还可以再添加一个分割线mRecyclerView.setItemAnimator(new DefaultItemAnimator());//设置Item增加、移除动画。github上有很多动画效果,如RecyclerViewItemAnimators}@Overridepublic boolean onCreateOptionsMenu(Menu menu) {getMenuInflater().inflate(R.menu.main, menu);return super.onCreateOptionsMenu(menu);}@Overridepublic boolean onOptionsItemSelected(MenuItem item) {mRecyclerView.removeItemDecoration(decoration1);//移除分割线,即使没有显示也可以移除mRecyclerView.removeItemDecoration(decoration2);switch (item.getItemId()) {case R.id.add:mRecyclerViewAdapter.addData(new Random().nextInt(5));break;case R.id.delete:mRecyclerViewAdapter.removeData(new Random().nextInt(5));break;//通过RecyclerView去实现ListView、GridView、瀑布流的效果基本上没有什么区别,仅仅通过设置不同的LayoutManager即可实现case R.id.listview:mRecyclerView.setLayoutManager(new LinearLayoutManager(this));break;case R.id.gridview:mRecyclerView.setLayoutManager(new GridLayoutManager(this, 3));break;case R.id.staggeredHorizontalGridView://Staggered:错列的,叉排的。mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(5, StaggeredGridLayoutManager.HORIZONTAL));//5行break;case R.id.staggeredVerticalGridview:mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL));//3列break;case R.id.staggeredAdapter:mRecyclerView.setAdapter(mStaggeredAdapter);break;case R.id.recyclerViewAdapter:mRecyclerView.setAdapter(mRecyclerViewAdapter);break;}return true;}@Overridepublic void onItemClick(View view, int position) {Toast.makeText(MainActivity.this, position + " 被点击了", Toast.LENGTH_SHORT).show();}@Overridepublic void onItemLongClick(View view, int position) {Toast.makeText(MainActivity.this, position + "被长按了", Toast.LENGTH_SHORT).show();}}
固定宽高的Adapter
public class MyRecyclerViewAdapter extends RecyclerView.Adapter<MyRecyclerViewAdapter.MyViewHolder> {private Context context;private List<String> mDatas;private MyOnItemClickLitener mOnItemClickLitener;public void setOnItemClickLitener(MyOnItemClickLitener mOnItemClickLitener) {this.mOnItemClickLitener = mOnItemClickLitener;}public MyRecyclerViewAdapter(Context context, List<String> datas) {this.context = context;mDatas = datas;}@Overridepublic MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {return new MyViewHolder(LayoutInflater.from(context).inflate(R.layout.item, parent, false));}@Overridepublic void onBindViewHolder(final MyViewHolder holder, final int position) {holder.tv.setText(mDatas.get(position));RecyclerView.LayoutParams lp = (RecyclerView.LayoutParams) holder.tv.getLayoutParams();lp.setMargins(5, 5, 5, 5);//设置边距holder.tv.setLayoutParams(lp);// 如果设置了回调,则设置点击事件if (mOnItemClickLitener != null) {holder.itemView.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {int pos = holder.getLayoutPosition();mOnItemClickLitener.onItemClick(holder.itemView, pos);}});holder.itemView.setOnLongClickListener(new OnLongClickListener() {@Overridepublic boolean onLongClick(View v) {int pos = holder.getLayoutPosition();mOnItemClickLitener.onItemLongClick(holder.itemView, pos);removeData(pos);return false;}});}}@Overridepublic int getItemCount() {return mDatas.size();}/**添加并更新数据,同时具有动画效果*/public void addData(int position) {mDatas.add(position, "Insert One");notifyItemInserted(position);//更新数据集,注意不是用adapter.notifyDataSetChanged(),否则没有动画效果}/**移除并更新数据,同时具有动画效果*/public void removeData(int position) {mDatas.remove(position);notifyItemRemoved(position);}class MyViewHolder extends RecyclerView.ViewHolder {TextView tv;public MyViewHolder(View view) {super(view);tv = (TextView) view.findViewById(R.id.id_num);}}}
随机宽高的Adapter
/**和MyAdapter唯一的区别就是:在代码中动态设置了TextView的高度(宽度)*/public class MyStaggeredAdapter extends RecyclerView.Adapter<MyStaggeredAdapter.MyViewHolder> {private Context context;private List<String> mDatas;private List<Integer> mHeights;//高度private MyOnItemClickLitener mOnItemClickLitener;public void setOnItemClickLitener(MyOnItemClickLitener mOnItemClickLitener) {this.mOnItemClickLitener = mOnItemClickLitener;}public MyStaggeredAdapter(Context context, List<String> datas, List<Integer> heights) {this.context = context;this.mDatas = datas;this.mHeights = heights;}@Overridepublic MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {return new MyViewHolder(LayoutInflater.from(context).inflate(R.layout.item, parent, false));}@Overridepublic void onBindViewHolder(final MyViewHolder holder, final int position) {RecyclerView.LayoutParams lp = (RecyclerView.LayoutParams) holder.tv.getLayoutParams();lp.setMargins(5, 5, 5, 5);//横向时,item的宽度需要设置;纵向时,item的高度需要设置lp.height = mHeights.get(position);//******************************************************************************************唯一的区别在这里!lp.width = mHeights.get(position);//*******************************************************************************************唯一的区别在这里!holder.tv.setLayoutParams(lp);holder.tv.setText(mDatas.get(position));// 如果设置了回调,则设置点击事件if (mOnItemClickLitener != null) {holder.itemView.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {int pos = holder.getLayoutPosition();mOnItemClickLitener.onItemClick(holder.itemView, pos);}});holder.itemView.setOnLongClickListener(new OnLongClickListener() {@Overridepublic boolean onLongClick(View v) {int pos = holder.getLayoutPosition();mOnItemClickLitener.onItemLongClick(holder.itemView, pos);removeData(pos);return false;}});}}@Overridepublic int getItemCount() {return mDatas.size();}public void addData(int position) {mDatas.add(position, "Insert One");mHeights.add((int) (100 + Math.random() * 300));notifyItemInserted(position);}public void removeData(int position) {mDatas.remove(position);notifyItemRemoved(position);}class MyViewHolder extends RecyclerView.ViewHolder {TextView tv;public MyViewHolder(View view) {super(view);tv = (TextView) view.findViewById(R.id.id_num);}}}
点击事件回调接口
/**系统没有提供ClickListener和LongClickListener,我们自己通过接口回调处理 */public interface MyOnItemClickLitener {void onItemClick(View view, int position);void onItemLongClick(View view, int position);}
分割线示例
/**zhy写的分割线,Item如果为最后一列则右边无间隔线,如果为最后一行则底部无分割线*/public class MyGridItemDecoration extends RecyclerView.ItemDecoration {private Drawable mDivider;public MyGridItemDecoration(Context context) {//通过读取系统主题中的 Android.R.attr.listDivider属性,将其作为Item间的分割线, <item name="android:listDivider">@drawable/divider_bg</item>TypedArray typedArray = context.obtainStyledAttributes(new int[] { android.R.attr.listDivider });mDivider = typedArray.getDrawable(0);typedArray.recycle();//回收TypedArray,以便后面重用。This TypedArray should be recycled after use with recycle()}@Override/**判断如果是最后一行,则不需要绘制底部;如果是最后一列,则不需要绘制右边,整个判断也考虑到了StaggeredGridLayoutManager的横向和纵向*/public void getItemOffsets(Rect outRect, int itemPosition, RecyclerView parent) {int spanCount = getSpanCount(parent);int itemCount = parent.getAdapter().getItemCount();//使用outRect设置绘制的范围。一般如果仅仅是希望有空隙,还是去设置item的margin方便if (isLastRaw(parent, itemPosition, spanCount, itemCount)) {// 如果是最后一行,则不需要绘制底部outRect.set(0, 0, mDivider.getIntrinsicWidth(), 0);} else if (isLastColum(parent, itemPosition, spanCount, itemCount)) {// 如果是最后一列,则不需要绘制右边outRect.set(0, 0, 0, mDivider.getIntrinsicHeight());} else {outRect.set(0, 0, mDivider.getIntrinsicWidth(), mDivider.getIntrinsicHeight());}}@Overridepublic void onDraw(Canvas c, RecyclerView parent, State state) {drawHorizontal(c, parent);drawVertical(c, parent);}//******************************************************************************************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);}}//******************************************************************************************/**获取RecyclerView有多少列*/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;}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;}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;}}