在我的iOS开发学习过程中,阅读过许多同学的高仿项目文章、源码,对我助益颇深。但是许许多多的高仿项目在技术方面各有侧重,所以我先把本项目中值得探讨的技术点列出,方便正好需要的同学。
本项目重点探讨:
首先来看一下项目的运行效果:
对于原客户端的一些重复性细节没有全部实现,欢迎大家fork。
这里是 LYSSPai项目地址。
在本文中,我会先介绍项目的整体实现思路,然后对于开发过程中遇到的值得探讨的点进一步讲述。
项目中的数据来源为使用
抓包获取,用json文件存在bundle中。项目中的素材来源为官方客户端ipa包使用
- Charles
解析获得。声明:仅用于学习交流,严禁用于商业用途。
- iOS Images Extractors
在这一节,我会按照页面来介绍整体开发思路。
使用UITableview,包含三种cell。
轮播图为横向的UIScrollView,为其中的每一个子cell设置tag值,点击事件以delegate的方式交由首页VC实现。
文章展示cell为普通的cell。右上角的菜单按钮点击事件以delegate的方式交由首页VC实现。
导航栏的动态效果需要随着内容滑动而进行,而后悬停在顶部。其中涉及导航栏的高度变化以及悬停效果。
我们很容易想到使用UITableView的
和
- tableHeader
,那么先来明确一下这两种视图的特性:tableHeader没有顶部悬停效果,但是可以方便地更改视图的高度:
- sectionHeader
- CGRect newFrame = headerView.frame;
- newFrame.size.height = newFrame.size.height + webView.frame.size.height;
- headerView.frame = newFrame;
- //beginUpdates和endUpdates方法用来以动画形式更改高度
- [self.tableView beginUpdates];
- //要更改tableHeader,必须显式调用set方法
- [self.tableView setTableHeaderView: headerView];
- [self.tableView endUpdates];
而sectionHeader是默认带有悬停效果的,但是我没有找到可以高效更新视图高度的方法,所以这种方法果断放弃。
对于tableHeader的悬停效果,可以在页面滑到临界点时,将tableHeader加入到与tableview同一层级的view中,手动实现悬停效果,这也是许多UIScrollView的子View想要实现页面悬停效果的方式。
但是有一点需要知道,UITableView是一个庞大的对象,对它频繁更新势必会影响性能。而动态更改tableHeader时,会不停地改变整个UITableView的布局。为了一个小小的动态效果实在不必如此。所以,我使用一个单独的view作为顶部的导航栏,并且将它和tableview加入到同一个容器scrollview中。这样动态效果仅仅影响这个单独的view布局。
点击首页右上角的按钮或者在内容cell中左划,会进入分类专题页面。这个页面只是简单模拟实现了一下。
点击文章cell或者轮播部分的文章类型子cell,会进入对应的文章阅读页面。
这个页面底部导航栏为手动模拟实现。文章展示使用
- WKWebView
。在整个页面包含web内容部分,均可以右划返回。
关于使用
展示内容的探讨,在我的文章从简书iOS客户端,来谈谈Hybrid方案细节设计进行了详细探讨,欢迎大家阅读。
- WebView
这个页面和首页类似,并且比首页简单,略过不表。
这个页面没有特别复杂的部分。不过自己封装了选择器View,效果和原客户端完全一致,需要的同学可以阅读这部分代码。其中涉及到UIScrollView的一些进阶特性,一会会详述。
方法,从而确定contentSize。所以,尽量将cell的高度提前计算并且进行缓存,避免在这个代理方法中进行计算,可以有效优化tableview的渲染。
- - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
自动布局是将布局计算量交给CPU去完成,势必会相对增加耗时。所以,在复杂cell的优化中,一般建议手动计算布局,会稍微提升一些性能。除此之外,如果页面布局计算量比较大的话,将布局计算在页面渲染之前完成并且缓存,会有效减少视图渲染时的16.7ms中的CPU运算时间。在本项目中,我为轮播图cell封装了一个frameModel,在页面数据获取完成后,提前计算轮播图的布局结果,在页面渲染时,无需计算便可以直接赋值。
- Masonry
可以看到,带有for循环并且每一个循环体都稍有计算量,将这些计算工作提前并且在子线程执行是非常明智的。我们要让那16.7ms“用在刀刃上”。
- //count为轮播图子cell数量
- +(instancetype)PaidNewsFrameModelWithCount:(NSInteger)count
- {
- PaidNewsFrameModel *model = [[self alloc] init];
- float cellWidth = LYScreenWidth * 0.55;
- float cellHeight = LYScreenWidth * 0.7;
- model.cellTitleFrame = CGRectMake(25, 10, 100, 18);
- model.moreFrame = CGRectMake(LYScreenWidth - 65, 11, 40, 16);
- model.backScrollViewFrame = CGRectMake(0, 43, LYScreenWidth, cellHeight);
- model.paidNewsViewFrames = [[NSMutableArray alloc] init];
- model.paidTitleFrames = [[NSMutableArray alloc] init];
- model.avatorFrames = [[NSMutableArray alloc] init];
- model.nicknameFrames = [[NSMutableArray alloc] init];
- model.updateInfoFrames = [[NSMutableArray alloc] init];
- for ( int i = 0; i < count; i++)
- {
- NSValue *paidNewsViewFrame = [NSValue valueWithCGRect:CGRectMake(25 + (cellWidth + 15) * i, 0, cellWidth, cellHeight)];
- [model.paidNewsViewFrames addObject:paidNewsViewFrame];
- NSValue *avatorFrame = [NSValue valueWithCGRect:CGRectMake(15, cellHeight - 90, 20, 20)];
- [model.avatorFrames addObject:avatorFrame];
- NSValue *nicknameFrame = [NSValue valueWithCGRect:CGRectMake(45, cellHeight - 85, cellWidth - 75, 12)];
- [model.nicknameFrames addObject:nicknameFrame];
- NSValue *updateInfoFrame = [NSValue valueWithCGRect:CGRectMake(15, cellHeight - 50, cellWidth - 30, 12)];
- [model.updateInfoFrames addObject:updateInfoFrame];
- }
- return model;
- }
和
- UIView
的关系大家应该都有所了解。UIView在CALayer的基础上,封装了交互操作相关的部分,UIView是比CALayer更重量的。如果当前控件不需要响应用户操作,我们应该尽可能使用CALayer替代UIView。
- CALayer
,改用
- UIImageView
。其实文字部分,也可以不使用
- CALayer
,这是可以继续优化的部分。
- UILabel
- CALayer *avator = [[CALayer alloc] init];
- [paidNewsView.layer addSublayer:avator];
- NSValue *avatorFrame = self.model.paidNewsFrame.avatorFrames[i];
- avator.frame = avatorFrame.CGRectValue;
- [avator yy_setImageWithURL:[NSURL URLWithString:self.model.PaidNewsData[i][@"avatar"]] placeholder:nil options:kNilOptions progress:nil transform:^UIImage * _Nullable(UIImage * _Nonnull image, NSURL * _Nonnull url) {
- image = [image yy_imageByRoundCornerRadius:40.0];
- return image;
- } completion:nil];
,也有ibireme的
- SDWebImage
。据介绍YYWebImage的性能是要比SD好一些的,这个我没有亲自验证。
- YYWebImage
- [avator yy_setImageWithURL:[NSURL URLWithString:self.model.PaidNewsData[i][@"avatar"]] placeholder:nil options:kNilOptions progress:nil transform:^UIImage * _Nullable(UIImage * _Nonnull image, NSURL * _Nonnull url) {
- image = [image yy_imageByRoundCornerRadius:40.0];
- return image;
- } completion:nil];
的圆角处理。
- YYImage
这个部分我主要讲的是消息页面的选择器控件封装的思路。
先看效果:
一个非常简单的控件。
但是有一个细节需要注意:使用轻划手势左右滑动时,页面必然进行滚动。而使用拖拽时,则会判断拖拽范围来决定是否进行滚动。这个效果我使用了
- UIScrollView
的代理方法
- - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
来实现。
这里是代码:
- //停止拖拽时的代理
- - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
- {
- // 如果是内容页的横向滑动
- if (scrollView == self.contentView)
- {
- NSLog(@"slowing?? %@",decelerate ? @"YES" : @"NO");
- CGFloat scrollX = scrollView.contentOffset.x;
- // 如果带有惯性(快速滑动),则内容页必然进行对应的移动
- if (decelerate)
- {
- if (self.selectedTag == 0 && scrollView.contentOffset.x > 0)
- {
- self.selectedTag = 1;
- }
- else if (self.selectedTag == 1 && scrollView.contentOffset.x < LYScreenWidth)
- {
- self.selectedTag = 0;
- }
- }
- // 如果无惯性(慢速拖拽),此时需要满足拖动的范围才会进行移动
- else
- {
- if (self.selectedTag == 0 && scrollX >= 0.5 * LYScreenWidth)
- {
- self.selectedTag = 1;
- }
- else if (self.selectedTag == 1 && scrollX <= 0.5 * LYScreenWidth){
- self.selectedTag = 0;
- }
- }
- [self contentViewScrollAnimation];
- }
- }
当轻划页面时,scrollview是有惯性的,而拖拽时是没有惯性的,利用这个特性来进行相应的判断。
这里是小横条移动的动画:
- //内容页进行移动的封装
- - (void)contentViewScrollAnimation
- {
- //根据此时选中的按钮计算出contentView的偏移量
- CGFloat offsetX = self.selectedTag * LYScreenWidth;
- CGPoint scrPoint = self.contentView.contentOffset;
- scrPoint.x = offsetX;
- //默认滚动速度有点慢 加速了下
- [UIView animateWithDuration:0.3 animations:^{
- [self.contentView setContentOffset:scrPoint];
- }];
- // 通知选择器,进行小横条的移动
- [self.selectView selectBtnChangedTo:self.selectedTag];
- }
先重新看一下效果:
这里使用scrollview的代理方法
- - (void)scrollViewDidScroll:(UIScrollView *)scrollView
来实现。
这是代码的部分:
- // scrollview刚刚开始滑动,此时导航标题大小和按钮大小进行变化
- if (Y <= -97 && Y > -130)
- {
- // 以字号为36和20计算得出的临界Y值为-97和-130,根据此刻Y值计算此时的字号
- CGFloat fontSize = (-((16.0 * Y)/33.0)) - 892.0/33.0;
- self.titleLabel.font = [UIFont fontWithName:@"HelveticaNeue-Bold" size:fontSize];
- // NSLog(@"point:: %f",self.titleLabel.font.pointSize);
- // 更新titlelabel的高度约束
- [self.titleLabel mas_updateConstraints:^(MASConstraintMaker *make) {
- make.height.mas_equalTo(self.titleLabel.font.pointSize + 0.5);
- }];
- // 计算此刻button的对应尺寸,若大于最小值(16),则更新约束
- CGFloat buttonSize = self.titleLabel.font.pointSize * (5.0/9.0);
- if (buttonSize >= 16.0)
- [self.button mas_updateConstraints:^(MASConstraintMaker *make) {
- make.width.mas_equalTo(buttonSize);
- make.height.mas_equalTo(buttonSize);
- }];
- }
这里计算比较繁琐,可以仔细看一下。
这个部分内容在前文的页面实现部分已经简单讲过,这里列出来是提醒初学的朋友可以稍作留意。
在本项目中,我封装了页面的导航栏视图
,选择器视图
- HeaderView
以及页面的加载loading视图
- SelectView
。需要了解的同学可以留心看一些。这里简单展示一下loading视图的封装。
- LYLoadingView
- @interface LYLoadingView : UIView
- //隐藏传入view中的loadingview
- + (BOOL)hideLoadingViewFromView:(UIView *)view;
- //为传入view显示一个loadingview
- + (BOOL)showLoadingViewToView:(UIView *)view WithFrame:(CGRect)frame;
- @end
这是实现部分:
- + (BOOL)hideLoadingViewFromView:(UIView *)view
- {
- NSEnumerator *subviewsEnum = [view.subviews reverseObjectEnumerator];
- for (UIView *subview in subviewsEnum)
- {
- if([subview isKindOfClass:self])
- {
- [subview removeFromSuperview];
- return YES;
- }
- }
- return NO;
- }
- + (BOOL)showLoadingViewToView:(UIView *)view WithFrame:(CGRect)frame
- {
- LYLoadingView *loadingView = [[LYLoadingView alloc] initWithFrame:frame];
- loadingView.backgroundColor = [UIColor whiteColor];
- UIActivityIndicatorView *indicator = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
- indicator.center = CGPointMake(frame.size.width/2, frame.size.height/2 - 100);
- [indicator startAnimating];
- [loadingView addSubview:indicator];
- [view addSubview:loadingView];
- return YES;
- }
loading视图模仿官方app的一个简单菊花指示器。
使用时,在页面渲染最开始在视图上加一个loadingview:
- // 初始化loadingview
- CGRect loadingViewFrame = CGRectMake(0, 130, LYScreenWidth, LYScreenHeight - 130);
- [LYLoadingView showLoadingViewToView:self.view WithFrame:loadingViewFrame];
页面数据获取完成后,table进行reload,然后移除loading视图:
- [self.newsTableView reloadData];
- // 隐藏loadingview
- [LYLoadingView hideLoadingViewFromView: self.view];
这个项目并没有100%完全复原官方客户端,笔者闲暇时间不允许,所以算是仓促结束,并且写了这篇文章作结尾。项目中还存在一些bug,也有未完成的功能点,欢迎大家fork。
有不足之处欢迎大家指出,也欢迎讨论项目中的其他实现方式,希望帮助到需要的同学。
最后再贴一下 LYSSPai项目地址。如果觉得不错,希望点个star~
halo
来源: https://juejin.im/post/5a1a9fbd51882503dc5369eb