iOS引导页

一般手机app第一次安装或者更新都会有介绍产品的引导页面。引导页面一般由3或4张图片以及一个按钮组成。下面介绍一下iOS手机app的引导页的设计。

新建一个视图控制器FirstLauchController；并声明委托

    @interface FirstLauchViewController ()这里写代码片<UIScrollViewDelegate>

主要包括下面四个控件：

@property (nonatomic,strong)UIScrollView *lbScrollView;//显示引导页
@property (nonatomic,strong)UIImageView *lbImageView;//图片view
@property (nonatomic,strong)UIPageControl *lbPageControl;//显示当前处于第几个引导页，小圆点
@property (nonatomic,strong)UIButton *useButton;//进入应用的按钮

一个存储图片数组

@property (nonatomic,copy)NSMutableArray *palyImageArray;//要现实引导页的图片数组

初始化这些控件和存储数据

-(UIScrollView *)lbScrollView{
    if (_lbScrollView == nil) {
        _lbScrollView = [[UIScrollView alloc] initWithFrame:self.view.frame];
        _lbScrollView.bounces = NO;//设置scrollView禁止回弹
        _lbScrollView.contentSize = CGSizeMake((int)self.palyImageArray.count * SCREEN_WIDTH, 0);
        _lbScrollView.pagingEnabled = YES;
        _lbScrollView.showsHorizontalScrollIndicator = NO;
        _lbScrollView.showsVerticalScrollIndicator = NO;
        _lbScrollView.delegate = self;
    }
    return _lbScrollView;
}

//小圆点
-(UIPageControl *)lbPageControl{
    if (_lbPageControl == nil) {    
        _lbPageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(SCREEN_WIDTH/2-50, SCREEN_HEIGHT-100, 100, 10)];
        _lbPageControl.numberOfPages = self.palyImageArray.count;
    }
    return _lbPageControl;    
}

//进入应用按钮初始化
-(UIButton *)useButton{
    if (_useButton == nil) {        
        _useButton = [[UIButton alloc] initWithFrame:CGRectMake(SCREEN_WIDTH * (self.palyImageArray.count - 1) + (SCREEN_WIDTH/2 - 78), SCREEN_HEIGHT - 80, 168, 62)];
        [_useButton setTitle:@"进入应用" forState:UIControlStateNormal];
        [_useButton setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
        _useButton.backgroundColor = [UIColor clearColor];
        _useButton.tag = 1;
        [_useButton addTarget:self action:@selector(goToApplication:) forControlEvents:UIControlEventTouchUpInside];       
    }
    return _useButton;  
}

//数组
-(NSMutableArray *)palyImageArray{
    if (_palyImageArray == nil) {        
        _palyImageArray = [NSMutableArray new];
        _palyImageArray = [NSMutableArray arrayWithObjects:@"welCome1.jpg",@"welCome2.jpg",@"welCome3.jpg",@"welCome4.jpg", nil];        
    }   
    return _palyImageArray;
}

实现

- (void)viewDidLoad {
    [super viewDidLoad];
    [self.view addSubview:self.lbScrollView];//将滚动视图控件加到view    
    for (int i = 0; i < self.palyImageArray.count; i++) {        
        self.lbImageView = [[UIImageView alloc] init];//初始化        
        CGFloat imageX = i * SCREEN_WIDTH;
        CGFloat imageY = 0;        
        self.lbImageView.frame = CGRectMake(imageX, imageY, SCREEN_WIDTH, SCREEN_HEIGHT);//设置位置        
        [self.lbImageView setImage:[UIImage imageNamed:[NSString stringWithFormat:@"%@",self.palyImageArray[i]]]];        
        [self.lbScrollView addSubview:self.lbImageView];//在滚动视图控件中添加图片视图        
    }    
    [self.view addSubview:self.lbPageControl];//添加小圆点控件到view    
    [self.lbScrollView addSubview:self.useButton];//在滚动视图中添加进入应用按钮    
}

#pragma mark lbScrollView Delegate
//滑动时，根据滑动的角度确定滑动到哪个页面
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
    CGPoint offSet = scrollView.contentOffset;    
    CGFloat offSetX = offSet.x;    
    int pageNumber = (offSetX + 0.5*scrollView.frame.size.width)/scrollView.frame.size.width;    
    self.lbPageControl.currentPage = pageNumber;//设置当前页面，小圆点变颜色
}

#pragma mark useButton Event Action
//进入应用事件
-(void)goToApplication:(UIButton *)sender{
    LBTabBarViewController *tabBarVC = [[LBTabBarViewController alloc] init];    
    tabBarVC.view.transform = CGAffineTransformMakeScale(0.2, 0.2);    
    [UIView animateWithDuration:0.2 animations:^{        
        tabBarVC.view.transform = CGAffineTransformIdentity;        
    }];    
    self.view.window.rootViewController = tabBarVC;    
    [self.view.window makeKeyAndVisible];
}

使用

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    // Override point for customization after application launch.
    if(![[NSUserDefaults standardUserDefaults] boolForKey:IsFirstLauch]) {   
        [[NSUserDefaults standardUserDefaults] setBool:YES forKey:IsFirstLauch];
        FirstLauchViewController *vc = [[FirstLauchViewController alloc] init];
        self.window.rootViewController = vc;        
    }else {
        LBWelComeViewController *welcomeVC = [[LBWelComeViewController alloc] init];    
        self.window.rootViewController = welcomeVC;
    }
    return YES;
}

demo引导页