为了账号安全,请及时绑定邮箱和手机立即绑定

Swift仿写有妖气漫画

标签:
Swift

首页分析:

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


webp

Today1


webp

Today2

发现模块分析:

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

发现-首页分析:

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


webp

发现-推荐

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


webp

排行榜

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

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


webp

发现-vip

漫画详情模块:

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

webp

详情页效果图


详情界面分析:

详情界面采用的是分区的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


webp

我的



作者:YDomo
链接:https://www.jianshu.com/p/4b8e46ee1f39


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消