使用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>