一、概述
有了ListView、GridView为什么还需要RecyclerView这样的控件呢?整体上看RecyclerView架构,提供了一种插拔式的体验,高度的解耦,异常的灵活,通过设置它提供的不同LayoutManager,ItemDecoration , ItemAnimator实现令人瞠目的效果。
~你想要控制其显示的方式,请通过布局管理器LayoutManager
~你想要控制Item间的间隔(可绘制),请通过ItemDecoration
~你想要控制Item增删的动画,请通过ItemAnimator
~你想要控制点击、长按事件,请自己写(擦,这点尼玛。)
二、基本使用
1.RecyclerView的基本使用代码:
1. mRecyclerView = findView(R.id.id_recyclerview);
2. //设置布局管理器
3. mRecyclerView.setLayoutManager(layout);
4. //设置adapter
5. mRecyclerView.setAdapter(adapter)
6. //设置Item增加、移除动画
7. mRecyclerView.setItemAnimator(new DefaultItemAnimator());
8. //添加分割线
9. mRecyclerView.addItemDecoration(new DividerItemDecoration(
10. getActivity(), DividerItemDecoration.HORIZONTAL_LIST));
相比较于ListView的代码,ListView可能只需要去设置一个adapter就能正常使用了。而RecyclerView基本需要上面一系列的步骤才可以使用,那么为什么会添加这么多的步骤呢?
那么就必须解释下RecyclerView的这个名字了,从它类名上看,RecyclerView代表的意义是,我只管Recycler View,也就是说RecyclerView只管回收与复用View,其他的你可以自己去设置。可以看出其高度的解耦,给予你充分的定制自由(所以你才可以轻松的通过这个控件实现ListView,GirdView,瀑布流等效果)。下面看下使用代码。
2.Activity:
1. public class HomeActivity extends ActionBarActivity {
2. private RecyclerView mRecyclerView;
3. private List<String> mDatas;
4. private HomeAdapter mAdapter;
5.
6. @Override
7. protected void onCreate(Bundle savedInstanceState) {
8. super.onCreate(savedInstanceState);
9. setContentView(R.layout.activity_single_recyclerview);
10.
11. initData();
12.
13. mRecyclerView = (RecyclerView) findViewById(R.id.id_recyclerview);
14. new LinearLayoutManager(this));
15. new HomeAdapter());
16. }
17.
18. protected void initData() {
19. new ArrayList<String>();
20. for (int i = 'A'; i < 'z'; i++) {
21. "" + (char) i);
22. }
23. }
24.
25. class HomeAdapter extends RecyclerView.Adapter<HomeAdapter.MyViewHolder> {
26. @Override
27. public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
28. new MyViewHolder(LayoutInflater.from(HomeActivity.this)
29. false));
30. return holder;
31. }
32.
33. @Override
34. public void onBindViewHolder(MyViewHolder holder, int position) {
35. holder.tv.setText(mDatas.get(position));
36. }
37.
38. @Override
39. public int getItemCount() {
40. return mDatas.size();
41. }
42.
43. class MyViewHolder extends ViewHolder {
44. TextView tv;
45.
46. public MyViewHolder(View view) {
47. super(view);
48. tv = (TextView) view.findViewById(R.id.id_num);
49. }
50. }
51. }
52. }
3.布局文件XML
Activity的布局文件:
1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. "http://schemas.android.com/tools"
3. "match_parent"
4. "match_parent" >
5.
6. <android.support.v7.widget.RecyclerView
7. "@+id/id_recyclerview"
8. "#ffff0000"
9. "10dp"
10. "match_parent"
11. "match_parent" />
12.
13. </RelativeLayout>
Item的布局文件
1. <?xml version="1.0" encoding="utf-8"?>
2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. "match_parent"
4. "#44ff0000"
5. "wrap_content" >
6.
7. <TextView
8. "@+id/id_num"
9. "match_parent"
10. "50dp"
11. "center"
12. "1" />
13. </FrameLayout>
看下效果图:
看起来好丑,Item间应该有个分割线,当你去找时,你会发现RecyclerView并没有支持divider这样的属性。那么怎么办,你可以给Item的布局去设置margin,当然了这种方式不够优雅,我们文章开始说了,我们可以自由的去定制它,当然我们的分割线也是可以定制的。
4.分割线ItemDecoration
我们可以通过该方法添加分割线:
1. mRecyclerView.addItemDecoration()
该方法的参数为RecyclerView.ItemDecoration,该类为抽象类,官方目前并没有提供默认的实现类(我觉得最好能提供几个)。
该类的源码:
1. public static abstract class ItemDecoration {
2.
3. public void onDraw(Canvas c, RecyclerView parent, State state) {
4. onDraw(c, parent);
5. }
6.
7.
8. public void onDrawOver(Canvas c, RecyclerView parent, State state) {
9. onDrawOver(c, parent);
10. }
11.
12. public void getItemOffsets(Rect outRect, View view, RecyclerView parent, State state) {
13. getItemOffsets(outRect, ((LayoutParams) view.getLayoutParams()).getViewLayoutPosition(),
14. parent);
15. }
16.
17. @Deprecated
18. public void getItemOffsets(Rect outRect, int itemPosition, RecyclerView parent) {
19. 0, 0, 0, 0);
20. }
当我们调用mRecyclerView.addItemDecoration()方法添加decoration的时候,RecyclerView在绘制的时候,去会绘制decorator,即调用该类的onDraw和onDrawOver方法,
~onDraw方法先于drawChildren
~onDrawOver在drawChildren之后,一般我们选择复写其中一个即可。
~getItemOffsets 可以通过outRect.set()为每个Item设置一定的偏移量,主要用于绘制Decorator。
接下来我们看一个RecyclerView.ItemDecoration的实现类,该类很好的实现了RecyclerView添加分割线(当使用LayoutManager为LinearLayoutManager时)。
1. public class DividerItemDecoration extends RecyclerView.ItemDecoration {
2.
3. private static final int[] ATTRS = new int[] {android.R.attr.listDivider};
4. public static final int HORIZONTAL_LIST = LinearLayoutManager.HORIZONTAL;
5. public static final int VERTICAL_LIST = LinearLayoutManager.VERTICAL;
6. private Drawable mDivider;
7. private int mOrientation;
8.
9. public DividerItemDecoration(Context context, int orientation) {
10. final TypedArray a = context.obtainStyledAttributes(ATTRS);
11. 0);
12. a.recycle();
13. setOrientation(orientation);
14. }
15.
16. public void setOrientation(int orientation) {
17. if (orientation != HORIZONTAL_LIST && orientation != VERTICAL_LIST) {
18. throw new IllegalArgumentException("invalid orientation");
19. }
20. mOrientation = orientation;
21. }
22.
23. @Override
24. public void onDraw(Canvas c, RecyclerView parent) {
25. "recyclerview - itemdecoration", "onDraw()");
26.
27. if (mOrientation == VERTICAL_LIST) {
28. drawVertical(c, parent);
29. else {
30. drawHorizontal(c, parent);
31. }
32.
33. }
34.
35. public void drawVertical(Canvas c, RecyclerView parent) {
36. final int left = parent.getPaddingLeft();
37. final int right = parent.getWidth() - parent.getPaddingRight();
38.
39. final int childCount = parent.getChildCount();
40. for (int i = 0; i < childCount; i++) {
41. final View child = parent.getChildAt(i);
42. new android.support.v7.widget.RecyclerView(parent.getContext());
43. final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();
44. final int top = child.getBottom() + params.bottomMargin;
45. final int bottom = top + mDivider.getIntrinsicHeight();
46. mDivider.setBounds(left, top, right, bottom);
47. mDivider.draw(c);
48. }
49. }
50.
51. public void drawHorizontal(Canvas c, RecyclerView parent) {
52. final int top = parent.getPaddingTop();
53. final int bottom = parent.getHeight() - parent.getPaddingBottom();
54.
55. final int childCount = parent.getChildCount();
56. for (int i = 0; i < childCount; i++) {
57. final View child = parent.getChildAt(i);
58. final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();
59. final int left = child.getRight() + params.rightMargin;
60. final int right = left + mDivider.getIntrinsicHeight();
61. mDivider.setBounds(left, top, right, bottom);
62. mDivider.draw(c);
63. }
64. }
65.
66. @Override
67. public void getItemOffsets(Rect outRect, int itemPosition, RecyclerView parent) {
68. if (mOrientation == VERTICAL_LIST) {
69. 0, 0, 0, mDivider.getIntrinsicHeight());
70. else {
71. 0, 0, mDivider.getIntrinsicWidth(), 0);
72. }
73. }
74. }
该实现类可以看到通过读取系统主题中的 Android.R.attr.listDivider作为Item间的分割线,并且支持横向和纵向。(如果你不清楚它是怎么做到的读取系统的属性用于自身,请参考我的另一篇博文:Android 深入理解Android中的自定义属性) 获取到listDivider以后,该属性的值是个Drawable,在getItemOffsets中,outRect去设置了绘制的范围。onDraw中实现了真正的绘制。
我们在原来的代码中添加下面代码就能看到效果了:
1. mRecyclerView.addItemDecoration(new DividerItemDecoration(this,
2. DividerItemDecoration.VERTICAL_LIST));
该分割线是系统默认的,你可以在theme.xml中找到该属性的使用情况:
1. <!-- Application theme. -->
2. "AppTheme" parent="AppBaseTheme">
3. "android:listDivider">@drawable/divider_bg</item>
4. </style>
我们自己写个渐变的drawable,换一种分隔符:
1. <?xml version="1.0" encoding="utf-8"?>
2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
3. "rectangle" >
4.
5. <gradient
6. "#ff00ff00"
7. "#ff0000ff"
8. "#ffff0000"
9. "linear" />
10. "4dp"/>
11.
12. </shape>
现在的样子是:
5.LayoutManager
上面实现了类似ListView样子的Demo,通过使用其默认的LinearLayoutManager。
RecyclerView.LayoutManager是一个抽象类,系统提供了3个实现类:
~ LinearLayoutManager 现行管理器,支持横向、纵向。
~ GridLayoutManager 网格布局管理器
~ StaggeredGridLayoutManager 瀑布就式布局管理器
上面我们已经初步体验了下LinearLayoutManager,接下来看GridLayoutManager。
我们尝试去实现类似GridView,分分钟的事情:
1. //mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
2. mRecyclerView.setLayoutManager(new GridLayoutManager(this,4));
只需要修改LayoutManager即可。
当然了,改为GridLayoutManager以后,对于分割线,前面的DividerItemDecoration就不适用了,主要是因为它在绘制的时候,比如水平线,针对每个child的取值为:
1. final int left = parent.getPaddingLeft();
2. final int right = parent.getWidth() - parent.getPaddingRight();
因为每个Item一行,这样是没问题的。而GridLayoutManager时,一行有多个childItem,这样就多次绘制了,并且GridLayoutManager时,Item如果为最后一列(则右边无间隔线)或者为最后一行(底部无分割线)。
针对上述,我们编写了DividerGridItemDecoration
。
1. public class DividerGridItemDecoration extends RecyclerView.ItemDecoration {
2.
3. private static final int[] ATTRS = new int[] { android.R.attr.listDivider };
4. private Drawable mDivider;
5.
6. public DividerGridItemDecoration(Context context) {
7. final TypedArray a = context.obtainStyledAttributes(ATTRS);
8. 0);
9. a.recycle();
10. }
11.
12. @Override
13. public void onDraw(Canvas c, RecyclerView parent, State state) {
14. drawHorizontal(c, parent);
15. drawVertical(c, parent);
16. }
17.
18. private int getSpanCount(RecyclerView parent) {
19. // 列数
20. int spanCount = -1;
21. LayoutManager layoutManager = parent.getLayoutManager();
22. if (layoutManager instanceof GridLayoutManager) {
23.
24. spanCount = ((GridLayoutManager) layoutManager).getSpanCount();
25. else if (layoutManager instanceof StaggeredGridLayoutManager) {
26. spanCount = ((StaggeredGridLayoutManager) layoutManager).getSpanCount();
27. }
28. return spanCount;
29. }
30.
31. public void drawHorizontal(Canvas c, RecyclerView parent) {
32. int childCount = parent.getChildCount();
33. for (int i = 0; i < childCount; i++) {
34. final View child = parent.getChildAt(i);
35. final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
36. .getLayoutParams();
37. final int left = child.getLeft() - params.leftMargin;
38. final int right = child.getRight() + params.rightMargin
39. + mDivider.getIntrinsicWidth();
40. final int top = child.getBottom() + params.bottomMargin;
41. final int bottom = top + mDivider.getIntrinsicHeight();
42. mDivider.setBounds(left, top, right, bottom);
43. mDivider.draw(c);
44. }
45. }
46.
47. public void drawVertical(Canvas c, RecyclerView parent) {
48. final int childCount = parent.getChildCount();
49. for (int i = 0; i < childCount; i++) {
50. final View child = parent.getChildAt(i);
51.
52. final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
53. .getLayoutParams();
54. final int top = child.getTop() - params.topMargin;
55. final int bottom = child.getBottom() + params.bottomMargin;
56. final int left = child.getRight() + params.rightMargin;
57. final int right = left + mDivider.getIntrinsicWidth();
58.
59. mDivider.setBounds(left, top, right, bottom);
60. mDivider.draw(c);
61. }
62. }
63.
64. private boolean isLastColum(RecyclerView parent, int pos, int spanCount,int childCount) {
65. LayoutManager layoutManager = parent.getLayoutManager();
66. if (layoutManager instanceof GridLayoutManager) {
67. if ((pos + 1) % spanCount == 0) {// 如果是最后一列,则不需要绘制右边
68. return true;
69. }
70. else if (layoutManager instanceof StaggeredGridLayoutManager) {
71. int orientation = ((StaggeredGridLayoutManager) layoutManager)
72. .getOrientation();
73. if (orientation == StaggeredGridLayoutManager.VERTICAL) {
74. if ((pos + 1) % spanCount == 0) {// 如果是最后一列,则不需要绘制右边
75. return true;
76. }
77. else {
78. childCount = childCount - childCount % spanCount;
79. if (pos >= childCount)// 如果是最后一列,则不需要绘制右边
80. return true;
81. }
82. }
83. return false;
84. }
85.
86. private boolean isLastRaw(RecyclerView parent, int pos, int spanCount,int childCount){
87. LayoutManager layoutManager = parent.getLayoutManager();
88. if (layoutManager instanceof GridLayoutManager) {
89. childCount = childCount - childCount % spanCount;
90. if (pos >= childCount)// 如果是最后一行,则不需要绘制底部
91. return true;
92. else if (layoutManager instanceof StaggeredGridLayoutManager){
93. int orientation = ((StaggeredGridLayoutManager) layoutManager)
94. .getOrientation();
95. // StaggeredGridLayoutManager 且纵向滚动
96. if (orientation == StaggeredGridLayoutManager.VERTICAL){
97. childCount = childCount - childCount % spanCount;
98. // 如果是最后一行,则不需要绘制底部
99. if (pos >= childCount)
100. return true;
101. else{
102. // StaggeredGridLayoutManager 且横向滚动
103. // 如果是最后一行,则不需要绘制底部
104. if ((pos + 1) % spanCount == 0) {
105. return true;
106. }
107. }
108. }
109. return false;
110. }
111.
112. @Override
113. public void getItemOffsets(Rect outRect, int itemPosition,RecyclerView parent) {
114. int spanCount = getSpanCount(parent);
115. int childCount = parent.getAdapter().getItemCount();
116. if (isLastRaw(parent, itemPosition, spanCount, childCount)) {// 如果是最后一行,则不需要绘制底部
117. 0, 0, mDivider.getIntrinsicWidth(), 0);
118. else if (isLastColum(parent, itemPosition, spanCount, childCount)) {// 如果是最后一列,则不需要绘制右边
119.
120. 0, 0, 0, mDivider.getIntrinsicHeight());
121. else{
122. 0, 0, mDivider.getIntrinsicWidth(),mDivider.getIntrinsicHeight());
123. }
124. }
125. }
主要在getItemOffsets方法中,去判断如果是最后一行,则不需要绘制底部;如果是最后一列,则不需要绘制右边,整个判断也考虑到了StaggeredGridLayoutManager的横向和纵向,所以稍稍有些复杂。最重要还是去理解,如何绘制什么的不重要。一般如果仅仅是希望有空隙,还是去设置item的margin方便。
最后的效果是:
ok,看到这,你可能还觉得RecyclerView不够强大?
但是如果我们有这么个需求,纵屏的时候显示为ListView,横屏的时候显示两列的GridView,我们RecyclerView可以轻松搞定,而如果使用ListView去实现还是需要点功夫的~~~
当然了,这只是皮毛,下面让你心服口服。
6.StaggeredGridLayoutManager
瀑布流式的布局,其实他可以实现GridLayoutManager
一样的功能,仅仅按照下列代码:
1. // mRecyclerView.setLayoutManager(new GridLayoutManager(this,4));
2. mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(4,StaggeredGridLayoutManager.VERTICAL));
这两种写法显示的效果是一致的,但是注意StaggeredGridLayoutManager构造的第二个参数传一个orientation,如果传入的是StaggeredGridLayoutManager.VERTICAL代表有多少列;那么传入的如果是StaggeredGridLayoutManager.HORIZONTAL就代表有多少行,比如本例如果改为:
1. mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(4,StaggeredGridLayoutManager.HORIZONTAL));
那么效果为:
可以看到,固定为4行,变成了左右滑动。有一点需要注意,如果是横向的时候,item的宽度需要注意去设置,毕竟横向的宽度没有约束了,应为控件可以横向滚动了。
如果你需要一样横向滚动的GridView,那么恭喜你。
ok,接下来准备看大招,如果让你去实现个瀑布流,最起码不是那么随意就可以实现的吧?但是,如果使用RecyclerView,分分钟的事。
那么如何实现?其实你什么都不用做,只要使用StaggeredGridLayoutManager我们就已经实现了,只是上面的item布局我们使用了固定的高度,下面我们仅仅在适配器的onBindViewHolder方法中为我们的item设置个随机的高度(代码就不贴了,最后会给出源码下载地址),看看效果图:
是不是棒棒哒,通过RecyclerView去实现ListView、GridView、瀑布流的效果基本上没有什么区别,而且可以仅仅通过设置不同的LayoutManager即可实现。
还有更nice的地方,就在于item增加、删除的动画也是可配置的。接下来看一下ItemAnimator。
7.ItemAnimator
ItemAnimator也是一个抽象类,好在系统为我们提供了一种默认的实现类,期待系统多
添加些默认的实现。
借助默认的实现,当Item添加和移除的时候,添加动画效果很简单:
1. // 设置item动画
2. mRecyclerView.setItemAnimator(new DefaultItemAnimator());
系统为我们提供了一个默认的实现,我们为我们的瀑布流添加以上一行代码,效果为:
注意,这里更新数据集不是用adapter.notifyDataSetChanged()而是
notifyItemInserted(position)与notifyItemRemoved(position)
否则没有动画效果。
上述为adapter中添加了两个方法:
1. public void addData(int position) {
2. "Insert One");
3. notifyItemInserted(position);
4. }
5.
6. public void removeData(int position) {
7. mDatas.remove(position);
8. notifyItemRemoved(position);
9. }
Activity中点击MenuItem触发:
1. @Override
2. public boolean onCreateOptionsMenu(Menu menu) {
3. getMenuInflater().inflate(R.menu.main, menu);
4. return super.onCreateOptionsMenu(menu);
5. }
6.
7. @Override
8. public boolean onOptionsItemSelected(MenuItem item) {
9. switch (item.getItemId())
10. {
11. case R.id.id_action_add:
12. 1);
13. break;
14. case R.id.id_action_delete:
15. 1);
16. break;
17. }
18. return true;
19. }
好了,到这我对这个控件已经不是一般的喜欢了~~~
当然了只提供了一种动画,那么我们肯定可以去自定义各种nice的动画效果。
高兴的是,github上已经有很多类似的项目了,这里我们直接引用下:RecyclerViewItemAnimators,大家自己下载查看。
提供了SlideInOutLeftItemAnimator,SlideInOutRightItemAnimator,
SlideInOutTopItemAnimator,SlideInOutBottomItemAnimator等动画效果。
8.Click and LongClick
不过一个挺郁闷的地方就是,系统没有提供ClickListener和LongClickListener。
不过我们也可以自己去添加,只是会多了些代码而已。
实现的方式比较多,你可以通过mRecyclerView.addOnItemTouchListener去监听然后去判断手势,
当然你也可以通过adapter中自己去提供回调,这里我们选择后者,前者的方式,大家有兴趣自己去实现。
那么代码也比较简单:
1. class HomeAdapter extends RecyclerView.Adapter<HomeAdapter.MyViewHolder> {
2.
3. public interface OnItemClickLitener {
4. void onItemClick(View view, int position);
5. void onItemLongClick(View view , int position);
6. }
7.
8. private OnItemClickLitener mOnItemClickLitener;
9.
10. public void setOnItemClickLitener(OnItemClickLitener mOnItemClickLitener) {
11. this.mOnItemClickLitener = mOnItemClickLitener;
12. }
13.
14. @Override
15. public void onBindViewHolder(final MyViewHolder holder, final int position) {
16. holder.tv.setText(mDatas.get(position));
17.
18. // 如果设置了回调,则设置点击事件
19. if (mOnItemClickLitener != null) {
20. new OnClickListener() {
21. @Override
22. public void onClick(View v) {
23. int pos = holder.getLayoutPosition();
24. mOnItemClickLitener.onItemClick(holder.itemView, pos);
25. }
26. });
27.
28. new OnLongClickListener() {
29. @Override
30. public boolean onLongClick(View v) {
31. int pos = holder.getLayoutPosition();
32. mOnItemClickLitener.onItemLongClick(holder.itemView, pos);
33. return false;
34. }
35. });
36. }
37. }
38. }
adapter中自己定义了个接口,然后在onBindViewHolder中去为holder.itemView去设置相应
的监听最后回调我们设置的监听。
最后别忘了给item添加一个drawable:
1. <?xml version="1.0" encoding="utf-8"?>
2. <selector xmlns:android="http://schemas.android.com/apk/res/android" >
3. "true" android:drawable="@color/color_item_press"></item>
4. "@color/color_item_normal"></item>
5. </selector>
Activity中去设置监听:
1. mAdapter.setOnItemClickLitener(new OnItemClickLitener() {
2. @Override
3. public void onItemClick(View view, int position) {
4. this, position + " click",Toast.LENGTH_SHORT).show();
5. }
6.
7. @Override
8. public void onItemLongClick(View view, int position){
9. this, position + " long click",Toast.LENGTH_SHORT).show();
10. mAdapter.removeData(position);
11. }
12. });
测试效果:
ok,到此我们基本介绍了RecylerView常见用法,包含了:
1.系统提供了几种LayoutManager的使用;
2.如何通过自定义ItemDecoration去设置分割线,或者一些你想作为分隔的drawable,注意这里 ;
3.巧妙的使用了系统的listDivider属性,你可以尝试添加使用divider和dividerHeight属性;
4.如何使用ItemAnimator为RecylerView去添加Item移除、添加的动画效果;
5.介绍了如何添加ItemClickListener与ItemLongClickListener;
可以看到RecyclerView可以实现:
ListView的功能
GridView的功能
横向ListView的功能,参考Android 自定义RecyclerView 实现真正的Gallery效果
横向ScrollView的功能
瀑布流效果
便于添加Item增加和移除动画
整个体验下来,感觉这种插拔式的设计太棒了,如果系统再能提供一些常用的分隔符,多添加些动画效果就更好了。
通过简单改变下LayoutManager,就可以产生不同的效果,那么我们可以根据手机屏幕的宽度去动态设置LayoutManager,屏幕宽度一般的,显示为ListView;宽度稍大的显示两列的GridView或者瀑布流(或者横纵屏幕切换时变化,有点意思~);显示的列数和宽度成正比。甚至某些特殊屏幕,让其横向滑动~~再选择一个nice的动画效果,相信这种插件式的编码体验一定会让你迅速爱上RecyclerView。
下面介绍下CardView和RecyclerView的结合使用:
CardView+RecycleView可以非常方便的实现一个卡片式列表布局,另外,单独使用RecyclerView我们还得关注ItemDecoration,但是使用CardView就不必管了,因为CardView本身就可以设置阴影。
下面是一个简单示例。截图:
有点难看?自己调一下就ok啦。。这里只是一个示例。
步骤:
1.添加依赖:
1. compile 'com.android.support:cardview-v7:21.0.0'
2. compile 'com.android.support:recyclerview-v7:21.0.0'
2.页面布局:
1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. "http://schemas.android.com/tools"
3. "match_parent"
4. "match_parent"
5. ".MainActivity">
6.
7. <android.support.v7.widget.RecyclerView
8. "@+id/main_recyclerview"
9. "match_parent"
10. "match_parent"
11. "vertical"
12. >
13. </android.support.v7.widget.RecyclerView>
14.
15. </RelativeLayout>
3.item布局:
1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. "match_parent"
4. "vertical"
5. "#ff3cffdd"
6. "http://schemas.android.com/tools"
7. "http://schemas.android.com/apk/res-auto"
8. "match_parent">
9. <android.support.v7.widget.CardView
10. "match_parent"
11. "130dp"
12. "4dp"
13. "#fff"
14. "2dp"
15. "2dp"
16. "3dp"
17. "3dp"
18. >
19. <LinearLayout
20. "horizontal"
21. "match_parent"
22. "match_parent">
23. <ImageView
24. "@mipmap/ic_launcher"
25. "center"
26. "wrap_content"
27. "wrap_content"/>
28. <TextView
29. "@+id/info_text"
30. "center"
31. "#000"
32. "19sp"
33. "center"
34. "@string/hello_world"
35. "match_parent"
36. "match_parent"/>
37. </LinearLayout>
38. </android.support.v7.widget.CardView>
39. </LinearLayout>
这里如果你想加CardView的自定义属性,必须添加其命名空间:
1. xmlns:card_view="http://schemas.android.com/apk/res-auto"
4.适配器:
1. public class MainAdapter extends RecyclerView.Adapter<MainAdapter.ViewHolder>
2. {
3. private List<String> mDataSet = null;
4. private OnItemClickListener mListener;
5.
6. public interface OnItemClickListener{
7. public void onItemClick(View view,String data);
8. }
9.
10. public void setOnItemClickListener(OnItemClickListener listener){
11. this.mListener = listener;
12. }
13.
14. public MainAdapter(List<String> dataSet){
15. this.mDataSet = dataSet;
16. }
17.
18. @Override
19. public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i){
20. final View itemView = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item_main,viewGroup,false);
21. new View.OnClickListener(){
22. @Override
23. public void onClick(View v){
24. if(mListener != null)
25. mListener.onItemClick(v, (String) itemView.getTag());
26. }
27. });
28. return new ViewHolder(itemView);
29. }
30.
31. @Override
32. public void onBindViewHolder(ViewHolder viewHolder, int i){
33. String data = mDataSet.get(i);
34. viewHolder.bindData(data);
35. viewHolder.itemView.setTag(data);
36. }
37.
38. @Override
39. public int getItemCount(){
40. return mDataSet.size();
41. }
42.
43. public static class ViewHolder extends RecyclerView.ViewHolder {
44. private TextView tv;
45. public ViewHolder(View itemView){
46. super(itemView);
47. tv = (TextView) itemView.findViewById(R.id.info_text);
48. }
49. public void bindData(String s) {
50. if(s != null)
51. tv.setText(s);
52. }
53. }
54. }
5.数据源:
1. public class DataSource{
2. public static final List<String> generateData(int size) {
3. if (size <= 0)
4. return null;
5. new ArrayList<>();
6. for (int i = 0; i < size; i++){
7. "这是列表数据"+i);
8. }
9. return datas;
10. }
11. }
6.主页面代码:
1. public class MainActivity extends ActionBarActivity{
2. private RecyclerView mRecyclerView;
3. private MainAdapter mAdapter;
4.
5. @Override
6. protected void onCreate(Bundle savedInstanceState){
7. super.onCreate(savedInstanceState);
8. setContentView(R.layout.activity_main);
9. mRecyclerView = (RecyclerView) findViewById(R.id.main_recyclerview);
10. new LinearLayoutManager(this));
11. new MainAdapter(DataSource.generateData(20));
12. true);
13. mRecyclerView.setAdapter(mAdapter);
14.
15. new MainAdapter.OnItemClickListener(){
16. @Override
17. public void onItemClick(View view, String data){
18. this,"data:"+data,Toast.LENGTH_SHORT).show();
19. }
20. });
21. }
22. }
参考:
Android RecyclerView 使用完全解析 体验艺术般的控件 - Hongyang - 博客频道
【安卓笔记】CardView+RecyclerView使用示例 - RowandJJ的小窝 - 博客频道