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

王朝学院·作者佚名  2016-08-27
窄屏简体版  字體: 小  |  中  |  大  |  超大  

场景:

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

效果如下:

ViewController.h

1#import<UIKit/UIKit.h>23@interfaceViewController : 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;1314@end

ViewController.m

1#import"ViewController.h"23#definekWidthOfScreen [[UIScreen mainScreen] bounds].size.width4#definekHeightOfScreen [[UIScreen mainScreen] bounds].size.height5#definekImageViewCount 36@interfaceViewController ()7/**8* 加载图片数据9*/10- (void)loadImageData;1112/**13* 添加滚动视图14*/15- (void)addScrollView;1617/**18* 添加三个图片视图到滚动视图内19*/20- (void)addImageViewsToScrollView;2122/**23* 添加分页控件24*/25- (void)addPageControl;2627/**28* 添加标签;用于图片描述29*/30- (void)addLabel;3132/**33* 根据当前图片索引设置信息34*35* @param currentImageIndex 当前图片索引;即中间36*/37- (void)setInfoByCurrentImageIndex:(NSUInteger)currentImageIndex;3839/**40* 设置默认信息41*/42- (void)setDefaultInfo;4344/**45* 重新加载图片46*/47- (void)reloadImage;4849- (void)layoutUI;50@end5152@implementationViewController5354- (void)viewDidLoad {55[super viewDidLoad];5657[self layoutUI];58}5960- (void)didReceiveMemoryWarning {61[super didReceiveMemoryWarning];62//Dispose of any resources that can be recreated.63}6465- (void)loadImageData {66NSString *path = [[NSBundle mainBundle] pathForResource:@"ImageInfo"ofType:@"plist"];67_mDicImageData =[NSMutableDictionary dictionaryWithContentsOfFile:path];68_imageCount =_mDicImageData.count;69}7071- (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}8081- (void)addImageViewsToScrollView {82//图片视图;左边83_imgVLeft = [[UIImageView alloc] initWithFrame:CGRectMake(0.0,0.0, kWidthOfScreen, kHeightOfScreen)];84_imgVLeft.contentMode =UIViewContentModeScaleaspectFit;85[_scrV addSubview:_imgVLeft];8687//图片视图;中间88_imgVCenter = [[UIImageView alloc] initWithFrame:CGRectMake(kWidthOfScreen,0.0, kWidthOfScreen, kHeightOfScreen)];89_imgVCenter.contentMode =UIViewContentModeScaleAspectFit;90[_scrV addSubview:_imgVCenter];9192//图片视图;右边93_imgVRight = [[UIImageView alloc] initWithFrame:CGRectMake(kWidthOfScreen *2.0,0.0, kWidthOfScreen, kHeightOfScreen)];94_imgVRight.contentMode =UIViewContentModeScaleAspectFit;95[_scrV addSubview:_imgVRight];96}9798- (void)addPageControl {99_pageC = [UIPageControlnew];100CGSize 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}109110- (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}118119- (void)setInfoByCurrentImageIndex:(NSUInteger)currentImageIndex {120NSString *currentImageNamed = [NSString stringWithFormat:@"%lu.png", (unsignedlong)currentImageIndex];121_imgVCenter.image =[UIImage imageNamed:currentImageNamed];122_imgVLeft.image = [UIImage imageNamed:[NSString stringWithFormat:@"%lu.png", (unsignedlong)((_currentImageIndex -1+ _imageCount) %_imageCount)]];123_imgVRight.image = [UIImage imageNamed:[NSString stringWithFormat:@"%lu.png", (unsignedlong)((_currentImageIndex +1) %_imageCount)]];124125_pageC.currentPage =currentImageIndex;126_lblImageDesc.text =_mDicImageData[currentImageNamed];127}128129- (void)setDefaultInfo {130_currentImageIndex =0;131[self setInfoByCurrentImageIndex:_currentImageIndex];132}133134- (void)reloadImage {135CGPoint contentOffset =[_scrV contentOffset];136if(contentOffset.x > kWidthOfScreen) {//向左滑动137_currentImageIndex = (_currentImageIndex +1) %_imageCount;138}elseif(contentOffset.x < kWidthOfScreen) {//向右滑动139_currentImageIndex = (_currentImageIndex -1+ _imageCount) %_imageCount;140}141142[self setInfoByCurrentImageIndex:_currentImageIndex];143}144145- (void)layoutUI {146self.view.backgroundColor =[UIColor blackColor];147148[self loadImageData];149[self addScrollView];150[self addImageViewsToScrollView];151[self addPageControl];152[self addLabel];153[self setDefaultInfo];154}155156#pragmamark - UIScrollViewDelegate157- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {158[self reloadImage];159160_scrV.contentOffset = CGPointMake(kWidthOfScreen,0.0);161_pageC.currentPage =_currentImageIndex;162163NSString *currentImageNamed = [NSString stringWithFormat:@"%lu.png", (unsignedlong)_currentImageIndex];164_lblImageDesc.text =_mDicImageData[currentImageNamed];165}166167@end

​ImageInfo.plist

1<?xmlversion="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<plistversion="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>

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航