仿写豆瓣详情页(一)开篇


仿写豆瓣详情页(一)开篇
仿写豆瓣详情页(二)底部浮层
仿写豆瓣详情页(三)内容列表
仿写豆瓣详情页(四)弹性布局 doing
仿写豆瓣详情页(五)联动和其他细节 doing


仿写豆瓣详情页(一)开篇

1、初衷

首先,从用户体验的视点来v v I C 3 v 1说,豆瓣各个页面内容的滑动和联接都十分顺滑,这一点十分佩服豆瓣的产品和开发。而豆瓣的详情页是我触摸过的 UI 中动画最杂乱的,因此8 O = ^ : o一向想测验完成一下。

另一方面也希望提升下自己Y $ v k处理杂乱交互动画的才能。日常需求的交互都比较简单,也不涉及杂乱的动画,或许有现成的组件能够用。事件分发和嵌套滑动只是大体了解,还需要多加实践。

半年前的时候测验完成过一次,因为时刻和精力的原因中途放弃,这次决议坚持搞下去,至少有* + + J = { r个像样的 demo。

2、页面结Y / h C @ [ 3构拆分

杂乱的功用能够经过分层来解决,杂乱的 UI 也能够拆成一小部分一小部分相对简单的 UI 来完成。这儿根据我自己的观察() ; { W = b N毕竟我也拿不到豆瓣的源码,并且完成方案也是多种多样的),将页面的首要结构拆成不同的部分,并对每一部分抽象成事务无关的 View,在此基础上完成豆瓣的页面作用。

2.1、底部弹起浮层* J – R a 3

仿写豆瓣详情页(一)开篇

检查动图

CoordinatorLayoun } Qt 有一个 BottomSheetBehaviorG W $ A G成的就是这个作用。其实自己完成也很简单,方法也有多种,这儿就自己造一个简单的轮子。

2.2、内容列表

仿写豆瓣详情页(一)开篇

检查动图

这部分的视图「看起来」是一个大列表,里边有影片的信息(这儿以电视剧为例)、豆瓣评分、剧情介绍、演职员表、剧照、短评和其他等卡片。下面还塞了影评的视图,由一个剧评和` W o / r小组讨论两个 tab 页面(暂不考虑自己的影评部分)组成,里边的内` $ P Z v * E 容是一个列表。

然后是交I _ j互。在咱们不断上滑的过程中,先是列表内容向下翻滚,翻滚到底部后,开始翻滚影x 6 H评的列表部分;手指下滑时,列表向上翻滚,先翻滚影评的列6 u J N表部分,再翻滚外层的大列表。

关于这样的 UI,我首先想到的就是 NestedScrollView,确实能够用这个完成,但是m L 9 t会有许多问题,这个会在下面的文章中细说。

2.3、弹性布局

仿写豆瓣详情页(一)开篇

检查动图

「演职员表」和「剧照」是两个水平翻滚的列表,左右两边翻滚到头都会有弹性的作用3 X t R V ! : Q,在右侧滑倒必定程度松开会打开下一级页面。

当然 github 上也有许多开源的弹性视图,这儿我也根据自己对事件分发和嵌套滑动的理解自己造了个轮子。

2.Q r q E n x4、联动和其他细节

仿写豆瓣详情页(一)开篇

检查动图

详情页的内容列表、底部浮层和标题栏还有联动作用。

内容底部的影评W u q W l 7 N A部分在还没显露时,就把这部分视图放在浮@ q c T 0 c层里,滑出一部分时再h e O 5 I从浮层中移除,放入内容列表中。

标题栏有两种状况,显现标题和显现影视信息,中间又动画过渡,状况切换随内容列表的翻滚值或浮层是否彻底展开而改动。

3、准备常识

  • View 的制作流程
  • Touch 事件的分发机制
  • 嵌套翻滚的分发机制,这儿首要用到 NestedScrollingParent
  • 改动 View 方位的方法,margin、layout、scroll、特点动画等
  • ScrollerVelocityTracker 的用法

4、最终

最终想说的是,自定义 View 不要过于追求大而全,咱们也不可能像写官方控件那样考r a v %虑各式各样的使用场景,考虑一大堆通用性和各种适配。自定义嘛,能用就行,假如总想着大而全,反而会陷入其间无法自拔。

github.com/funnywolfda…

发表评论

提供最优质的资源集合

立即查看 了解详情