低仿蜻蜓UI

  我已经有好长时间没有更新博客了,主要是懒癌发作,刚好最近闲暇时间模仿了一下蜻蜓FM的UI界面。一级界面除了首页的广播模块没有找到数据接口没有做之外,其它的基本上做完了。直播界面的cell做得不完整,比如说左上角显示的“直播中”或者预约直播、右下角显示的在线人数、右上角显示的大咖等级,以及左下角显示的热度等小挂件都没有做,不过数据已经解析完成了,等哪天有空的时候再补充上去。先来看一下总体预览:

首页.png

收藏.png

下载.png

我的.png

  在来看一下相关界面的动态图:

推荐界面.gif

精品界面.gif

直播界面.gif

  所有的界面都只做了一级界面,二级跳转界面还没有做,后续有空的时候会继续完善。另外有两个已知的bug没有解决:第一个是父子控制器,如果控制器标题长短一致的话,下面的指示器位置就没有问题,如果标题字符个数不同的话,指示器位置会有一点奇怪,这也就是为什么我在下载模块中标题“已下载”改成“已经下载的原因”。父子控制器是我几个月之前封装的,等有空了会解决这个bug;第二个问题是首页推荐界面轮播器下边的红色指示条,原版应用指示器在滚动时,会跟屏幕左右对齐,我这里没有。本来打算自己重新写一个指示器的(这个跟封装父子控制器的思路差不多),但是这两天太累了,我就自定义了一个UIPageControl,然后修改了系统的_currentPageImage和_pageImage的图片(利用Runtime和KVC修改)将就一下,后续有空的时候回一并改过来。

  除了少数特别恶心的控件之外,整个项目采用纯代码的方式搭建。代码版本是Swift 4,并且已经适配了iPhone X。少数界面在iPhone 4s和iPhone SE上稍微有些变形。目前用到的第三方框架主要有SnapKit、Alamofire和Kingfisher,后续会引入RxSwift。

  项目的完成度不是特别高,等休息一阵子,后面能做到哪里就做到哪里。项目的相关细节后续会选择性的出一些博客以供交流。最好的学习方式就是不断练习和交流,项目代码在我的github上,希望有兴趣的小伙伴能给出改进建议,本人将十分感谢。