热门标签 | HotTags
当前位置:  开发笔记 > Android > 正文

浅谈AndroidRecyclerViewUI的滚动控件示例

本篇文章主要介绍了浅谈AndroidRecyclerViewUI的滚动控件示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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 链接哦。

接着,修改布局文件:

<&#63;xml version="1.0" encoding="utf-8"&#63;>


  


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

然后为 RecyclerView 创建一个适配器(继承自 RecyclerView.Adapter ):

public class CatAdapter extends RecyclerView.Adapter {

  private List 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 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,所以必须重写以下三个方法:

  1. onCreateViewHolder - 创建 ViewHolder 实例,我们把 cat_item 的布局加载进来,创建了一个 ViewHolder 实例。
  2. onBindViewHolder - 对 RecyclerView 的子项数据进行赋值,这个方法会在每个子项被滚动到屏幕内时进行。
  3. getItemCount - 返回 RecyclerView 的子项总数。

最后,我们在活动类中使用 RecyclerView :

public class MainActivity extends AppCompatActivity {
  private List 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 中的元素变为垂直排列:

<&#63;xml version="1.0" encoding="utf-8"&#63;>


  

  

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

我们把 ImageView 与 TextView 都设置为水平居中,而且用 android:layout_marginTop,让文字与图片保持了一段距离,这样更美观。

接下来,修改活动类的代码:

@Override
protected void onCreate(Bundle savedInstanceState) {
  ...
  layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
  ...
}

把 LinearLayoutManager 的布局改为横向排列(默认是纵向排列)。

横向排列

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

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

3 瀑布流布局

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

首先修改 cat_item 布局文件:



  

  

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

修改活动类的代码:

@Override
protected 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 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);

  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 listview OnItemClickListener失效原因
    最近在做listview时发现OnItemClickListener失效的问题,经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效,还会导致单击后listview每个item的背景改变,使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况,并提供了解决方法。 ... [详细]
  • 本文介绍了使用kotlin实现动画效果的方法,包括上下移动、放大缩小、旋转等功能。通过代码示例演示了如何使用ObjectAnimator和AnimatorSet来实现动画效果,并提供了实现抖动效果的代码。同时还介绍了如何使用translationY和translationX来实现上下和左右移动的效果。最后还提供了一个anim_small.xml文件的代码示例,可以用来实现放大缩小的效果。 ... [详细]
  • 本文讨论了Alink回归预测的不完善问题,指出目前主要针对Python做案例,对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法,以及Maven的相关知识。最后,对Alink回归预测的未来发展提出了期待。 ... [详细]
  • 本文讲述了如何通过代码在Android中更改Recycler视图项的背景颜色。通过在onBindViewHolder方法中设置条件判断,可以实现根据条件改变背景颜色的效果。同时,还介绍了如何修改底部边框颜色以及提供了RecyclerView Fragment layout.xml和项目布局文件的示例代码。 ... [详细]
  • 在说Hibernate映射前,我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象,以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]
  • 本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤,包括在application.properties配置文件中添加thymeleaf的配置信息,引入thymeleaf的jar包,以及创建PageController并添加index方法。 ... [详细]
  • XML介绍与使用的概述及标签规则
    本文介绍了XML的基本概念和用途,包括XML的可扩展性和标签的自定义特性。同时还详细解释了XML标签的规则,包括标签的尖括号和合法标识符的组成,标签必须成对出现的原则以及特殊标签的使用方法。通过本文的阅读,读者可以对XML的基本知识有一个全面的了解。 ... [详细]
  • 本文内容为asp.net微信公众平台开发的目录汇总,包括数据库设计、多层架构框架搭建和入口实现、微信消息封装及反射赋值、关注事件、用户记录、回复文本消息、图文消息、服务搭建(接入)、自定义菜单等。同时提供了示例代码和相关的后台管理功能。内容涵盖了多个方面,适合综合运用。 ... [详细]
  • VScode格式化文档换行或不换行的设置方法
    本文介绍了在VScode中设置格式化文档换行或不换行的方法,包括使用插件和修改settings.json文件的内容。详细步骤为:找到settings.json文件,将其中的代码替换为指定的代码。 ... [详细]
  • 本文介绍了使用AJAX的POST请求实现数据修改功能的方法。通过ajax-post技术,可以实现在输入某个id后,通过ajax技术调用post.jsp修改具有该id记录的姓名的值。文章还提到了AJAX的概念和作用,以及使用async参数和open()方法的注意事项。同时强调了不推荐使用async=false的情况,并解释了JavaScript等待服务器响应的机制。 ... [详细]
  • Java序列化对象传给PHP的方法及原理解析
    本文介绍了Java序列化对象传给PHP的方法及原理,包括Java对象传递的方式、序列化的方式、PHP中的序列化用法介绍、Java是否能反序列化PHP的数据、Java序列化的原理以及解决Java序列化中的问题。同时还解释了序列化的概念和作用,以及代码执行序列化所需要的权限。最后指出,序列化会将对象实例的所有字段都进行序列化,使得数据能够被表示为实例的序列化数据,但只有能够解释该格式的代码才能够确定数据的内容。 ... [详细]
  • 本文介绍了Java工具类库Hutool,该工具包封装了对文件、流、加密解密、转码、正则、线程、XML等JDK方法的封装,并提供了各种Util工具类。同时,还介绍了Hutool的组件,包括动态代理、布隆过滤、缓存、定时任务等功能。该工具包可以简化Java代码,提高开发效率。 ... [详细]
  • 本文讨论了在Spring 3.1中,数据源未能自动连接到@Configuration类的错误原因,并提供了解决方法。作者发现了错误的原因,并在代码中手动定义了PersistenceAnnotationBeanPostProcessor。作者删除了该定义后,问题得到解决。此外,作者还指出了默认的PersistenceAnnotationBeanPostProcessor的注册方式,并提供了自定义该bean定义的方法。 ... [详细]
  • eclipse学习(第三章:ssh中的Hibernate)——11.Hibernate的缓存(2级缓存,get和load)
    本文介绍了eclipse学习中的第三章内容,主要讲解了ssh中的Hibernate的缓存,包括2级缓存和get方法、load方法的区别。文章还涉及了项目实践和相关知识点的讲解。 ... [详细]
  • ZSI.generate.Wsdl2PythonError: unsupported local simpleType restriction ... [详细]
author-avatar
Tony_Friday
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有