• 當(dāng)展示的內(nèi)容較多罪帖，超出一個(gè)屏幕時(shí)条辟，用戶可通過滾動(dòng)手勢來查看屏幕以外的內(nèi)容
• 普通的UIView不具備滾動(dòng)功能冀偶，不適合顯示過多的內(nèi)容
• UIScrollView是一個(gè)能夠滾動(dòng)的視圖控件鬓梅，可以用來展示大量的內(nèi)容吞获，并且可以通過滾動(dòng)查看所有的內(nèi)容
• UIScrollView是一個(gè)可以處理滾動(dòng)操作的視圖况凉，UIScrollView在開發(fā)過程中使用很頻繁，而且它也經(jīng)常作為其他控件的子控件各拷，例如UITableView就繼承自UIScrollView刁绒。

常見屬性

• scrollView不能滾動(dòng)的幾種情況
  1.沒有設(shè)置contentSize
  2.scrollEnabled屬性 = NO
  3.userInteractionEnabled屬性 = NO

• enabled和userInteractionEnabled的區(qū)別

  • enabled: 代表控件不可用
  • userInteractionEnabled: 代表控件不可以和用戶交互宗雇，也就是不能響應(yīng)用戶的操作

contentSize、contentInset莹规、contentOffset

contentInset相當(dāng)于在內(nèi)容大小contentSize的基礎(chǔ)上增加了一塊額外的滾動(dòng)區(qū)域，是額外的泌神，所以和contentSize良漱、contentOffset都沒有直接的關(guān)系。

contentOffset

下面用圖來表達(dá)contentOffset欢际，其中母市，綠色矩形是scrollview，透明紅矩形是scrollview的內(nèi)容

圖1 - 內(nèi)容在右上角损趋，contentOffset = (100患久，100)

圖2 -內(nèi)容在左下角，contentOffset = (-100浑槽，-100)

• 如圖1蒋失，內(nèi)容左上角是(-100, -100)，則
  contentOffset = (0, 0) - (-100, -100) = (0 - -100, 0 - -100) = (100, 100)
• 如圖2桐玻，內(nèi)容的左上角是(100, 100)篙挽，則
  contentOffset = (0, 0) - (100, 100) = (0 - 100, 0 - 100) = (-100, -100)
• 所以，contentOffset = 控件左上角(0, 0) - 內(nèi)容左上角

記啄餮ァ铣卡！
contentOffset = 控件左上角(0, 0) - 內(nèi)容左上角
contentOffset.x > 0 ，內(nèi)容左移
contentOffset.x < 0 偏竟，內(nèi)容右移
contentOffset.y > 0 煮落，內(nèi)容上移
contentOffset.y < 0 ，內(nèi)容下移

常用方法

常見代理方法

方法的調(diào)用順序

拖動(dòng)UIScrollview

如果我們拖動(dòng)一個(gè)UIScrollView中的子控件移動(dòng)的時(shí)候它的執(zhí)行順序如下：

1. 開始拖拽，
2. 滾動(dòng)...嫌褪，
3. 停止拖拽呀枢，
4. 將要停止?jié)L動(dòng)，
5. 滾動(dòng)...
6. 停止?jié)L動(dòng)

其中步驟4笼痛、5和6有可能執(zhí)行也有可能不執(zhí)行裙秋，關(guān)鍵看你拖拽的停止的時(shí)候是突然停止（沒有慣性）還是有一段慣性讓他繼續(xù)執(zhí)行（有慣性）琅拌。但是不管怎么樣滾動(dòng)事件會(huì)一直執(zhí)行，因此如果在這個(gè)事件中進(jìn)行某種操作一定要注意性能摘刑。

• 如果想在UIScrollView停止?jié)L動(dòng)之后做一些操作, 有兩種情況

1. 沒有慣性的情況：只會(huì)調(diào)用 停止拖拽的方法进宝，不會(huì)調(diào)用停止減速的方法
2. 有慣性的情況：既會(huì)調(diào)用 停止拖拽的方法，也會(huì)調(diào)用停止減速的方法
   所以：以后要判斷UIScrollView是否停止?jié)L動(dòng)枷恕，需要同時(shí)重寫兩個(gè)方法
   2.1 scrollViewDidEndDragging
   2.2 scrollViewDidEndDecelerating

• 優(yōu)化停止方法党晋，使得只需寫一次滾動(dòng)停止的操作

// 結(jié)束拖拽
    -(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
        if (decelerate == NO) {  // 如果不是減速，也就是沒有慣性 
        // 主動(dòng)調(diào)用結(jié)束減速方法徐块，所有的滾動(dòng)停止后操作都在那個(gè)方法中執(zhí)行
        [self scrollViewDidEndDecelerating:scrollView];
        }
    }
// 結(jié)束減速
    - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
        // 在這里寫停止?jié)L動(dòng)后的相關(guān)操作
    }

縮放UIScrollview

• 如果我們縮放UIScrollView的子控件的時(shí)候它的執(zhí)行順序如下：
  1. 開始縮放
  2. 滾動(dòng)…
  3. 停止縮放
• 同樣在這個(gè)過程中滾動(dòng)事件會(huì)一直調(diào)用(當(dāng)然如果縮放過程中手指有別的動(dòng)作也可能會(huì)觸發(fā)其他事件未玻，這個(gè)大家可以自己體會(huì))。

// 1.設(shè)置縮放大小
  srcollView.maximumZoomScale = 2.0;
  srcollView.minimumZoomScale = 1;
// 2.設(shè)置需要縮放的控件
-(UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
    return self.imageView;
}

無限循環(huán)輪播器

• 在UIScrollView中如果放置其他控件后胡控，只要設(shè)置contentSize之后這些圖片就可以滾動(dòng)扳剿。如果要讓圖片無限循環(huán)那么只有兩種辦法，一種是無限循環(huán)疊加圖片昼激，另一種就是如果最后一張圖片瀏覽完立即顯示第一張圖片庇绽。顯然第一種明顯不合適，考慮第二種橙困。

• 使用第二種原理其實(shí)很簡單瞧掺，就是前后各加一張(n+2)。比如有5張圖片那么久需要7個(gè)UIImageView纷宇，圖片分別是圖片5夸盟，圖片1，圖片2像捶，圖片3上陕，圖片4，圖片5拓春，圖片0释簿。

• 當(dāng)從圖片1滾動(dòng)到圖片5時(shí)由于最后一張是圖片1就給用戶一種無限循環(huán)的感覺，當(dāng)這張圖完全顯示后我們迅速將UIScrollView的contentOffset設(shè)置到第二個(gè)UIImageView硼莽，也就是圖片1庶溶，接著用戶可以繼續(xù)向后滾動(dòng)。當(dāng)然向前滾動(dòng)原理完全一樣懂鸵，當(dāng)滾動(dòng)到第一張圖片（圖片5）就迅速設(shè)置UIScrollView的contentOffset顯示第6張圖（圖片5）偏螺。

• 性能優(yōu)化

• 用上面的方法的話，需要過多這些圖片匆光，而這樣勢必全部加載到內(nèi)存套像，這是我們不愿意看到的，此時(shí)需要優(yōu)化终息。其實(shí)只需要3個(gè)UIImageView（2個(gè)也可以）同樣可以實(shí)現(xiàn)上面的效果夺巩。只是每次滾動(dòng)后贞让，都需要重新設(shè)置圖片。例如開始的時(shí)候柳譬，是圖片5喳张，圖片1，圖片2美澳。向后滾動(dòng)销部，那么三種圖分別的序號就是1，2制跟，3柴墩，然后通過contentOffset設(shè)置顯示中間的UIImageView。當(dāng)然凫岖，向前滾動(dòng)原理完全一樣，如此就給用戶一種循環(huán)錯(cuò)覺逢净，而且不占用過多內(nèi)存哥放。

在程序中，讀取寫入了圖片信息的plist文件并加載對應(yīng)的圖片爹土，圖片按順序依次命名：page0.jpg甥雕、page1.jpg…page4.jpg。我們的程序主要集中于自定義的ViewController.m中胀茵，在這里我們聲明1個(gè)UIScrollView和3個(gè)UIImageView用于顯示圖片社露，同時(shí)聲明一個(gè)UIPageControl來顯示當(dāng)前圖片頁數(shù)，具體代碼如下：

#import "ViewController.h"

@interface ViewController ()<UIScrollViewDelegate>

/** 所有圖片*/
@property (nonatomic, strong) NSDictionary *images;
/** 圖片個(gè)數(shù)*/
@property (nonatomic, assign) int imageCount;

/** 輪播器*/
@property (nonatomic, weak) UIScrollView *cycleScrollView;
/** 左邊的圖控件*/
@property (nonatomic, weak) UIImageView *leftImageView;
@property (nonatomic, weak) UIImageView *midImageView;
@property (nonatomic, weak) UIImageView *rightImageView;

/** 圖片索引*/
@property (nonatomic, assign) int imageIndex;

// 包裝view需要裝下scrollview和pageControl
/** 包裝view*/
@property (nonatomic, weak) UIView *backGroundView;

/** 分頁控件*/
@property (nonatomic, weak) UIPageControl *pageC;

@end

@implementation ViewController

#define SCREEN_WIDTH self.view.bounds.size.width
#define SCREEN_HEIGHT self.view.bounds.size.height
#define IMAGEVIEW_COUNT 3
#define ScrollView_HEIGHT (200 * (SCREEN_WIDTH) / 320)

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 加載圖片數(shù)據(jù)
    [self loadImageData];
    
    // 添加滾動(dòng)圖
    [self createScrollView];
    
    // 給滾動(dòng)圖添加圖片控件
    [self addImageViewToScrollView];
    
    // 添加分頁控件
    [self addPageControl];
    
    // 加載默認(rèn)圖片
    [self setDefaultImages];
    
    
}

// 加載圖片數(shù)據(jù)
-(void)loadImageData {
    NSString *path = [[NSBundle mainBundle] pathForResource:@"CycleScrollImages" ofType:@"plist"];
    self.images = [NSDictionary dictionaryWithContentsOfFile:path];
    self.imageCount = (int)self.images.count;
}

// 添加滾動(dòng)圖
-(void)createScrollView {
    // 創(chuàng)建包含的view
    UIView *bV = [[UIView alloc] init];
    bV.frame = CGRectMake(0, 20, SCREEN_WIDTH, ScrollView_HEIGHT);
    [self.view addSubview:bV];
    self.backGroundView = bV;
    
    UIScrollView *scrollView = [[UIScrollView alloc] init];
    scrollView.frame = CGRectMake(0, 0, SCREEN_WIDTH, ScrollView_HEIGHT);
    scrollView.backgroundColor = [UIColor redColor];
    scrollView.contentSize = CGSizeMake(SCREEN_WIDTH * IMAGEVIEW_COUNT, 0);
    scrollView.pagingEnabled = YES;
    scrollView.delegate = self;
    scrollView.bounces = NO;
    [scrollView setContentOffset:CGPointMake(SCREEN_WIDTH, 0)];
    [self.backGroundView addSubview:scrollView];
    
    self.cycleScrollView = scrollView;
}

// 給滾動(dòng)圖添加圖片控件
-(void)addImageViewToScrollView {

    UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, ScrollView_HEIGHT)];
    imageView.contentMode = UIViewContentModeScaleAspectFit;
    [self.cycleScrollView addSubview:imageView];
    self.leftImageView = imageView;
    
    imageView = [[UIImageView alloc] initWithFrame:CGRectMake(SCREEN_WIDTH, 0, SCREEN_WIDTH, ScrollView_HEIGHT)];
    [self.cycleScrollView addSubview:imageView];
    self.midImageView = imageView;
    
    imageView = [[UIImageView alloc] initWithFrame:CGRectMake(SCREEN_WIDTH * 2, 0, SCREEN_WIDTH, ScrollView_HEIGHT)];
    [self.cycleScrollView addSubview:imageView];
    self.rightImageView = imageView;
}

// 添加分頁控件
-(void)addPageControl {
    
    int count = self.imageCount;
    UIPageControl *pageC = [[UIPageControl alloc] init];
    CGSize size = [pageC sizeForNumberOfPages:count];
    pageC.bounds = CGRectMake(0, 0, size.width, size.height);
    pageC.center = CGPointMake(SCREEN_WIDTH * 0.5, ScrollView_HEIGHT - size.height - 10);
    //設(shè)置顏色
    pageC.pageIndicatorTintColor=[UIColor colorWithRed:193/255.0 green:219/255.0 blue:249/255.0 alpha:1];
    //設(shè)置當(dāng)前頁顏色
    pageC.currentPageIndicatorTintColor=[UIColor colorWithRed:0 green:150/255.0 blue:1 alpha:1];
    //設(shè)置總頁數(shù)
    pageC.numberOfPages = count;
    
    pageC.backgroundColor = [UIColor redColor];
    [self.backGroundView addSubview:pageC];
    
    self.pageC = pageC;
}

// 加載默認(rèn)圖片
-(void)setDefaultImages {
    self.leftImageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"page%d.jpg",self.imageCount - 1]];
    self.midImageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"page%d.jpg",0]];
    self.rightImageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"page%d.jpg",1]];
    
    
    self.imageIndex = 0;
    [self.pageC setCurrentPage:0];
    
}

// 重新讀取圖片
-(void)reloadImages {
    int leftImageIndex, rightImageIndex;
    CGPoint currentP = [self.cycleScrollView contentOffset];
    if (currentP.x < SCREEN_WIDTH) { // 滾到左邊
        self.imageIndex = (self.imageIndex + self.imageCount -1) % self.imageCount;
    } else if(currentP.x > SCREEN_WIDTH) { // 滾到右邊
        self.imageIndex = (self.imageIndex + 1) % self.imageCount;
    }
    leftImageIndex = (self.imageIndex + self.imageCount -1) % self.imageCount;
    rightImageIndex = (self.imageIndex + 1) % self.imageCount;
    
    
    self.midImageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"page%d.jpg",self.imageIndex]];
    self.leftImageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"page%d.jpg",leftImageIndex]];
    self.rightImageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"page%d.jpg",rightImageIndex]];
}

#pragma mark - UIScrollViewDelegate

-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
    if (decelerate == NO) {
        [self scrollViewDidEndDecelerating:scrollView];
    }
}

-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    // 滾完之后
    // 重新讀取圖片
    [self reloadImages];
    
    // 滾回中間
    [scrollView setContentOffset:CGPointMake(SCREEN_WIDTH, 0)];
    
    // 設(shè)置分頁控件的序數(shù)
    [self.pageC setCurrentPage:self.imageIndex];
}

@end

效果圖1

注意：這里只是簡單實(shí)現(xiàn)思路琼娘，沒有封裝好峭弟。