android天猫app首页布局,仿天猫App实现商品列表布局切换效果

昨天有朋友问了我这样一个需求，就是在天猫App中首页进入搜索界面，搜索出的商品页中，有一个按钮可以切换商品列表的布局。没有用过或者用的少天猫App的赶紧下载体验下(哈哈，给天猫打个广告~)。如果你很懒不想去下载的话，OK，我们来看下面这两幅图：

   

上面两幅截图分别是点击右上角按钮后两种不同布局的效果。简单的流程可以概括为：第一次进入页面，有个默认的布局，才是点击按钮，由竖直的线性布局切换到网格布局，也可以叫做瀑布流式布局。看到这里大家是不是迫不及待得想体验下了。坐好了吗，开车~

首先，看下我们今天要实现的效果图：

      

可以看到上面两幅图是我们要实现的效果，UI非常简单，右上角按钮丑陋的外表却又是今天不可或缺的主角。基本的功能也很简单，就是点击按钮在两个不同的布局间切换。

下面，我们就进入今天的正题。

可以看到商品展示的形式都是以列表的方式来展现。Android中列表控件很多了：ListView，GridView，ExpandableListview以及V7里面的RecyclerView等等。上述的形式都可以轻松的配合Adapter数据适配器来完美实现一个列表功能。那么，我们今天的这个效果又该如何实现呢？(卖关子开始。。)

早上的时候，提出这个需求的朋友说使用了两个RecyclerView实现了这个效果。两个RecyclerView分别对应两个Adapter、两个布局。当时听了，我的内心是崩溃的。这样的设计方案在实际的App开发中是绝对不行的。如果单纯的为 了实现这个功能，那么可以理解。但是实际应用当中，数据都来自服务器，那么我们为了这么一个切换功能，还要去多请求一次服务器吗，多存储一些不必要的字段吗？显然这种设计方案是不行的。

相信使用过列表多布局方案的童靴都比较熟悉了，对哇。这不就是两个不同布局一个列表的升级版吗。并且，V7包中的RecyclerView强大的功能也支持了可以在不同布局之前的切换功能(LinearLayout，GridLyout，Stragged等等。。)。说到这，相信大家都想到了RecyclerView的布局管理器：LayoutManager。没错！就是它了！

RecyclerView的setLayoutanager()方法可以让其布局在不同的排列方式间进行切换，常见的：从线性布局到网格布局、瀑布流。上面我们要实现的效果，其实就是从线性布局到网格布局的一个格式转换。看到这，相信大家都明白了。原来是一个方法就能解决的事啦~ 哈哈，还别高兴的太早了。

如果是简单的格式切换，利用上面的方式就已经完成了这种效果。但是细心的朋友可能发现了，我们的效果在切换前和切换后的Item布局是不一样的：

在线性布局的场景下：Item中有图片、标题、描述。

在网格布局的场景下：Item中有图片、标题。

所以，如果不改变布局Item的显示，那么setLayoutManager方法就已经完全胜任了。但是如果要改变不同的Item布局该怎么办呢？下面我们一一道来。

在博客刚开始的时候，我提到了列表多布局的方式。这种场景相信大家都不陌生，每天我们都在使用的WeChat，聊天的对话形式就是一个列表：

看到了吧，一个列表不同的排列方式。

那么，我们今天的效果也离不开这种方式：切换后改变Item的布局。

RecyclerView的Adapter中有一个getItemViewType(int position)方法，来区别每一个Item的布局。我们需要重写该方法来实现不同的布局方式。在重写该方法时，返回值为Int型。

在返回值时需要注意，该值要从0开始，依次排下。否则会Crash。

利用该方法的返回值，我们就可以在onCreateViewHolder方法中去根据该返回值加载不用的布局了,然后在onBindViewHolder方法中同样根据不同的type去绑定对应布局的对应控件。

基本的实现流程，到这里就介绍完了。总结起来原理其实也很简单：

(1)使用RecyclerVew的setLayoutManager方法来控制列表的格式切换。

(2)重写Adapter的getItemViewType方法来根据自己的需求返回对应的Item布局。

有朋友说在切换的时候界面有些僵硬，直接就切换出来了。下面我们可以为RecyclerView添加Item的动画效果。RecyclerView有一个方法叫做：setItemAnimator()。

该方法可以为RecyclerView的Item添加一些动画效果。但是要注意的是，该方法添加的动画效果，只有在Item的添加和删除时才会生效。所以，我们不能用此方法来实现切换时的动画效果。那么我们该如何实现呢？

还记得Android3.0之后的属性动画吧。没错，属性动画系列中有一个布局动画：LayoutAnimationController。该实例可为布局中的组件设置动画效果。ListView和RecyclerView都为我们提供了设置动画的方法：setLayoutAnimation()。使用该方法就可以轻松搞定啦~，下面是核心代码：

/***开启动画*/private voidstartAnimation(intanim) {LayoutAnimationControllerlac=newLayoutAnimationController(AnimationUtils.loadAnimation(this,anim));//动画执行顺序lac.setOrder(LayoutAnimationController.ORDER_RANDOM);//将布局动画设置到RecyclerViewrv.setLayoutAnimation(lac);//启动动画rv.startLayoutAnimation();} 在切换布局的方法中调用该方法传入动画anim，就搞定啦。

OK，本篇博客就到这了。最后附上源码，有问题的朋友及时给我留言。thks!