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

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, top, right, bottom);
   mdivider.draw(c);
  }
 }

 // item之间的留白
 @override
 public void getitemoffsets(rect outrect, view view, recyclerview parent, state state) {
  outrect.set(0, 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, int i) {
  calendar calendar = calendar.getinstance();
  calendar.settime(date);
  calendar.add(calendar.day_of_year, 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-sdk
ndk.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!