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引导页