APP启动图

作者: healthbird | 来源:发表于2017-07-05 17:59 被阅读619次
    image.png

    什么是启动页?

    在iOS的规范中,启动页的英文叫Launch Screen,指的是启动APP时呈现的第一个界面。其实这种描述不够严谨,从启动APP到APP首页的出现之前的页面,都可以称为启动页(新手引导页除外)。由于APP启动的过程很短,从几百毫秒到几秒不等,所以启动页也被称为闪屏。我推荐一篇启动页介绍文章,感兴趣的可以去看看。

    怎么实现?

    苹果提供的实现方式很简单,如下:

    image.png
    1.选中工程中Assets.xcassets --> App Icons & Launch Image --> New iOS Launch Image,创建启动图存放容器LaunchImage。
    2.选择需要适配启动图的手机屏幕类型

    勾选你是否要对ipad,横屏,竖屏,以及低版本的系统做支持.这边我选了iPhone4屏幕以上所有机型的竖屏适配。

    3.拖入相应大小尺寸的图片
    尺寸 像素
    1X 320*480
    2X 640*960
    Retian 4 640*1136
    Retian HD 4.7 750*1334
    Retian HD 5.5 1242*2208
    4.设置Launch Images Srouce 为LaunchImage,把这个Launch SrceenFile设置为空
    image.png
    5.设置LaunchScreen.storyboard的属性Use as Launch Screen为未选中
    image.png
    6.重新运行程序即可(如果之前手机上已有该APP,删除重新刷包)

    广告展示类启动图的实现方式

    image.png

    实现原理:在应用启动的时候,它会先执行AppDelegate.m中的
    <code>- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions</code>
    方法,这个方法执行完之后,才会进入视图。所以,我们只需在进入视图之前呈现相关的动画就OK了。

    1.先获取到APP的启动图,用来延长展示时间
        // 获取APP各种详细信息
        NSDictionary *infoDic = [[NSBundle mainBundle] infoDictionary];
        // 获取APP中保存的LaunchImages
        NSArray *lanuchImages = [infoDic valueForKeyPath:@"UILaunchImages"];
        NSString *imageName = nil;
        // 根据手机屏幕尺寸来找到适合的启动图片
        for (NSDictionary *dic in lanuchImages) {
            CGSize size = CGSizeFromString([dic objectForKey:@"UILaunchImageSize"]);
            if (CGSizeEqualToSize(size, [UIScreen mainScreen].bounds.size)) {
                imageName = [dic objectForKey:@"UILaunchImageName"];
            }
        }
    
    2.在APP的Window上添加启动图容器LaunchImageView
        UIImageView *LaunchImageView = [[UIImageView alloc]initWithFrame:[UIScreen mainScreen].bounds];
        LaunchImageView.image = [UIImage imageNamed:imageName];
        LaunchImageView.userInteractionEnabled = YES;
        [self.window addSubview:LaunchImageView];
        _LaunchImageView = LaunchImageView;
    
    3.LaunchImageView添加广告图和跳过按钮
        // 广告图
        UIImageView *adImageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 30, [UIScreen mainScreen].bounds.size.width, 150)];
        adImageView.image = [UIImage imageNamed:@"12.png"];
        adImageView.userInteractionEnabled = YES;
        [LaunchImageView addSubview:adImageView];
        // 跳过按钮
        UIButton *skipBtn = [UIButton buttonWithType:UIButtonTypeCustom];
        skipBtn.frame = CGRectMake([UIScreen mainScreen].bounds.size.width - 120, 20, 80, 30);
        skipBtn.backgroundColor = [UIColor blackColor];
        [skipBtn setTitle:@"跳过 5" forState:UIControlStateNormal];
        [skipBtn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
        [skipBtn addTarget:self action:@selector(buttonClick) forControlEvents:UIControlEventTouchUpInside];
        [adImageView addSubview:skipBtn];
        _skipBtn = skipBtn;
    
    4.添加计时器(以5s为例)
        _num = 5;
        NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(time:) userInfo:nil repeats:YES];
        _timer = timer;
    
    5.跳过按钮点击事件、定时器方法、启动图移除方法
    - (void)time:(NSTimer*)timer {
        _num--;
        if (_num) {
            [_skipBtn setTitle:[NSString stringWithFormat:@"跳过 %zd",_num] forState:UIControlStateNormal];
        } else {
            [self dismissLaunchImage];
        }
    }
    - (void)buttonClick {
        // 动画结束,移除imageView,呈现主界面
        [self dismissLaunchImage];
    }
    - (void)dismissLaunchImage {
        // 动画结束,移除imageView,呈现主界面
        [_LaunchImageView removeFromSuperview];
        [_timer invalidate];
    }
    
    

    相关文章

      网友评论

        本文标题:APP启动图

        本文链接:https://www.haomeiwen.com/subject/kpyqhxtx.html