首页 > 代码库 > 【热门APP用户体验分析】购物类APP之王——淘宝安卓版(二)

【热门APP用户体验分析】购物类APP之王——淘宝安卓版(二)

    在上一篇的文章中,简单的介绍了一下淘宝客户端的首页的导航栏,还有一些小的细节问题,这一篇,我们还是继续剖析淘宝客户端安卓版。

    我们首先还是先放出淘宝的主界面




    在这个界面中,最上方是一个广告栏,可以点击进入对应的活动界面。广告栏可以手动的滑动,而且滑动体验非常好,在使用其他软件的时候,会发生左右广告栏的滑动和上下的刷新滑动出现冲突的情况,表现出来就是界面一直在颤动,但是淘宝的广告栏做的非常好,只要在广告栏的区域滑动,触摸焦点就会被锁定,不会发生手势冲突的情况,淘宝的开发者应该是重写了控件的触摸事件,解决了滑动冲突的问题,以后有机会,一定要自己实现一下。

    另外,我们下拉整个界面,可以实现刷新的操作,隐藏在最上面的刷新提示区域只有简单的一个箭头,并没有其他诸如刷新时间等信息,使得界面更加的简洁。在实现这种带有刷新操作的界面的时候,我们可以使用xlistview,pullToRefresh等开源控件,但是从淘宝界面的复杂度上来看,应该是一个自己的开源控件,我们可以使用hierarchyViewer看一下,发现这个控件叫做MainListview



    而最上面的界面则是一个这个东西



    无保存状态的framelayout。

    而且,虽然标题栏的右边是一个简单的信息按钮,但是实际上,这个按钮也不简单。



    我们可以看到,一个这样简单的显示按钮,竟然是有13个view组成的,这个按钮封装了底部显示文字,未读信息条数,未读信息红点,显示图标等东西,可以说是非常强大啊。

    而在搜索框左边的搜索图标,也并不是简单的imageview或者是button,而是一个经过改造的textview




    可见,淘宝的开发者为了是控件用起来更加得心应手,对一些基本的控件都再次封装,使得这些控件更加的强大。

    我们再看公告栏的实现,广告栏是使用的viewpager,不过也是经过了自己的定制,使得更加符合使用要求。而且,显示广告的Imageview控件也进行了封装,叫做clickMaskRatioImageview,翻译过来应该是可点击的显示比例可调的Imageview。但是有一个问题我没有想明白,那就是广告图片其实就7张,但是却有21个这种控件,想不明白为什么会有这么多的控件,还请大神指导。


  

    

    我们再往下看,下面是有八个图标的功能快速入口,这个实现很简单,就是用普通的Imageview、textview、linearlayout完成的,上面一排和下面一排都是两个线性布局,然后在下面,用view画了一个灰色的分割线




    我们再往下看,就是抢购的模块,这个界面我们可以分成左右两个部分看。

    

   

    我们先看左边的部分。

    左边的部分是由前后两部分组成,采用的是帧布局,后面的背景和前面的倒计时控件

  


   我们可以发现,后面的背景使用的是和广告栏一样的控件,因为他们都有一个相同的功能,那就是点击跳转到对应的网页界面。而前面的倒计时则是由一个自定义控件完成的。这个自定义控件实现也比较简单,全部都是textview实现的数字显示,我们要做的就是每隔一段时间,更新一下现实时间。

   抢购界面右边的布局,使用的也是clickMaskRatioImageview,这里就不详细说了。

    从上面我们的分析中,我们可以发现,为了实现一些效果,淘宝客户端的开发者对很多的控件进行了在封装,使得更加符合要求,因此,我们应该加强自身在自定义控件方面的能力,这样才能开发出更好用的APP。

   今天先说到这里,下次我们再见。



【热门APP用户体验分析】购物类APP之王——淘宝安卓版(二)