前言：

最近學了下UIScrollView的用法，然後自己實現了一個常見的APP首次開啟的引導頁面效果，效果圖如下：



主要就是一個滑動頁面的效果，在最後一頁上有一個立即體驗的按鈕，點選按鈕會跳轉到APP主頁面。
主要用到的就是ScrollView,PageControl這兩種控制元件。

實現思路:

把主頁面的根檢視設定成一個ImageView,用來顯示背景圖片,然後再在背景圖片上面放置一個ScrollView,用來顯示滑動的前景圖片,因為一共有4張圖片,所以向ScrollView中新增4個ImageView，依次放置這4張圖片,最後在最後一個ImageView上放置一個“立即體驗”按鈕。

這些都做完了之後，發現少了一個我們經常會見到的頁面正下方的小圓點，顯示總頁數和當前為第幾頁。這就是PageControl,我們最後在根檢視上建立一個pageControl，顯示頁面滑動到哪一頁了,這裡需要注意的是，PageControl要新增到根檢視上,而不是ScrollView上，因為如果新增到ScrollView要設定相對位置,當頁面滑動時候,顯示的是不同的相對位置裡面的內容,所以如果要每一頁顯示不同的內容,就把父檢視設定為ScrollView，如果是每一頁都要顯示的內容,比如PageControl，就不要設定父檢視為ScrollView,其實想想很簡單,ScrollView是要滑動的嘛。不是固定的。

OK,新增完了所有控制元件之後，就要新增事件響應了,同ActionSheet一樣,ScrollView也無法新增訊息響應,只能設定代理,所以只要實現一個代理方法讓ScrollView頁面翻動時下面的小圓點PageControl也跟著動~~

主要程式碼如下：

我把步驟簡簡單單分為4步~很容易就搞定！

Step1:》》》設定根檢視為一個顯示背景的ImageView:

-(void)loadView{
    [super loadView];
//    要設定背景圖片,建立一個rootImageView作為父檢視
    [self createRootImageView];
}
#pragma mark 建立rootImageView
 

-(void)createRootImageView{
    UIImageView *rootImageView=[[UIImageView alloc] initWithFrame:self.view.bounds];
    [rootImageView setImage:[UIImage imageNamed:@"new_feature_background.png"]];
    [self.view addSubview:rootImageView];
//    因為父檢視是一個imageView,要開啟互動,否則無法做任何操作
//    預設是NO
    [self.view setUserInteractionEnabled:YES];
}

Step2》》》建立顯示滑動頁面的ScrollView和最後一頁的“立即體驗”按鈕，並新增按鈕訊息響應

#pragma mark 建立第二層檢視scrollView
-(void)createScrollView{
    UIScrollView *scrollView=[[UIScrollView alloc]initWithFrame:self.view.bounds];
//    設定scrollView內容大小--可滑動範圍
    [scrollView setContentSize:CGSizeMake(self.view.bounds.size.width*kImageCount, 0)];
//    向其中新增pageImageView
    CGFloat width=self.view.bounds.size.width;
    CGFloat height=self.view.bounds.size.height;
    for (NSInteger i=0; i<kImageCount; i++) {
//        相對於scrollView內容的位置
        UIImageView *pageImageView=[[UIImageView alloc] initWithFrame:CGRectMake(i*width, 0, width, height)];
        [pageImageView setImage:[UIImage imageNamed:[NSString stringWithFormat:@"new_feature_%ld.png",i + 1]]];
        if (i==kImageCount - 1) {
            [self createIntoButton:pageImageView];
        }
        [scrollView addSubview:pageImageView];
    }
//    設定分頁,否則滾動效果很糟糕
    [scrollView setPagingEnabled:YES];
//    去掉彈性
    [scrollView setBounces:NO];
//    去掉滾動條
    [scrollView setShowsHorizontalScrollIndicator:NO];
    [scrollView setShowsVerticalScrollIndicator:NO];
//    scrollView目前為第二層檢視
    [self.view addSubview:scrollView];
}
#pragma mark 建立最後一頁的“立即體驗”按鈕
-(void)createIntoButton:(UIImageView*)pageImageView{
//    開啟父檢視互動
    [pageImageView setUserInteractionEnabled:YES];
    UIButton *intoButton=[[UIButton alloc] init];
//    設定背景圖片
    UIImage *backImage=[UIImage imageNamed:@"new_feature_finish_button.png"];
    UIImage *backImageHL=[UIImage imageNamed:@"new_feature_finish_button_highlighted.png"];
    [intoButton setBackgroundImage:backImage forState:UIControlStateNormal];
    [intoButton setBackgroundImage:backImageHL forState:UIControlStateHighlighted];
//    設定中心點和大小,大小根據背景
    CGFloat centerX=pageImageView.bounds.size.width/2;
    CGFloat centerY=pageImageView.bounds.size.height * kIntoButtonRatio;
    CGFloat width=backImage.size.width;
    CGFloat height=backImage.size.height;
    [intoButton setBounds:CGRectMake(0, 0, width, height)];
    [intoButton setCenter:CGPointMake(centerX, centerY)];
//    訊息響應
    [intoButton addTarget:self action:@selector(intoButtonClick) forControlEvents:UIControlEventTouchUpInside];
//    新增到pageImageView
    [pageImageView addSubview:intoButton];

}
#pragma mark "立即體驗"按鈕訊息響應
-(void)intoButtonClick{
    SubViewController *subView=[[SubViewController alloc] init];
    [self presentViewController:subView animated:YES completion:nil];
}

Step3》》》建立PageControl並新增到父檢視

#pragma mark 建立和scrollView同為第二層檢視的pageControl
-(void)createPageControl{

    _pageControl=[[UIPageControl alloc] init];
//    設定位置
    [_pageControl setCenter:CGPointMake(self.view.bounds.size.width/2, self.view.bounds.size.height * kPageControlRatio)];
    [_pageControl setBounds:CGRectMake(0, 0, 150, 44)];
//    設定頁數
    [_pageControl setNumberOfPages:kImageCount];
//    設定頁面軌道顏色
    [_pageControl setPageIndicatorTintColor:[UIColor grayColor]];
    [_pageControl setCurrentPageIndicatorTintColor:[UIColor orangeColor]];
//    注意，父檢視不是ScrollView!
    [self.view addSubview:_pageControl];
}

Step4: 執行！

Oh,No!發現不論到哪一頁，PageControl那個小圓點都不變化：
什麼原因？因為沒有為ScrollView設定代理，沒有實現代理方法。所以ScrollView變化無法影響到PageControl的變化。
所以現在我們在createScrollView方法裡面加一行程式碼：

//    設定代理,以便於滑動時改變pageControl
    [scrollView setDelegate:self];

然後再實現代理方法：

#pragma mark scrollView的代理方法
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
    NSInteger index=scrollView.contentOffset.x/scrollView.bounds.size.width;
    [_pageControl setCurrentPage:index];
}

一些最後的廢話~：

好啦，到目前為止，我們就學會了如何做一個看起來很diao的APP引導頁面~
原始碼？當然要提供啦！所以我會上傳到csdn上，大家免費下載來學習了~
PS:發現一個很讓我傷心的事情，就是我堅持寫了這麼久的部落格，可是卻沒有人評論。。。。沒有一點關注度。。。但是。。。儘管如此，我還是會堅持寫，練好文筆，相信有一天會成為一個關注度很高的技術部落格！
下一篇的內容是：如何實現一個迴圈顯示的ScrollView,我們會使用一個假迴圈來顯示~
程式碼連結：
http://download.csdn.net/detail/u012320459/9230433