场景:

在开发工作中,有时我们需要实现一组图片循环滚动的情况。当我们使用 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. Django拾遗--pagination、sitemap、admin、form

    Django拾遗--pagination.sitemap.admin.form pagination 其实这个分页模块的原理就是根据设定的每页条数来分割queryset.查询结果/每页子项数目=页数 ...

  2. Tcp端口以及端口相关协议详解

    http://www.codeweblog.com/tcp%e5%b8%b8%e7%94%a8%e7%ab%af%e5%8f%a3/

  3. Codeforces Round #407 div2 题解【ABCDE】

    Anastasia and pebbles 题意:你有两种框,每个框可以最多装k重量的物品,但是你每个框不能装不一样的物品.现在地面上有n个物品,问你最少多少次,可以把这n个物品全部装回去. 题解:其 ...

  4. oracle case when 用法

    原文:http://www.cnblogs.com/eshizhan/archive/2012/04/06/2435493.html 1. CASE WHEN 表达式有两种形式 --简单Case函数 ...

  5. 外卖ERP管理系统(二)

    京门时代旗下外卖ERP管理系统是一款专注外卖行业的解决方案系统! 系统介绍: 1.外卖erp系统是一款集订单分发.一键派送.实时大屏监控.店铺进销存.仓储管理及数据分析为一体的智能化外卖管理系统.已服 ...

  6. ubuntu代替方案

    你在使用Ubuntu,可是希望桌面体验……来得更眩目一点.虽说你总是可以添加新的桌面背景,或者索性切换桌面,但是你还有这个选择:换成一种全然不同的发行版. 本文就介绍了五个极其出色的Ubuntu替代发 ...

  7. 【Storm】一张图搞定Storm的运行架构

  8. 郑晔谈 Java 开发:新工具、新框架、新思维【转载】【整理】

    原文地址 导语:"我很惊讶地发现,现在许多程序员讨论的内容几乎和我十多年前刚开始做 Java 时几乎完全一样.要知道,我们生存的这个行业号称是变化飞快的.其实,这十几年时间,在开发领域已经有 ...

  9. Android添加全屏启动画面

    有的Android软件需要在启动的时候显示一个启动画面,可以是一张图或者一些设置什么呢,还有一个好处就是,可以趁机在后台加载数据.创建启动画面一般有两种方式:1.建立一个activity,展示启动画面 ...

  10. Python中结巴分词使用手记

    手记实用系列文章: 1 结巴分词和自然语言处理HanLP处理手记 2 Python中文语料批量预处理手记 3 自然语言处理手记 4 Python中调用自然语言处理工具HanLP手记 5 Python中 ...