[IOS]使用UIScrollView和UIPageControl顯示半透明協助蒙板

最近的一個項目中，要求在已有的介面上加入一個半透明的蒙板，提示使用者介面上每個元素的功能。
而且蒙板不是只有一頁，要求可以左右滑動切換頁面。

簡單的整理一下實現的思路：
1. 既然是要顯示半透明的蒙板圖片，UIImageView肯定是少不了了。
2. 要多頁顯示且能左右滑動，把UIImageView嵌入到UIScrollView中，並將UIScrollView的pagingEnabled屬性設為YES，即可實現整頁的滑動。
3. 按當下流行的設計方案，圖片滑動時，用點來表示當前頁和總頁數，這個就要用到UIPageControl控制項了。
4. 這些用於顯示協助的元素不應擾亂xib介面檔案對頁面的定義，所以使用動態載入的方式添加到頁面上。

下面結合代碼來講解一下實現的方法：

在標頭檔中，添加UIScrollView和UIPageControl類型的成員變數，並實現UIScrollViewDelegate。

@interface ViewController : UIViewController<UIScrollViewDelegate>
{
    UIScrollView* helpScrView;
    UIPageControl* pageCtrl;
}

在.m檔案中，首先實現viewDidLoad函數，該函數在介面即將顯示前被調用。

- (void)viewDidLoad
{
    [super viewDidLoad];
    CGRect bounds = self.view.frame;  //擷取介面地區

//載入蒙板圖片，限於篇幅，這裡僅顯示一張圖片的載入方法
    UIImageView* imageView1 = [[[UIImageView alloc] initWithFrame:CGRectMake(bounds.origin.x, bounds.origin.y, bounds.size.width, bounds.size.height)] autorelease];  //建立UIImageView，位置大小與主介面一樣。
    [imageView1 setImage:[UIImage imageNamed:@"help01.png"]];  //載入圖片help01.png到imageView1中。
    imageView1.alpha = 0.5f;  //將透明度設為50%。

//繼續載入圖片
//。。。。

//建立UIScrollView
    helpScrView = [[UIScrollView alloc] initWithFrame:CGRectMake(bounds.origin.x, bounds.origin.y, bounds.size.width, bounds.size.height)];  //建立UIScrollView，位置大小與主介面一樣。
    [helpScrView setContentSize:CGSizeMake(bounds.size.width * 3, bounds.size.height)];  //設定全部內容的尺寸，這裡協助圖片是3張，所以寬度設為介面寬度*3，高度和介面一致。
    helpScrView.pagingEnabled = YES;  　　　　//設為YES時，會按頁滑動
    helpScrView.bounces = NO;  　　　　　　　　//取消UIScrollView的彈性屬性，這個可以按個人喜好來定
    [helpScrView setDelegate:self];  　　　　 //UIScrollView的delegate函數在本類中定義
    helpScrView.showsHorizontalScrollIndicator = NO;  //因為我們使用UIPageControl表示頁面進度，所以取消UIScrollView自己的進度條。
    [helpScrView addSubview:imageView1];  　 //將UIImageView添加到UIScrollView中。
    [self.view addSubView:helpScrView];  　　//將UIScrollView添加到主介面上。

//建立UIPageControl
    pageCtrl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, bounds.size.height - 30, bounds.size.width, 30)];  //建立UIPageControl，位置在螢幕最下方。
    pageCtrl.numberOfPages = 3; 　　 　//總的圖片頁數
    pageCtrl.currentPage = 0;    　　  //當前頁
    [pageCtrl addTarget:self action:@selector(pageTurn:) forControlEvents:UIControlEventValueChanged];  //使用者點擊UIPageControl的響應函數
    [self.view addSubview:pageCtrl];  //將UIPageControl添加到主介面上。
}

其次是UIScrollViewDelegate的scrollViewDidEndDecelerating函數，使用者滑動頁面停下後調用該函數。

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
//更新UIPageControl的當前頁
    CGPoint offset = scrollView.contentOffset;
    CGRect bounds = scrollView.frame;
    [pageCtrl setCurrentPage:offset.x / bounds.size.width];
}

然後是點擊UIPageControl時的響應函數pageTurn

- (void)pageTurn:(UIPageControl*)sender
{
//令UIScrollView做出相應的滑動顯示
    CGSize viewSize = helpScrView.frame.size;
    CGRect rect = CGRectMake(sender.currentPage * viewSize.width, 0, viewSize.width, viewSize.height);
    [helpScrView scrollRectToVisible:rect animated:YES];
}

最後別忘了在viewDidUnload中釋放UIScrollView和UIPageControl對象。

結束前還要提一句，這裡沒有加入協助頁面的關閉功能和再次顯示功能，這部分屬於更細節的實現了，實現起來難度也不大，這裡不再贅述。