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

效果如下:

ViewController.h
#import <UIKit/UIKit.h> @interface ViewController : UIViewController <UIScrollViewDelegate>
@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 - + _imageCount) % _imageCount)]];
_imgVRight.image = [UIImage imageNamed:[NSString stringWithFormat:@"%lu.png", (unsigned long)((_currentImageIndex + ) % _imageCount)]]; _pageC.currentPage = currentImageIndex;
_lblImageDesc.text = _mDicImageData[currentImageNamed];
} - (void)setDefaultInfo {
_currentImageIndex = ;
[self setInfoByCurrentImageIndex:_currentImageIndex];
} - (void)reloadImage {
CGPoint contentOffset = [_scrV contentOffset];
if (contentOffset.x > kWidthOfScreen) { //向左滑动
_currentImageIndex = (_currentImageIndex + ) % _imageCount;
} else if (contentOffset.x < kWidthOfScreen) { //向右滑动
_currentImageIndex = (_currentImageIndex - + _imageCount) % _imageCount;
} [self setInfoByCurrentImageIndex:_currentImageIndex];
} - (void)layoutUI {
self.view.backgroundColor = [UIColor blackColor]; [self loadImageData];
[self addScrollView];
[self addImageViewsToScrollView];
[self addPageControl];
[self addLabel];
[self setDefaultInfo];
} #pragma mark - UIScrollViewDelegate
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
[self reloadImage]; _scrV.contentOffset = CGPointMake(kWidthOfScreen, 0.0);
_pageC.currentPage = _currentImageIndex; NSString *currentImageNamed = [NSString stringWithFormat:@"%lu.png", (unsigned long)_currentImageIndex];
_lblImageDesc.text = _mDicImageData[currentImageNamed];
} @end
ImageInfo.plist
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>0.png</key>
<string>WATCH,它,终于来了。</string>
<key>1.png</key>
<string>iPhone 6,无双,有此一双。</string>
<key>2.png</key>
<string>MacBook,轻于时代,先于时代。</string>
<key>3.png</key>
<string>iPad Air 2,轻轻地,改变一切。</string>
<key>4.png</key>
<string>iOS 9,它,将要到来。</string>
</dict>
</plist>
使用UIScrollView 结合 UIImageView 实现图片循环滚动的更多相关文章
- cocos2d(背景图片循环滚动)
背景图片循环滚动 使用action 实现的: 主要有两个背景图片交替循环滚动:我选的两个背景图片的宽度都是1024的 ,所以定义了#define BGIMG_WIDTH 1024 代码如下: 在Hel ...
- 基于html5可拖拽图片循环滚动切换
分享一款基于html5可拖拽图片循环滚动切换.这是一款支持手机端拖拽切换的网站图片循环滚动特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="s ...
- 特殊例子--JavaScript代码实现图片循环滚动效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- UIScrollView,UIPageControl,UIImageView 实现图片轮播的效果
上一篇博客介绍了如何将XCode创立的项目提交到Git版本控制,这次就直接做一个图片轮播的展示demo,刚好可以把UIScrollView.UIPageControl.UIImageView这三个控件 ...
- 图片循环滚动效果shader
背景无限循环滚动效果,有X和Y轴的速度控制,方便控制.见下图,操作步骤同之前的背景循环设置. shader如下: Shader "Custom/Scroll" { Properti ...
- UIScrollView 图片循环滚动
1:假如有6个图片:那个,Scrollview的大小加 7 个图片的大小 2: //ImageScrollView; UIScrollView *imageScroll = [[UIScrollVie ...
- iOS 图片循环滚动(切片效果)
#import <UIKit/UIKit.h> @interface AppDelegate : UIResponder <UIAp ...
- JS实现鼠标移上去图片停止滚动移开恢复滚动效果
这是在做个人站的时候展示项目成果,因为不光需要展示,还需要介绍详细内容,就在滚动展示的地方做了这个效果以便于点开想要看的项目. 首先,要做的是一个需要滚动的区域.我前边写过一个关于图片循环滚动的示例, ...
- UIScrollView循环滚动1
现在基本每一个商业APP都会有循环滚动视图,放一些轮播广告之类的,都是放在UIScrollView之上.假如我要实现N张图片的轮播,我借鉴了几个博文,得到两种方法实现: [第一种]:如下图(图片来源于 ...
随机推荐
- sessions
php session 用于存储有关用户回话的相关信息,或更改用户会话的相关设置,session变量保存的信息是单一用户的,并且可供应用程序中所有页面使用 session 的工作机制:为每个访问者创建 ...
- Winform 打包 混淆 自动更新
路径: 最终的解决方案是,ConfuserEx+Installshield+AutoUpdater.NET,ConfuserEx做代码混淆工作,Installshield可以解决注册表的问题,Auto ...
- JetBrains Rider 2018.1 汉化
之前说过了JetBrains系列的破解(最新版本也可以破解)https://www.cnblogs.com/dunitian/p/8478252.html 不少人对全英文的开发环境还是不太适应,那就来 ...
- Windows下的搜索神器 —— everything
介绍一款Windows下的神奇 -- everything,软件很小巧,但是搜索速度非常快,比Windows自带的搜索功能更强大.更快.掌握它的基本用法,在查找文件时能提升很高的效率 1.下载 2.基 ...
- C# Dictionary, SortedDictionary, SortedList
就我个人觉得Dictionary, SortedDictionary, SortedList 这几个类的使用是比较简单的,只要稍微花点时间在网上查找一点资料,然后在阅读以下源码就理解的很清楚了.为什么 ...
- iOS开发-适配器和外观模式
适配器模式,属于结构型模式,其主要作用是将一个类的接口转换成客户希望的另外一个接口.适配器模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作.适配器模式有对象适配器和类适配器两种,类适配器模 ...
- 出现System.web.mvc冲突的原因及解决方法CS0433
1.问题描述 CS0433:类型“System.Web.Mvc.WebViewPage<TModel>”同时存在于URL1和URL2中 2.解决方案 找到Web.config文件中的< ...
- Android典型界面设计(3)——访网易新闻实现双导航tab切换
一.问题描述 双导航tab切换(底部区块+区域内头部导航),实现方案底部区域使用FragmentTabHost+Fragment, 区域内头部导航使用ViewPager+Fragment,可在之前博客 ...
- p中不能包含div
一句话:有些块元素不可以包含另一些块元素 ,DTD中规定了块级元素是不能放在P里;P标签内包含块元素时,它会先结束自己,比如:<*p><*div>测试p包含div<*/d ...
- 四舍五入函数ROUND(x,y)
四舍五入函数ROUND(x,y) 参数: x:数据 y:需要保留的小数点位数 ROUND(x,y)函数返回最接近于参数x的数,其值保留到小数点后面y位,若y为负值,则将保留x值到小数点左边y位. my ...