一行代码搞定引导页(新特性页)

本人有若干成套学习视频, 可试看! 可试看! 可试看, 重要的事情说三遍 包含Java, 数据结构与算法, iOS, 安卓, python, flutter等等, 如有需要, 联系微信tsaievan.

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

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

引导页的基本构成

要说引导页其实整体来看就是一个控制器, 我们将其首先设为窗口window 的 rootViewController(根控制器),然后当点击开始进入的时候, 就 切换根控制器即可

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

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

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

- (instancetype)initWithURLs:(NSArray  *)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 ()

@end

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


- (instancetype)initWithURLs:(NSArray  *)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 ()

@end

@implementation ZHLLoopView
{
    NSArray  *_urls;
}

- (instancetype)initWithURLs:(NSArray  *)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  *)urls CompletionHandle:(void(^)())completionHandle;

demo 地址链接

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