iOS 相冊功能實現：UIScrollView 嵌套實現圖片瀏覽、分頁、縮放與雙擊交互

整體架構設計

採用 雙層 UIScrollView 嵌套 架構：

• 外層 ScrollView：水平分頁滾動，承載多張圖片頁面
• 內層 ScrollView：單張圖片的縮放、平移容器
• UIImageView：實際圖片顯示視圖，作為內層 ScrollView 的縮放視圖

關鍵屬性配置

// 外層：分頁滾動容器
_huaKuang.contentSize = CGSizeMake(kuan * 4, gao);  // 4 頁寬度
_huaKuang.pagingEnabled = YES;                       // 啟用分頁
_huaKuang.showsHorizontalScrollIndicator = NO;       // 隱藏指示器
_huaKuang.showsVerticalScrollIndicator = NO;
_huaKuang.delegate = self;                           // 監聽滾動結束

// 內層：單圖縮放容器
uisv.minimumZoomScale = 0.5;   // 最小縮放 0.5x
uisv.maximumZoomScale = 1.5;   // 最大縮放 1.5x
uisv.delegate = self;          // 實現 viewForZoomingInScrollView
uisv.showsHorizontalScrollIndicator = NO;
uisv.showsVerticalScrollIndicator = NO;

動態建立圖片頁面

- (void)tianJianZiShiTu {
    for (int i = 0; i < 3; i++) {
        // 1. 建立內層 ScrollView (留 20pt 間距)
        UIScrollView *uisv = [[UIScrollView alloc] 
            initWithFrame:CGRectMake((kuan + 20) * i, 0, kuan, gao)];
        [_huaKuang addSubview:uisv];
        
        // 2. 建立 UIImageView 載入圖片
        UIImageView *uiiv = [[UIImageView alloc] 
            initWithFrame:CGRectMake(0, 0, kuan, gao)];
        NSString *imageName = [NSString stringWithFormat:@\"new_feature_%d\", i + 1];
        uiiv.image = [UIImage imageNamed:imageName];
        uiiv.tag = 1000;  // 標記以便查找
        [uisv addSubview:uiiv];
        
        // 3. 添加雙擊手勢
        UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] 
            initWithTarget:self action:@selector(dianJiShiJian:)];
        tap.numberOfTapsRequired = 2;  // 雙擊
        [uisv addGestureRecognizer:tap];
    }
}

核心交互邏輯

雙擊縮放切換

- (void)dianJiShiJian:(UITapGestureRecognizer *)tap {
    UIScrollView *uisv1 = (UIScrollView *)tap.view;
    
    // 已縮放 → 恢復 1.0
    if (uisv1.zoomScale != 1.0) {
        [uisv1 setZoomScale:1.0 animated:YES];
        return;
    }
    
    // 未縮放 → 以點擊點為中心放大
    CGPoint location = [tap locationInView:tap.view];
    CGRect rect = CGRectMake(location.x - 100, location.y - 100, 200, 200);
    [uisv1 zoomToRect:rect animated:YES];
}

指定縮放視圖 (UIScrollViewDelegate)

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
    // 外層不縮放
    if (scrollView == _huaKuang) return nil;
    
    // 內層：返回 tag=1000 的 UIImageView
    return [scrollView viewWithTag:1000];
}

分頁切換時重置縮放狀態

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    if (scrollView == _huaKuang) {
        for (id obj in _huaKuang.subviews) {
            if ([obj isKindOfClass:[UIScrollView class]]) {
                UIScrollView *scaleSC = (UIScrollView *)obj;
                scaleSC.zoomScale = 1.0;  // 重置為原始大小
            }
        }
    }
}

完整類定義

@interface ViewController () 
@property (weak, nonatomic) IBOutlet UIScrollView *huaKuang;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // 尺寸宏定義
    #define kuan [UIScreen mainScreen].bounds.size.width
    #define gao [UIScreen mainScreen].bounds.size.height
    
    // 外層配置...
    [self tianJianZiShiTu];
}

// 上述所有方法...

@end

關鍵技術點總結

常見問題與解決

1. 縮放後頁面切換圖片位置錯亂：在 scrollViewDidEndDecelerating 中統一重置所有內層 zoomScale = 1.0
2. 雙擊手勢與單擊衝突：單擊手勢需 requireGestureRecognizerToFail 雙擊，或使用延遲響應
3. 內存壓力大：大圖建議使用 CATiledLayer 或分塊載入 (如 SDWebImage)
4. 橫豎屏適配：監聽 UIDeviceOrientationDidChangeNotification 重新計算 frame

擴充建議

• 支援網路圖片異步載入 + 佔位圖
• 添加圖片刪除、分享、收藏工具欄
• 實現長按保存、手勢返回上一級
• 使用 UICollectionView 替代外層 ScrollView，支援動態增刪、複用
• 引入 PhotoKit 整合系統相冊資源