Swift仿写有妖气漫画

前言:

一直以来工作中项目使用的都是OC,最近公司项目上线正常迭代比较清闲,准备写个Swift项目保持手感,选择的是仿写有妖气漫画。


项目采用的是MVC的设计模式,Moya+ HandyJson网络层和数据解析,另外项目中使用的一些优秀的三方库会在下文提到比如带动画的tabBar使用的是ESTabBarController


下面先看下目前完成情况效果图

效果图

首页分析:

可以看出首页的样式和AppStore的首页UI样式很接近,都是根据日期阶段几张大图首推另外穿插小编推荐。 首页部分我所采用的使用分区TableView,大图部分使用tableviewcell,而上面星期天的显示区域做为tableView的headerView,下面小编推荐的部分作为tableview的footerView,其中footerView内部在嵌套collectionView展示小编推荐的漫画

Today1
Today2

发现模块分析:

发现模块采用的是自定义导航栏,分为 推荐、VIP、订阅、排行四个子模块接下来一一进行分析下

发现-首页分析:

首页界面采用的是分区的collectionView,选择让顶部的滚动图片和榜单gird按钮作为第一个section,然后其他的section根据数据model选择不同的样式和item数量,这里把第一个section的headerView的size设置为.zero,把最后一个section的footerVeiw的size设为.zero 首页顶部分榜gird和section的headerView上面点击查看更多按钮通过block方式获取点击事件进行界面跳转

发现-推荐

首页点击发现-推荐上面不同榜单按钮以及点击发现-排行模块都可以跳转不同类型排行list界面,该界面使用的是tableview展示,不同的排行类型会有些差别,主要体现在是否有前三名勋章,以及最先面醒目字体标识的是热度还是点击量或者是收藏量等,这个主要是根据数据模型处理就行了

排行榜

发现模块其他的子模块分析:

发现模块的其他子模块就比较简单了,其中VIP和订阅布局进本一样,采用的也是分区collectionview, headerview根据数据模型显示标题和是否显示右边点击查看更多按钮,而排行子模块用collectionView分区显示几个排行榜就行了

发现-vip

漫画详情模块:

该模块可以说是整个有妖气最重要的模块了,为了美观详情界面采用的是进来隐藏导航栏,然后在界面上移的时候显示导航栏 该模块顶部漫画图文介绍作为headerView,有一个北京模糊毛玻璃的效果,为漫画图片的投影,底部为三个分类的子页面详情、目录、评价,该模块用到了分页效果的三方库SwipeMenuViewController,以及导航栏渐进显示的三方库 WRNavigationBar

详情页效果图

详情界面分析:

详情界面采用的是分区的tableView,根据样式需求第一个section的headerView隐藏,第一个分区为作品介绍部分,cell的高度要根据数据模型返回的介绍文本长度进行调整,然后根据数据模型判断该作者是否还有其他作品来决定是否显示其他作品这一cell,猜你喜欢模块就是嵌套的一个collectionView

目录界面分析:

目录界面就是一个collectionView的item根据数据显示标题,headerView显示更新和排序(正序和倒叙)方便阅读

  if isPositive {  // 正序
       cell.chapterStatic = detailStatic?.chapter_list?[indexPath.row]
  } else { 
       cell.chapterStatic = detailStatic?.chapter_list?.reversed()[indexPath.row]
  }
复制代码

评价界面分析:

评价界面主要是tableView列表展示评价内容就行了,根据数据返回的评价内容对列表的高度作调整 三个子页面根据网上移动的具体,来发通知通知详情主页面是否向上滚动以及显示导航栏效果

我的模块分析:

我的界面主要就是采用的tableView列表展示,顶部区域头像妖气币、月票等整体作为headerView

我的

写在最后:

项目很简单,界面也很少逻辑处理也很简单,项目大体上基本完成,书架模块和一些细节调整后续会完善,感兴趣的朋友可以下载源码看看,有什么问题和建议都可以github和简书联系我,谢谢支持

最后放上项目源码

github:github.com/daomoer/YYS…

猜你喜欢

转载自juejin.im/post/5b7135db6fb9a009a257e557