iosbanner_iOS广告Banner，使用三个ImgView无限循环轮播

最新推荐文章于 2024-06-19 00:10:20 发布
最新推荐文章于 2024-06-19 00:10:20 发布
阅读量273 收藏
点赞数
文章标签： iosbanner
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39519072/article/details/112035020
版权

图片加载使用 SDWebImage 第三方库。

WTCycleRollView.h

#import @interface WTCycleRollView : UIView

@property (nonatomic, assign) NSTimeInterval rollTimeInterval;

/**

返回 WTCycleRollView 对象

@param frame 位置尺寸

@return WTCycleRollView 对象

*/

+ (instancetype)cycleRollViewWithFrame:(CGRect)frame;

/**

设置图片源、是否自动滚动、点击图片的回调

@param imgUrls 图片源

@param autoCycleRoll 是否自动滚动

@param clickImgBlock 点击图片的回调

*/

- (void)setImgUrls:(NSArray *)imgUrls autoCycleRoll:(BOOL)autoCycleRoll clickImgBlock:(void(^)(NSInteger selectedIndex))clickImgBlock;

/** 暂停自动滚动 */

- (void)pauseCycleRoll;

/** 开始自动滚动【在暂停的状态下】 */

- (void)startCycleRoll;

@end

WTCycleRollView.m

#import "WTCycleRollView.h"

#import "UIImageView+WebCache.h"

typedef void(^ClickImgBlock) (NSInteger);

@interface WTCycleRollView () @property (nonatomic, strong) UIScrollView *scrollView;

@property (nonatomic, strong) UIPageControl *pageControl;

@property (nonatomic, strong) UIImageView *leftImgView;

@property (nonatomic, strong) UIImageView *middleImgView;

@property (nonatomic, strong) UIImageView *rightImgView;

/** 图片源 */

@property (nonatomic, strong) NSArray *imgUrls;

/** 当前显示的图片的 Index */

@property (nonatomic, assign) NSInteger showIndex;

/** 点击图片的回调 Block */

@property (nonatomic, strong) ClickImgBlock clickImgBlock;

/** 自动滚动的计时器 */

@property (nonatomic, strong) NSTimer *cycleRollTimer;

/** 是否手动滑动 */

@property (nonatomic, assign) BOOL manual;

@end

@implementation WTCycleRollView

/** 默认循环滚动的时间间隔(s) */

static NSTimeInterval const DefaultRollTimeInterval = 4;

#pragma mark - 懒加载

- (UIImageView *)leftImgView {

if (!_leftImgView) {

_leftImgView = [[UIImageView alloc] initWithFrame:self.bounds];

}

return _leftImgView;

}

- (UIImageView *)middleImgView {

if (!_middleImgView) {

_middleImgView = [[UIImageView alloc] initWithFrame:CGRectMake(CGRectGetWidth(self.bounds), 0, CGRectGetWidth(self.bounds), CGRectGetHeight(self.bounds))];

/** 为中间正在显示的 ImgView 添加点击事件 */

UITapGestureRecognizer *tapGr = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(clickImgView)];

[_middleImgView setUserInteractionEnabled:YES];

[_middleImgView addGestureRecognizer:tapGr];

}

return _middleImgView;

}

- (UIImageView *)rightImgView {

if (!_rightImgView) {

_rightImgView = [[UIImageView alloc] initWithFrame:CGRectMake(CGRectGetWidth(self.bounds) * 2, 0, CGRectGetWidth(self.bounds), CGRectGetHeight(self.bounds))];

}

return _rightImgView;

}

- (UIScrollView *)scrollView {

if (!_scrollView) {

_scrollView = [[UIScrollView alloc] initWithFrame:self.bounds];

_scrollView.delegate = self;

_scrollView.showsHorizontalScrollIndicator = NO;

_scrollView.pagingEnabled = YES;

}

return _scrollView;

}

- (UIPageControl *)pageControl {

if (!_pageControl) {

_pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, CGRectGetHeight(self.bounds) - 20, CGRectGetWidth(self.bounds), 20)];

_pageControl.layer.shadowOpacity = 0.3;

_pageControl.layer.shadowOffset = CGSizeMake(0, 0);

}

return _pageControl;

}

#pragma mark - 初始化

- (instancetype)initWithFrame:(CGRect)frame {

if (self = [super initWithFrame:frame]) {

[self addSubview:self.scrollView];

[_scrollView addSubview:self.leftImgView];

[_scrollView addSubview:self.middleImgView];

[_scrollView addSubview:self.rightImgView];

[self addSubview:self.pageControl];

}

return self;

}

#pragma mark - 类方法 返回 WTCycleRollView

+ (instancetype)cycleRollViewWithFrame:(CGRect)frame {

return [[self alloc] initWithFrame:frame];

}

#pragma mark - 设置图片显示，自动滚动

- (void)setImgUrls:(NSArray *)imgUrls autoCycleRoll:(BOOL)autoCycleRoll clickImgBlock:(void (^)(NSInteger))clickImgBlock {

_clickImgBlock = clickImgBlock;

_imgUrls = imgUrls;

_pageControl.numberOfPages = [imgUrls count];

_pageControl.currentPage = 0;

if ([_imgUrls count] > 1) {

[_leftImgView sd_setImageWithURL:[NSURL URLWithString:[imgUrls lastObject]]];

[_middleImgView sd_setImageWithURL:[NSURL URLWithString:[imgUrls firstObject]]];

[_rightImgView sd_setImageWithURL:[NSURL URLWithString:[imgUrls objectAtIndex:1]]];

_scrollView.contentSize = CGSizeMake(CGRectGetWidth(self.bounds) * 3, 0);

[_scrollView setContentOffset:CGPointMake(CGRectGetWidth(self.bounds), 0)];

if (autoCycleRoll) {

[self stopTimer];

_cycleRollTimer = [NSTimer scheduledTimerWithTimeInterval:DefaultRollTimeInterval target:self selector:@selector(cycleRoll) userInfo:nil repeats:YES];

} else {

[self stopTimer];

}

} else {

_scrollView.contentSize = CGSizeMake(CGRectGetWidth(self.bounds), 0);

[_leftImgView removeFromSuperview];

[_rightImgView removeFromSuperview];

if ([imgUrls count]) {

[_middleImgView sd_setImageWithURL:[NSURL URLWithString:[imgUrls firstObject]]];

_middleImgView.frame = self.bounds;

}

}

}

#pragma mark - 自动滚动的事件

- (void)cycleRoll {

// 当手动滚动的时候，跳过此次循环

if (_manual) {

_manual = NO;

} else {

[_scrollView setContentOffset:CGPointMake(CGRectGetWidth(self.bounds) * 2, 0) animated:YES];

}

}

- (void)clickImgView {

!_clickImgBlock ? : _clickImgBlock(_showIndex);

}

#pragma mark - UIScrollView Delegate

/** ScrollView 滑动减速停止回调【这里根据 ScrollView 的偏移量来判断是向左滑还是向右滑】 */

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {

if ([_imgUrls count]) {

CGFloat offsetX = scrollView.contentOffset.x;

if (offsetX <= 0) {

// 向右滑，即将显示上一张图片(若当前显示的是第一张，则上一张为最后一张)

self.showIndex = (_showIndex + [_imgUrls count] - 1) % [_imgUrls count];

} else if (offsetX >= CGRectGetWidth(self.bounds) * 2) {

// 向右滑，即将显示下一张图片(若当前显示的是最后一张，则下一张为第一张)

self.showIndex = (_showIndex + 1) % [_imgUrls count];

}

}

}

/** 自动滑动【即代码设置的滚动(setContentOffset:animated:)】,不会直接调用上述方法(滑动减速停止回调),但会调用此方法,在此方法再调用上述方法便可 */

- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView {

[self scrollViewDidEndDecelerating:_scrollView];

}

/** 手动滑动手指触摸屏幕的回调，暂停计时器 */

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {

[self pauseCycleRoll];

}

/** 手动滑动手指离开屏幕的回调，开启计时器 */

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {

_manual = YES; // 这里开启计时器会立即调用循环滚动的方法，用户体验不好，所以设置此参数，让其跳过这次循环滚动事件

[self startCycleRoll];

}

/** 根据 ScrollView 偏移量设置 PageControl 的当前页 */

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {

if ([_imgUrls count]) {

CGFloat offsetX = scrollView.contentOffset.x;

if (offsetX <= CGRectGetWidth(self.bounds) * 0.5) {

_pageControl.currentPage = (_showIndex + [_imgUrls count] - 1) % [_imgUrls count];

} else if (offsetX >= CGRectGetWidth(self.bounds) * 1.5) {

_pageControl.currentPage = (_showIndex + 1) % [_imgUrls count];

} else {

_pageControl.currentPage = _showIndex;

}

}

}

#pragma mark - 设置当前显示的图片

- (void)setShowIndex:(NSInteger)showIndex {

_showIndex = showIndex;

// 不管向左滑还是向右滑，这里立即将将要显示的图片展示在中间的 ImgView 上，然后马上将 ScrollView 偏移量设置到显示中间的 ImgView

// 由于代码执行及屏幕显示渲染非常快，肉眼几乎看不出，所以这样就达到了效果

[_leftImgView sd_setImageWithURL:[NSURL URLWithString:_imgUrls[(_showIndex + [_imgUrls count] - 1) % [_imgUrls count]]]];

[_middleImgView sd_setImageWithURL:[NSURL URLWithString:_imgUrls[showIndex]]];

[_rightImgView sd_setImageWithURL:[NSURL URLWithString:_imgUrls[(showIndex + 1) % [_imgUrls count]]]];

// 切记，这里设置 ScrollView 偏移量不能用动画

[_scrollView setContentOffset:CGPointMake(CGRectGetWidth(self.bounds), 0)];

}

#pragma mark - 自动滚动时，计时器的暂停与启动

/** 暂停计时器 */

- (void)pauseCycleRoll {

if (_cycleRollTimer) {

[_cycleRollTimer setFireDate:[NSDate distantFuture]];

}

}

/** 启动定时器【在计时器暂停状态下】 */

- (void)startCycleRoll {

if (_cycleRollTimer) {

[_cycleRollTimer setFireDate:[NSDate distantPast]];

}

}

#pragma mark - 停止计时器，并释放

- (void)stopTimer {

if (_cycleRollTimer) {

[_cycleRollTimer invalidate];

_cycleRollTimer = nil;

}

}

#pragma mark - WTCycleRollView 释放的时候 停止计时器，并释放，否则会造成内存泄漏

- (void)dealloc {

[self stopTimer];

}

@end

weixin_39519072
关注
Swift 无限轮播图
ixialuo的博客
07-07 1338
ICycleView ICycleView是一个基于UICollectionView实现的轻量级无限轮播图 Content Features Requirements CocoaPods Usage 默认滚动视图 自定义图片宽度和指示器的位置和颜色 自定义Cell-纯代码和Xib创建都支持 Implementation 实现原理 主要代码 UICollectionView代理...
iosbanner_iOS实现自动循环播放的banner实例详解
weixin_28795271的博客
12-30 530
前言对于banner轮播图，相信大家都会经常用到。自动循环播放的banner是很常见的UI组件。如何实现呢？下面就来给大家详细介绍下，话不多说了，下面来一起学习学习吧。1.实现思路1.横向滚动的banner。UIScrollViw+UIImageView.UICollectionView+UICollectionViewCell.前者需要自己做重用UIImageView，后者可以直接重用UICol...
ios-无限循环滚动banner.zip
07-11
1.本地图片、网络图片，都可以实现无限滚动； 2.使用SDWebImage进行加载网络图片；
「iOS」UI——无限轮播图实现与UIPageControl运用
最新发布
aa2002aa的博客
06-19 1100
通过UIScrollView和UIPageControl，NSTimer来实现无限轮播图
IOS无限自动循环滚动banner(源码)
热门推荐
精灵的专栏
02-11 1万+
目前有很多APP都开始使用一些滚动banner，我自己也做了一个，部分算法没有深思， 只是为了实现功能，毕竟只是几个小时的作品。 滚动做了2种为水平和垂直，自动滚动间隔可设，圆角可设，page位置可设(没做垂直方向的)， 关闭btn可设，图片下载是使用SDWebImage的2.0版本，感觉这个旧版本还是比较稳定的， 并增加了gif支持，如图： 编译环境：Xcode5 支
iOS banner轮播
Chuck Chan的专栏
04-27 1294
一、背景 电商App一般都会存在图片轮播的场景，而iOS没有轮播UI组件，因此需要自定义一个UI组件以适应项目需要。 二、框架 整体框架是UIScrollView作为父视图，在视图中添加多个子视图，同时设置好子视图的frame，再设置滚动视图的内容宽度，让UISCrollView能够左右滑动。接下来添加一个定时器，按照设定的播放时间间隔重复触发，循环播放子UIView即可。 三、定义属性 将对外暴...
一种无限循环轮播图的实现原理
weixin_30655569的博客
07-25 856
本文来自 http://www.jianshu.com/p/ef03ec7f23b2 轮播实现步骤 接下来，笔者将从各方面逐一分析 层级结构 最底层是一个UIView，上面有一个UIScrollView以及UIPageControl，scrollView上有两个UIImageView，imageView宽高 = scrollview宽高 = view宽高 轮播原理...
iosbanner_IOS--常用Banner循环滚动实现
weixin_35067439的博客
01-12 453
实现步骤：1.先整合数据源//循环滚动，增加尾部和首部的数据源用以实现循环的视觉错觉//如原@[a,b,c]，整合成@[c,a,b,c,a]self.lastX = 0;NSMutableArray *tmpArray = [NSMutableArray arrayWithArray:URLArray];[tmpArray addObject:[URLArray firstObject]];[tm...
iOS实现无限循环图片轮播器的封装
09-02
在iOS开发中，实现一个无限循环的图片轮播器是非常常见的需求，特别是在广告展示、产品展示等场景。本文将详细讲解如何在iOS中封装一个无限循环图片轮播器。 首先，我们需要理解实现无限循环的关键在于巧妙地利用...
IOS图片无限轮播器的实现原理
09-02
在iOS开发中，图片无限轮播器是一种常见的组件，常用于广告展示、商品推荐等场景。下面我们将详细探讨iOS图片无限轮播器的实现原理。 首先，实现思路的关键在于利用UICollectionView，一个轻量级的视图组件，它可以...
ios之实现自动无限循环滚动视图(1)
小姚的博客
07-31 6160
多张图片实现无限循环滚动的轮播图
BannerLoop:横幅循环---ios的无限自动滚动循环效果
06-04
横幅循环视图 ios的无限自动滚动循环效果 易于使用 UIImage *im1=[UIImage imageNamed:@"1.jpg"]; UIImage *im2=[UIImage imageNamed:@"2.jpg"]; UIImage *im3=[UIImage imageNamed:@"3.jpg"]; BannerLoopView *loopView = [[BannerLoopView alloc]initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 150) items: @[im1,im2,im3]]; loopView.delegate = self; [self.view addSubview:loopView]; 使用 CocoaPods 安装的方式 pod 'B
iOS 无限滚动 广告banner
02-17
描述参考http://www.cnblogs.com/n1ckyxu/p/5078566.html
iOS图片轮播
05-24
iOS图片轮播，可以独立运行，里面的注释很全，相对简单，适合入门。
IOS轮播图合集（视频+图片）
02-16
IOS轮播图合集（视频+图片）
iOS 自动轮播图片
09-30
使用OC编写的自动轮播图片效果封装类，可设置换图时间、图片数量、支持手动滑动、图片点击事件
iOS第三方框架二维码生成与扫描
08-26
iOS第三方框架二维码生成与扫描是指在iOS平台上使用第三方框架来生成和扫描二维码。下面将详细介绍相关知识点： 一、iOS第三方框架二维码生成 iOS第三方框架二维码生成是指使用第三方框架来生成二维码。常用的第三...
iosbanner_iOS无限轮播Banner案例与原理分析
weixin_32300003的博客
01-12 475
我们经常会遇到需要做无限轮播Banner的需求，仔细分析一下，可以拆分为两个需求：可以自动滚动到下一页不管是向前或者向后，永远有下一页需求一：自动滚动原理：通过定时任务来实现自动滚动实现方式有很多种，例如GCD，NSTimer等，具体实现方式这里不展开说明了，简单写几个例子：GCD的使用// GCD实现定时任务dispatch_source_t timer;timer = dispatch_sou...
自动无限循环UIScrollView原理
weixin_30347335的博客
11-02 127
无限循环：我们都知道UIScrollView有一种很流畅的切换效果，结合UIPageControl的辅助展示效果，就可以完成一个很不错的产品介绍功能页面。那么像一些购物app中，商品展示页面无限滚动的效果是如何实现的呢？方法1：前后+1方法，这也最常见的一种做法。假如我们有四张需要展示的图片，我们创建了一个数组来保存图片名字，此时数组中保存的是按顺序的1.png，2.png，3.png，4.png...
使用AVFoundation深度定制iOS照片拍摄功能
在代码示例中，作者还提到了两个UI元素：focusCursor（聚焦按钮）和imgView（展示拍摄照片）。这表明可能还实现了手动对焦和查看已拍摄照片的功能。 在viewDidLoad方法中，除了设置基本的界面属性，还会创建这些UI...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值