场景:

在开发工作中,有时我们需要实现一组图片循环滚动的情况。当我们使用 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 实现图片循环滚动的更多相关文章

  1. cocos2d(背景图片循环滚动)

    背景图片循环滚动 使用action 实现的: 主要有两个背景图片交替循环滚动:我选的两个背景图片的宽度都是1024的 ,所以定义了#define BGIMG_WIDTH 1024 代码如下: 在Hel ...

  2. 基于html5可拖拽图片循环滚动切换

    分享一款基于html5可拖拽图片循环滚动切换.这是一款支持手机端拖拽切换的网站图片循环滚动特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="s ...

  3. 特殊例子--JavaScript代码实现图片循环滚动效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. UIScrollView,UIPageControl,UIImageView 实现图片轮播的效果

    上一篇博客介绍了如何将XCode创立的项目提交到Git版本控制,这次就直接做一个图片轮播的展示demo,刚好可以把UIScrollView.UIPageControl.UIImageView这三个控件 ...

  5. 图片循环滚动效果shader

    背景无限循环滚动效果,有X和Y轴的速度控制,方便控制.见下图,操作步骤同之前的背景循环设置. shader如下: Shader "Custom/Scroll" { Properti ...

  6. UIScrollView 图片循环滚动

    1:假如有6个图片:那个,Scrollview的大小加 7 个图片的大小 2: //ImageScrollView; UIScrollView *imageScroll = [[UIScrollVie ...

  7. iOS 图片循环滚动(切片效果)

                             #import <UIKit/UIKit.h> @interface AppDelegate : UIResponder <UIAp ...

  8. JS实现鼠标移上去图片停止滚动移开恢复滚动效果

    这是在做个人站的时候展示项目成果,因为不光需要展示,还需要介绍详细内容,就在滚动展示的地方做了这个效果以便于点开想要看的项目. 首先,要做的是一个需要滚动的区域.我前边写过一个关于图片循环滚动的示例, ...

  9. UIScrollView循环滚动1

    现在基本每一个商业APP都会有循环滚动视图,放一些轮播广告之类的,都是放在UIScrollView之上.假如我要实现N张图片的轮播,我借鉴了几个博文,得到两种方法实现: [第一种]:如下图(图片来源于 ...

随机推荐

  1. tab------左右布局

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  2. Hadoop学习博客

    http://zy19982004.iteye.com/blog/monthblog_more

  3. String literal is not properly closed by a double-quote eclipse

    中文乱码, 解决方法之一就是更改工程的编码方式. 首先选择工程,右键打开property窗口,resource下的text  file incoding,看看是不是选择的utf-8,如果不是的话更改为 ...

  4. mac pro 如何让终端默认运行python3.X而不是2.7

    Mac版本的Python默认是2.7,安装高版本后需要修改为你安装的版本. 1,首先打开终端 open ~/.bash_profile 打开配置文件 2. 写入python的外部环境变量(本人的版本是 ...

  5. iOS开发-装饰模式

    装饰模式是指在不必改变原类文件和使用继承的情况下,动态地扩展一个对象的功能.通过创建一个包装对象,也就是装饰来包裹真实的对象.装饰模式中的装饰对象和真实对象有相同的接口.这样客户端对象就能以和真实对象 ...

  6. cocos2d-x 开发用到的工具

    1.VertexHelper 可用于多边形顶点的计算,可视化定点编辑器,用它创建的顶点信息可以直接导出为Box2D可使用的代码 https://github.com/jfahrenkrug/Verte ...

  7. 使用JDBC在MySQL数据库中快速批量插入数据

    使用JDBC连接MySQL数据库进行数据插入的时候,特别是大批量数据连续插入(10W+),如何提高效率呢? 在JDBC编程接口中Statement 有两个方法特别值得注意: void addBatch ...

  8. Java 对字符串数据进行MD5/SHA1哈希散列运算

    Java对字符串数据进行MD5/SHA1哈希散列运算 [java] view plain copy package cn.aibo.test; import java.security.Message ...

  9. 微软BI 之SSIS 系列 - 理解Data Flow Task 中的同步与异步, 阻塞,半阻塞和全阻塞以及Buffer 缓存概念

    开篇介绍 在 SSIS Dataflow 数据流中的组件可以分为 Synchronous 同步和 Asynchronous 异步这两种类型. 同步与异步 Synchronous and Asynchr ...

  10. 修改oracle为归档模式

    1.查看是否为归档模式 SQL> archive log list; Database log mode No Archive Mode Automatic archival Disabled ...