iOS引導頁實現（一）

標籤：launchscreen   ios   uiscrollview   引導頁   導航   

目前多數app在啟動時會有引導頁，今天給大家介紹一種比較直觀，能夠快速實現的引導頁實現方法

最終效果就是有一個全屏的引導頁，頁面底部有UIPageControl 用來指示當前引導頁為第幾個頁面

其中主要使用兩個UI控制項

    UIPageControl *pageControl; //指示當前處於第幾個引導頁    UIScrollView *scrollView; //用於存放並顯示引導頁

首先，擷取螢幕尺寸

//擷取螢幕 寬度、高度#define SCREEN_FRAME ([UIScreen mainScreen].bounds)#define SCREEN_WIDTH ([UIScreen mainScreen].bounds.size.width)#define SCREEN_HEIGHT ([UIScreen mainScreen].bounds.size.height)

初始化UI控制項

    //初始化UI控制項    scrollView=[[UIScrollView alloc]initWithFrame:SCREEN_FRAME];    scrollView.pagingEnabled=YES;    [self.view addSubview:scrollView];            pageControl=[[UIPageControl alloc]initWithFrame:CGRectMake(0, SCREEN_HEIGHT-50, SCREEN_WIDTH, 10)];    pageControl.currentPageIndicatorTintColor=[UIColor colorWithRed:0.153 green:0.533 blue:0.796 alpha:1.0];    [self.view addSubview:pageControl];    pageControl.numberOfPages=3;

我們按照三個引導頁來做，如果需要4個5個頁面 可以修改pageControl.numberofPages;

建立三個UIImageView 並且初始化

<p style="margin-top: 0px; margin-bottom: 0px; font-size: 15px; font-family: Menlo;">    <span style="font-size: 11px; color: rgb(112, 61, 170);">UIImageView</span> *imageViewOne;</p><p style="margin-top: 0px; margin-bottom: 0px; font-size: 15px; font-family: Menlo;">    <span style="font-size: 11px; color: rgb(112, 61, 170);">UIImageView</span> *imageViewTwo;</p><p style="margin-top: 0px; margin-bottom: 0px; font-size: 15px; font-family: Menlo;">    <span style="font-size: 11px; color: rgb(112, 61, 170);">UIImageView</span> *imageViewThree;</p>

初始化第一個UIImageView

-(void)createViewOne{        UIView *view = [[UIView alloc] initWithFrame:SCREEN_FRAME];        imageViewOne = [[UIImageView alloc] initWithFrame:SCREEN_FRAME];    imageViewOne.contentMode = UIViewContentModeScaleAspectFit;    imageViewOne.image = [UIImage imageNamed:@"HelpFrist"];    [view addSubview:imageViewOne];            [scrollView addSubview:view];    }

其他兩個類似方式實現

目前是效果出來了，但是引導頁之間的相互切換還沒有出來

下來需要給圖片添加動作，當點擊第一張圖片的時候切換到第個引導頁，點擊第二個引導頁切換到第三個引導頁。

此處需要使用到給圖片添加動作，可參考

http://blog.csdn.net/lwjok2007/article/details/46388935

還是一第一個圖片為例，給上邊的createViewOne方法再添加一段代碼

-(void)createViewOne{        UIView *view = [[UIView alloc] initWithFrame:SCREEN_FRAME];        imageViewOne = [[UIImageView alloc] initWithFrame:SCREEN_FRAME];    imageViewOne.contentMode = UIViewContentModeScaleAspectFit;    imageViewOne.image = [UIImage imageNamed:@"HelpFrist"];    [view addSubview:imageViewOne];            UITapGestureRecognizer *singleTap1 = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(buttonpress1:)];    imageViewOne.userInteractionEnabled = YES;    [imageViewOne addGestureRecognizer:singleTap1];            [scrollView addSubview:view];    }

同時實現方法

buttonpress1

#pragma mark -- tap image-(void)buttonpress1:(id)sender{    CGFloat pageWidth = CGRectGetWidth(self.view.bounds);    CGPoint scrollPoint = CGPointMake(pageWidth, 0);    [scrollView setContentOffset:scrollPoint animated:YES];        pageControl.currentPage = 1;    }

其他兩個仿照次方法即可

最終效果

原始碼

#import "ViewController.h"//擷取螢幕 寬度、高度#define SCREEN_FRAME ([UIScreen mainScreen].bounds)#define SCREEN_WIDTH ([UIScreen mainScreen].bounds.size.width)#define SCREEN_HEIGHT ([UIScreen mainScreen].bounds.size.height)/**  UIPageControl類提供一行點來指示當前顯示的是多整頁模式的哪一頁。當然，由於UIPageControl類可視樣式的點擊不太好操作，所以最好是確保再添加了可選擇的導航選項，以便讓頁面控制項看起來更像一個指標，而不是一個控制項。當使用者介面需要按頁面進行顯示時，使用UIPageControl控制項將要顯示的使用者介面內容分頁進行顯示會使編程工作變得快捷。  **/@interface ViewController (){    UIPageControl *pageControl; //指示當前處於第幾個引導頁    UIScrollView *scrollView; //用於存放並顯示引導頁    UIImageView *imageViewOne;    UIImageView *imageViewTwo;    UIImageView *imageViewThree;    }@end@implementation ViewController- (void)viewDidLoad {    [super viewDidLoad];    // Do any additional setup after loading the view, typically from a nib.        //初始化UI控制項    scrollView=[[UIScrollView alloc]initWithFrame:SCREEN_FRAME];    scrollView.pagingEnabled=YES;    [self.view addSubview:scrollView];            pageControl=[[UIPageControl alloc]initWithFrame:CGRectMake(0, SCREEN_HEIGHT-50, SCREEN_WIDTH, 10)];    pageControl.currentPageIndicatorTintColor=[UIColor colorWithRed:0.153 green:0.533 blue:0.796 alpha:1.0];    [self.view addSubview:pageControl];    pageControl.numberOfPages=3;        [self createViewOne];    [self createViewTwo];    [self createViewThree];        }-(void)createViewOne{        UIView *view = [[UIView alloc] initWithFrame:SCREEN_FRAME];        imageViewOne = [[UIImageView alloc] initWithFrame:SCREEN_FRAME];    imageViewOne.contentMode = UIViewContentModeScaleAspectFit;    imageViewOne.image = [UIImage imageNamed:@"HelpFrist"];    [view addSubview:imageViewOne];            UITapGestureRecognizer *singleTap1 = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(buttonpress1:)];    imageViewOne.userInteractionEnabled = YES;    [imageViewOne addGestureRecognizer:singleTap1];            [scrollView addSubview:view];    }-(void)createViewTwo{            UIView *view = [[UIView alloc] initWithFrame:CGRectMake(SCREEN_WIDTH, 0, SCREEN_WIDTH, SCREEN_HEIGHT)];    imageViewTwo = [[UIImageView alloc] initWithFrame:SCREEN_FRAME];    imageViewTwo.contentMode = UIViewContentModeScaleAspectFit;    imageViewTwo.image = [UIImage imageNamed:@"HelpSecond"];    [view addSubview:imageViewTwo];        UITapGestureRecognizer *singleTap1 = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(buttonpress2:)];    imageViewTwo.userInteractionEnabled = YES;    [imageViewTwo addGestureRecognizer:singleTap1];        [scrollView addSubview:view];    }-(void)createViewThree{            UIView *view = [[UIView alloc] initWithFrame:CGRectMake(SCREEN_WIDTH*2, 0, SCREEN_WIDTH, SCREEN_HEIGHT)];        imageViewThree = [[UIImageView alloc] initWithFrame:SCREEN_FRAME];    imageViewThree.contentMode = UIViewContentModeScaleAspectFit;    imageViewThree.image = [UIImage imageNamed:@"HelpThree"];    [view addSubview:imageViewThree];        UITapGestureRecognizer *singleTap1 = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(buttonpress3:)];    imageViewThree.userInteractionEnabled = YES;    [imageViewThree addGestureRecognizer:singleTap1];        [scrollView addSubview:view];}#pragma mark -- tap image-(void)buttonpress1:(id)sender{    CGFloat pageWidth = CGRectGetWidth(self.view.bounds);    CGPoint scrollPoint = CGPointMake(pageWidth, 0);    [scrollView setContentOffset:scrollPoint animated:YES];        pageControl.currentPage = 1;    }-(void)buttonpress2:(id)sender{    CGFloat pageWidth = CGRectGetWidth(self.view.bounds);    CGPoint scrollPoint = CGPointMake(pageWidth*2, 0);    [scrollView setContentOffset:scrollPoint animated:YES];        pageControl.currentPage = 2;    }-(void)buttonpress3:(id)sender{    NSLog(@"引導頁完成");    }- (void)didReceiveMemoryWarning {    [super didReceiveMemoryWarning];    // Dispose of any resources that can be recreated.}@end

為方便共用原始碼 交流學習

蘋果開發群 ：414319235  歡迎加入

iOS引導頁實現（一）