浅谈Android RecyclerView UI的滚动控件示例

概述ListView由于其强大的功能，在过去的Andorid开发中使用非常广泛。不过ListView需要优化来提升运行效率，就像我们之前所优化的那样，否则性能将很差。还有就是只能够纵向滚动，如果要想实现横向移动，用ListView是做不

ListVIEw 由于其强大的功能，在过去的 AndorID 开发中使用非常广泛。不过 ListVIEw 需要优化来提升运行效率，就像我们之前所优化的那样，否则性能将很差。还有就是只能够纵向滚动，如果要想实现横向移动，用 ListVIEw 是做不到的。

RecyclerVIEw 可以说是一个增强版的 ListVIEw 。它不仅实现了和 ListVIEw 同样的效果，而且还优化了 ListVIEw 存在的各种不足。 RecyclerVIEw 现在可是官方推荐使用的滚动控件哦O(∩_∩)O~

1 基本用法

RecyclerVIEw 也是新增的控件，所以必须先在项目的 build.gradle 中添加相应的依赖库才能使用：

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

注意不要拼错哦O(∩_∩)O~

添加后，记得点击 Sync Now 链接哦。

接着，修改布局文件：

<?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="match_parent">  <androID.support.v7.Widget.RecyclerVIEw    androID:ID="@+ID/recycler_vIEw"    androID:layout_wIDth="match_parent"    androID:layout_height="match_parent" /></linearLayout>

这里把宽度和高度都定义为 match_parent，这样 RecyclerVIEw 就能占满整个屏幕。因为 RecyclerVIEw 也不是系统内置的 SDK，所以这里引用的是完整的包路径。

然后为 RecyclerVIEw 创建一个适配器（继承自 RecyclerVIEw.Adapter<CatAdapter.VIEwHolder> ）：

public class CatAdapter extends RecyclerVIEw.Adapter<CatAdapter.VIEwHolder> {  private List<Cat> cats;  static class VIEwHolder extends RecyclerVIEw.VIEwHolder {    ImageVIEw image;    TextVIEw name;    public VIEwHolder(VIEw vIEw) {      super(vIEw);      image = (ImageVIEw) vIEw.findVIEwByID(R.ID.image);      name = (TextVIEw) vIEw.findVIEwByID(R.ID.name);    }  }  public CatAdapter(List<Cat> cats) {    this.cats = cats;  }  @OverrIDe  public VIEwHolder onCreateVIEwHolder(VIEwGroup parent,int vIEwType) {    VIEw vIEw = LayoutInflater.from(parent.getContext()).inflate(R.layout.cat_item,parent,false);    return new VIEwHolder(vIEw);  }  @OverrIDe  public voID onBindVIEwHolder(VIEwHolder holder,int position) {    Cat cat = cats.get(position);    holder.image.setimageResource(cat.getimageID());    holder.name.setText(cat.getname());  }  @OverrIDe  public int getItemCount() {    return cats.size();  }}

在代码中，我们先定义了一个内部类 VIEwHolder，它继承自 RecyclerVIEw.VIEwHolder。然后在 VIEwHolder 的构造函数中传入一个 VIEw 参数，它是 RecyclerVIEw 子项的最外层布局，所以我们可以通过它来取得布局中的 ImageVIEw 和 TextVIEw 的实例。

CatAdapter 的构造函数用于把要展示的数据源传递进来，并赋值给一个类变量 cats。

因为 CatAdapter 继承自 RecyclerVIEw.Adapter，所以必须重写以下三个方法：

onCreateVIEwHolder - 创建 VIEwHolder 实例，我们把 cat_item 的布局加载进来，创建了一个 VIEwHolder 实例。 onBindVIEwHolder - 对 RecyclerVIEw 的子项数据进行赋值，这个方法会在每个子项被滚动到屏幕内时进行。 getItemCount - 返回 RecyclerVIEw 的子项总数。

最后，我们在活动类中使用 RecyclerVIEw ：

public class MainActivity extends AppCompatActivity {  private List<Cat> cats = new ArrayList<>();  @OverrIDe  protected voID onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentVIEw(R.layout.activity_main);    init();    RecyclerVIEw recyclerVIEw=(RecyclerVIEw)findVIEwByID(R.ID.recycler_vIEw);    linearlayoutmanager layoutManager=new linearlayoutmanager(this);    recyclerVIEw.setLayoutManager(layoutManager);    CatAdapter adapter=new CatAdapter(cats);    recyclerVIEw.setAdapter(adapter);  }  /**   * 初始化数据   */  private voID init() {    cats.add(new Cat("暹罗猫",R.drawable.cat1));    cats.add(new Cat("布偶猫",R.drawable.cat2));    cats.add(new Cat("苏格兰折耳猫",R.drawable.cat3));    cats.add(new Cat("英国短毛猫",R.drawable.cat4));    cats.add(new Cat("波斯猫",R.drawable.cat5));    cats.add(new Cat("俄罗斯蓝猫",R.drawable.cat6));    cats.add(new Cat("美国短毛猫",R.drawable.cat7));    cats.add(new Cat("异国短毛猫",R.drawable.cat8));    cats.add(new Cat("挪威森林猫",R.drawable.cat9));    cats.add(new Cat("孟买猫",R.drawable.cat10));    cats.add(new Cat("缅因猫",R.drawable.cat11));    cats.add(new Cat("埃及猫",R.drawable.cat12));  }}

这里创建了 linearlayoutmanager 的线性布局对象，传递给了 recyclerVIEw.setLayoutManager() 方法。

recyclerVIEw 示例

我们使用了 recyclerVIEw 创建出了 ListVIEw 的效果，而且代码逻辑更清晰咯。

2 横向滚动

现在让我们把这些猫变为 “横向滚动” 吧。

把 cat_item 中的元素变为垂直排列：

<?xml version="1.0" enCoding="utf-8"?><linearLayout xmlns:androID="http://schemas.androID.com/apk/res/androID"  androID:layout_wIDth="110dp"  androID:layout_height="wrap_content"  androID:orIEntation="vertical"  >  <ImageVIEw    androID:ID="@+ID/image"    androID:layout_wIDth="wrap_content"    androID:layout_height="wrap_content"    androID:layout_gravity="center_horizontal"    />  <TextVIEw    androID:ID="@+ID/name"    androID:layout_wIDth="wrap_content"    androID:layout_height="wrap_content"    androID:layout_gravity="center_horizontal"    androID:layout_margintop="10dp" /></linearLayout>

这里还把 linearLayout 的宽度设为 110dp，即固定的值。因为每种猫的文字长度不同，如果用 wrap_content 的话，可能造成子项的长短不一致；而如果用 match_parent 的话，又会导致一个子项就占满了整个屏幕。

我们把 ImageVIEw 与 TextVIEw 都设置为水平居中，而且用 androID:layout_margintop，让文字与图片保持了一段距离，这样更美观。

接下来，修改活动类的代码：

@OverrIDeprotected voID onCreate(Bundle savedInstanceState) {  ...  layoutManager.setorIEntation(linearlayoutmanager.HORIZONTAL);  ...}

把 linearlayoutmanager 的布局改为横向排列（默认是纵向排列）。

横向排列

我们可以在水平方向上滑动来查看屏幕外的 “猫” 啦。

ListVIEw 的布局排列是由自身来管理的，所以存在一定的局限性；而 RecyclerVIEw 把布局的工作交给了 LayoutManager，LayoutManager 制定了一系列可扩展的布局排列接口，所以我们只要按照接口的规范来实现，就能够定制出各种不同排列方式的布局啦O(∩_∩)O~

3 瀑布流布局

让我们使用 StaggeredGrIDLayoutManager 来实现酷炫的瀑布流布局吧O(∩_∩)O~

首先修改 cat_item 布局文件：

<linearLayout xmlns:androID="http://schemas.androID.com/apk/res/androID"  androID:layout_wIDth="match_parent"  androID:layout_height="wrap_content"  androID:orIEntation="vertical"  androID:layout_margin="5dp"  >  <ImageVIEw    androID:ID="@+ID/image"    androID:layout_wIDth="wrap_content"    androID:layout_height="wrap_content"    androID:layout_gravity="center_horizontal"    />  <TextVIEw    androID:ID="@+ID/name"    androID:layout_wIDth="wrap_content"    androID:layout_height="wrap_content"    androID:layout_gravity="left"    androID:layout_margintop="10dp" /></linearLayout>

这里把 linearLayout 的宽度改为 wrap_content，这样宽度会根据实际的布局列数自动适配。 还使用 layout_margin 让子项之间留出一定的间距。最后将 TextVIEw 改为居左对齐，因为下面的说明文件内容可能会很长哟O(∩_∩)O~

修改活动类的代码：

@OverrIDeprotected voID onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentVIEw(R.layout.activity_main);  init();  RecyclerVIEw recyclerVIEw = (RecyclerVIEw) findVIEwByID(R.ID.recycler_vIEw);  StaggeredGrIDLayoutManager layoutManager=new StaggeredGrIDLayoutManager(3,StaggeredGrIDLayoutManager.VERTICAL);  recyclerVIEw.setLayoutManager(layoutManager);  CatAdapter adapter = new CatAdapter(cats);  recyclerVIEw.setAdapter(adapter);}

在此，我们创建了 StaggeredGrIDLayoutManager 的实例，它的构造函数接受两个参数，第一个参数用于指定布局的列数，第二个参数用于指定布局的排列方向。

瀑布流示例

4 点击事件

RecyclerVIEw 没有像 ListVIEw 一样的 setonItemClickListener() 事件，所以需要我们自己给子项具体的 VIEw 注册点击事件。

ListVIEw 的 setonItemClickListener() 注册的是子项的点击事件，但如果想要注册点击的是子项里具体的某个按钮时，使用 ListVIEw 实现起来就比较麻烦。所以 RecyclerVIEw 直接摈弃了子项点击事件的监听器，把所有的点击事件都交给具体的 VIEw 去注册实现咯O(∩_∩)O

修改适配器：

static class VIEwHolder extends RecyclerVIEw.VIEwHolder {  VIEw catVIEw;  ImageVIEw image;  TextVIEw name;  public VIEwHolder(VIEw vIEw) {    super(vIEw);    catVIEw = vIEw;    image = (ImageVIEw) vIEw.findVIEwByID(R.ID.image);    name = (TextVIEw) vIEw.findVIEwByID(R.ID.name);    Log.d(TAG,"VIEwHolder: image:" + image);    Log.d(TAG,"VIEwHolder: name:" + name);  }}public CatAdapter(List<Cat> cats) {  this.cats = cats;}@OverrIDepublic VIEwHolder onCreateVIEwHolder(VIEwGroup parent,int vIEwType) {  VIEw vIEw = LayoutInflater.from(parent.getContext()).inflate(R.layout.cat_item,false);  final VIEwHolder holder = new VIEwHolder(vIEw);  holder.catVIEw.setonClickListener(new VIEw.OnClickListener() {    @OverrIDe    public voID onClick(VIEw v) {      int position = holder.getAdapterposition();      Cat cat = cats.get(position);      Toast.makeText(v.getContext(),"你点击了 VIEw " + cat.getname(),Toast.LENGTH_SHORT).show();    }  });  holder.image.setonClickListener(new VIEw.OnClickListener() {    @OverrIDe    public voID onClick(VIEw v) {      int position = holder.getAdapterposition();      Log.d(TAG,"onClick: position:" + position);      Cat cat = cats.get(position);      Toast.makeText(v.getContext(),"你点击了图片 " + cat.getname(),Toast.LENGTH_SHORT).show();    }  });  return holder;}

我们为最外层的布局与 ImageVIEw 都注册了点击事件，这就是 RecyclerVIEw 的灵活之处。

触发 RecyclerVIEw 点击事件

如果点击了图片下方的文字，会触发 ImageVIEw 的点击事件，因为事件会向外传播哦O(∩_∩)O~

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

您可能感兴趣的文章:Android RecyclerView 实现快速滚动的示例代码功能强大的Android滚动控件RecyclerViewAndroid使用Recyclerview实现图片水平自动循环滚动效果Android_RecyclerView实现上下滚动广告条实例（带图片）Android中RecyclerView实现分页滚动的方法详解Android RecyclerView滚动定位Android使用RecyclerView实现水平滚动控件Android代码实现AdapterViews和RecyclerView无限滚动Android RecyclerView 滚动到中间位置的方法示例 总结

以上是内存溢出为你收集整理的浅谈Android RecyclerView UI的滚动控件示例全部内容，希望文章能够帮你解决浅谈Android RecyclerView UI的滚动控件示例所遇到的程序开发问题。

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