UIScrollView和UIPageControl實現app啟動滑動圖

為了吸引使用者眼球或者傳達更多的資訊，啟動app時，一般都會附上一個滑動圖（只顯示一次），下面為大家詳解。

一、使用NSUserDefaults 判斷滑動圖有沒有出現過，載入滑動圖

NSUserDefaults 簡介：

NSUserDefaults可以將資料永久的儲存在手機中，他是一個單例，用起來很方便，所以很適合用於儲存簡單的資料和為資料做標記。

更多的關於NSUserDefaults的介紹請看：NSUserDefaults 簡介

你可以選擇在AppDelegate.m中的didFinishLaunchingWithOptions 方法或者“初始介面”(載入的第一個viewController)的 viewDidLoad 方法中進行判斷滑動圖是否出現過，寫上程式碼：

NSUserDefaults *userDefaults = [NSUserDefaults standardUserDefaults]; 

//判斷滑動圖是否出現過，第一次呼叫時“isScrollViewAppear” 這個key 對應的值是nil，會進入if中 
    if (![@"YES" isEqualToString:[userDefaults objectForKey:@"isScrollViewAppear"]]) { 

        [self showScrollView];//顯示滑動圖 
    }

二、初始化 UIScrollView 和 UIPageControl 為啟動滑動圖做準備

UIScrollView ： 帶有滑動效果，在上面加入UIImageView再設定代理後，可以實現翻頁顯示圖片的效果

涉及的相關屬性：

contentSize ： UIScrollView 顯示的尺寸，這個按需求而設

pagingEnabled ： 是否支援一頁一頁的翻，設定成YES後，每一次滑動，翻動一頁;

bounces：是否支援反彈，這是一個動畫效果，大家可以設定來看看，一般滑動圖設定為NO;
showsHorizontalScrollIndicator ： 是否顯示水平的滑動條
UIPageControl：一般配合UIScrollView使用，指向UIScrollView當前所指的頁數

涉及的相關屬性：

numberOfPages：一共有幾個點（幾頁），這個要設定得和滑動圖的頁數一樣

相關程式碼：

#pragma mark - 滑動圖 

-(void) showScrollView{ 

    UIScrollView *_scrollView = [[UIScrollView alloc] initWithFrame:[UIScreen mainScreen].bounds]; 

      //設定UIScrollView 的顯示內容的尺寸，有n張圖要顯示，就設定 螢幕寬度*n ，這裡假設要顯示4張圖 
    _scrollView.contentSize = CGSizeMake([UIScreen mainScreen].bounds.size.width * 4, [UIScreen mainScreen].bounds.size.height); 

    _scrollView.tag = 101; 

    //設定翻頁效果，不允許反彈，不顯示水平滑動條，設定代理為自己 
    _scrollView.pagingEnabled = YES; 
    _scrollView.bounces = NO; 
    _scrollView.showsHorizontalScrollIndicator = NO; 
    _scrollView.delegate = self; 

    //在UIScrollView 上加入 UIImageView 
    for (int i = 0 ; i < 4; i ++) { 

        UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake([UIScreen mainScreen].bounds.size.width * i , 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)]; 

        //將要載入的圖片放入imageView 中 
        UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"%d",i+1]]; 
        imageView.image = image; 

        [_scrollView addSubview:imageView]; 
    } 

    //初始化 UIPageControl 和 _scrollView 顯示在 同一個頁面中 
    UIPageControl *pageConteol = [[UIPageControl alloc] initWithFrame:CGRectMake(140, self.view.frame.size.height - 60, 50, 40)]; 
    pageConteol.numberOfPages = 4;//設定pageConteol 的page 和 _scrollView 上的圖片一樣多 
    pageConteol.tag = 201; 

    [self.view addSubview:_scrollView]; 
    [self.view addSubview: pageConteol]; 
}

三、實現UIScrollView的代理方法

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView 介紹：
顧名思義，這是一個滑動後減速結束的方法，這裡進行的是 UIPageControl 和 UIScrollView 的配
套使用、滑動圖消失資訊等：
涉及到的相關屬性：
UIScrollView：
contentOffset : UIScrollView 的偏移量（滑動的位置）
UIPageControl：

currentPage ： UIPageControl 的當前頁

相關程式碼：

#pragma mark - UIScrollViewDelegate 

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{ 

    // 記錄scrollView 的當前位置，因為已經設定了分頁效果，所以：位置/螢幕大小 = 第幾頁 
    int current = scrollView.contentOffset.x/[UIScreen mainScreen].bounds.size.width; 

    //根據scrollView 的位置對page 的當前頁賦值 
    UIPageControl *page = (UIPageControl *)[self.view viewWithTag:201]; 
    page.currentPage = current; 

    //當顯示到最後一頁時，讓滑動圖消失 
    if (page.currentPage == 3) { 

        //呼叫方法，使滑動圖消失 
        [self scrollViewDisappear]; 
    } 
}

四、從螢幕上移除UIScrollView，並儲存資訊

這裡只需要將UIScrollView和UIPageControl 從主螢幕上移除就可以了，別忘了將啟動資訊儲存到 NSUserDefaults 中，當然你可以設定一些動畫效果，或者需要點選才能移除都可以，下面給出的程式碼是一個簡單的動畫效果：

-(void)scrollViewDisappear{ 

    //拿到 view 中的 UIScrollView 和 UIPageControl 
    UIScrollView *scrollView = (UIScrollView *)[self.view viewWithTag:101]; 
    UIPageControl *page = (UIPageControl *)[self.view viewWithTag:201]; 

    //設定滑動圖消失的動畫效果圖 
    [UIView animateWithDuration:3.0f animations:^{ 

        scrollView.center = CGPointMake(self.view.frame.size.width/2, 1.5 * self.view.frame.size.height); 

    } completion:^(BOOL finished) { 

        [scrollView removeFromSuperview]; 
        [page removeFromSuperview]; 
    }]; 

    //將滑動圖啟動過的資訊儲存到 NSUserDefaults 中，使得第二次不執行滑動圖 
    NSUserDefaults *userDefaults = [NSUserDefaults standardUserDefaults]; 
    [userDefaults setObject:@"YES" forKey:@"isScrollViewAppear"]; 
}