ios图片轮播效果
ImageCarousel
简单封装的图片轮播器
内存过大由于我加载的图片分辨率较高(4k)
文件目录

使用
初始化自定义view,并提供title和图片数组,设置控制器代理
shufflingView *myView = [[shufflingView alloc]
initWithFrame:CGRectMake(0, 100, [UIScreen mainScreen].bounds.size.width,
230)];
NSArray *picDataArray = @[ @"1", @"2", @"3", @"4", @"5" ];
NSArray *titleDataArray = @[ @"1", @"2", @"3", @"4", @"5" ];
myView.picDataArray = [picDataArray copy];
myView.titleDataArray = [titleDataArray copy];
myView.titleLabelTextColor =
[UIColor colorWithRed:255/255 green:0 blue:0 alpha:1.0];
myView.isAutomaticScroll = YES;
myView.automaticScrollDelay = 2;
myView.carouselViewStyle = ImageCarouselStyleBoth;
myView.pageIndicatorTintColor = [UIColor colorWithRed:255/255 green:0/255 blue:255/255 alpha:1.0];
myView.pageControlCurrentColor =
[UIColor colorWithRed:0/255 green:255/255 blue:255/255 alpha:1.0];
myView.delegate = self;
myView.picDataArray = [picDataArray copy];
[self.view addSubview:myView];
自定义view
typedef NS_ENUM(NSInteger, ImageCarouselStyleType) {
ImageCarouselStyleNone,
ImageCarouselStyleTitle,
ImageCarouselStylePageControl,
ImageCarouselStyleBoth
};
@protocol CarouselViewDelegate <NSObject>
@optional
- (void)didClick:(NSInteger)index;
@end
@interface shufflingView : UIView
{
float _automaticScrollDelay;
ImageCarouselStyleType _carouselViewStyle;
}
@property(nonatomic, strong) NSArray *picDataArray;
@property(nonatomic, strong) NSArray *titleDataArray;
@property(nonatomic, weak) UIFont *titleLabelTextFont;
@property(nonatomic, weak) UIColor *titleLabelTextColor;
@property(nonatomic, weak) UIColor *pageIndicatorTintColor;
@property(nonatomic, weak) UIColor *pageControlCurrentColor;
// 是否自动滚动
@property(nonatomic, assign) BOOL isAutomaticScroll;
// 滚动时间间隔
@property(nonatomic, assign) float automaticScrollDelay;
/// 枚举
@property(nonatomic, assign) ImageCarouselStyleType carouselViewStyle;
@property(nonatomic, weak) id<CarouselViewDelegate> delegate;
采用一个scrollivew和三个imageview
// 默认滚动到中间imageview
[_mainScrollView setContentOffset:CGPointMake(self.bounds.size.width, 0)
animated:NO];
// 添加三个imageView
_leftImageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, KViewW, KViewH)];
_rightImageView = [[UIImageView alloc]initWithFrame:CGRectMake(2*KViewW, 0, KViewW, KViewH)];
_centerImageView = [[UIImageView alloc]initWithFrame:CGRectMake(KViewW, 0, KViewW, KViewH)];
_centerImageView.userInteractionEnabled = YES;
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]
initWithTarget:self
action:@selector(scrollViewClick:)];
[_centerImageView addGestureRecognizer:tap];
[self.mainScrollView addSubview:_leftImageView];
[self.mainScrollView addSubview:_rightImageView];
[self.mainScrollView addSubview:_centerImageView];
核心代码
根据scrollview的偏移量来计算当前位于的imageView。然后重置左右两个image的图片
#pragma mark - 无限滚动核心
- (void)reloadImageViews {
// 获取当前offset
CGPoint scrollViewOffset = [_mainScrollView contentOffset];
// 如果当前位于centerImageView
if (scrollViewOffset.x == 2 * _mainScrollView.bounds.size.width) {
if (_currentImageIndex == kImageCount - 1) {
_currentImageIndex = 0;
}else {
_currentImageIndex = (_currentImageIndex +1) % kImageCount;
}
} else if (scrollViewOffset.x == 0) {
if (_currentImageIndex == 0) {
_currentImageIndex = kImageCount - 1;
}else {
_currentImageIndex = (_currentImageIndex -1) % kImageCount;
}
}
_centerImageView.image =
[UIImage imageNamed:_picDataArray[self.currentImageIndex]];
// 重新设置左右图片
_leftImageView.image =
[UIImage imageNamed:_picDataArray[self.leftImageIndex]];
_rightImageView.image =
[UIImage imageNamed:_picDataArray[self.rightImageIndex]];
_titleLabel.text = _titleDataArray[self.currentImageIndex];
_pageControl.currentPage = self.currentImageIndex;
}
滚动过程中调整pageControl
// MARK: - 滚动过程中
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
CGPoint scrollViewOffset = scrollView.contentOffset;
if (scrollViewOffset.x > 1.5 * _mainScrollView.bounds.size.width) {
_pageControl.currentPage = self.rightImageIndex;
_titleLabel.text = _titleDataArray[self.rightImageIndex];
} else if (scrollViewOffset.x < 0.5 * _mainScrollView.bounds.size.width) {
_pageControl.currentPage = self.leftImageIndex;
_titleLabel.text = _titleDataArray[self.leftImageIndex];
}
else {
_pageControl.currentPage = self.currentImageIndex;
_titleLabel.text = _titleDataArray[self.currentImageIndex];
}
}
效果
ios图片轮播效果
注:本文著作权归作者,由demo大师代发,拒绝转载,转载需要作者授权
ios图片轮播效果的更多相关文章
- jQuery个性化图片轮播效果
jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...
- iOS 图片轮播图(自动滚动)
iOS 图片轮播图(自动滚动) #import "DDViewController.h" #define DDImageCount 5 @interface DDViewContr ...
- IOS 图片轮播实现原理 (三图)
IOS 图片轮播实现原理的一种 图片轮播所要实现的是在一个显示区域内通过滑动来展示不同的图片. 当图片较少时我们可以采用在滚动视图上添加很多张图片来实现. 但是如果图片数量较多时,一次性加载过多图片会 ...
- CSS3图片轮播效果
原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且 ...
- js实现淘宝首页图片轮播效果
原文:http://ce.sysu.edu.cn/hope2008/Education/ShowArticle.asp?ArticleID=10585 <!DOCTYPE html> &l ...
- 超实用的JavaScript代码段 Item3 --图片轮播效果
图片轮播效果 图片尺寸 统一设置成:490*170px; 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒 ...
- JQ 实现轮播图(3D旋转图片轮播效果)
轮播图效果如下: 代码: <!DOCTYPE html> <html xmlns="/www.w3.org/1999/xhtml"> <head> ...
- axure 动态面板实现图片轮播效果(淘宝)
淘宝中经常可以看到店铺中的图片轮播效果,本经验将通过axure7.0实现 工具/原料 axure7.0 方法/步骤 下载需要轮播的图片 将图片引入至axure中,将引入的第一张图片转为 ...
- WPF3D图片轮播效果
原文:WPF3D图片轮播效果 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/m0_37591671/article/details/68059169 ...
随机推荐
- linux+win7双系统重装win7修复grub的办法
本人是debian+win7的双系统, 下面介绍下重装win7的整个过程以及遇到的一些小问题,在查阅相关博客和朋友的帮助下成功修复, 记录下以便以后有不时之需, 也希望能帮助到遇到同样问题的朋友! 首 ...
- <松本行弘的程序世界> 读书笔记
第一章 编程语言不是从安全性的角度考虑以减少程序员犯错误,而是在程序员自己负责的前提下为他提供最大限度发挥能力的灵活性. 第二章 根据对象的不同类型而进行适当的处理,就是多态性的基本内容.根据数据类型 ...
- [centos6.5]添加eclipse快捷方式
[Desktop Entry] Version=buzhidao Encoding=UTF-8 Name=eclipse Comment=eclipse-for-php Exec=/opt/eclip ...
- [ThinkPHP] 从一个表中获得栏目对应的ID,从另一个表获得属于这些栏目的文章
public function index(){ $cate = 1; $query = M('Cate')->field('id')->where(array('id'=>$cat ...
- (21)python Anaconda
1.安装 Anaconda下载镜像 --官网下载太慢 https://mirrors.tuna.tsinghua.edu.cn/help/anaconda/ 下载安装后 2.添加第三方源 管 ...
- Codeforces Round 253 (Div. 2)
layout: post title: Codeforces Round 253 (Div. 2) author: "luowentaoaa" catalog: true tags ...
- Linux命令之install
install [选项] 源文件 目标文件 install [选项] 源文件 目录 install [选项] –t 目录 源文件 install [选项] –d 目录 install作用是安装或升级软 ...
- [P2397] yyy loves Maths VI (mode)
Link: P2397 传送门 Solution: (1)在这里记录一个小小的黑科技:摩尔投票法 (线性时间复杂度,$O(1)$的空间复杂度求众数) 从数组的第一个元素开始,假定它代表的群体的人数是最 ...
- 【计算几何】【状压dp】Codeforces Round #226 (Div. 2) D. Bear and Floodlight
读懂题意发现是傻逼状压. 只要会向量旋转,以及直线求交点坐标就行了.(验证了我这俩板子都没毛病) 细节蛮多. #include<cstdio> #include<algorithm& ...
- 【分块】【哈希】bzoj3578 GTY的人类基因组计划2
每个房间用一个集合来维护,具体来说,就是给1-n的数每个数一个long long的hash值,往集合S里insert(i),就是S^=HASH[i]:erase(i),也是S^=HASH[i]. 用m ...