IOS项目新手引导页图片适配方案

Posted 2023-05-07

参考技术A 基本上每个ios APP都会有新手引导页面这个功能，常规的就是几张静态图片，可以左右滚动。既然涉及到图片，就肯定会存在适配的问题（为了达到最优的体验效果，一般都会针对不同的分辨率设计不同尺寸的图片），本文主要就是讨论如何适配的问题。

2.1 方案一

根据屏幕分辨率的不同，使用不同的图片。

2.2  方案二

熟悉IOS开发的人都知道，每一个ios项目中，都有一个Assets.xcassets文件夹，用来管理项目中所有的图片（AppIcon、LaunchImage、其他业务图片）。

从上面的截图我们可以看到，xcode提供了两个内置的类型AppIcon、LaunchImage。我们只要提供正确尺寸的图片，ios系统就能在不同分辨率的设备上使用对应的图片而无需我们自己指定；另外就是我们自己创建的（avatar），提供2x、3x这两种类型的图片即可（1x的设备现在基本上找不到了，而且当前的ios系统也不支持1x的设备）。那么问题来了，我们自己创建的图片集合，只有3个类型（1x、2x、3x），并不能按照分辨率来设定。再看一下上面的截图，有一个“show”的图片集合，形式如下：

咦！这个鬼东西是怎么搞出来的？我们先看看Assets.xcassets文件夹在硬盘上的组织形式：

从上图我们可以看到，系统内置的两种类型AppIcon、LaunchImage对于的文件夹为AppIcon.appiconset、LaunchImage.launchimage，我们自己创建的图片集合avatar对应的文件夹为avatar.imageset。讲到这里，你应该大概猜到了show这个图片集合是怎么创建出来了吧？

1、先创建一个LaunchImage类型的图片集合；

2、修改名称（LaunchImage→show）

3、修改文件夹名称(show.launchimage→show.imageset)

回到正题，在show这个图片集合里面，我们就可以轻松的根据分辨率设置2x、3x类型的图片。

现在我们可以按照下图的方式使用新手引导图片了：

亲测：不同分辨率的设备，展示对应的图片。

我们注意到，show.imageset文件夹中有一个文件Contents.json，正是这个文件，ios系统才能根据设备类型展示对应的图片资源。Contents.json文件内容如下：

系统展示图片的时候，会先解析这个文件，然后根据设备的分辨率，找到对应的图片。

iOS引导页动画(封装好)

//直接上代码,在外面只要调用,传入图片数组即可.
//  Created by 刘志武 on 2016/12/3.
//  Copyright ? 2016年 zhiwuLiu. All rights reserved.
//

#import "LaunchView.h"

#define L_Base_Tag  10000
#define L_Rotate_Rate 1
#define L_SCREEN_WIDHT [UIScreen mainScreen].bounds.size.width  //屏幕宽度
#define L_SCREEN_HEIGHT [UIScreen mainScreen].bounds.size.height    //屏幕高

@implementation LaunchView


-(instancetype)initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    
    if (self) {
        
    }
    return self;
}

//重写图片数组的setter方法
-(void)setImagesArray:(NSArray *)imagesArray
{
    _imagesArray = imagesArray;
    
    [self creatSubViews];
}

-(void)creatSubViews
{
    NSArray *imageArr = [NSArray arrayWithArray:_imagesArray];
        
    UIScrollView *mainScrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, L_SCREEN_WIDHT, L_SCREEN_HEIGHT)];
    mainScrollView.pagingEnabled = YES;
    mainScrollView.bounces = NO;
    mainScrollView.contentSize = CGSizeMake(L_SCREEN_WIDHT*imageArr.count, L_SCREEN_HEIGHT);
    mainScrollView.showsHorizontalScrollIndicator = NO;
    mainScrollView.delegate = self;
    [self addSubview:mainScrollView];
    
    //添加云彩图片
    UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 330, L_SCREEN_WIDHT, 170*L_SCREEN_WIDHT/1242.0)];
    imageView.image = [UIImage imageNamed:@"yun.png"];
    [self addSubview:imageView];
    
    
    for (int i=0; i<imageArr.count; i++) {
        UIView *rotateView = [[UIView alloc]initWithFrame:CGRectMake(L_SCREEN_WIDHT*i, 0, L_SCREEN_WIDHT, L_SCREEN_HEIGHT*2)];
        [rotateView setTag:L_Base_Tag+i];
        [mainScrollView addSubview:rotateView];
        if (i!=0) {
            rotateView.alpha = 0;
        }
        
        UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, L_SCREEN_WIDHT, L_SCREEN_HEIGHT)];
        imageView.image = [UIImage imageNamed:imageArr[i]];
        [rotateView addSubview:imageView];
        
        //最后页面添加按钮
        if (i == imageArr.count-1) {
            UIControl *control = [[UIControl alloc]initWithFrame:CGRectMake(0, L_SCREEN_HEIGHT-80, L_SCREEN_WIDHT, 50)];
            control.backgroundColor = [UIColor blackColor];
            [control addTarget:self action:@selector(ClickToRemove) forControlEvents:UIControlEventTouchUpInside];
            [rotateView addSubview:control];
        }
    }
    
    UIView *firstView = [mainScrollView viewWithTag:L_Base_Tag];
    [mainScrollView bringSubviewToFront:firstView];
    

    
}
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
    
    UIView * view1 = [scrollView viewWithTag:L_Base_Tag];
    UIView * view2 = [scrollView viewWithTag:L_Base_Tag+1];
    UIView * view3 = [scrollView viewWithTag:L_Base_Tag+2];
    UIView * view4 = [scrollView viewWithTag:L_Base_Tag+3];
    
    UIImageView * imageView1 = (UIImageView *)[scrollView viewWithTag:L_Base_Tag*2];
    UIImageView * imageView2 = (UIImageView *)[scrollView viewWithTag:L_Base_Tag*2+1];
    UIImageView * imageView3 = (UIImageView *)[scrollView viewWithTag:L_Base_Tag*2+2];
    UIImageView * imageView4 = (UIImageView *)[scrollView viewWithTag:L_Base_Tag*2+3];
    
    CGFloat xOffset = scrollView.contentOffset.x;
    
    //根据偏移量旋转
    CGFloat rotateAngle = -1 * 1.0/L_SCREEN_WIDHT * xOffset * M_PI_2 * L_Rotate_Rate;
    view1.layer.transform = CATransform3DMakeRotation(rotateAngle, 0, 0, 1);
    view2.layer.transform = CATransform3DMakeRotation(M_PI_2*1+rotateAngle, 0, 0, 1);
    view3.layer.transform = CATransform3DMakeRotation(M_PI_2*2+rotateAngle, 0, 0, 1);
    view4.layer.transform = CATransform3DMakeRotation(M_PI_2*3+rotateAngle, 0, 0, 1);
    
    //根据偏移量位移（保证中心点始终都在屏幕下方中间）
    view1.center = CGPointMake(0.5 * L_SCREEN_WIDHT+xOffset, L_SCREEN_HEIGHT);
    view2.center = CGPointMake(0.5 * L_SCREEN_WIDHT+xOffset, L_SCREEN_HEIGHT);
    view3.center = CGPointMake(0.5 * L_SCREEN_WIDHT+xOffset, L_SCREEN_HEIGHT);
    view4.center = CGPointMake(0.5 * L_SCREEN_WIDHT+xOffset, L_SCREEN_HEIGHT);
    
    //当前哪个视图放在最上面
    if (xOffset<L_SCREEN_WIDHT*0.5) {
        [scrollView bringSubviewToFront:view1];
        
    }else if (xOffset>=L_SCREEN_WIDHT*0.5 && xOffset < L_SCREEN_WIDHT*1.5){
        [scrollView bringSubviewToFront:view2];
        
        
    }else if (xOffset >=L_SCREEN_WIDHT*1.5 && xOffset < L_SCREEN_WIDHT*2.5){
        [scrollView bringSubviewToFront:view3];
        
    }else if (xOffset >=L_SCREEN_WIDHT*2.5)
    {
        [scrollView bringSubviewToFront:view4];
        
    }
    
    //调节其透明度
    CGFloat xoffset_More = xOffset*1.5>L_SCREEN_WIDHT?L_SCREEN_WIDHT:xOffset*1.5;
    if (xOffset < L_SCREEN_WIDHT) {
        view1.alpha = (L_SCREEN_WIDHT - xoffset_More)/L_SCREEN_WIDHT;
        imageView1.alpha = (L_SCREEN_WIDHT - xOffset)/L_SCREEN_WIDHT;;
        
    }
    if (xOffset <= L_SCREEN_WIDHT) {
        view2.alpha = xoffset_More / L_SCREEN_WIDHT;
        imageView2.alpha = xOffset / L_SCREEN_WIDHT;
    }
    if (xOffset >L_SCREEN_WIDHT && xOffset <= L_SCREEN_WIDHT*2) {
        view2.alpha = (L_SCREEN_WIDHT*2 - xOffset)/L_SCREEN_WIDHT;
        view3.alpha = (xOffset - L_SCREEN_WIDHT)/ L_SCREEN_WIDHT;
        
        imageView2.alpha = (L_SCREEN_WIDHT*2 - xOffset)/L_SCREEN_WIDHT;
        imageView3.alpha = (xOffset - L_SCREEN_WIDHT)/ L_SCREEN_WIDHT;
    }
    if (xOffset >L_SCREEN_WIDHT*2 ) {
        view3.alpha = (L_SCREEN_WIDHT*3 - xOffset)/L_SCREEN_WIDHT;
        view4.alpha = (xOffset - L_SCREEN_WIDHT*2)/ L_SCREEN_WIDHT;
        
        imageView3.alpha = (L_SCREEN_WIDHT*3 - xOffset)/L_SCREEN_WIDHT;
        imageView4.alpha = (xOffset - L_SCREEN_WIDHT*2)/ L_SCREEN_WIDHT;
    }
    
    //调节背景色
    if (xOffset <L_SCREEN_WIDHT && xOffset>0) {
        self.backgroundColor = [UIColor colorWithRed:(140-40.0/L_SCREEN_WIDHT*xOffset)/255.0 green:(255-25.0/L_SCREEN_WIDHT*xOffset)/255.0 blue:(255-100.0/L_SCREEN_WIDHT*xOffset)/255.0 alpha:1];
        
    }else if (xOffset>=L_SCREEN_WIDHT &&xOffset<L_SCREEN_WIDHT*2){
        
        self.backgroundColor = [UIColor colorWithRed:(100+30.0/L_SCREEN_WIDHT*(xOffset-L_SCREEN_WIDHT))/255.0 green:(230-40.0/L_SCREEN_WIDHT*(xOffset-L_SCREEN_WIDHT))/255.0 blue:(155-5.0/320*(xOffset-L_SCREEN_WIDHT))/255.0 alpha:1];
        
    }else if (xOffset>=L_SCREEN_WIDHT*2 &&xOffset<L_SCREEN_WIDHT*3){
        
        self.backgroundColor = [UIColor colorWithRed:(130-50.0/L_SCREEN_WIDHT*(xOffset-L_SCREEN_WIDHT*2))/255.0 green:(190-40.0/L_SCREEN_WIDHT*(xOffset-L_SCREEN_WIDHT*2))/255.0 blue:(150+50.0/L_SCREEN_WIDHT*(xOffset-L_SCREEN_WIDHT*2))/255.0 alpha:1];
        
    }else if (xOffset>=L_SCREEN_WIDHT*3 &&xOffset<L_SCREEN_WIDHT*4){
        
        self.backgroundColor = [UIColor colorWithRed:(80-10.0/L_SCREEN_WIDHT*(xOffset-L_SCREEN_WIDHT*3))/255.0 green:(150-25.0/L_SCREEN_WIDHT*(xOffset-L_SCREEN_WIDHT*3))/255.0 blue:(200-90.0/L_SCREEN_WIDHT*(xOffset-L_SCREEN_WIDHT*3))/255.0 alpha:1];
    }
    
}

#pragma 按钮的点击方法
-(void)ClickToRemove
{
    NSLog(@"进入主界面");
}

@end