iOS: 引导页 UIScrollView 自动布局(AutoLayout)详解

关键词：iOS、引导页、UIScrollView、AutoLayout、自动布局、OC、Objective-C

开屏引导页是app常用的一种引导页，即第一次打开app后显示给用户的几个左右滑动的页面，用来提醒用户这个版本有什么新东西。

由于 UIScrollView 和 UIPageControl 配合能完美的实现引导页的功能，因此这个任务并不算太难。本文完整介绍了如何创建一个典型的引导页，并重点讲解了如何使用 AutoLayout 来设置 UIScrollView。

需求

• 第一次打开app的时候显示，显示过之后再次打开就不再显示了。
• 更新引导页，更新第二版或者更多，这是个复杂问题，当前没有需求，可以简单分析一下：
  • 最简单的情况不要第二版引导页，就不用管了这个需求了，能满足第一条需求就行。
  • 对之前显示过第一版引导页的老用户是否显示第二版引导页
  • 直接安装第二版的新用户肯定要显示引导页，如果上一条老用户需要显示第二版，那么问题来了，对新用户显示的与老用户显示的是否一样。我觉得显示的一样即可，不需要这么复杂……万一你家产品经理抽风，也可以有个心理准备哈哈。
• 有图有真相，界面如下，其实没啥特别的：
  
• 能左右滑动也能点“下一步”按钮进入到下一页，要有动画。
• 最后一页的时候“下一步”按钮变成“开始”，与“跳过”的功能相同，即结束引导。

界面实现

自定义组合View

先来实现呈现内容的界面，这个界面包含一张图、两段文字。因为有 3 个图文界面，直接写死显然不行，因此使用一个自定义View，通过属性来设置图片和文字。

• 新建OC类、新建 xib 界面，起一样的名字 GuideView.h、GuideView.m、GuideView.xib。

• 打开 GuideView.xib 关联代码中的 GuideView 类，使用 File’s Owner 关联，如下图所示：
  

• 使用 AutoLayout 布局一个 UIImageView、两个 UILabel，这里不深入讲解 AutoLayout 了，只列出几个需要注意的点。

  • 适配不同机型，设计师给出的设计方案通常都是一个固定的界面上的尺寸和位置信息，有经验的或许能主动告诉你在多设备上的显示规则，如果没有作为程序猿也是要自己问清楚的。
  • 这个引导页设计图是按照 iPhone8 尺寸设计的，主要适配规则是上下居中，因为主要影响适配的是比较高的 X 系列设备。也就是说在比较高的 X 设备上这些图文内容要尽量上下居中，不能将内容都堆叠在顶部或者底部。
  • 从实现上来讲，要达到上下居中，AutoLayout 中的 Constraint 要定义成依赖 Center 的，比如 Image View.centerY = Safe Area.centerY - 116。
  • 多行文字的 UILabel 可以选择约束 leading + trailing，也可以选择约束 width，这就看具体需求是需要边距固定还是宽度固定了，同样如果不清楚也要向设计师问清楚。

• 实现 OC 类

  • 在 GuideView.h 中定义接口，这里定义几个属性

    @property (nonatomic, copy) NSString *imageName;
    @property (nonatomic, copy) NSString *title;
    @property (nonatomic, copy) NSString *subtitle;
    

  • 在 GuideView.m 中实现 setter 方法，没什么复杂的内容，直接给对应的 UIImageView 或 UILabel 设置内容。

    - (void)setImageName:(NSString *)imageName {
           
           
        _imageName = [imageName copy];
        self.imageView.image = [UIImage imageNamed:_imageName];
    }
    - (void)setTitle:(NSString *)title {
           
           
        _title = [title copy];
        self.titleLabel.text = _title;
    }
    - (void)setSubtitle:(NSString *)subtitle {
           
           
        _subtitle = [subtitle copy];
        self.subtitleLabel.text = _subtitle;
    }
    

  • 还要重写 - (instancetype)initWithCoder:(NSCoder *)aDecoder 方法。注意 owner 参数在用 File’s Owner 关联的情况下应该用 self

    - (instancetype)initWithCoder:(NSCoder *)aDecoder {
           
           
        self = [super initWithCoder:aDecoder];
        if (self) {
           
           
            UIView