android之RecyclerView

RecyclerView并提供了向下的兼容库,也就是说5.0一下也可以使用它。

为什么叫做RecyclerView呢?Recycler:资源回收。下面就是重点的解释:

  • RecyclerView不关心Item是否显示在正确的位置,那如何显示呢?我们就需要引入LayoutManager用来显示RecyclerView的风格。他可以显示ListView、GridView、横向GridView、横向ListView还有瀑布流效果。
  • RecyclerView不关心Item间如何分隔的。我们需要用到ItemDecoration来绘制分割。
  • RecyclerView不关心Item增加与删除的动画效果。我们需要使用ItemAnimator来完成。

这种插件式的玩法,也让RecyclerView仅仅关注如何回收和复用View。

下面还有一些与RecyclerView相关的重要类:

LayoutManager,ItemDecoration,ItemAnimator,Adapter,ViewHolder(强制使用)

 

下面我们来实战一下:

创建项目recyclerView,选择最小版本为5.1

我们使用的android studio,当创建项目完成后,我们要导入包,通过File->Project Structure->app->Dependencies->左边上角+号,Library dependency->找到com.android.support:recyclerview-v7:*****

我们回到Project模式下的app->build.gradle文件中

你可以看到recyclerview已经正式加入。

 

 

使用

android studio的Android模式

20170106124109

下来到res/Layout/activity_main.xml中:

下面来到MainActivity中:

上面的含义,我已添加注释,我们发现我们还缺少mAdapter没有被使用,那么就新建一个吧?

创建Adapter

首先MainActivity同包下创建一个

并实现MyViewHolder,

后面我还还会修改这个ViewHolder。

我们需要实现SimpleAdapter的几个必要方法:

我们要完成onCreateViewHolder的方法,就需要创建一个视图xml:

在res/Layout中创建一个item_single_textview.xml文件。

 

回到我们之前创建的SimpleAdapter:

返回需要的viewHolder。

我们现在就要完善之前的ViewHolder了:

好我们来到simpleAdapter中,实现绑定

也就是说,我们给textView绑定了相应的值。

 

来到MainActivity,使用我们新创建的Adapter:

LinearLayoutManager中的LinearLayoutManager.VERTICAL 表示垂直布局,整体就类似于Listview的垂直布局。

20170106135428

 

添加分割线

你会发现我们上面运行的效果没有分割线,嘿嘿,这就要用到我们之前所说的ItemDecoration了:

因为google对这个类并没有默认的实现,所以我们找到了一个网络上使用率很高的公共类:

他的地址是:https://gist.github.com/alexfu/0f464fc3742f134ccd1e   估计你要翻墙才能得到,我直接复制到项目中了,大家可以随时复制使用:

浏览一下这个类吧,mDivider:item间隔图片资源 ;mOrientation:方向,水平和垂直;onDraw方法会根据方向绘制;getItemOffsets提供绘制分割线的间隙。

来到ManActivity中的onCreate方法使用这个类:

运行我们的程序:

20170106202409

分割符已经有了。

 

MenuItem切换GridView效果和瀑布流

我们下面想切换listView效果为GridView效果,需要MenuItem作为切换的中介。

首先,我们要创建Menu,在res目录下的menu文件夹下创建一个main.xml文件,内容如下:

 

注释:这里创建了两个菜单项,其中<item>标签就是用来创建具体的一个菜单项,然后通过android:id给这个菜单项指定一个唯一的标识符,通过android:title给这菜单指定一个名称。

然后打开Activity,重写onCreateOptionsMenu()方法,内容如下:

当然,仅仅让菜单显示出来是不够的,菜单不是用来看的,关键是要菜单真正可用才行,因此还要再定义菜单响应事件。

在Activity中重写onOptionsItemSelected()方法,内容如下:

当然,仅仅让菜单显示出来是不够的,菜单不是用来看的,关键是要菜单真正可用才行,因此还要再定义菜单响应事件。

在Activity中重写onOptionsItemSelected()方法,内容如下:

运行程序,并按下Menu键就能够显示菜单项了。

菜单默认是不会显示出来的,只有按下Menu键,菜单才会在显示出来。

 

下面我们就来看看如何从ListView效果到GridView效果,其实代码是很简单的:

我做了备注,可查看代码什么意思。

20170106205606

我们看到了GirdView。

但是当你切换到HorizontalGridView时,你发现没有GridView的效果,我们自需要控制res\layout\item_single_textview.xml的长度即可:

可能会好很多,具体参数你可以根据你的需求来改变。

当然我们可以使用android:layout_margin=”3dp”来制作分隔样式。

 

实现瀑布流效果

实现瀑布流效果,代码其实差不多,但是还要小小调整一下,所有我们先复制MainActivity另存为StaggeredGridLayoutActivity,复制SimpleAdapter为StaggeredAdapter。

我们主要要做的事情就是动态控制我们的item的高度。

来到刚复制的StaggeredAdapter中添加如下代码:

绑定这些随机高度到ViewHolder

 修改StaggeredGridLayoutActivity

将StaggeredGridLayoutActivity中原来的SimpleAdapter更改为StaggeredAdapter。

修改:

来到app\src\main\AndroidManifest.xml,添加StaggeredGridLayoutActivity

最后,回到MainActivity.java,我们要在menu中打开StaggeredGridLayoutActivity:

并且res\layout\item_single_textview.xml代码如下:

20170106213816

好了,瀑布流效果已经展现。

我现在要展示出StaggeredGridLayoutActivity,和StaggeredAdapter的全部代码,以便大家参考:

 

 

RecyclerView的添加和删除动画效果

来到menu/main.xml下添加如下两个item:

app:showAsAction

1.always:这个值会使菜单项一直显示在ActionBar上。

2.ifRoom:如果有足够的空间,这个值会使菜单显示在ActionBar上。

3.never:这个值菜单永远不会出现在ActionBar是。

4.withText:这个值使菜单和它的图标,菜单文本一起显示。

 

 

来到MainActivity,添加两个按钮的触发效果:

还记得最最前面介绍的setItemAnimator吗?现在就要用到了,这可是动画效果的关键:

动画还不行,当我们点击add和delete时,要有数据变化,所以还需要对SimpleAdapter进行处理,让其完成对数据的添加:

继续切换到MainActivity,来完成剩下的事情:

你会注意到添加了:mAdapter.addData(1);mAdapter.deleteData(1);

20170106221316

 

 

 Item的onClick事件

RecyclerView中并没有实现任何的onClick事件,所以这些都需要我们自己来实现:

切换到SimpleAdapter

接下来

接下来

MainAcivity使用:

 

 有一个很重要的Bug

当我们点击ActionBar的add后,添加多个item,你会发现这多个item点击的onclick事件输出的position都是一样的,这可麻烦了,因为我们在实战中会经常用到这个position,怎么解决呢?从布局来看,这个item已经被插入进去了,并且item的位置也发生了变化。

我们来到SimpleAdapter,我们的position应该用holder.getLayoutPosition();来代替

20170106231319

万事大吉,希望你在实战中,展现更好的效果!

 

 

 

本文主要是:http://www.imooc.com/learn/424     明日之星-RecyclerView的记录

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">