iOS 新手引導頁完整實現：UIScrollView + UIPageControl 實戰教學

iOS 應用新手引導頁設計模式

新手引導頁是 App 首次啟動時的關鍵體驗環節，透過圖片輪播展示核心功能。本文以 Storyboard + 代碼混合方式，實現支援頁面指示器同步的引導頁效果。

核心元件架構

• UIScrollView： 承載多張引導圖片，啟用分頁模式
• UIImageView 陣列： 每張圖片對應一個 ImageView，依序水平排列
• UIPageControl： 顯示當前頁碼與總頁數，支援點擊跳轉

Storyboard 佈局步驟

1. 拖入 UIScrollView 填滿螢幕，設定 Paging Enabled、關閉滾動指示器
2. 在 ScrollView 內依序加入 3 個 UIImageView，Frame 依序為 (0, 0, 424, 736)、(424, 0, 424, 736)、(848, 0, 424, 736)
3. 設定各 ImageView 的 image 屬性為對應引導圖
4. 拖入 UIPageControl 置底，設定 Number of Pages = 3
5. 建立 IBOutlet 連結：sv1 (ScrollView)、pc1 (PageControl)

核心代碼實現

#import "ViewController.h"

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIScrollView *sv1;
@property (weak, nonatomic) IBOutlet UIPageControl *pc1;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 1. 設定 ScrollView 內容總寬度 = 螢幕寬 × 頁數
    self.sv1.contentSize = CGSizeMake(424 * 3, 736);
    self.sv1.pagingEnabled = YES;
    self.sv1.showsHorizontalScrollIndicator = NO;
    self.sv1.showsVerticalScrollIndicator = NO;
    self.sv1.delegate = self;
    
    // 2. PageControl 點擊事件綁定
    [self.pc1 addTarget:self 
                 action:@selector(changeScrollView:) 
       forControlEvents:UIControlEventTouchUpInside];
}

// MARK: - UIScrollViewDelegate
// 滾動停止時更新 PageControl
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    NSInteger page = scrollView.contentOffset.x / 424;
    self.pc1.currentPage = page;
}

// MARK: - PageControl 事件處理
// 點擊 PageControl 時讓 ScrollView 滾動到對應頁面
- (void)changeScrollView:(UIPageControl *)pageControl {
    CGPoint offset = CGPointMake(424 * pageControl.currentPage, 0);
    [self.sv1 setContentOffset:offset animated:YES];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
}

@end

關鍵技術點解析

雙向同步機制

實現 ScrollView 與 PageControl 雙向綁定：

• ScrollView → PageControl： 實作 scrollViewDidEndDecelerating: 代理方法，根據 contentOffset.x 計算當前頁碼
• PageControl → ScrollView： 為 PageControl 添加 UIControlEventTouchUpInside 目標-動作，呼叫 setContentOffset:animated:

分頁滾動關鍵設定

sv1.pagingEnabled = YES;           // 啟用分頁模式
sv1.contentSize = CGSizeMake(w * n, h);  // 內容總寬度 = 頁面寬 × 頁數

分頁模式下，ScrollView 會自動對齊到最近的頁面邊界，配合關閉水平滾動指示器，體驗更純粹。

適配不同螢幕尺寸

實際專案中建議使用螢幕寬度常數而非硬編碼 424：

CGFloat screenW = [UIScreen mainScreen].bounds.size.width;
self.sv1.contentSize = CGSizeMake(screenW * pageCount, screenH);

進階優化建議

• 圖片異步載入： 使用 SDWebImage 或 Kingfisher 避免主執行緒阻塞
• 跳過按鈕： 最後一頁添加「立即體驗」按鈕，儲存 UserDefaults 標記已引導
• 動畫增強： 結合 CATransition 實現頁面切換淡入淡出效果
• 記憶體管理： 僅保留可視頁面前後各一張圖片，其餘釋放

Swift 版本參考

class GuideViewController: UIViewController, UIScrollViewDelegate {
    @IBOutlet weak var scrollView: UIScrollView!
    @IBOutlet weak var pageControl: UIPageControl!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        scrollView.delegate = self
        scrollView.isPagingEnabled = true
        scrollView.showsHorizontalScrollIndicator = false
        scrollView.contentSize = CGSize(width: screenW * 3, height: screenH)
        pageControl.addTarget(self, action: #selector(pageChanged), for: .valueChanged)
    }
    
    func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
        pageControl.currentPage = Int(scrollView.contentOffset.x / screenW)
    }
    
    @objc func pageChanged() {
        scrollView.setContentOffset(CGPoint(x: screenW * CGFloat(pageControl.currentPage), y: 0), animated: true)
    }
}

總結

新手引導頁的核心在於 UIScrollView 分頁滾動與 UIPageControl 狀態同步。掌握代理模式與目標-動作模式的雙向綁定，即可快速構建流暢的引導體驗。實際專案中請注意圖片資源優化與多螢幕適配。