iOS-高仿优雅的好奇心日报

好奇心日报关于好奇心有这样一句话:

之所以叫好奇心日报,是因为我们认为好奇心是人类最美好的品质之一,我们筛选最有价值的信息,你能看到全球最有想法,最有关注的各界动态,以及他们背后的故事

正是出于好奇心偶然间下载安装了这个好奇心日报,打开这个APP首先吸引我的就是它简洁干净的界面和优雅的配色,整个首页只有一个带有logo的悬浮按钮,然后就是带有高清配图不同与其他新闻平台的新闻文章,图标基本是简单的黑、黄、白三种颜色加单线条图形的设计。最后让我下定决心仿它的是它那简单到自然的动画效果。说这么多当然不是给好奇心日报打广告,只是想说我为什么写这个项目;额,就这么简单!

先看看JFQDaily效果:

JFQDaily效果展示.gif

如果你是一个iOS开发入门级的猿,有兴趣话可以下载JFQDaily源码然后结合本篇博客来看,相信你会有所收获的,代码写的接地气,注释详细!

一、准备工作

1、高仿,原生图片图标自然必不可少,利用iOS images Extractor抓取好奇心日报的图片,如何使用iOS images Extractor抓取APP图片,我的iOS直播APP-点赞动画的实现这篇文章下面有介绍。
2、用青花瓷(Charles)提取密码: kgya抓取好奇心日报数据,Charles的用法网上有很多文章,可以看看Charles常用的十大功能
3、筛选数据:

121707533-7f58535f2c678712

Paste_Image.png
131707533-af3c85e534f3b395

Paste_Image.png
141707533-7caedb65aca99693

Paste_Image.png

上面是用chalers所抓取到的数据,分析并拿到你需要的数据就行,上面标注的都是项目中需要用到的数据,具体筛选过程就不再分析了,无非是打开好奇心日报看APP所展示的信息和抓到的数据做对比,找到相应的映射关系。如果你想走的更远独立行走是必要的。具体数据分析里的细节问题可以认真看源码Models文件夹类的数据模型文件。好啦准备工作完成啦,开始动手建工程码代码吧!

二、项目文件结构

151707533-77f613a7aca2eb1c

Paste_Image.png

1、 AppDeleteggate文件夹

  • 放着AppDelegate .h和.m文件

2、Tools:工具类

  • NSString+JFMessage:NSString的类扩展,添加了计算文本高度和将毫秒转换成日期的类方法
  • JFLoopView:无限循环图片轮播器,关于JFLoopView可以看一行代码实现图片无限轮播器
  • MBProgressHUD+JFProgressHUD:MBProgressHUD的类扩展,添加了一个创建MBProgressHUD类方法,方便调用。
  • JFTimer:定时器,在一行代码实现图片无限轮播器中有讲到。
  • JFConfigFile:这个里面是一些高频的宏定义

3、Models:数据模型

  • 这里是根据之前使用chalers筛选的数据建立的数据模型

4、DataManager:数据管理器

  • 使用第三方框架AFNetworking创建的数据管理器,使用GET请求相关数据。

5、ViewControllers:控制器

6、views:界面

  • JFSuspensionView:悬浮按钮View
  • JFHomeNewsTableViewCell:首页cell,继承自UITableViewCell
  • JFMenuView:菜单界面
  • JFNewsClassificationView新闻分类界面继承自UIView

7、pods:项目所用到的第三方框架

  • Masonry :Masonry是目前最流行的AutoLayout框架。推荐追求Masonry
  • AFNetworking:是一个非常方便的网络请求库,可以轻松实现各种网络请求,比如经常使用的GET请求、POST请求等。
  • MJRefresh:李明杰老师写的下拉刷新框架,使用方法很简单。
  • MJExtension:json数据转模型的框架,也是李明杰老师写的,用法都很简单。相关用法可以看:iOS的学习笔记38 MJExtension使用
  • SDWebImage:目前最受欢迎的图片下载第三方框架,使用率很高。
  • MBProgressHUD:是一个显示HUD窗口的第三方类库,用法简单。

各框架的具体用法网上很多资料,不再赘述!

三、代码

1、搭建数据模型

161707533-72a0ce91a2e603ee

Paste_Image.png

这是我们用chalers抓取的json格式的数据,根据MJExtension的使用方法建立数据模型,先分别创建JFResponseModel、JFFeedsModel、JFPostModel、JFCategoryModel四个类,继承自NSObject。
然后我们慢慢从json数据的最里层向外层声明你所需要的对应参数(如果你还不了解MJExtension,建议你先看看他的官网说明文档,或者iOS的学习笔记38 MJExtension使用),切记参数可以自行选择创建,但是模型的类型一个不能少,参数名一定要一样,如果命名有冲突MJExtension提供的有相应的方法进行映射。例如:将冲突的参数description名映射到subhead

1.1 JFCategoryModel数据模型

1.2 JFPostModel数据模型

1.3 JFFeedsModel数据模型

上面所提到的参数名冲突导致的参数名不一致问题的解决方法:

1.4 JFResponseModel数据模型

1.5 JFBannersModel数据模型

JFBannersModel模型与JFFeedsModel参数一样,所以继承自JFFeedsModel就好

看起来模型很麻烦,只要你理清思路,掌握MJExtension用法,建立模型是很简单的,最主要是模型建好后,在后面使用数据时会非常方便。

2、DataManager数据管理器

JFHomeNewsDataManager.h文件中添加一个请求新闻数据的方法和一个请求数据成功后回调的block方法。

JFHomeNewsDataManager.m

使用GET方法请求数据,将last_key参数拼接到URL中:

打断点看我们请求到的JSON数据转换成字典dataDictionary里的内容:

171707533-efed74831eb90760

Paste_Image.png

response里的数据是我们需要处理的,所以用valueForKey:方法拿到其数据返回给JFHomeViewController:

数据处理部分到此算是告一段落,接下来就是要把数据展示到界面上,然后实现好奇心日报的交互动画。

3、UI布局

3.1 项目中实现的三种不同的cell样式

cellType对应的就是数据模型JFFeedsModel中的type

  • cellType = 0,UITableViewCell的样式是上方新闻配图、然后是新闻标题,最下面是副标题。
181707533-6087c4e69830994a

  • cellType = 1,UITableViewCell的样式是新闻配图在右侧,左侧是新闻标题,在其下面是新闻种类、评论数和点赞数。
191707533-e46475c4a7e0bb11

cellType = 2,UITableViewCell的样式和cellType = 0时基本一致,就多了最下面的新闻种类、评论数和点赞数。

201707533-e1f48cba97427b66

显然用苹果提供的cell是不行的,所以创建JFHomeNewsTableViewCell继承自UITableViewCell,然后我们来自定义cell。

JFHomeNewsTableViewCell.h文件中声明属性:

动态的设置cell的样式(frame)是在- (void)layoutSubviews;方法中,这里我把相关代码都放在了- (void)customUI;方法中,这里使用了Masonry自动布局,具体代码不在上了,可以下载JFQDaily源码JFHomeNewsTableViewCell类文件。

使用Masonry时有一点一定要注意,必须先把子控件添加到父控件上才能用Masonry去自动布局,否则父控件上没有相应的子控件何谈布局呢。

在JFHomeViewController.m文件中重写UITableView的- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath;代理方法来动态设置cell的高度;同样是根据类型判断。

3.2 悬浮按钮(JFSuspensionView)

3.2.1 悬浮按钮实现的原理:

  • 其实很简单,就是在JFHomeViewController控制器的View上添加一个JFSuspensionView,只是要在homeNewsTableView之上,使用下面方法或者使用- (void)insertSubview:(UIView *)view aboveSubview:(UIView *)siblingSubview;方法,此时当你滑动UITableView的时候按钮就是悬浮不动的。

3.2.2 在JFSuspension.h文件中用枚举定义了悬浮按钮的四种Tag类型和四种block回调方法,其实四种Tag类型一一对应四个回调函数,通过判断Tag类型来执行相应的block函数。

悬浮按钮绑定的- (void)clickSuspensionButton:(UIButton *)sender点击事件处理方法,通过tag判断需执行的事件。

3.3.3 上滑隐藏悬浮按钮,下滑显示悬浮按钮。
在JFHomeViewController中实现UIScrollDelegate代理方法

3.3 菜单(JFMenuView)界面布局
下图层级关系对照源码看,清晰明了!(JFNewsClassificationView层级关系和JFMenuView一样)

211707533-78e998496135b76c

懒加载模糊层:

想了解设置模糊效果可以看iOS效果—模糊效果汇总

四、弹簧动画效果

弹簧动画效果是用Facebook开源的pop动画引擎,简单使用的话推荐看:POP介绍与使用实践(快速上手动画),下面这段代码就是实例化了一个弹簧动画(POPPropertyAnimation),用来实现菜单界面的弹出效果。

菜单的隐藏动画使用的是苹果提供的UIView的动画,如下隐藏菜单的顶部View和底部View。

如上用原生的UIView动画加pop动画引擎就可以实现悬浮按钮和菜单view的弹簧效果,若想动画效果更加自然,是需要耐心的调整pop动画引擎属性。

总结:这篇文章不是一个细致讲解这个项目的文档,结合这篇文章去看JFQDaily源码相信你会有所收获的,毕竟是三天写出来的东西,代码可能有不规范的地方,欢迎指出纠正,出于好奇心和喜欢,一气呵成的写完了主要功能,还有一些细节需要优化和完善,如果你喜欢,欢迎留言、点赞加关注,方便我们学习交流,也是给我前进增加一份动力。感谢你的耐心阅读!

1 5 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部