SuooL's Blog

蛰伏于盛夏 藏华于当春

iOS 引导图组件使用文档

发表于 更新于 分类于 阅读次数： Valine：
本文字数： 2.3k 阅读时长 ≈ 2 分钟

iOS 引导图组件使用文档

说明

实际效果

  • 引导图实际显示效果截图如下:

引导图示例.png

使用场景

当 APP 第一次安装启动或者大版本更新第一次启动的时候，运营有新的引导图介绍 APP 的重点功能或更新的，需要使用引导图完成。

基本介绍

本引导图组件基于 ZWIntroductionViewController修改。

只要设置引导图组件的 cover images ，初始化后将其加入到APPDelegate 的window即可， 对 APP 侵入性小，使用灵活。

使用文档

  • 首先是滑动的需求：
    在组件的ZWIntroductionViewController类中的- (void)scrollViewDidScroll:(UIScrollView *)scrollView方法中几行关键代码：
1
2
3
4
5
6
7
8
9
10
11
// 当滑动到最后一个的时候,禁止左滑动,只能通过点击按钮来去除引导图
CGFloat x = (_pageControl.numberOfPages-1) * YYScreenSize().width;

if (scrollView.contentOffset.x>x) {
    [scrollView setContentOffset:CGPointMake(x, scrollView.contentOffset.y) animated:NO];
}

// 第一个的时候不能右滑动
if (scrollView.contentOffset.x<=0.0) {
    [scrollView setContentOffset:CGPointMake(0.0, scrollView.contentOffset.y) animated:NO];
}

以上的代码是控制在引导图第一页的时候不能向右滑动，在最后一页的时候不能通过继续左滑结束引导，只能通过点击按钮进入 APP 中。
（如果没有以上需求，将代码注释即可。）

  • 其次是指示器颜色和进入按钮的需求：
    如果对于pageControl的指示器颜色有特殊的需求，比如需要指示器的颜色及进入 APP 的按钮样式，需要修改ZWIntroductionViewController类中的- (void)viewDidLoad方法，指示器颜色修改具体的代码如下：
1
2
self.pageControl.pageIndicatorTintColor = [UIColor grayColor];
self.pageControl.currentPageIndicatorTintColor = GlobalColor;

按钮相关的修改如下：

1
2
3
4
5
[self.enterButton setTitle:NSLocalizedString(@"立即体验", nil) forState:UIControlStateNormal];
[self.enterButton setTitleColor:GlobalColor forState:UIControlStateNormal];
self.enterButton.layer.borderWidth = 1.0;
self.enterButton.layer.cornerRadius = 20.0;
self.enterButton.layer.borderColor = GlobalColor.CGColor;
  • 最后是使用的规范：
    下面是一个使用示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
- (void)isFirstLaunch{
    if(![[NSUserDefaults standardUserDefaults] boolForKey:@"firstStart_V2"]){
		  // 如果是第一次启动，设置对应的版本标示
        [[LSUserDefaults sharedInstance]setNewVeisonCode:@"1"];
        [[NSUserDefaults standardUserDefaults] setBool:YES forKey:@"firstStart_V2"];
		  // 设置引导图的图片
        NSArray *coverImageNames = @[@"leadPage_1", @"leadPage_2", @"leadPage_3",@"leadPage_4"];
		  // 初始化引导图组件
        self.introductionView = [[ZWIntroductionViewController alloc] initWithCoverImageNames:coverImageNames backgroundImageNames:nil];
		  // 添加组件
        [self.window addSubview:self.introductionView.view];
        __weak AppDelegate *weakSelf = self;
		  // 引导完成后的回调
        self.introductionView.didSelectedEnter = ^() {
            [weakSelf.introductionView.view removeFromSuperview];
            weakSelf.introductionView = nil;
        };
    }
}

整个使用的过程如上代码所示。

以上就是引导图组件的文档说明

泡面一杯