我是靠谱客的博主 迷你母鸡,这篇文章主要介绍Android RecyclerView从入门到玩坏,现在分享给大家,希望可以做个参考。

目录

  • 前言
  • 基础使用
  • 分隔线
  • 点击监听
  • 搭配CardView
  • 更丰富的条目
  • 增删条目
  • 快速添加视图
  • 让RecyclerView支持复杂视图
  • 最后

前言

RecyclerView在Android界面开发当中是很重要的, 那掌握它也是很必要的. 但是有些时候会觉得它很厚重, 这里就从RecyclerView的基础一直说到扩展, 让你把RecyclerView学薄了.

RecyclerView官方文档也是非常厚重.

这篇文章融合了自己原来的多篇文章, 并进行了修正和改进, 而且添加了很多很有趣的内容. 本文需要20分钟以上的阅读时间, 请合理安排. 多图预警, 转载请注明出处!


基础使用

要使用RecyclerView在Android Studio 2.x(以下简称AS), 要这样:

复制代码
1
2
3
compile 'com.android.support:cardview-v7:25.3.1' compile 'com.android.support:recyclerview-v7:25.3.1' 复制代码

到了AS 3.x, 要这样:

复制代码
1
2
3
implementation 'com.android.support:cardview-v7:26.1.0' implementation 'com.android.support:recyclerview-v7:26.1.0' 复制代码

之后在布局文件中写入如下代码就引入了RecyclerView了.

复制代码
1
2
3
4
5
6
<android.support.v7.widget.RecyclerView android:id="@+id/rv_main" android:layout_width="match_parent" android:layout_height="match_parent" android:scrollbars="vertical" /> 复制代码

接下来说说介绍些各种布局. 可以看RecyclerView.LayoutManager官方文档.

布局类效果
LinearLayoutManager以垂直或水平滚动列表方式显示项目
GridLayoutManager在网格中显示项目
StaggeredGridLayoutManager在分散对齐网格中显示项目
复制代码
1
2
3
4
5
6
mRvMain = (RecyclerView) findViewById(R.id.rv_main); // 设置布局 LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this); mRvMain.setLayoutManager(linearLayoutManager); 复制代码

最关键的还是适配器的撰写. 但是理解起来不是很难, 你只要将ListView的适配器写法带入理解就好. 这里把全部代码贴出来, 因为后面要在这个基础上不断扩充.

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
public class MyRVAdapter2 extends RecyclerView.Adapter<MyRVAdapter2.MyTVHolder> { private final LayoutInflater mLayoutInflater; private final Context mContext; private final ArrayList<String> mData; public MyRVAdapter2(Context context) { mLayoutInflater = LayoutInflater.from(context); mContext = context; mData = new ArrayList<>(); for (int i = 0; i < 40; i++) { mData.add("hello " + i); } } @Override public MyRVAdapter2.MyTVHolder onCreateViewHolder(ViewGroup parent, int viewType) { return new MyRVAdapter2.MyTVHolder(mLayoutInflater.inflate(R.layout.rv_txt_item, parent, false)); } @Override public void onBindViewHolder(final MyRVAdapter2.MyTVHolder holder, int pos) { holder.mTextView.setText(mData.get(pos)); } @Override public int getItemCount() { return mData == null ? 0 : mData.size(); } class MyTVHolder extends RecyclerView.ViewHolder { TextView mTextView; MyTVHolder(View itemView) { super(itemView); mTextView = (TextView) itemView.findViewById(R.id.tv_txt); } } } 复制代码

然后写个最基础的TextView条目. 让它跑起来看看效果.

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?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="wrap_content" android:orientation="horizontal"> <TextView android:id="@+id/tv_txt" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center_horizontal" android:padding="@dimen/eight_dp" android:text="@string/tmp" android:textSize="@dimen/thirty_sp" /> </LinearLayout> 复制代码


分隔线

前面的部分已经是基础的RecyclerView使用了. 那比起ListView是不是没有了分隔线. 这里上一个简单好用的开源库RecyclerView-FlexibleDivider.

引入:

复制代码
1
2
implementation 'com.yqritc:recyclerview-flexibledivider:1.4.0' 复制代码

使用:

复制代码
1
2
3
mRvMain.addItemDecoration( new HorizontalDividerItemDecoration.Builder(this).build()); 复制代码

看效果就达到了吧.

觉得不好看, 还可以自定义, 更多写法可以参见文档内容.

复制代码
1
2
3
4
5
6
7
mRvMain.addItemDecoration( new HorizontalDividerItemDecoration.Builder(this) .color(Color.BLUE) .sizeResId(R.dimen.two_dp) .marginResId(R.dimen.eight_dp, R.dimen.eight_dp) .build()); 复制代码

而且而且, 竖着的分隔线也大丈夫哦.

复制代码
1
2
3
4
GridLayoutManager gridLayoutManager = new GridLayoutManager(this, 2); mRvMain.setLayoutManager(gridLayoutManager); 复制代码
复制代码
1
2
3
mRvMain.addItemDecoration( new VerticalDividerItemDecoration.Builder(this).build()); 复制代码


点击监听

再回忆一下在天国的ListView, 还有item的点击吧, 这个也要自己写.

适配器中:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
public interface OnItemClickListener { void onItemClick(View view, int position); void onItemLongClick(View view, int position); } private MyRVAdapter2.OnItemClickListener mOnItemClickListener; public void setOnItemClickListener(MyRVAdapter2.OnItemClickListener mOnItemClickListener) { this.mOnItemClickListener = mOnItemClickListener; } 复制代码

onBindViewHolder中设置点击监听.

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@Override public void onBindViewHolder(final MyRVAdapter2.MyTVHolder holder, int pos) { holder.mTextView.setText(mData.get(pos)); if (mOnItemClickListener != null) { holder.itemView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { int pos = holder.getLayoutPosition(); mOnItemClickListener.onItemClick(holder.itemView, pos); } }); holder.itemView.setOnLongClickListener(new View.OnLongClickListener() { @Override public boolean onLongClick(View v) { int pos = holder.getLayoutPosition(); mOnItemClickListener.onItemLongClick(holder.itemView, pos); return false; } }); } } 复制代码

使用监听:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
mAdapter.setOnItemClickListener(new MyRVAdapter2.OnItemClickListener() { @Override public void onItemClick(View view, int position) { Toast.makeText(UIUtil.getContext(), "click" + position, Toast.LENGTH_SHORT).show(); } @Override public void onItemLongClick(View view, int position) { Toast.makeText(UIUtil.getContext(), "long click" + position, Toast.LENGTH_SHORT).show(); } }); 复制代码


搭配CardView

是不是这个点击看着没啥感觉, 没事, 我们换上CardView再来一次.

布局文件:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:card_view="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="@dimen/eight_dp" android:foreground="@drawable/card_foreground" card_view:cardCornerRadius="@dimen/four_dp"> <TextView android:id="@+id/tv_txt" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center_horizontal" android:padding="@dimen/eight_dp" android:text="@string/tmp" android:textSize="@dimen/thirty_sp" /> </android.support.v7.widget.CardView> 复制代码

给CardView加上水波纹点击特效:

复制代码
1
2
3
4
<?xml version="1.0" encoding="utf-8"?> <ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/colorPrimary" /> 复制代码

在老版本就只能用选择器了, 其实效果也还好:

复制代码
1
2
3
4
5
6
7
8
<?xml version="1.0" encoding="utf-8"?> <inset xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/card_foreground_selector" android:insetBottom="@dimen/four_dp" android:insetLeft="@dimen/three_dp" android:insetRight="@dimen/three_dp" android:insetTop="@dimen/four_dp" /> 复制代码
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true"> <shape android:shape="rectangle"> <solid android:color="@color/colorPrimaryTran" /> <corners android:radius="@dimen/four_dp" /> </shape> </item> <item android:state_enabled="true" android:state_focused="true"> <shape android:shape="rectangle"> <solid android:color="#0f000000" /> <corners android:radius="@dimen/four_dp" /> </shape> </item> </selector> 复制代码


更丰富的条目

大家应该都知道TextView可以设置图标吧, 这里来看下效果图, 顺带感受下android界面设计语言的变化.

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?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="wrap_content" android:orientation="horizontal"> <TextView android:id="@+id/tv_txt" android:layout_width="match_parent" android:layout_height="wrap_content" android:drawableLeft="@mipmap/ic_launcher" android:drawablePadding="@dimen/sixteen_dp" android:drawableStart="@mipmap/ic_launcher" android:gravity="center_vertical" android:padding="@dimen/eight_dp" android:text="@string/tmp" android:textSize="@dimen/thirty_sp" /> </LinearLayout> 复制代码

让GridLayoutManager展示不同宽度的条目

方的是4.x上的, 圆的是8.x上的, 可以看到, 变化还是很大的. 我们回正题. GridLayoutManager布局是可以设置宽度的, 不一定都是一样大的, 来看下实现.

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 指定item宽度 gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() { @Override public int getSpanSize(int position) { if (position == 0 || position == (mAdapter.getItemCount() - 1) / 2 || position == (mAdapter.getItemCount() - 1)) { return gridLayoutManager.getSpanCount(); } else { return 1; } } }); 复制代码

来看效果图, 发现我们的分隔线崩了是吧, 如果真想用这个分隔线也还是要自己动手修补修补, 改动改动, 开源库再棒也猜不到你的项目需求呀.

当然了, 我还是很喜欢这个分隔线的, 我们来看看横着滚动的效果.

布局文件要改动:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?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="match_parent" android:orientation="horizontal"> <TextView android:id="@+id/tv_txt" android:layout_width="wrap_content" android:layout_height="match_parent" android:gravity="center_vertical" android:text="@string/tmp" android:textSize="@dimen/thirty_sp" /> </LinearLayout> 复制代码
复制代码
1
2
gridLayoutManager.setOrientation(GridLayoutManager.HORIZONTAL); 复制代码


展示不同布局

之前变化宽度其实还是相同条目, 现在要展示不同条目:

写一个图的条目:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="@dimen/eight_dp"> <ImageView android:id="@+id/iv_img" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:src="@mipmap/ic_launcher" /> </RelativeLayout> 复制代码
复制代码
1
2
3
4
5
public enum ITEM_TYPE { ITEM_TYPE_IMAGE, ITEM_TYPE_TEXT } 复制代码

这里多了判断条目类型, 还要注意返回值的变化, 用了更基类的RecyclerView.ViewHolder.

复制代码
1
2
3
4
5
6
7
8
9
@Override public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { if (viewType == ITEM_TYPE.ITEM_TYPE_IMAGE.ordinal()) { return new MyRVAdapter2.MyIVHolder(mLayoutInflater.inflate(R.layout.rv_img_item, parent, false)); } else { return new MyRVAdapter2.MyTVHolder(mLayoutInflater.inflate(R.layout.rv_txt_item, parent, false)); } } 复制代码

类继承上面也要变成RecyclerView.ViewHolder, 这些都是要对应的.

复制代码
1
2
extends RecyclerView.Adapter<RecyclerView.ViewHolder> 复制代码

当然了, holder也是不能少的.

复制代码
1
2
3
4
5
6
7
8
9
public class MyIVHolder extends RecyclerView.ViewHolder { ImageView mImageView; MyIVHolder(View view) { super(view); mImageView = (ImageView) view.findViewById(R.id.iv_img); } } 复制代码
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
@Override public void onBindViewHolder(final RecyclerView.ViewHolder holder, int pos) { if (holder instanceof MyRVAdapter2.MyTVHolder) { ((MyRVAdapter2.MyTVHolder) holder).mTextView.setText(mData.get(pos)); } else if (holder instanceof MyRVAdapter2.MyIVHolder) { ((MyRVAdapter2.MyIVHolder) holder).mImageView.setImageDrawable(UIUtil.getDrawable(R.mipmap.ic_launcher)); } // 点击监听 ... } 复制代码

顺带的, 我们把之前放宽的条目变成不同的视图, 也就是对应起来:

复制代码
1
2
3
4
5
6
7
8
9
10
11
@Override public int getItemViewType(int position) { if (position == 0 || position == (getItemCount() - 1) / 2 || position == (getItemCount() - 1)) { return ITEM_TYPE.ITEM_TYPE_IMAGE.ordinal(); } else { return ITEM_TYPE.ITEM_TYPE_TEXT.ordinal(); } } 复制代码

看看效果:

它还能继续地复杂, 试试瀑布流StaggeredGridLayoutManager:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:card_view="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="@dimen/eight_dp" card_view:cardCornerRadius="@dimen/four_dp"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <ImageView android:id="@+id/iv_img" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:src="@mipmap/ic_launcher" /> <TextView android:id="@+id/tv_txt" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:text="@string/tmp" android:textSize="@dimen/thirty_sp" /> </LinearLayout> </android.support.v7.widget.CardView> 复制代码
复制代码
1
2
3
4
StaggeredGridLayoutManager staggeredGridLayoutManager = new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL); mRvMain.setLayoutManager(staggeredGridLayoutManager); 复制代码

分割线又崩了, 嘿嘿, 其实用上了CardView, 分割线没什么必要再用了.


增删条目

现在适配器中添加增删方法:

复制代码
1
2
3
4
5
6
7
8
9
10
public void addData(int position) { mData.add(position, "hello x"); notifyItemInserted(position); } public void removeData(int position) { mData.remove(position); notifyItemRemoved(position); } 复制代码

再写入点击事件中, 点击增加, 长按删除:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
mAdapter.setOnItemClickListener(new MyRVAdapter2.OnItemClickListener() { @Override public void onItemClick(View view, int position) { mAdapter.addData(position); } @Override public void onItemLongClick(View view, int position) { mAdapter.removeData(position); } }); 复制代码

增删条目开源库

这里再上一个开源库recyclerview-animators, 可以修改增删动画, 种类也很丰富, 还能在它基础上自定义:

分类动画类名
CoolLandingAnimator
ScaleScaleInAnimator, ScaleInTopAnimator, ScaleInBottomAnimator, ScaleInLeftAnimator, ScaleInRightAnimator
FadeFadeInAnimator, FadeInDownAnimator, FadeInUpAnimator, FadeInLeftAnimator, FadeInRightAnimator
FlipFlipInTopXAnimator, FlipInBottomXAnimator, FlipInLeftYAnimator, FlipInRightYAnimator
SlideSlideInLeftAnimator, SlideInRightAnimator, OvershootInLeftAnimator, OvershootInRightAnimator, SlideInUpAnimator, SlideInDownAnimator

引入:

复制代码
1
2
implementation 'jp.wasabeef:recyclerview-animators:2.3.0' 复制代码

使用:

复制代码
1
2
mRvMain.setItemAnimator(new SlideInLeftAnimator()); 复制代码

这里给大家展示两种效果, 其它的自己尝试吧.

复制代码
1
2
mRvMain.setItemAnimator(new LandingAnimator()); 复制代码


快速添加视图

还有像Header, Foot这样的视图, 自己写也还是要费些功夫的, 这里推荐Android大神的库baseAdapter

引入:

复制代码
1
2
implementation 'com.zhy:base-rvadapter:3.0.3' 复制代码

添加头尾视图

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
HeaderAndFooterWrapper mHeaderAndFooterWrapper = new HeaderAndFooterWrapper(mAdapter); TextView t1 = new TextView(this); t1.setText("Header 1"); t1.setTextSize(30); TextView t2 = new TextView(this); t2.setText("Foot 1"); t2.setTextSize(30); mHeaderAndFooterWrapper.addHeaderView(t1); mHeaderAndFooterWrapper.addFootView(t2); mRvMain.setAdapter(mHeaderAndFooterWrapper); 复制代码

添加更多视图

复制代码
1
2
3
4
5
6
7
8
9
10
LoadMoreWrapper mLoadMoreWrapper = new LoadMoreWrapper(mAdapter); mLoadMoreWrapper.setLoadMoreView(R.layout.rv_cv_img_txt_item); mLoadMoreWrapper.setOnLoadMoreListener(new LoadMoreWrapper.OnLoadMoreListener() { @Override public void onLoadMoreRequested() { } }); mRvMain.setAdapter(mLoadMoreWrapper); 复制代码

是不是感觉特别爽, 那看看更爽的, 在不写适配器的情况下快速添加条目:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
final ArrayList<String> mData = new ArrayList<>(); for (int i = 0; i < 40; i++) { mData.add("hello " + i); } mRvMain.setAdapter(new CommonAdapter<String>(this, R.layout.rv_cv_txt_item, mData) { @Override protected void convert(ViewHolder holder, String s, int position) { holder.setText(R.id.tv_txt, mData.get(position)); } }); 复制代码

是不是感觉省了一万个小时呢.


让RecyclerView支持复杂视图

每次加入新的视图都要对适配器进行比较大程度的改动, 这样是很容易出错的. 这里引入一个非常棒的开源库-AdapterDelegates, 降低下代码耦合性.

引入:

复制代码
1
2
implementation 'com.hannesdorfmann:adapterdelegates3:3.0.1' 复制代码

先不说使用细节, 来看看实现后想加入不同视图有多简单吧:

复制代码
1
2
3
4
5
6
7
8
9
10
ArrayList<Base> data = new ArrayList<>(); for (int i = 0; i < 10; i++) { data.add(new B("b " + i)); } for (int i = 0; i < 10; i++) { data.add(new A("a " + i)); } BaseAdapter animalAdapter = new BaseAdapter(this, data); mRvMain.setAdapter(animalAdapter); 复制代码

是不是惊了, 也就是说, 你只要实现了A, B这些视图类, 直接新建放入数组就完事了.

需要写基础适配器:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
public class BaseAdapter extends RecyclerView.Adapter { private AdapterDelegatesManager<List<Base>> delegatesManager; private List<Base> items; public BaseAdapter(Activity activity, List<Base> items) { this.items = items; delegatesManager = new AdapterDelegatesManager<>(); delegatesManager.addDelegate(new AAdapterDelegate(activity)) .addDelegate(new BAdapterDelegate(activity)); } @Override public int getItemViewType(int position) { return delegatesManager.getItemViewType(items, position); } @Override public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { return delegatesManager.onCreateViewHolder(parent, viewType); } @Override public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) { delegatesManager.onBindViewHolder(items, position, holder); } @Override public int getItemCount() { return items.size(); } } 复制代码

需要对每个类进行进行具体设置, 这里以A为例.

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
public class AAdapterDelegate extends AdapterDelegate<List<Base>> { private LayoutInflater inflater; public AAdapterDelegate(Activity activity) { inflater = activity.getLayoutInflater(); } @Override public boolean isForViewType(@NonNull List<Base> items, int position) { return items.get(position) instanceof A; } @NonNull @Override public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent) { return new CatViewHolder(inflater.inflate(R.layout.rv_cv_img_txt_item, parent, false)); } @Override public void onBindViewHolder(@NonNull List<Base> items, int position, @NonNull RecyclerView.ViewHolder holder, @Nullable List<Object> payloads) { CatViewHolder vh = (CatViewHolder) holder; A cat = (A) items.get(position); vh.name.setText(cat.getName()); } static class CatViewHolder extends RecyclerView.ViewHolder { public TextView name; public ImageView img; public CatViewHolder(View itemView) { super(itemView); name = (TextView) itemView.findViewById(R.id.tv_txt); img = (ImageView) itemView.findViewById(R.id.iv_img); } } } 复制代码

最后

看完这篇应该是对RecyclerView有个大体认识了, 多练习练习就会得心应手起来了. 那还是有一点, 就像分隔线库的几次不理想表现, 具体项目要求还是要具体对待, 开源库也不是万能的. 最近不是又有什么开源项目套壳事件了嘛, 别人一开源就说自己有自主产权了真的好吗? 喜欢记得点赞或者关注我哦, 有意见或者建议评论区见~


最后

以上就是迷你母鸡最近收集整理的关于Android RecyclerView从入门到玩坏的全部内容,更多相关Android内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(85)

评论列表共有 0 条评论

立即
投稿
返回
顶部