SDLaunch:一个杂七杂八,却功能完整的广告引导页

2016-11-28 本文已影响1312人神经骚栋

前言

在App中的广告页面比较常见,新手导引更是不用说,基本上每一个应用都必备一个新手导引.虽然现在封装的三方比较多,但是骚栋还是想自己造造轮子,SDLaunch是一个具有多种页面类型的引导页.其中包括,广告页面类型、 新手导引类型 ** 、 GIF背景页面类型、滚动图背景页面类型**四种形式,基本上能满足所有的引导页需求.下面我们就看一下SDLunch的使用规范.

SDLaunch使用说明

SDLaunch三方的主体是SDLaunchViewController,SDLaunchViewController是一个继承于UIViewController的类,这个类使用到了SDWebImage这个三方,如果项目中已经导入SDWebImage,请删除SDLunch的SDWebImage.
SDLaunchWebViewController是用于广告页面加载的一个控制器.控制器是以模态视图形式展示的.
SDLunch是需要在AppDelegate中代码指定根视图控制器的,这是需要注意的一点.

❗️❗️❗️❗️注意:如果同时加载本地图片数组和服务器图片数组,本地图片将不会生效.建议使用本地图片~因为服务器图片可能会造成卡顿,使用户体验效果下降.

</b>

SDLaunchViewController基础属性和方法

SDLaunchViewController一共有两个基础方法和一个公共属性.如下代码所示.其中,两个基础方法一个是用于初始化SDLaunchViewController对象,并且制定页面类型.一个是用于跳转页面.公共属性是endButton,只要页面类型不是ADLaunchViewController,其他类型默认都是有这个按钮,所以声明属性,方便使用者调用.

/**
初始化SDLaunchViewController
 */
-(instancetype)initWithMainVC:(UIViewController *)mainVC viewControllerType:(LaunchViewControllerType )viewControllerType;


/**
 跳转到App的根视图控制器
 */
-(void)skipAppRootMainViewController;


/**
 结束导引按钮,只要页面类型不是ADLaunchViewController,其他类型都有这个按钮,所以要拿出来.
 */
@property(nonatomic,strong)UIButton *endButton;

SDLaunchViewController的类型有四个,我们需要在初始化的时候就指定SDLaunchViewController的类型,类型是一个枚举值,具体如下所示.接下来我们会对每一种页面类型所对应的属性进行说明.

typedef enum {
    ADLaunchViewController,//广告类型
    GreenhandLaunchViewController,//轮播图新手导引类型
    GifBackgroundLaunchViewController,//gif图背景类型
    RollImageLaunchViewController//滚动图片类型
} LaunchViewControllerType;

广告类型的SDLaunch

上面说到了SDLaunchViewController的基本属性和方法,下面我们就说说如何在工程中使用SDLaunchViewController,首先我们需要把Demo中的SDLaunch这个文件夹导入工程.然后,我们就需要在AppDelegate中初始化我们的SDLaunchViewController,设置页面类型为ADLaunchViewController.由于广告页面大多数是动态的,所以我们需要指定广告图片的URL以及广告页面的URL,最后指定为根式图控制器.具体代码如下所示.

    self.window = [[UIWindow alloc]initWithFrame:[UIScreen mainScreen].bounds];
    self.window.backgroundColor = [UIColor whiteColor];

    SDLaunchViewController *vc = [[SDLaunchViewController alloc]initWithMainVC:[[ViewController alloc]init] viewControllerType:ADLaunchViewController];
    
    vc.imageURL = @"http://pic.qiantucdn.com/58pic/17/80/57/94s58PICA7j_1024.jpg";
    
    vc.adURL = @"http://www.jianshu.com/users/e39da354ce50/latest_articles";
    self.window.rootViewController = vc;
    
    [self.window makeKeyAndVisible];

效果图如下所示.

ADLaunchViewController类型所对应的其他属性如下所示,我们可以根据自己的需求定制特殊的广告页面.


/**
 广告页面标题
 */
@property(nonatomic,strong)NSString *titleString;

/**
 广告页面是否允许跳过,默认可以点击跳过
 */
@property(nonatomic,assign)BOOL isSkip;

❗️❗️❗️注意广告类型的SDLaunch如果加载的是服务器广告图片可能有延迟,所以占位图要设置为引导图的图片,这样用户体验就提高了,但是第一次使用可能会出现倒计秒数变少问题.

占位图设置

新手导引类型的SDLaunch

新手导引类型的SDLaunch主要用于首次进入App使用,类型枚举值为GreenhandLaunchViewController,其中新手导引我们初始化步骤和广告类型的步骤相同,但是我们需要传入的图片是一个数组类型,如果是本地的图片,我们传入的是图片名称数组(imageNameArray),如果是服务器端图片,我们传入的是图片的URL字符串数组(imageURLArray).这里有一点需要注意的是当两者同时传入的时候,默认的是使用服务器端的图片URL数组.具体示例代码如下所示.

    self.window = [[UIWindow alloc]initWithFrame:[UIScreen mainScreen].bounds];
    self.window.backgroundColor = [UIColor whiteColor];
    
    SDLaunchViewController *vc = [[SDLaunchViewController alloc]initWithMainVC:[[ViewController alloc]init] viewControllerType:GreenhandLaunchViewController];
    
    vc.imageNameArray = @[@"新手指导1",@"新手指导2"];
    
    self.window.rootViewController = vc;
    
    
    [self.window makeKeyAndVisible];

效果图如下所示.

当然了,新手导引也是有对应的额外属性的,比如对endButton(进入应用控制器按钮)和pageControl(页面标记),我们都可以进行专属定制.

GIF背景类型的SDLaunch

有很多的时候,我们需要定制一个动态图背景的页面,这不单单是在引导页所需要的,SDLaunch的GifBackgroundLaunchViewController类型就是用来完成这一任务的.这一类型中我们需要指定GIF图片的本地名称或者是图片的URL地址.同时这一个类型声明了frontGifView(半透明状)这一个属性用于往页面上添加各种控件.比如我们创建一个GIF动图的引导页面,我们可以往frontGifView上面添加一些必要的信息,示例代码如下所示.

注意:gifImageName属性赋值的时候,不需要带有.gif后缀.

    self.window = [[UIWindow alloc]initWithFrame:[UIScreen mainScreen].bounds];
    self.window.backgroundColor = [UIColor whiteColor];
    
    SDLaunchViewController *vc = [[SDLaunchViewController alloc]initWithMainVC:[[ViewController alloc]init] viewControllerType:GifBackgroundLaunchViewController];
    
    //不需要加.gif后缀
    vc.gifImageName = @"动图";
    
    //网络gif图片URL
    vc.gifImageURL = @"http://image76.360doc.com/DownloadImg/2014/07/1510/43430258_28";
    
    //往页面上添加数据
    UILabel *titleLable = [[UILabel alloc]initWithFrame:CGRectMake(0, 100,[UIScreen mainScreen].bounds.size.width , 60)];
    
    titleLable.font = [UIFont fontWithName:@"Helvetica-Bold" size:20];
    
    titleLable.textColor = [UIColor whiteColor];
    
    titleLable.textAlignment = NSTextAlignmentCenter;
    
    titleLable.text = @"不 积 跬 步 无 以 至 千 里";
    
    [vc.frontGifView addSubview:titleLable];
       
    self.window.rootViewController = vc;
   
    [self.window makeKeyAndVisible];

效果图如下所示.

滚动图片类型的SDLaunch

现在的App中有很多页面的背景图片都是一张滚动的图片,SDLaunch的RollImageLaunchViewController类型就是滚动的图片类型,其中我们要做的也是需要指定图片的本地名称或者是图片的URL地址.这里我们就拿启动图为示例,具体代码如下所示.

    self.window = [[UIWindow alloc]initWithFrame:[UIScreen mainScreen].bounds];
    self.window.backgroundColor = [UIColor whiteColor];
    
    SDLaunchViewController *vc = [[SDLaunchViewController alloc]initWithMainVC:[[ViewController alloc]init] viewControllerType:RollImageLaunchViewController];
    
    vc.rollImageName = @"滚动图片.jpeg";
            
    //往页面上添加数据
    UILabel *titleLable = [[UILabel alloc]initWithFrame:CGRectMake(0, 100,[UIScreen mainScreen].bounds.size.width , 60)];
    
    titleLable.font = [UIFont fontWithName:@"Helvetica-Bold" size:20];
    
    titleLable.textColor = [UIColor whiteColor];
    
    titleLable.textAlignment = NSTextAlignmentCenter;
    
    titleLable.text = @"不 积 跬 步 无 以 至 千 里";
    
    [vc.frontRollView addSubview:titleLable];
    
    self.window.rootViewController = vc;
    
    [self.window makeKeyAndVisible];

效果图如下所示.(效果图可能会卡顿,因为图片大小问题只能设置30FPS,所以有些卡顿)

滚动图片类型的SDLaunch核心代码讲解

其他三个类型的核心代码相对比较简单,滚动图片类型的核心方式就是实现滚动图片,骚栋是使用一个定时器加上改变imageView的frame来实现的,整体的实现部分主要在rollImageAction这个方法中实现的.在这个方法中,我们需要先判断x的坐标是否超过最大允许范围,如果超过,那么就改变isReverse这个布尔值,也就是改变调用方法.在反向方法中也是如此.具体代码如下所示.

int rollX = 0;
bool isReverse = NO;//是否反向翻滚
-(void)rollImageAction{
    
    if (rollX-1 >(SDMainScreenBounds.size.width-SDMainScreenBounds.size.height* _rollImage.size.width/_rollImage.size.height) &&!isReverse) {
        
        rollX = rollX-1;
        _rollImageView.frame = CGRectMake(rollX, 0,SDMainScreenBounds.size.height* _rollImage.size.width/_rollImage.size.height, SDMainScreenBounds.size.height);

    }else{
    
        isReverse = YES;
    }

    if (rollX+1 < 0 &&isReverse) {
    
        rollX = rollX +1;
        
        _rollImageView.frame = CGRectMake(rollX, 0,SDMainScreenBounds.size.height* _rollImage.size.width/_rollImage.size.height, SDMainScreenBounds.size.height);

    }else{
        isReverse = NO;
    }

}

当然了,在此之前,我们需要对图片的宽高比进行判断,因为图片是横向移动,纵向不移动且占满全屏.所以如果图片宽度大于高度的话,那么效果是不可能实现的,我们需要做一下判断.整体是在addRollImageAndTimer中实现的,对于网络图片和本地图片调取该方法的时机是不同的,因为网络加载是有延迟的.

-(void)addRollImageAndTimer{

    if (_rollImage !=nil && _rollImage.size.height>_rollImage.size.width) {
        
        NSLog(@"Error:滚动图片的高度比宽度高,不能进行横向滚动!");
        
    }else{
        
        
        _rollImageView  = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0,SDMainScreenBounds.size.height* _rollImage.size.width/_rollImage.size.height, SDMainScreenBounds.size.height)];
        
        _rollImageView.image = _rollImage;
        
        self.rollTimer =[NSTimer scheduledTimerWithTimeInterval:0.05 target:self selector:@selector(rollImageAction) userInfo:nil repeats:YES];
        
        [self.view addSubview:_rollImageView];
        
        
        if (!_hideEndButton) {
            [self.frontRollView addSubview:self.endButton];
            
            _endButton.tintColor = [UIColor blueColor];
        }
        
        [self.view addSubview:self.frontRollView];
        
        [self.rollTimer fire];
    }