Scroll View

(Updated: )

當iPhone的畫面要塞進很多內容時，可以利用Scroll View來捲動畫面瀏覽頁面，例如當畫面需要呈現很多張圖片的時候，一個View只能呈現一張UIImage，因此可以利用Scroll View來呈現。

最後的結果如下圖：(將圖片向右排列，手指將畫面往左拖曳，即可看到其他的圖片)。

**Step 1.**建立Single View專案，專案命名為Scroll View。

**Step 2.**編輯MainStoryboard.storyboard。

加入一個Scroll View到View中。

**Step 3.**編輯ViewController.h。

  1. 加入UIScrollViewDelegate的協定。
  2. 定義一個UIScrollView的變數scrollView_。
1
2
3
4
5
6
@interface ViewController : UIViewController<UIScrollViewDelegate>
{
    UIScrollView *scrollView_;
}
@property(strong, nonatomic) IBOutlet UIScrollView *scrollView;
@end

**Step 4.**編輯ViewController.m。

  1. 首先要在專案內加入幾張圖片檔案。
  2. 第6行，定義一個NSMutableArray的陣列變數photoName記錄圖片的檔案名稱。
  3. 第7行，再定義一個NSMutableArray的陣列變數photos，一個一個使用objectAtIndex定義UIImage。
  4. 第14行，i變數用調整UIImage View的寬度。
  5. 第15行，使用for迴圈，一個一個定義UIImage。
  6. 第16行，使用UIImageView來放置要顯示的圖片UIImage。
  7. 第17行，定義UIImageView的模式為UIViewContentModeScaleToFill自動縮放填滿畫面。
  8. 第18行，定義clipsToBounds，當值為YES時，畫面會自動切除影像超出Bounds的部份
  9. 第20行，使用CGRectMake定義UIImageView的(x座標, y座標, 寬, 高)。
  10. 第22行，將imageView加入scrollView。
  11. 第25行，定義scrollView的頁面大小CGSizeMake(寬, 高)。
  12. 第26行，定義scrollView_的delegate為self。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
@synthesize scrollView = scrollView_;
- (void)viewDidLoad
{
    [super viewDidLoad];
    
    NSMutableArray *photoName = [NSMutableArray arrayWithObjects:@"a2.jpg", @"a3.jpg", @"a4.jpg", @"a5.jpg", nil];
    NSMutableArray *photos = [NSMutableArray arrayWithObjects:
                                [UIImage imageNamed:[photoName objectAtIndex:0]],
                                [UIImage imageNamed:[photoName objectAtIndex:1]],
                                [UIImage imageNamed:[photoName objectAtIndex:2]],
                                [UIImage imageNamed:[photoName objectAtIndex:3]],
                                nil];
    
    int i = 0;
    for(UIImage *image in photos) {
        UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
        imageView.contentMode = UIViewContentModeScaleToFill;
        imageView.clipsToBounds = YES;
        
        imageView.frame = CGRectMake(320*i++,0 ,320, 460);
        
        [self.scrollView addSubview:imageView];
    }
    
    self.scrollView.contentSize = CGSizeMake(320*i, 460);
    scrollView_.delegate = self;
}

**Step 5.**建立關連