最近一直忙着找工作,入职, 简书也停了好久没更新了.
如今尘埃落定, 该坚持的还是要继续坚持, 今天写一个新特性页的 demo.

现在新特性页也是越来越炫酷, 各种动画, 各种小视频. 传统的图片浏览器一样的新特性页越来越不受待见. 不过写写也无妨. 如果 UI 的图做的漂亮有新意, 新特性页就算传统一点, 也是很吸引人的. 假如 UI 的妹纸给你几张新特性页的图片素材, 你如何将其整合成一个完整的引导页呢?

引导页的基本构成

既然要一行代码搞定引导页, 那么我们这一行代码就要搞定两件事

• 第一,创建引导页控制器并设置为窗口的根控制器
• 第二,当点击开始进入按钮后,切换根控制器

那么我们在引导页控制器的.h 文件中就要暴露这么一个 API 供外界使用

- (instancetype)initWithURLs:(NSArray <NSURL *> *)urls CompletionHandle:(void(^)())completionHandle;

• 参数1 :将 UI 妹纸给我们的图片素材整理成一个包含本地的 url 地址的数组
• 参数2:是一个 block, 就是当我点击开始进入按钮后的回调, 在这里面写切换根控制器的代码

实现如下

AppDelegate.m

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    self.window = [[UIWindow alloc]initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)];
    
        NSMutableArray *mtArr = [NSMutableArray array];
        for (NSUInteger i = 0; i < 6; i ++) {
            NSString *fileName = [NSString stringWithFormat:@"%lu.jpg",i+1];
            
            NSURL *url = [[NSBundle mainBundle]URLForResource:fileName withExtension:nil];
            [mtArr addObject:url];
        }

    ZHLGuidePageController *guidePageVC = [[ZHLGuidePageController alloc]initWithURLs:mtArr.copy CompletionHandle:^{
        ViewController *viewController = [[ViewController alloc]init];
        self.window.rootViewController = viewController;
    }];
    self.window.rootViewController = guidePageVC;
    [self.window makeKeyAndVisible];
    
    return YES;
}

在ZHLGuidePageController中,我重写了 init 方法,将参数传入到控制器中,作为成员变量,供内部的私有 API 调用

ZHLGuidePageController.m

#import "ZHLGuidePageController.h"
#import "ZHLLoopView.h"
#import "ZHLPageControl.h"

@interface ZHLGuidePageController ()<UICollectionViewDelegate>

@end

typedef void(^CompletionHandle)() ;
@implementation ZHLGuidePageController
{
    NSArray <NSURL *> * _urls;
    ZHLPageControl *_pageControl;
    CompletionHandle _completionHandle;
}


- (instancetype)initWithURLs:(NSArray <NSURL *> *)urls CompletionHandle:(void(^)())completionHandle
{
    if (self = [super init]) {
        _completionHandle = completionHandle;
        _urls = urls;
    }
    return self;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    ZHLLoopView *loopView = [[ZHLLoopView alloc]initWithURLs:_urls];
    loopView.frame = self.view.frame;
    loopView.delegate = self;
    [self.view addSubview:loopView];
    _pageControl = [[ZHLPageControl alloc]init];
    _pageControl.numberOfPages = _urls.count;
    [self.view addSubview:_pageControl];
    [[NSNotificationCenter defaultCenter] addObserverForName:@"ZHLChangeViewControllerNotification" object:nil queue:[NSOperationQueue mainQueue] usingBlock:^(NSNotification * _Nonnull note) {
        _completionHandle();
    }];
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGFloat pageIndex = (scrollView.contentOffset.x + self.view.bounds.size.width * 0.5) / self.view.bounds.size.width;
    _pageControl.currentPage = pageIndex;
}

@end

可以看到在上面的 -(void)viewDidLoad 方法 里面,我主要做的两件事情

• 添加 collectionView 作为图片轮播
• 添加 pageControl 作为分页指示

因为图片轮播用到了 collectionView,这样,你就需要建一个分类来管理这个 collectionView,在 collectionView 中展示图片
代码如下:

ZHLLoopView.m

#import "ZHLLoopView.h"
#import "ZHLLoopViewLayout.h"
#import "ZHLLoopViewCell.h"

NSString *const ZHLLoopViewCellID = @"ZHLLoopViewCellID";
@interface ZHLLoopView ()<UICollectionViewDataSource>

@end

@implementation ZHLLoopView
{
    NSArray <NSURL *> *_urls;
}

- (instancetype)initWithURLs:(NSArray <NSURL *> *)urls
{
    self = [super initWithFrame:CGRectZero collectionViewLayout:[[ZHLLoopViewLayout alloc]init]];
    if (self) {
        _urls = urls;
        self.dataSource = self;
        [self registerClass:[ZHLLoopViewCell class] forCellWithReuseIdentifier:ZHLLoopViewCellID];
    }
    return self;
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return _urls.count;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    ZHLLoopViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier: ZHLLoopViewCellID forIndexPath:indexPath];
    cell.backgroundColor = [UIColor colorWithRed:arc4random_uniform(256)/255.0 green:arc4random_uniform(256)/255.0 blue:arc4random_uniform(256)/255.0 alpha:1];
    if (indexPath.item == _urls.count - 1) {
        cell.buttonIsHidden = NO;
    }else{
        cell.buttonIsHidden = YES;
    }
    cell.url = _urls[indexPath.item];
    return cell;
}

@end

这里的代码有一点要注意的是, 我需要设置按钮的可见, 只有当 cell 是最后一个 cell 的时候,才显示按钮.因为涉及到 cell 的重用问题, 所以必须做好判断,有 if, 就应该有对应的 else, 否则重用就会出问题

collectionView 数据的展示需要两样东西

• 注册 cell
• 设置 flowLayout
  这两样东西我们也分别建立类管理起来

ZHLLoopViewLayout.m

#import "ZHLLoopViewLayout.h"

@implementation ZHLLoopViewLayout

- (void)prepareLayout
{
    [super prepareLayout];
    self.itemSize = self.collectionView.bounds.size;
    self.minimumLineSpacing = 0;
    self.minimumInteritemSpacing = 0;
    self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    self.collectionView.bounces = NO;
    self.collectionView.pagingEnabled = YES;
    self.collectionView.showsVerticalScrollIndicator = NO;
    self.collectionView.showsHorizontalScrollIndicator = NO;
}

ZHLLoopViewCell.m

#import "ZHLLoopViewCell.h"
#import "ZHLButton.h"

@implementation ZHLLoopViewCell
{
    UIImageView *_imageView;
    ZHLButton *_button;
    NSTimer *_timer;
}

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        _imageView = [[UIImageView alloc]initWithFrame:self.bounds];
        _button = [[ZHLButton alloc]init];
        [self.contentView addSubview:_imageView];
        [self.contentView addSubview:_button];
    }
    return self;
}

- (void)setUrl:(NSURL *)url
{
    _url = url;
    NSData *data = [NSData dataWithContentsOfURL:url];
    UIImage *image = [UIImage imageWithData:data];
    _imageView.image = image;
    _button.hidden = self.buttonIsHidden;
    if (!self.buttonIsHidden) {
        NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:5 target:self selector:@selector(skippingGuidePageAction) userInfo:nil repeats:NO];
        _timer = timer;
        [[NSRunLoop currentRunLoop]addTimer:_timer forMode:NSRunLoopCommonModes];
    }else{
        [_timer invalidate];
        _timer = nil;
    }
}

- (void)skippingGuidePageAction
{
    [_button enterIntoTheAppAction];
}

@end

在设置 cell 的 图片的时候, 我们同时做出一个判断, 当用户停留在最后一个 cell 的时候开启计时器, 5秒钟后自动跳转到首页,当用户不停留在最后一个 cell 时 ,计时器失效并重置为 nil

在这个 demo 中, 我将最后的 "开始进入"的 button 也进行了重写

ZHLButton.m

#import "ZHLButton.h"

@implementation ZHLButton

- (instancetype)init
{
    self = [super init];
    if (self) {
        self.frame = CGRectMake(0, 0, [UIImage imageNamed:@"splash_video_ignore_132x44_"].size.width, [UIImage imageNamed:@"splash_video_ignore_132x44_"].size.height);
        self.center = CGPointMake([UIScreen mainScreen].bounds.size.width / 2, [UIScreen mainScreen].bounds.size.height * 8 / 9);
        [self setBackgroundImage:[UIImage imageNamed:@"splash_video_ignore_132x44_"] forState:UIControlStateNormal];
        [self setBackgroundImage:[UIImage imageNamed:@"splash_video_ignore_click_132x44_"] forState:UIControlStateHighlighted];
        [self addTarget:self action:@selector(enterIntoTheAppAction) forControlEvents:UIControlEventTouchUpInside];
    }
    return self;
}

- (void)enterIntoTheAppAction
{
    [[NSNotificationCenter defaultCenter]postNotificationName:@"ZHLChangeViewControllerNotification" object:nil];
}


@end

当点击按钮的时候发送通知,在控制器中接收到通知就会调用 block, 这样就可以完成切换控制器

ZHLGuidePageController.m

    [[NSNotificationCenter defaultCenter] addObserverForName:@"ZHLChangeViewControllerNotification" object:nil queue:[NSOperationQueue mainQueue] usingBlock:^(NSNotification * _Nonnull note) {
        _completionHandle();
    }];

_completionHandle就是初始化引导页控制器传进来的参数 block, 此时接收到按钮点击后触发发出的通知时,调用这个 block,完成控制器的切换.

让我们来看一下完成后的效果:

完成效果

如果不想等待, 直接进入,那么就点击按钮即可
如果想更换引导页, 只需要将图片的 url 地址整理成数组,传入到构造方法的参数里即可,别的就一行代码就不用改了.

- (instancetype)initWithURLs:(NSArray <NSURL *> *)urls CompletionHandle:(void(^)())completionHandle;

demo 地址链接

PS. 本人有若干成套学习视频, 包含Java, 数据结构与算法, iOS, 安卓, python, flutter等等, 如有需要, 联系微信tsaievan.