使用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张图片的轮播,我借鉴了几个博文,得到两种方法实现: [第一种]:如下图(图片来源于 ...
随机推荐
- java中哪些数值不能被初始化
main方法中的变量不能被初始化 final修饰的变量不能被初始化·
- VS2008 编译 libpng库
一.下载libpng和zlib http://sourceforge.net/projects/libpng/ http://sourceforge.net/projects/libpng/files ...
- Math类操作数据
Math 类位于 java.lang 包中,包含用于执行基本数学运算的方法, Math 类的所有方法都是静态方法,所以使用该类中的方法时,可以直接使用类名.方法名,如: Math.round(); 常 ...
- __x__(24)0907第四天__ display 和 visibility
<a>百度</a> 也是内联元素,无法设置width和height <img>可以设置width和height,但是不会占用一行,所以是典型的行内块元素inl ...
- 使用 IntraWeb (28) - 基本控件之 TIWTemplateProcessorHTML、TIWLayoutMgrHTML、TIWLayoutMgrForm
TIWTemplateProcessorHTML //使用外部的 html 文件做模板 TIWLayoutMgrHTML //直接输入 Html 文本做模板 TIWLayoutMgrForm //这应 ...
- [web前端] npm install -save 和 -save-dev 傻傻分不清
本文原文地址:https://www.limitcode.com/detail/59a15b1a69e95702e0780249.html 最近在写Node程序的时候,突然对 npm install ...
- wifipineapple获取用户上网信息
ssh连接到wifipineapple: 输入连接信息:ssh root@172.16.42.1 输入密码:pineapplesareyummy 安装依赖基本环境: opkg update opkg ...
- 关于JAVA 中的Configuration类
properties文件是Java平台默认的配置文件格式,其优点是格式清晰,简单易懂,使用commons-configuration读取properties文件也比较简单,代码如下: 基本用法: 1. ...
- poj 2068 Nim(博弈dp)
Nim Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 1403 Accepted: 791 Description Le ...
- C语言定义共享全局变量
好久没写C语言了,突然忘记怎么定义全局共享变量了,由于老项目的Code Base都是C的风格,其中又大量用了全局变量,只能跟着糊一坨shit上去了.没办法. 再共享全局变量的global_shared ...