scrollView（3）－相冊瀏覽簡單的縮放

上兩次談及scrollView的使用，在相冊使用中是最廣泛的。每一個相機圖片都是如此。接下來只把代碼奉上，讀者能夠自行揣摩。

首先建立一個PhotoScrollView類，繼承於UIScrollView，總不能都在viewController裏面寫。既然是相冊，那坑定都是圖片之類的（視頻除外），須要的是一個全局的ImageView來顯示圖片。

//顯示圖片
@property(nonatomic,strong)UIImageView *imageView;

在PhotoScrollView.m中重寫initWithFrame方法

 1 //重寫init方法
 2 - (id)initWithFrame:(CGRect)frame {
 3     if (self = [super initWithFrame:frame]) {
 4         //建立圖片視圖
 5         _imageView = [[UIImageView alloc] initWithFrame:self.bounds];
 6         //顯示在屏幕上
 7         [self addSubview:_imageView];
 8         //設置代理
 9         self.delegate = self;
10         //設置放大縮小倍數
11         self.minimumZoomScale = 0.5;
12         self.maximumZoomScale = 2;
13     }
14     return self;
15 }

設置代理後，必定要在.h中聲明代理，否則會警告報錯。在以上代碼中咱們看到了能夠設置放大縮小最大最小倍數（自定義），那麼，縮放後爲何能顯示變化後的圖片呢？那就要用的下面的方法：

1 - (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
2     //縮放以後返回該圖片變化以後樣子
3     return _imageView;
4 }
5 //另附英文文檔解釋
6 //return a view that will be scaled. if delegate returns nil, nothing happens

接下來在controller中的實現。我將導入的圖片順序加入到數組中（最簡單的方法），而後能夠顯示。但這裏就不須要循環了，相冊通常不循環。

問題來了，如何知道滑動以後是下一張圖片呢？那麼就要先記錄上一張圖的index。

{
    //記錄上一次的圖片index
    NSInteger _prePageIndex;
}

具體代碼實現以下：

 1 - (void)viewDidLoad {
 2     [super viewDidLoad];    
 3     UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:[UIScreen mainScreen].bounds];
 4 //    scrollView.backgroundColor = [UIColor blackColor];    
 5     //設置翻頁功能
 6     scrollView.pagingEnabled = YES;
 7     //設置內容尺寸
 8     scrollView.contentSize = CGSizeMake(kScreenWidth * 5, kScreenHeight - 69);
 9     //顯示
10     [self.view addSubview:scrollView];
11     //添加圖片
12     for (int i = 0; i < 5; i ++) {
13         NSString *imageName = [NSString stringWithFormat:@"%d.jpg",i];
14         UIImage *image = [UIImage imageNamed:imageName];
15         PhotoScrollView *photoView = [[PhotoScrollView alloc] initWithFrame:CGRectMake(i * kScreenWidth, 64, kScreenWidth, kScreenHeight - 113)];
16         //設置圖片
17         photoView.imageView.image = image;
18        //設置爲 i ，與圖片相對應,當i＝0 時，出現情況
19 //        photoView.tag = i;
20         photoView.tag = 99 + i;
21         [scrollView addSubview:photoView];
22     }
23     //設置代理
24     scrollView.delegate = self;
25     //顯示第一張圖片
26     _prePageIndex = 0;
27 }

其中kScreenWidth、kScreenHeight是自定義的一個宏定義，方便使用，讀者都知道不需多言（一、2中均使用過）。

此處是中止後方法：

 1 //減速中止時候
 2 - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
 3     
 4     //獲取當前圖片的index = scrollView.contentOffset.x/kScreenWidth;
 5     NSInteger currentPageIndex = scrollView.contentOffset.x/kScreenWidth;
 6     if (currentPageIndex != _prePageIndex) {
 7         //獲取上一張圖片（1.利用tag值,因此要設置photoView.tag 2.利用偏移量）
 8         PhotoScrollView *photoView = (PhotoScrollView*)[scrollView viewWithTag:_prePageIndex + 99];
 9         //當切換圖片後，將前一張圖片大小還原
10         photoView.zoomScale = 1;
11         //從新設置_prePageIndex
12         _prePageIndex = currentPageIndex;
13     }
14 }

 效果圖

uo

 咱們能夠看見有水平、垂直滾動條。還有當滑動到最後一個以後就不能再滑動，可是有反彈效果（能夠取消反彈效果）

//是否反彈
scrollView.bounces = NO/YES;
//水平碰到邊框是否反彈
scrollView.alwaysBounceHorizontal = NO/YES;
//垂直碰到邊框是否反彈
scrollView.alwaysBounceVertical = NO/YES;

相冊實現原理就是以上（只是簡單的，不全面）代碼。

歡迎讀者查閱，有錯請留言。如若轉載請標明出處。