iOS 開發教學 - 使用 UIScrollView 筆記

在網路上打滾多時，後來才發現其實 Apple Dev Center 上的範例就很好用了！真搞不懂我在亂花時間做什麼

• UIScrollView Class Reference


• 範例程式 - Scrolling


• 範例程式 - andreyvit's ScrollingMadness

建議先下載範例程式跑一下，看看這個東西的功能是不是你想要的，以下是一些筆記

1. 將圖片做適當的縮放並擺在 UIScrollView 來呈現，並且可以放大縮小，此範例僅寫在 YourAppDelegate 中，以及讓 YourAppDelegate 要去回應 UIScrollViewDelegate 和新增一個函數 viewForZoomingInScrollView，並且請準備一張圖擺到 Resources 中（此例是 Googlelogo.png）：
   
   @interface YourAppDelegate : NSObject <UIApplicationDelegate, UIScrollViewDelegate> {
       UIWindow *window;
       UIImageView *imageView ;
   }
   @property (nonatomic, retain) IBOutlet UIWindow *window;
   @end
   
   @implementation YourAppDelegate
   @synthesize window;
   
   - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {  
       //UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Googlelogo.png"]];
   
       imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Googlelogo.png"]];
       UIScrollView *scrollView = [[UIScrollView alloc] init];
       [scrollView setFrame:[window frame]];
       [scrollView addSubview:imageView];
       [window addSubview:scrollView];
       //[imageView release];
       [scrollView release];
   
       CGFloat widthRatio = [scrollView frame].size.width / [imageView frame].size.width;
       CGFloat heightRatio = [scrollView frame].size.height / [imageView frame].size.height;
       CGFloat initialZoom = (widthRatio > heightRatio) ? heightRatio : widthRatio;
     
       [scrollView setZoomScale:initialZoom];
       [scrollView setMinimumZoomScale:initialZoom];
       [scrollView setMaximumZoomScale:2.0];
   
       CGSize imageViewAdjustSize = CGSizeMake([imageView frame].size.width * initialZoom, [imageView frame].size.height * initialZoom);
       [scrollView setContentSize:imageViewAdjustSize];
     
       [imageView setFrame:CGRectMake(0, 0, imageViewAdjustSize.width, imageViewAdjustSize.height)];
       [imageView setCenter:[scrollView  center]];
      
       [scrollView setDelegate:self];
   
       // Override point for customization after application launch
       [window makeKeyAndVisible];
       return YES;
   }
   
   - (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
   {
       return imageView;
   }
   
   - (void)dealloc {
       [imageView release];
       [window release];
       [super dealloc];
   }
   @end
   
   


2. 在某些情境下，希望使用 UIScrollView 來提供 Paging 的效果，例如翻頁的效果，其觀念就是把 UIScrollView 的 Content Width 設成你要的 Page * Width 的寬度，接著設定一開始執行時要停在哪個 Page ，最後則是每一頁的內容要擺什麼，以下是修改 (1) 的程式碼，以 3 Page 為例，並把 UIScrollView 起始擺在第 2 頁，而真正的呈現的圖片擺在第 3 頁，所以執行的效果是，一開始畫面是空白的，但可以往右移過去，及翻到第 3 頁並看到圖片，接著往左可以移兩頁，但因為沒有設定內容，所以看到的都是空白的：
   
   - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {  
   
       //UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Googlelogo.png"]];
       imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Googlelogo.png"]];
       UIScrollView *scrollView = [[UIScrollView alloc] init];
       [scrollView setFrame:[window frame]];
       [scrollView addSubview:imageView];
       [scrollView setDelegate:self];
       [window addSubview:scrollView];
       //[imageView release];
       [scrollView release];
     
       CGFloat widthRatio = [scrollView frame].size.width / [imageView frame].size.width;
       CGFloat heightRatio = [scrollView frame].size.height / [imageView frame].size.height;
       CGFloat initialZoom = (widthRatio > heightRatio) ? heightRatio : widthRatio;
     
       [scrollView setZoomScale:initialZoom];
       [scrollView setMinimumZoomScale:initialZoom];
       [scrollView setMaximumZoomScale:2.0];
     
       [imageView setFrame:CGRectMake(0, 0, [imageView frame].size.width * initialZoom, [imageView frame].size.height * initialZoom)];
     
       int TotalPageCount = 3;
       int MainImagePageOffset = 2;
       int CureentPageOffset = 1;
   
       // content width of scrollView = TotalPageCount * width of scrollView => paging
       CGSize imageViewAdjustSize = CGSizeMake( [scrollView frame].size.width * TotalPageCount, [scrollView frame].size.height );
       [scrollView setContentSize:imageViewAdjustSize];
     
       CGPoint imageOffsetOnScrollViewContent = [scrollView center];
       imageOffsetOnScrollViewContent.x += [imageView frame].size.width * MainImagePageOffset;
       [imageView setCenter:imageOffsetOnScrollViewContent];
     
       [scrollView setContentOffset:CGPointMake( [imageView frame].size.width * CureentPageOffset, 0 )];
       [scrollView setPagingEnabled:YES];
   
       // Override point for customization after application launch
       [window makeKeyAndVisible];
     
       return YES;
   }