使用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 - UIScrollViewDelegate
157 - (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>