使用UIScrollView 结合 UIImageView 实现图片循环滚动

作者：KenmuHuang 授权本站转载。

场景：

在开发工作中，有时我们需要实现一组图片循环滚动的情况。当我们使用 UIScrollView 结合 UIImageView 来实现时，一般 UIImageView 会尽量考虑重用，下面例子是以（左中右）三个 UIImageView 的使用，其实也可以考虑使用 两个 UIImageView 实现的情况。这样避免 一组图片多少个就对应多少个 UIImageView 所导致占用过多内存的情况。

效果如下：

ViewController.h

#import?@interface?ViewController?:?UIViewController?@property?(strong,?nonatomic)?UIScrollView?*scrV; @property?(strong,?nonatomic)?UIPageControl?*pageC; @property?(strong,?nonatomic)?UIImageView?*imgVLeft; @property?(strong,?nonatomic)?UIImageView?*imgVCenter; @property?(strong,?nonatomic)?UIImageView?*imgVRight; @property?(strong,?nonatomic)?UILabel?*lblImageDesc; @property?(strong,?nonatomic)?NSMutableDictionary?*mDicImageData; @property?(assign,?nonatomic)?NSUInteger?currentImageIndex; @property?(assign,?nonatomic)?NSUInteger?imageCount;  @end

ViewController.m

#import?"ViewController.h"  #define?kWidthOfScreen?[[UIScreen?mainScreen]?bounds].size.width #define?kHeightOfScreen?[[UIScreen?mainScreen]?bounds].size.height #define?kImageViewCount?3 @interface?ViewController?() /** ?*??加载图片数据 ?*/ -?(void)loadImageData;  /** ?*??添加滚动视图 ?*/ -?(void)addScrollView;  /** ?*??添加三个图片视图到滚动视图内 ?*/ -?(void)addImageViewsToScrollView;  /** ?*??添加分页控件 ?*/ -?(void)addPageControl;  /** ?*??添加标签；用于图片描述 ?*/ -?(void)addLabel;  /** ?*??根据当前图片索引设置信息 ?* ?*??@param?currentImageIndex?当前图片索引；即中间 ?*/ -?(void)setInfoByCurrentImageIndex:(NSUInteger)currentImageIndex;  /** ?*??设置默认信息 ?*/ -?(void)setDefaultInfo;  /** ?*??重新加载图片 ?*/ -?(void)reloadImage;  -?(void)layoutUI; @end  @implementation?ViewController  -?(void)viewDidLoad?{ ????[super?viewDidLoad]; ???? ????[self?layoutUI]; }  -?(void)didReceiveMemoryWarning?{ ????[super?didReceiveMemoryWarning]; ????//?Dispose?of?any?resources?that?can?be?recreated. }  -?(void)loadImageData?{ ????NSString?*path?=?[[NSBundle?mainBundle]?pathForResource:@"ImageInfo"?ofType:@"plist"]; ????_mDicImageData?=?[NSMutableDictionary?dictionaryWithContentsOfFile:path]; ????_imageCount?=?_mDicImageData.count; }  -?(void)addScrollView?{ ????_scrV?=?[[UIScrollView?alloc]?initWithFrame:[[UIScreen?mainScreen]?bounds]]; ????_scrV.contentSize?=?CGSizeMake(kWidthOfScreen?*?kImageViewCount,?kHeightOfScreen); ????_scrV.contentOffset?=?CGPointMake(kWidthOfScreen,?0.0); ????_scrV.pagingEnabled?=?YES; ????_scrV.showsHorizontalScrollIndicator?=?NO; ????_scrV.delegate?=?self; ????[self.view?addSubview:_scrV]; }  -?(void)addImageViewsToScrollView?{ ????//图片视图；左边 ????_imgVLeft?=?[[UIImageView?alloc]?initWithFrame:CGRectMake(0.0,?0.0,?kWidthOfScreen,?kHeightOfScreen)]; ????_imgVLeft.contentMode?=?UIViewContentModeScaleAspectFit; ????[_scrV?addSubview:_imgVLeft]; ???? ????//图片视图；中间 ????_imgVCenter?=?[[UIImageView?alloc]?initWithFrame:CGRectMake(kWidthOfScreen,?0.0,?kWidthOfScreen,?kHeightOfScreen)]; ????_imgVCenter.contentMode?=?UIViewContentModeScaleAspectFit; ????[_scrV?addSubview:_imgVCenter]; ???? ????//图片视图；右边 ????_imgVRight?=?[[UIImageView?alloc]?initWithFrame:CGRectMake(kWidthOfScreen?*?2.0,?0.0,?kWidthOfScreen,?kHeightOfScreen)]; ????_imgVRight.contentMode?=?UIViewContentModeScaleAspectFit; ????[_scrV?addSubview:_imgVRight]; }  -?(void)addPageControl?{ ????_pageC?=?[UIPageControl?new]; ????CGSize?size=?[_pageC?sizeForNumberOfPages:_imageCount];?//根据页数返回?UIPageControl?合适的大小 ????_pageC.bounds?=?CGRectMake(0.0,?0.0,?size.width,?size.height); ????_pageC.center?=?CGPointMake(kWidthOfScreen?/?2.0,?kHeightOfScreen?-?80.0); ????_pageC.numberOfPages?=?_imageCount; ????_pageC.pageIndicatorTintColor?=?[UIColor?whiteColor]; ????_pageC.currentPageIndicatorTintColor?=?[UIColor?brownColor]; ????_pageC.userInteractionEnabled?=?NO;?//设置是否允许用户交互；默认值为?YES，当为?YES?时，针对点击控件区域左（当前页索引减一，最小为0）右（当前页索引加一，最大为总数减一），可以编写?UIControlEventValueChanged?的事件处理方法 ????[self.view?addSubview:_pageC]; }  -?(void)addLabel?{ ????_lblImageDesc?=?[[UILabel?alloc]?initWithFrame:CGRectMake(0.0,?40.0,?kWidthOfScreen,?40.0)]; ????_lblImageDesc.textAlignment?=?NSTextAlignmentCenter; ????_lblImageDesc.textColor?=?[UIColor?whiteColor]; ????_lblImageDesc.font?=?[UIFont?boldSystemFontOfSize:[UIFont?labelFontSize]]; ????_lblImageDesc.text?=?@"Fucking?now."; ????[self.view?addSubview:_lblImageDesc]; }  -?(void)setInfoByCurrentImageIndex:(NSUInteger)currentImageIndex?{ ????NSString?*currentImageNamed?=?[NSString?stringWithFormat:@"%lu.png",?(unsigned?long)currentImageIndex]; ????_imgVCenter.image?=?[UIImage?imageNamed:currentImageNamed]; ????_imgVLeft.image?=?[UIImage?imageNamed:[NSString?stringWithFormat:@"%lu.png",?(unsigned?long)((_currentImageIndex?-?1?+?_imageCount)?%?_imageCount)]]; ????_imgVRight.image?=?[UIImage?imageNamed:[NSString?stringWithFormat:@"%lu.png",?(unsigned?long)((_currentImageIndex?+?1)?%?_imageCount)]]; ???? ????_pageC.currentPage?=?currentImageIndex; ????_lblImageDesc.text?=?_mDicImageData[currentImageNamed]; }  -?(void)setDefaultInfo?{ ????_currentImageIndex?=?0; ????[self?setInfoByCurrentImageIndex:_currentImageIndex]; }  -?(void)reloadImage?{ ????CGPoint?contentOffset?=?[_scrV?contentOffset]; ????if?(contentOffset.x?>?kWidthOfScreen)?{?//向左滑动 ????????_currentImageIndex?=?(_currentImageIndex?+?1)?%?_imageCount; ????}?else?if?(contentOffset.x?

ImageInfo.plist

????0.png????WATCH，它，终于来了。????1.png????iPhone?6，无双，有此一双。????2.png????MacBook，轻于时代，先于时代。????3.png????iPad?Air?2，轻轻地，改变一切。????4.png????iOS?9，它，将要到来。