百思不得姐之广告界面(三)

一 概述和总体功能图

1 广告界面的意思: 当用户点击启动一个app的时候,app并不会马上显示到主框架,而是先在屏幕中加载一张图片,而这张图片就称之为广告.由于图片是从服务器中请求的,所以每次启动app加载的广告图片都是不一样的.

2 设置广告界面的原因: 反正用户启动app的时候都会花费一点时间才会跳转到主界面,于是商家就利用这段时间做出了这样一种广告界面,同时也提供用户选择,如果不想等就可以直接跳过.

3 趋势: 现在很多的app都有这样的一个界面,也是目前很多app的趋势,也能为很多商家带来商业价值.

4 总体功能图

二 屏幕适配

1 屏幕适配原因: 让app加载的广告图片能在不同的iphone中运行,保证图片的样式不被拉伸,形变.

2 实现思路: 根据不同的屏幕的高度来设置不同尺寸的图片

3 具体实现步骤:

—-> 3.1 创建加载广告的文件(同时创建xib)

—-> 3.2 修改app的根控制器,让根控制器指向加载广告的控制器

—> 代码:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {    //1.创建窗口    self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];    //2.设置根控制器    //2.1 创建根控制器(将根控制器设置为广告控制器)    XFJADViewController *adVC = [[XFJADViewController alloc] init];    self.window.rootViewController = adVC;    //显示窗口    [self.window makeKeyAndVisible];    return YES;}

4 需要定义的屏幕适配的宏

//屏幕适配#define ipone6P (XFJ_screenH == 736)#define iphone6 (XFJ_screenH == 667)#define iphone5 (XFJ_screenH == 568)#define iphone4 (XFJ_screenH == 480)

5 实现屏幕适配的判断

#pragma mark - 实现图片加载的方法(屏幕适配)- (void)setUpImage{    //判断    UIImage *image = nil;    if (ipone6P) {        image = [UIImage imageNamed:@"LaunchImage-800-Portrait-736h@3x"];    }else if (iphone6){        image = [UIImage imageNamed:@"LaunchImage-800-667h"];    }else if (iphone5){        image = [UIImage imageNamed:@"LaunchImage-700-568h"];    }else if (iphone4){        image = [UIImage imageNamed:@"LaunchImage-568h"];    }    self.imageView.image = image;}

三 cocoapods的使用

1 由于该部分需要使用到框架,那么我在这简单介绍下cocoapods的使用.

—-> 注意:命令行:touch 创建文件 open:打开 cd: 进入到某个文件夹

—–> 1.1 –no-repo-update:不需要更新仓库,迅速加载第三方框架

—–> 1.2 创建podfile文件,描述需要导入的第三方框架

—–> 1.3 获取框架描述 pod search 第三方框架

—–> 1.4 加载第三方框架 pod install/ pod update

四 xib的结构

1 加载广告界面用到xib,我在这为大家奉上我使用xib的内部控件图

五 广告界面

1 业务逻辑:

—–> 1> 点击广告图片,跳转到广告界面,用safari打开

—–> 2> 广告界面倒计时

—–> 3> 点击跳过,直接进入到主框架界面

2 加载广告数据

注意: 由于该部分需要些很多代码,那么我们就抽一个方法,在一个方法中实现功能.

加载广告数据步骤:

——> 1> 请求数据

——> 2> 查看接口文档

——> 3> 测试接口文档有没有问题

——> 4> 解析数据

3 接口数据定义成宏

#define XFJ_code2 @"phcqnauGuHYkFMRquANhmgN_IauBThfqmgKsUARhIWdGULPxnz3vndtkQW08nau_I1Y1P1Rhmhwz5Hb8nBuL5HDknWRhTA_qmvqVQhGGUhI_py4MQhF1TvChmgKY5H6hmyPW5RFRHzuET1dGULnhuAN85HchUy7s5HDhIywGujY3P1n3mWb1PvDLnvF-Pyf4mHR4nyRvmWPBmhwBPjcLPyfsPHT3uWm4FMPLpHYkFh7sTA-b5yRzPj6sPvRdFhPdTWYsFMKzuykEmyfqnauGuAu95Rnsnbfknbm1QHnkwW6VPjujnBdKfWD1QHnsnbRsnHwKfYwAwiu9mLfqHbD_H70hTv6qnHn1PauVmynqnjclnj0lnj0lnj0lnj0lnj0hThYqniuVujYkFhkC5HRvnB3dFh7spyfqnW0srj64nBu9TjYsFMub5HDhTZFEujdzTLK_mgPCFMP85Rnsnbfknbm1QHnkwW6VPjujnBdKfWD1QHnsnbRsnHwKfYwAwiuBnHfdnjD4rjnvPWYkFh7sTZu-TWY1QW68nBuWUHYdnHchIAYqPHDzFhqsmyPGIZbqniuYThuYTjd1uAVxnz3vnzu9IjYzFh6qP1RsFMws5y-fpAq8uHT_nBuYmycqnau1IjYkPjRsnHb3n1mvnHDkQWD4niuVmybqniu1uy3qwD-HQDFKHakHHNn_HR7fQ7uDQ7PcHzkHiR3_RYqNQD7jfzkPiRn_wdKHQDP5HikPfRb_fNc_NbwPQDdRHzkDiNchTvwW5HnvPj0zQWndnHRvnBsdPWb4ri3kPW0kPHmhmLnqPH6LP1ndm1-WPyDvnHKBrAw9nju9PHIhmH9WmH6zrjRhTv7_5iu85HDhTvd15HDhTLTqP1RsFh4ETjYYPW0sPzuVuyYqn1mYnjc8nWbvrjTdQjRvrHb4QWDvnjDdPBuk5yRzPj6sPvRdgvPsTBu_my4bTvP9TARqnam"

4 导入AFN,MJ和SDW框架

#import <AFNetworking/AFNetworking.h>#import <MJExtension/MJExtension.h>#import <UIImageView+WebCache.h>

5 请求数据三大步:

5.1 创建会话管理者

5.2 创建请求参数

5.3 执行请求任务

—–> 5.3.1 字典转模型

—–> 5.3.2 判断请求到的图片宽度为0的可能性

—–> 5.3.3 加载广告图片

—–> 5.3.4 JSON写入plist文件数据(目的:面向模型开发)

代码部分:

#pragma mark - 请求数据- (void)setUpDate{    //创建会话管理者    AFHTTPSessionManager *manager = [AFHTTPSessionManager manager];    //创建请求参数    NSMutableDictionary *parameters = [NSMutableDictionary dictionary];    //包装请求体    parameters[@"code2"] = XFJ_code2;    //执行任务    [manager GET:@"http://mobads.baidu.com/cpro/ui/mads.php" parameters:parameters progress:nil success:^(NSURLSessionDataTask * _Nonnull task, id  _Nullable responseObject) {        //取出plist文件中的ad广告        NSDictionary *dict = [responseObject[@"ad"] firstObject];        //字典转模型(没有模型,需要创建一个模型)        //创建一个模型(字典转模型)        self.item = [XFJADItem mj_objectWithKeyValues:dict];        //判断图片的宽度可能会为0的情况        if (self.item.w == 0) {            return ;        }        //宽度        CGFloat w = XFJ_screenW;        //高度        CGFloat h = XFJ_screenW / self.item.w * self.item.h;        //广告图片的高度        self.imageView2.frame = CGRectMake(0, 0, w, h);        //加载广告的图片(导入框架)        [self.imageView2 sd_setImageWithURL:[NSURL URLWithString:self.item.w_picurl]];        //将返回的响应体信息转为plist文件--->目的是为了面向模型开发        [responseObject writeToFile:@"/Users/xiaofeng/Desktop/BuDeJie/ad.plist" atomically:YES];    } failure:^(NSURLSessionDataTask * _Nullable task, NSError * _Nonnull error) {    }];}

5 问题:服务器返回出来的数据,AFN框架并不能解析,那么我们怎么办呢?

解决:

//直接跳到manager中找到self.responseSerializer = [AFJSONResponseSerializer serializer],然后找到self.acceptableContentTypes = [NSSet setWithObjects:@"application/json", @"text/json", @"text/javascript",@"text/html", nil];将服务器返回的格式加入到AFN框架中

六 模型

1 模型中属性的获取:从接口文档中查找到模型中只需要以下属性

//w_picurl,ori_curl:广告界面跳转地址,w,h

2 模型属性:

/** *  图片 */@property (nonatomic, strong) NSString *w_picurl;/** *  广告的地址 */@property (nonatomic, strong) NSString *ori_curl;/** *  宽度 */@property (nonatomic, assign) CGFloat w;/** *  高度 */@property (nonatomic, assign) CGFloat h;

七 需要用到的定义属性

/** *  启动界面(拖线) */@property (weak, nonatomic) IBOutlet UIImageView *imageView;/** *  占位view(拖线) */@property (weak, nonatomic) IBOutlet UIView *adView;/** *  用来装图片的 */@property (nonatomic, strong) UIImageView *imageView2;/** *  跳转按钮(拖线) */@property (weak, nonatomic) IBOutlet UIButton *jumpBtn;/** *  定时器(用weak的原因是因为,定时器是系统的,系统会自动管理) */@property (nonatomic, weak) NSTimer *timer;/** *  模型 */@property (nonatomic, strong) XFJADItem *item;

八 加载广告图片

1 由于我们发送了请求任务,那么我们需要设置一个属性来作为设置图片显示,这里只需要创建一次,那么我们直接用懒加载.

#pragma mark - 懒加载(因为只需要创建一次)- (UIImageView *)imageView2{    if (_imageView2 == nil) {        //创建图片对象        UIImageView *imageView = [[UIImageView alloc] init];        //赋值        _imageView2 = imageView;        //添加        [self.adView addSubview:imageView];        //设允许与用户交互(设置的原因:因为用户很有可能需要点击图片,然后跳转到safari中)        imageView.userInteractionEnabled = YES;        //创建点按手势        UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tap)];        //给图片添加点按手势        [imageView addGestureRecognizer:tap];    }    return _imageView2;}

九 点击广告跳转到safari

1 实现思路: 直接给图片添加一个点按手势(第八点已经添加了)

2 在点按手势的方法中实现safari的跳转(实现点按手势的方法)

#pragma mark - 实现点按手势的方法- (void)tap{    //跳转到广告界面(通过单例,拿到应用程序)    UIApplication *app = [UIApplication sharedApplication];    //判断该地址是否可以跳转    if ([app canOpenURL:[NSURL URLWithString:self.item.ori_curl]]) {        //如果满足条件,那么就跳转        [app openURL:[NSURL URLWithString:self.item.ori_curl]];    }}

十 广告界面倒计时

1 实现思路:添加定时器

2 移除定时器

3 添加定时器(直接在viewDidLoad中创建定时器)

//创建定时器    self.timer = [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(timeChange) userInfo:nil repeats:YES];

4 通过拖线的方式,我们能监听跳过按钮

注意: 跳转完记得销毁定时器

- (IBAction)jumpBtnClick{    //点击跳转按钮,将控制器的根控制器设置为XFJTabBarController    [UIApplication sharedApplication].keyWindow.rootViewController = [[XFJTabBarController alloc] init];    //因为用户直接点击了跳转按钮,那么就直接将定时器销毁    [self.timer invalidate];}

5 实现定时器中的方法

—–> 1 判断:定时完成,直接跳转到主框架

—–> 2 设置跳转按钮中文字的倒计时

#pragma mark - 实现定时器中的方法- (void)timeChange{    //判断    static int i = 3;    if (i <= 0) {        //等于0的时候直接调用设置根控制器的方法        [self jumpBtnClick];    }    i --;    //设置倒计时的字样    NSString *str = [NSString stringWithFormat:@"跳转 (%d)",i];    //将设置好的字样添加到按钮中    [self.jumpBtn setTitle:str forState:UIControlStateNormal];}

十一 问题

1 计时完成,跳转主窗口,为什么不用modal或者push?

解答:modal是从底部直接推出;push是从旁边直接推出,都不符合条件,所以直接用修改根控制器的方式

2 怎么调整广告按钮倒计时的样式,不让它一闪一闪的?

解答:直接修改storyboard中的按钮演示为constam,默认是system

3 加载广告的时候回出现不完整的图片

解答:这是正常现象,由于图片没有拉伸,这样会使得加载出来的图片底部出现不完整的部分.

十二 总结

—–> 今天为大家总结的是app中加载广告的部分,其中业务逻辑还是不难,希望我写的一些东西能为大家解答疑惑,有什么问题哪里不是很懂的可以私信我.如果你看后觉得还满意,那么希望你关注我的官方博客,谢谢!!!!