iOS 编程：启动引导页

启动引导页

最近急着用启动引导图，折腾磨蹭了俩礼拜，所以搜了很多资料，最后终于用SRNewFeatures实现了。

使用当中发现发现如果使用Assets.xcassets中的Image是无法显示的，只有把图片放在根目录里才能显示。
开始以为是图片加载的问题：参考：UIImage加载图片的方式以及Images.xcassets对于加载方法的影响
后来研究了一下发现是在Assets.xcassets添加Image包的创建方式用错了，不应该使用New iOS Launch Image 的方式，而是使用New Image Set* 的方式。

设计思想

示例一：

// 获取上次启动应用保存的appVersion
NSString *lastVersion = [[NSUserDefaults standardUserDefaults] stringForKey:@"CFBundleShortVersionString"];
// 获取当前版本号
NSString *currentVersion = [NSBundle mainBundle].infoDictionary[@"CFBundleShortVersionString"];
if ([currentVersion isEqualToString:lastVersion]) {
    // 两个版本号相同，不是首次登陆
    return NO;
} else {
    // 否则存入当前版本信息
    [[NSUserDefaults standardUserDefaults] setObject:currentVersion forKey:@"CFBundleShortVersionString"];
    [[NSUserDefaults standardUserDefaults] synchronize];
    return YES;
}

示例二：

static NSString *const kAppVersion = @"appVersion";

// ...

#pragma mark - 判断是不是首次登录或者版本更新
-(BOOL )isFirstLauch {
    // 获取当前版本号
    NSString *currentVersion = [NSBundle mainBundle].infoDictionary[@"CFBundleShortVersionString"];
    // 获取上次启动应用保存的Version
    NSString *lastVersion = [[NSUserDefaults standardUserDefaults] objectForKey:kAppVersion];
    // 版本升级(即两次版本号不相同)或首次登录(即获取到上次版本号为nil)
    BOOL isEqualVerson = [lastVersion isEqualToString:currentVersion];
    if (!lastVersion || !isEqualVerson) {
        [[NSUserDefaults standardUserDefaults] setObject:currentVersion forKey:kAppVersion];
        [[NSUserDefaults standardUserDefaults] synchronize];
        return YES;
    }else{
        return NO;
    }
}

参考 Demo：

//
//  TPPWelcomeView.m
//  TaoPiaoPiao
//
//  Created by blackcater on 16/7/5.
//  Copyright (c) 2016 blackcater. All rights reserved.
//

#import "TPPWelcomeView.h"

@interface TPPWelcomeView() 

@property (nonatomic, strong) UIScrollView *scrollView;
@property (nonatomic, strong) UIPageControl *pageControl;

@end

@implementation TPPWelcomeView

#pragma mark - Lifecycle

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];

    if (self) {
        [self render];
    }

    return self;
}

- (void)render {
    [self addImagesToScrollView];
    [self addSubview:self.scrollView];
    [self addSubview:self.pageControl];
}

#pragma mark - Custom Accessors

- (UIScrollView *)scrollView {
    if (!_scrollView) {
        _scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT)];

        _scrollView.minimumZoomScale = 1.0;
        _scrollView.maximumZoomScale = 1.0;

        _scrollView.showsVerticalScrollIndicator = NO;
        _scrollView.showsHorizontalScrollIndicator = NO;
        
        // bounces,布尔值，用于控制当滚动视图超过内容边缘是否反弹，然后返回。
        _scrollView.bounces = NO;
        _scrollView.pagingEnabled = YES; // scrollView 以边界倍数滚动
        
        // scrollView 的宽度 = SCREEN_WIDTH * 图片数量
        _scrollView.contentSize = CGSizeMake(SCREEN_WIDTH*WELCOME_PAHE_NUM, SCREEN_HEIGHT);
        _scrollView.contentOffset = CGPointZero; // 初始位置

        _scrollView.delegate = self;
    }

    return _scrollView;
}

- (UIPageControl *)pageControl {
    if (!_pageControl) {
        _pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake((SCREEN_WIDTH-300)/2, (SCREEN_HEIGHT-14-6), 300, 14)];
        _pageControl.numberOfPages = WELCOME_PAHE_NUM;
        _pageControl.currentPage = 0;

        _pageControl.currentPageIndicatorTintColor = COLOR_RGB(239, 26, 40);
        _pageControl.pageIndicatorTintColor = COLOR_RGB(245, 245, 245);
    }

    return _pageControl;
}

#pragma mark - Private

- (void)addImagesToScrollView {
    int num = WELCOME_PAHE_NUM;
    for (int i=0; i

AppDelegate.m

    // 欢迎页
    NSUserDefaults *defaults = [NSUserDefaults standardUserDefaults];
    BOOL flag = [[defaults objectForKey:WELCOME_ACTIVE_NAME] boolValue];
    if (!flag) {
        [defaults setBool:YES forKey:WELCOME_ACTIVE_NAME];
        // 设置启动页
        TPPWelcomeView *welcomeView = [[TPPWelcomeView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT)];
        [self.window addSubview:welcomeView];
    }

参考资料

• SRNewFeatures
• 一句代码搞定启动引导页——LaunchIntroductionView.m
• 0代码实现项目引导页——KSGuidViewController

其他第三方框架

• EAIntroView ⭐️ 3400+
  • EAIntroView：高度可定制的应用欢迎页通用解决方案
• Onboard ⭐️ 5600+

设计思想

• 令人难忘的引导页欣赏
• 22个知名APP启动引导页设计欣赏
• 移动端引导设计技巧1：前置的引导页
• 由引导页说开来 | 网易用户体验设计中心
• 腾讯实例：怎么样让引导页变得更有用？