Android应用开发中RecyclerView组件使用入门教程

概述RecyclerView是一种列表容器,发布很久了,才想起来写点什么.RecyclerView相比于ListView,在回收重用时更具有灵活性,也就是低耦合,并且提供了扩展.加载多个视图时,应该多用RecyclerView代替ListView.

RecyclerVIEw是一种列表容器,发布很久了,才想起来写点什么.

RecyclerVIEw相比于ListVIEw,在回收重用时更具有灵活性,也就是低耦合,并且提供了扩展. 加载多个视图时,应该多用RecyclerVIEw代替ListVIEw.

那么我们来看看这东西应该怎么用? 比如生成一个瀑布流的视图.

首先我们从一个HelloWorld写起,看看如何构建一个RecyclerVIEw.

1. 依赖库
Gradle配置,添加Recycler库

compile 'com.androID.support:recyclervIEw-v7:+'

2. 资源文件
资源文件

 <androID.support.v7.Widget.RecyclerVIEw  androID:ID="@+ID/test_recycler_vIEw"  androID:layout_wIDth="match_parent"  androID:layout_height="match_parent"/>

3. 代码
LayoutManager: 管理RecyclerVIEw的结构.
Adapter: 处理每个Item的显示.
Itemdecoration: 添加每个Item的装饰.
ItemAnimator: 负责添加\移除\重排序时的动画效果.

LayoutManager\Adapter是必须,Itemdecoration\ItemAnimator是可选. /**  * 初始化RecyclerVIEw  *  * @param recyclerVIEw 主控件  */ private voID initRecyclerVIEw(RecyclerVIEw recyclerVIEw) {  recyclerVIEw.setHasFixedSize(true); // 设置固定大小  initRecyclerLayoutManager(recyclerVIEw); // 初始化布局  initRecyclerAdapter(recyclerVIEw); // 初始化适配器  initItemdecoration(recyclerVIEw); // 初始化装饰  initItemAnimator(recyclerVIEw); // 初始化动画效果 }

4. LayoutManager
管理RecyclerVIEw的布局结构.

 private voID initRecyclerLayoutManager(RecyclerVIEw recyclerVIEw) {  // 错列网格布局  recyclerVIEw.setLayoutManager(new StaggeredGrIDLayoutManager(4,StaggeredGrIDLayoutManager.VERTICAL)); }

提供了多种LayoutManager,瀑布流使用错列网格布局.
5. Adapter
适配器,处理RecyclerVIEw的Item事务.

 private voID initRecyclerAdapter(RecyclerVIEw recyclerVIEw) {  mAdapter = new MyAdapter(getData());  recyclerVIEw.setAdapter(mAdapter); }

对于Adapter,我们需要展开来说,先看看类.

public class MyAdapter extends RecyclerVIEw.Adapter<MyVIEwHolder> { private List<DataModel> mDataModels; private List<Integer> mHeights; MyAdapter(List<DataModel> dataModels) {  if (dataModels == null) {   throw new IllegalArgumentException("DataModel must not be null");  }  mDataModels = dataModels;  mHeights = new ArrayList<>(); } @OverrIDe public MyVIEwHolder onCreateVIEwHolder(VIEwGroup parent,int vIEwType) {  VIEw itemVIEw = LayoutInflater.from(parent.getContext())    .inflate(R.layout.item_recycler_vIEw,parent,false);  return new MyVIEwHolder(itemVIEw); } @OverrIDe public voID onBindVIEwHolder(MyVIEwHolder holder,int position) {  DataModel dataModel = mDataModels.get(position);  // 随机高度,模拟瀑布效果.  if (mHeights.size() <= position) {   mHeights.add((int) (100 + Math.random() * 300));  }  VIEwGroup.LayoutParams lp = holder.getTvLabel().getLayoutParams();  lp.height = mHeights.get(position);  holder.getTvLabel().setLayoutParams(lp);  holder.getTvLabel().setText(dataModel.getLabel());  holder.getTvDateTime().setText(new SimpleDateFormat("yyyy-MM-dd",Locale.ENGliSH)    .format(dataModel.getDateTime())); } @OverrIDe public int getItemCount() {  return mDataModels.size(); } public voID addData(int position) {  DataModel model = new DataModel();  model.setDateTime(getBeforeDay(new Date(),position));  model.setLabel("No. " + (int) (new Random().nextDouble() * 20.0f));  mDataModels.add(position,model);  notifyItemInserted(position); } public voID removeData(int position) {  mDataModels.remove(position);  notifyItemRemoved(position); } /**  * 获取日期的前一天  *  * @param date 日期  * @param i 偏离  * @return 新的日期  */ private static Date getBeforeDay(Date date,int i) {  Calendar calendar = Calendar.getInstance();  calendar.setTime(date);  calendar.add(Calendar.DAY_OF_YEAR,i * (-1));  return calendar.getTime(); }}

（1）onCreateVIEwHolder创建VIEwHolder.

（2）onBindVIEwHolder绑定每一项数据.

（3）getItemCount返回列表长度.

（4）RecyclerVIEw强制使用VIEwHolder.

public class MyVIEwHolder extends RecyclerVIEw.VIEwHolder { private TextVIEw mTvLabel; // 标签 private TextVIEw mTvDateTime; // 日期 public MyVIEwHolder(VIEw itemVIEw) {  super(itemVIEw);  mTvLabel = (TextVIEw) itemVIEw.findVIEwByID(R.ID.item_text);  mTvDateTime = (TextVIEw) itemVIEw.findVIEwByID(R.ID.item_date); } public TextVIEw getTvLabel() {  return mTvLabel; } public TextVIEw getTvDateTime() {  return mTvDateTime; }}

在onCreateVIEwHolder方法,创建类; 在onBindVIEwHolder方法,绑定数据.
DataModel

public class DataModel { private String mLabel; private Date mDateTime; public String getLabel() {  return mLabel; } public voID setLabel(String label) {  mLabel = label; } public Date getDateTime() {  return mDateTime; } public voID setDateTime(Date dateTime) {  mDateTime = dateTime; }}

6. Itemdecoration
项的装饰,比如ListVIEw中的分割线,在本例中,左右两条粉线.

 private voID initItemdecoration(RecyclerVIEw recyclerVIEw) {  recyclerVIEw.addItemdecoration(new MyItemdecoration(this)); }

Itemdecoration,注意parent和child的使用方式.

public class MyItemdecoration extends RecyclerVIEw.Itemdecoration { private static final int[] ATTRS = new int[]{androID.R.attr.ListdivIDer}; private Drawable mdivIDer; public MyItemdecoration(Context context) {  final TypedArray array = context.obtainStyledAttributes(ATTRS);  mdivIDer = array.getDrawable(0);  array.recycle(); } @OverrIDe public voID onDraw(Canvas c,RecyclerVIEw parent,State state) {  drawHorizontal(c,parent);  drawVertical(c,parent); } // 水平线 public voID drawHorizontal(Canvas c,RecyclerVIEw parent) {  final int childCount = parent.getChildCount();  // 在每一个子控件的底部画线  for (int i = 0; i < childCount; i++) {   final VIEw child = parent.getChildAt(i);   final int left = child.getleft() + child.getpaddingleft();   final int right = child.getWIDth() + child.getleft() - child.getpaddingRight();   final int top = child.getBottom() - mdivIDer.getIntrinsicHeight() - child.getpaddingBottom();   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);   int right = child.getRight() - child.getpaddingRight();   int left = right - mdivIDer.getIntrinsicWIDth();   final int top = child.gettop() + child.getpaddingtop();   final int bottom = child.gettop() + child.getHeight() - child.getpaddingBottom();   mdivIDer.setBounds(left,bottom);   mdivIDer.draw(c);  } } // Item之间的留白 @OverrIDe public voID getItemOffsets(Rect outRect,VIEw vIEw,State state) {  outRect.set(0,mdivIDer.getIntrinsicWIDth(),mdivIDer.getIntrinsicHeight()); }}

本例重写了ListdivIDer

 <style name="Apptheme" parent="theme.AppCompat.light.DarkActionbar">  ...  <item name="androID:ListdivIDer">@drawable/divIDer_bg</item> </style><?xml version="1.0" enCoding="utf-8"?><shape xmlns:androID="http://schemas.androID.com/apk/res/androID"  androID:shape="rectangle"> <solID androID:color="#ff00ff"/> <size androID:height="4dp"/> <size androID:wIDth="4dp"/></shape>

7. ItemAnimator
动画效果比较复杂,使用默认动画. 如要定制的话,继承DefaultItemAnimator; 如设置null,则不显示任何动画.

 private voID initItemAnimator(RecyclerVIEw recyclerVIEw) {  recyclerVIEw.setItemAnimator(new DefaultItemAnimator()); // 默认动画 }

8. 最终Activity

public class MainActivity extends AppCompatActivity { private MyAdapter mAdapter; @OverrIDe protected voID onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentVIEw(R.layout.activity_main);  Toolbar toolbar = (Toolbar) findVIEwByID(R.ID.toolbar);  setSupportActionbar(toolbar);  floatingActionbutton fab = (floatingActionbutton) findVIEwByID(R.ID.fab);  fab.setonClickListener(new VIEw.OnClickListener() {   @OverrIDe   public voID onClick(VIEw vIEw) {    Snackbar.make(vIEw,"Replace with your own action",Snackbar.LENGTH_LONG)      .setAction("Action",null).show();   }  });  // 初始化RecyclerVIEw  initRecyclerVIEw((RecyclerVIEw) findVIEwByID(R.ID.test_recycler_vIEw)); } /**  * 初始化RecyclerVIEw  *  * @param recyclerVIEw 主控件  */ private voID initRecyclerVIEw(RecyclerVIEw recyclerVIEw) {  recyclerVIEw.setHasFixedSize(true); // 设置固定大小  initRecyclerLayoutManager(recyclerVIEw); // 初始化LayoutManager  initRecyclerAdapter(recyclerVIEw); // 初始化Adapter  initItemdecoration(recyclerVIEw); // 初始化边界装饰  initItemAnimator(recyclerVIEw); // 初始化动画效果 } /**  * 初始化RecyclerVIEw的LayoutManager  *  * @param recyclerVIEw 主控件  */ private voID initRecyclerLayoutManager(RecyclerVIEw recyclerVIEw) {  // 错列网格布局  recyclerVIEw.setLayoutManager(new StaggeredGrIDLayoutManager(4,StaggeredGrIDLayoutManager.VERTICAL)); } /**  * 初始化RecyclerVIEw的Adapter  *  * @param recyclerVIEw 主控件  */ private voID initRecyclerAdapter(RecyclerVIEw recyclerVIEw) {  mAdapter = new MyAdapter(getData());  recyclerVIEw.setAdapter(mAdapter); } /**  * 初始化RecyclerVIEw的(Itemdecoration)项目装饰  *  * @param recyclerVIEw 主控件  */ private voID initItemdecoration(RecyclerVIEw recyclerVIEw) {  recyclerVIEw.addItemdecoration(new MyItemdecoration(this)); } /**  * 初始化RecyclerVIEw的(ItemAnimator)项目动画  *  * @param recyclerVIEw 主控件  */ private voID initItemAnimator(RecyclerVIEw recyclerVIEw) {  recyclerVIEw.setItemAnimator(new DefaultItemAnimator()); // 默认动画 } /**  * 模拟的数据  *  * @return 数据  */ private ArrayList<DataModel> getData() {  int count = 57;  ArrayList<DataModel> data = new ArrayList<>();  for (int i = 0; i < count; i++) {   DataModel model = new DataModel();   model.setDateTime(getBeforeDay(new Date(),i));   model.setLabel("No. " + i);   data.add(model);  }  return data; } /**  * 获取日期的前一天  *  * @param date 日期  * @param i 偏离  * @return 新的日期  */ private static Date getBeforeDay(Date date,i * (-1));  return calendar.getTime(); } @OverrIDe public boolean onCreateOptionsMenu(Menu menu) {  // Inflate the menu; this adds items to the action bar if it is present.  getMenuInflater().inflate(R.menu.menu_main,menu);  return true; } @OverrIDe public boolean onoptionsItemSelected(MenuItem item) {  // Handle action bar item clicks here. The action bar will  // automatically handle clicks on the Home/Up button,so long  // as you specify a parent activity in AndroIDManifest.xml.  int ID = item.getItemID();  switch (item.getItemID()) {   case R.ID.ID_action_add:    mAdapter.addData(1);    break;   case R.ID.ID_action_delete:    mAdapter.removeData(1);    break;  }  //noinspection SimplifiableIfStatement  if (ID == R.ID.action_settings) {   return true;  }  return super.onoptionsItemSelected(item); }}

为了测试动画,Menu额外添加两个按钮。

9.运行ReactNative示例
既然感觉ReactNative开发靠谱,那么我们就来看看ReactNative都能做哪些好玩的东西,和原生的有哪些区别?
示例图

按照文档安装一些命令行工具,再下载Git代码.
Github: https://github.com/facebook/react-native

内容很多,包含一些依赖库和示例(Example),下载的有点慢,耐心等待.

下载完成后,在react-native内,执行npm install.

AndroID项目执行,参考ReactAndroID的README.md.

在react-native目录,新建local.propertIEs

sdk.dir=/Users/wangchenlong/Installations/androID-sdkndk.dir=/Users/wangchenlong/Installations/androID-ndk-r10e

执行

cd react-native./gradlew :ReactAndroID:assembleDeBUG

再执行

./gradlew :ReactAndroID:installArchives

启动服务

./packager/packager.sh

安装项目

cd react-native./gradlew :Examples:UIExplorer:androID:app:installDeBUG

一定要先启动服务,再安装项目.
出现transforming 100%,即导入成功.

在最新版本中,我的红米note4无法运行项目.
报错: Upload package to device fails.
原因是编译的gradle版本太高,默认1.5.0,实际1.2.0~1.3.0都可以运行.
我的是1.2.3.
真机调试,本人红米note(AndroID 4.2)
摇动手机,选择Dev Settings->DeBUG sever host & port for device. 设置IP地址,观察本机的IP,填入即可. 我当前的是

192.168.2.202:8081
注意设置端口8081,否则无法加载. 有些情况可以直接输入IP即可.
AndroID5.0以上,直接设置端口即可.

adb reverse tcp:8081 tcp:8081

参考AndroID的真机调试文档.

IOS模拟器,太穷没有iPhone. 直接打开open UIExplorer.xcodeproj项目,执行就可以显示.

开发有两种选择,一种是直接基于ReactNative开发,一种是把ReactNative集成到现有的App中,对于第二种,我们就需要关注,ReactNative会增大多少代码呢?

使用最基本的HelloWorld做测试,ReactNative也是生成一个简单HelloWorld的Js. 最新生成的HelloWorld的大小是1.4M,加上ReactNative的是7.6M,框架大约6.2M左右,各位可以权衡一下使用.

ReactNative的UIExplorer已经包含了大量示例,很接近原生,非常绚丽,速度也很快. 如AndroID的VIEwPager

OK,好的开始是成功的一半,继续探索吧! Enjoy it!

总结

以上是内存溢出为你收集整理的Android应用开发中RecyclerView组件使用入门教程全部内容，希望文章能够帮你解决Android应用开发中RecyclerView组件使用入门教程所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。