使用UIScrollView 結合 UIImageView 實現圖片迴圈滾動，

使用UIScrollView 結合 UIImageView 實現圖片迴圈滾動，

情境：

在開發工作中，有時我們需要實現一組圖片迴圈滾動的情況。當我們使用 UIScrollView 結合 UIImageView 來實現時，一般 UIImageView 會盡量考慮重用，下面例子是以（左中右）三個 UIImageView 的使用，其實也可以考慮使用 兩個 UIImageView 實現的情況。這樣避免 一組圖片多少個就對應多少個 UIImageView 所導致佔用過多記憶體的情況。

效果如下：

ViewController.h

 1 #import <UIKit/UIKit.h> 2  3 @interface ViewController : UIViewController <UIScrollViewDelegate> 4 @property (strong, nonatomic) UIScrollView *scrV; 5 @property (strong, nonatomic) UIPageControl *pageC; 6 @property (strong, nonatomic) UIImageView *imgVLeft; 7 @property (strong, nonatomic) UIImageView *imgVCenter; 8 @property (strong, nonatomic) UIImageView *imgVRight; 9 @property (strong, nonatomic) UILabel *lblImageDesc;10 @property (strong, nonatomic) NSMutableDictionary *mDicImageData;11 @property (assign, nonatomic) NSUInteger currentImageIndex;12 @property (assign, nonatomic) NSUInteger imageCount;13 14 @end

ViewController.m

  1 #import "ViewController.h"  2   3 #define kWidthOfScreen [[UIScreen mainScreen] bounds].size.width  4 #define kHeightOfScreen [[UIScreen mainScreen] bounds].size.height  5 #define kImageViewCount 3  6 @interface ViewController ()  7 /**  8  *  載入圖片資料  9  */ 10 - (void)loadImageData; 11  12 /** 13  *  添加滾動視圖 14  */ 15 - (void)addScrollView; 16  17 /** 18  *  添加三個圖片視圖到滾動視圖內 19  */ 20 - (void)addImageViewsToScrollView; 21  22 /** 23  *  添加分頁控制項 24  */ 25 - (void)addPageControl; 26  27 /** 28  *  添加標籤；用於圖片描述 29  */ 30 - (void)addLabel; 31  32 /** 33  *  根據當前圖片索引設定資訊 34  * 35  *  @param currentImageIndex 當前圖片索引；即中間 36  */ 37 - (void)setInfoByCurrentImageIndex:(NSUInteger)currentImageIndex; 38  39 /** 40  *  設定預設資訊 41  */ 42 - (void)setDefaultInfo; 43  44 /** 45  *  重新載入圖片 46  */ 47 - (void)reloadImage; 48  49 - (void)layoutUI; 50 @end 51  52 @implementation ViewController 53  54 - (void)viewDidLoad { 55     [super viewDidLoad]; 56      57     [self layoutUI]; 58 } 59  60 - (void)didReceiveMemoryWarning { 61     [super didReceiveMemoryWarning]; 62     // Dispose of any resources that can be recreated. 63 } 64  65 - (void)loadImageData { 66     NSString *path = [[NSBundle mainBundle] pathForResource:@"ImageInfo" ofType:@"plist"]; 67     _mDicImageData = [NSMutableDictionary dictionaryWithContentsOfFile:path]; 68     _imageCount = _mDicImageData.count; 69 } 70  71 - (void)addScrollView { 72     _scrV = [[UIScrollView alloc] initWithFrame:[[UIScreen mainScreen] bounds]]; 73     _scrV.contentSize = CGSizeMake(kWidthOfScreen * kImageViewCount, kHeightOfScreen); 74     _scrV.contentOffset = CGPointMake(kWidthOfScreen, 0.0); 75     _scrV.pagingEnabled = YES; 76     _scrV.showsHorizontalScrollIndicator = NO; 77     _scrV.delegate = self; 78     [self.view addSubview:_scrV]; 79 } 80  81 - (void)addImageViewsToScrollView { 82     //圖片視圖；左邊 83     _imgVLeft = [[UIImageView alloc] initWithFrame:CGRectMake(0.0, 0.0, kWidthOfScreen, kHeightOfScreen)]; 84     _imgVLeft.contentMode = UIViewContentModeScaleAspectFit; 85     [_scrV addSubview:_imgVLeft]; 86      87     //圖片視圖；中間 88     _imgVCenter = [[UIImageView alloc] initWithFrame:CGRectMake(kWidthOfScreen, 0.0, kWidthOfScreen, kHeightOfScreen)]; 89     _imgVCenter.contentMode = UIViewContentModeScaleAspectFit; 90     [_scrV addSubview:_imgVCenter]; 91      92     //圖片視圖；右邊 93     _imgVRight = [[UIImageView alloc] initWithFrame:CGRectMake(kWidthOfScreen * 2.0, 0.0, kWidthOfScreen, kHeightOfScreen)]; 94     _imgVRight.contentMode = UIViewContentModeScaleAspectFit; 95     [_scrV addSubview:_imgVRight]; 96 } 97  98 - (void)addPageControl { 99     _pageC = [UIPageControl new];100     CGSize size= [_pageC sizeForNumberOfPages:_imageCount]; //根據頁數返回 UIPageControl 合適的大小101     _pageC.bounds = CGRectMake(0.0, 0.0, size.width, size.height);102     _pageC.center = CGPointMake(kWidthOfScreen / 2.0, kHeightOfScreen - 80.0);103     _pageC.numberOfPages = _imageCount;104     _pageC.pageIndicatorTintColor = [UIColor whiteColor];105     _pageC.currentPageIndicatorTintColor = [UIColor brownColor];106     _pageC.userInteractionEnabled = NO; //設定是否允許使用者互動；預設值為 YES，當為 YES 時，針對點擊控制項地區左（當前頁索引減一，最小為0）右（當前頁索引加一，最大為總數減一），可以編寫 UIControlEventValueChanged 的事件處理方法107     [self.view addSubview:_pageC];108 }109 110 - (void)addLabel {111     _lblImageDesc = [[UILabel alloc] initWithFrame:CGRectMake(0.0, 40.0, kWidthOfScreen, 40.0)];112     _lblImageDesc.textAlignment = NSTextAlignmentCenter;113     _lblImageDesc.textColor = [UIColor whiteColor];114     _lblImageDesc.font = [UIFont boldSystemFontOfSize:[UIFont labelFontSize]];115     _lblImageDesc.text = @"Fucking now.";116     [self.view addSubview:_lblImageDesc];117 }118 119 - (void)setInfoByCurrentImageIndex:(NSUInteger)currentImageIndex {120     NSString *currentImageNamed = [NSString stringWithFormat:@"%lu.png", (unsigned long)currentImageIndex];121     _imgVCenter.image = [UIImage imageNamed:currentImageNamed];122     _imgVLeft.image = [UIImage imageNamed:[NSString stringWithFormat:@"%lu.png", (unsigned long)((_currentImageIndex - 1 + _imageCount) % _imageCount)]];123     _imgVRight.image = [UIImage imageNamed:[NSString stringWithFormat:@"%lu.png", (unsigned long)((_currentImageIndex + 1) % _imageCount)]];124     125     _pageC.currentPage = currentImageIndex;126     _lblImageDesc.text = _mDicImageData[currentImageNamed];127 }128 129 - (void)setDefaultInfo {130     _currentImageIndex = 0;131     [self setInfoByCurrentImageIndex:_currentImageIndex];132 }133 134 - (void)reloadImage {135     CGPoint contentOffset = [_scrV contentOffset];136     if (contentOffset.x > kWidthOfScreen) { //向左滑動137         _currentImageIndex = (_currentImageIndex + 1) % _imageCount;138     } else if (contentOffset.x < kWidthOfScreen) { //向右滑動139         _currentImageIndex = (_currentImageIndex - 1 + _imageCount) % _imageCount;140     }141     142     [self setInfoByCurrentImageIndex:_currentImageIndex];143 }144 145 - (void)layoutUI {146     self.view.backgroundColor = [UIColor blackColor];147     148     [self loadImageData];149     [self addScrollView];150     [self addImageViewsToScrollView];151     [self addPageControl];152     [self addLabel];153     [self setDefaultInfo];154 }155 156 #pragma mark - UIScrollViewDelegate157 - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {158     [self reloadImage];159     160     _scrV.contentOffset = CGPointMake(kWidthOfScreen, 0.0);161     _pageC.currentPage = _currentImageIndex;162     163     NSString *currentImageNamed = [NSString stringWithFormat:@"%lu.png", (unsigned long)_currentImageIndex];164     _lblImageDesc.text = _mDicImageData[currentImageNamed];165 }166 167 @end

ImageInfo.plist

 1 <?xml version="1.0" encoding="UTF-8"?> 2 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> 3 <plist version="1.0"> 4 <dict> 5     <key>0.png</key> 6     <string>WATCH，它，終於來了。</string> 7     <key>1.png</key> 8     <string>iPhone 6，無雙，有此一雙。</string> 9     <key>2.png</key>10     <string>MacBook，輕於時代，先於時代。</string>11     <key>3.png</key>12     <string>iPad Air 2，輕輕地，改變一切。</string>13     <key>4.png</key>14     <string>iOS 9，它，將要到來。</string>15 </dict>16 </plist>