「iOS」高仿【少数派】客户端 代码+思路讲解

时间  2019-11-26
标签 ios 高仿 少数派 客户端 代码 思路 讲解 栏目 iOS 繁體版
原文   原文链接

少数派
少数派

1、写在前面

在个人iOS开发学习过程当中，阅读过许多同窗的高仿项目文章、源码，对我助益颇深。可是许许多多的高仿项目在技术方面各有侧重，因此我先把本项目中值得探讨的技术点列出，方便正好须要的同窗。ios

本项目重点探讨：git

  • UITableview的性能优化
  • UIScrollView的进阶使用
  • 少数派客户端导航栏动态效果的实现
  • UITableview的多种控件嵌套
  • 手动封装一些经常使用的视图控件

2、简述

首先来看一下项目的运行效果：
github

LYSSPai运行展现
LYSSPai运行展现

对于原客户端的一些重复性细节没有所有实现，欢迎你们fork。

这里是 LYSSPai项目地址。web

在本文中，我会先介绍项目的总体实现思路，而后对于开发过程当中遇到的值得探讨的点进一步讲述。json

项目中的数据来源为使用Charles抓包获取，用json文件存在bundle中。
项目中的素材来源为官方客户端ipa包使用iOS Images Extractors解析得到。
声明：仅用于学习交流，严禁用于商业用途。缓存

3、总体实现思路

在这一节，我会按照页面来介绍总体开发思路。性能优化

1. 首页

首页展现-1
首页展现-1

首页展现-2
首页展现-2

1.1 页面简述

  • 这是项目的首页，主要结构是顶部的导航栏和下面的内容。
  • 导航栏效果：
    在页面向上滑动时，顶部导航栏的文字、按钮尺寸会随之动态减少，然后总体上移，悬停在顶部，模拟系统的导航栏效果。当页面下滑时，效果相反。
  • 内容展现部分：
    首先有一个左右滑动的相似轮播图部分。用以展现重点推荐的专题、文章、广告等。
    接下来是一篇文章。
    而后又是一个手动滑动的相似轮播图。用来展现付费的栏目。
    剩余部分全为文章。

1.2 实现思路

1.2.1 内容展现

使用UITableview，包含三种cell。
轮播图为横向的UIScrollView，为其中的每个子cell设置tag值，点击事件以delegate的方式交由首页VC实现。
文章展现cell为普通的cell。右上角的菜单按钮点击事件以delegate的方式交由首页VC实现。bash

1.2.2 导航栏实现

导航栏的动态效果须要随着内容滑动而进行，然后悬停在顶部。其中涉及导航栏的高度变化以及悬停效果。
咱们很容易想到使用UITableView的tableHeader和sectionHeader，那么先来明确一下这两种视图的特性：
tableHeader没有顶部悬停效果，可是能够方便地更改视图的高度：网络

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布局。app

1.2.3 分类专题页

分类专题页
分类专题页

点击首页右上角的按钮或者在内容cell中左划，会进入分类专题页面。这个页面只是简单模拟实现了一下。

1.2.4 文章阅读页面

文章阅读页
文章阅读页

点击文章cell或者轮播部分的文章类型子cell，会进入对应的文章阅读页面。
这个页面底部导航栏为手动模拟实现。文章展现使用 WKWebView。在整个页面包含web内容部分，都可以右划返回。

关于使用WebView展现内容的探讨，在个人文章从简书iOS客户端，来谈谈Hybrid方案细节设计进行了详细探讨，欢迎你们阅读。

2.发现

发现页展现
发现页展现

这个页面和首页相似，而且比首页简单，略过不表。

3.消息

消息页展现
消息页展现

这个页面没有特别复杂的部分。不过本身封装了选择器View，效果和原客户端彻底一致，须要的同窗能够阅读这部分代码。其中涉及到UIScrollView的一些进阶特性，一会会详述。

4、重点详述

1. tableview性能优化

  • 优化场景
    页面开发完成后，cell嵌套scrollview，其中还包括多个子cell，若是不加优化的话，能够预见使用体验不会太好。在第一次滑动到第二个轮播图时，很明显感觉到页面fps降低。然后滑动流畅，fps基本保持在60。因此咱们知道，优化重点在于轮播图的首次加载、渲染。轮播图首次出如今屏幕范围中以后，被加入缓存，因此再次滑到这里时便不会卡顿。
    说到性能优化，不得不推荐一下ibireme的文章，强烈建议没看过的同窗认真阅读一下iOS 保持界面流畅的技巧。
  • 优化思路
    滑动页面时fps在60左右时，用户不会感受到卡顿，这是优化的目标。也就是说，咱们须要在1s/60 = 16.7ms内，完成每一帧的渲染。而视图渲染须要CPU运算+GPU渲染运算共同完成。因此咱们须要分析在这个场景下，CPU与GPU各自的工做量，合理调配，从而使它们的每一帧运算耗时总和低于16.7ms。
  • cell重用
    cell重用是很是基础但又很是重要的优化手段，正确使用tableview的cell重用机制。
  • cell高度缓存
    tableview的渲染过程当中，有多少个cell，就会调用多少次- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath方法，从而肯定contentSize。因此，尽可能将cell的高度提早计算而且进行缓存，避免在这个代理方法中进行计算，能够有效优化tableview的渲染。
  • 布局计算优化

    布局的计算是CPU的工做，当页面层级复杂时，布局计算就会耗费较多时间。同时，应该明确的一点是使用Masonry自动布局是将布局计算量交给CPU去完成，势必会相对增长耗时。因此，在复杂cell的优化中，通常建议手动计算布局，会稍微提高一些性能。除此以外，若是页面布局计算量比较大的话，将布局计算在页面渲染以前完成而且缓存，会有效减小视图渲染时的16.7ms中的CPU运算时间。
    在本项目中，我为轮播图cell封装了一个frameModel，在页面数据获取完成后，提早计算轮播图的布局结果，在页面渲染时，无需计算即可以直接赋值。

    //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;
}复制代码

    能够看到，带有for循环而且每个循环体都稍有计算量，将这些计算工做提早而且在子线程执行是很是明智的。咱们要让那16.7ms“用在刀刃上”。

  • 正确选择视图控件，为视图瘦身
    UIView和CALayer的关系你们应该都有所了解。UIView在CALayer的基础上，封装了交互操做相关的部分，UIView是比CALayer更重量的。若是当前控件不须要响应用户操做，咱们应该尽量使用CALayer替代UIView。
    在本项目中，付费内容轮播图部分，整个子cell须要响应用户的点击操做。因此只须要在子cell的最底层view添加手势识别。而背景图片、用户头像等元素是不须要响应特殊操做的，因此这些控件不使用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];复制代码
  • 网络内容异步加载
    待页面显示出来以后，网络内容再慢慢加载，也是为了将时间用在刀刃上。
    异步加载网络图片的框架，有你们都熟知的SDWebImage，也有ibireme的YYWebImage。据介绍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];复制代码

  • 圆角设置

    又是老生常谈的圆角设置。使用CALayer的相关属性来实现圆角效果会触发离屏渲染，增长GPU的工做量。在这一点的优化上，可使用CPU将图片素材直接裁剪为圆角图片再进行显示。固然，最优的方案固然是让大家的美工直接提供圆角素材~
    这里我直接使用了YYImage的圆角处理。

2. UIScrollView的进阶使用

这个部分我主要讲的是消息页面的选择器控件封装的思路。
先看效果：

selectView效果展现
selectView效果展现

一个很是简单的控件。 可是有一个细节须要注意：使用轻划手势左右滑动时，页面必然进行滚动。而使用拖拽时，则会判断拖拽范围来决定是否进行滚动。
这个效果我使用了 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];
}复制代码

3. 导航栏动态效果的实现

先从新看一下效果：

导航栏效果展现
导航栏效果展现

这里使用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);
            }];
    }复制代码

这里计算比较繁琐，能够仔细看一下。

4. UITableview的多种控件嵌套

这个部份内容在前文的页面实现部分已经简单讲过，这里列出来是提醒初学的朋友能够稍做留意。

5. 手动封装一些经常使用的视图控件

在本项目中，我封装了页面的导航栏视图HeaderView，选择器视图SelectView以及页面的加载loading视图LYLoadingView。须要了解的同窗能够留心看一些。
这里简单展现一下loading视图的封装。
这是头文件部分：

@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];复制代码

5、写在最后

这个项目并无100%彻底复原官方客户端，笔者闲暇时间不容许，因此算是仓促结束，而且写了这篇文章做结尾。项目中还存在一些bug，也有未完成的功能点，欢迎你们fork。
有不足之处欢迎你们指出，也欢迎讨论项目中的其余实现方式，但愿帮助到须要的同窗。

最后再贴一下 LYSSPai项目地址。若是以为不错，但愿点个star~

halo

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程