利用UIScrollView实现循环轮播图片的功能

最新推荐文章于 2022-08-25 15:20:34 发布
最新推荐文章于 2022-08-25 15:20:34 发布
阅读量202 收藏
点赞数
分类专栏： iOS开发 文章标签： iOS OC Xcode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013178017/article/details/80278130
版权

1、使用方法：

NSMutableArray *listArray = @[].mutableCopy;

    for (NSInteger i = 0; i < 5; i++) {

        ZGCyclePictureModel *model = [[ZGCyclePictureModel alloc] init];

        model.type = ZGCyclePictureTypeLocal;

        model.image = [UIImage imageNamed:[NSString stringWithFormat:@"CircularBrowsePicture-0%ld.JPG", i + 1]];

        [listArray addObject:model];

    }

    

    __weak typeof(self) weakSelf = self;

    self.cycleView = [ZGCycleScrollView showPictures:listArray onSelect:^(ZGCyclePictureModel *model, NSInteger index) {

        NSLog(@"点击的第%@张图片", @(index));

    } didScroll:^(ZGCyclePictureModel *model, NSInteger index) {

        weakSelf.title = [NSString stringWithFormat:@"第%@张图片", @(index)];

    }];

    [self.contentView addSubview:self.cycleView];

    

    [self.cycleView mas_makeConstraints:^(MASConstraintMaker *make) {

        make.top.mas_equalTo(70);

        make.left.right.mas_equalTo(0);

        make.height.mas_equalTo(self.cycleView.mas_width).multipliedBy(0.75);

    }];


2、利用UIScrollView实现循环轮播图片的功能，以下为.h和.m文件：

//

//  ZGCycleScrollView.h

//  SummaryDemo

//

//  Created by zhaogang on 2018/4/28.

//


#import <UIKit/UIKit.h>

#import "ZGCyclePictureModel.h"


typedef void (^ZGCycleScrollViewSelectHandler)(ZGCyclePictureModel *model, NSInteger index);

typedef void (^ZGCycleScrollViewDidScrollHandler)(ZGCyclePictureModel *model, NSInteger index);


@interface ZGCycleScrollView : UIView


+ (ZGCycleScrollView *)showPictures:(NSArray<ZGCyclePictureModel *> *)pictures onSelect:(ZGCycleScrollViewSelectHandler)select didScroll:(ZGCycleScrollViewDidScrollHandler)scroll;


- (void)closeTimer;


@end



//

//  ZGCycleScrollView.m

//  SummaryDemo

//

//  Created by zhaogang on 2018/4/28.

//


#import "ZGCycleScrollView.h"

#import "Masonry.h"

#import "SDWebImageManager.h"

#import "UIView+WebCache.h"

#import "UIImageView+WebCache.h"

#import "UIView+ZGTapGesture.h"


@interface ZGCycleScrollView()<UIScrollViewDelegate>


@property (nonatomic, strong) UIScrollView     *scrollView;

@property (nonatomic, strong) UIPageControl    *pagecontrol;

@property (nonatomic, strong) NSTimer          *showTimer;


@property (nonatomic, strong) UIImageView      *leftImageView;

@property (nonatomic, strong) UIImageView      *centerImageView;

@property (nonatomic, strong) UIImageView      *rightImageView;


@property (nonatomic, strong) NSMutableArray   *pictures;

@property (nonatomic, assign) NSInteger        currentIndex;


@property (nonatomic, copy) ZGCycleScrollViewSelectHandler selectHandler;

@property (nonatomic, copy) ZGCycleScrollViewDidScrollHandler didScrollHandler;


@end


@implementation ZGCycleScrollView


+ (ZGCycleScrollView *)showPictures:(NSArray<ZGCyclePictureModel *> *)pictures onSelect:(ZGCycleScrollViewSelectHandler)select didScroll:(ZGCycleScrollViewDidScrollHandler)scroll

{

    ZGCycleScrollView *view = [[ZGCycleScrollView alloc] initWithPictures:pictures onSelect:select didScroll:scroll];

    return view;

}


- (instancetype)initWithPictures:(NSArray<ZGCyclePictureModel *> *)pictures onSelect:(ZGCycleScrollViewSelectHandler)select didScroll:(ZGCycleScrollViewDidScrollHandler)scroll

{

    self = [super init];

    if (self) {

        self.selectHandler = select;

        self.didScrollHandler = scroll;

        

        [self creatUI];

        

        self.pictures = pictures.mutableCopy;

    }

    return self;

}


- (void)creatUI

{

    self.scrollView = [[UIScrollView alloc] init];

    self.scrollView.delegate = self;

    self.scrollView.scrollEnabled = YES;

    self.scrollView.pagingEnabled = YES;

    self.scrollView.showsVerticalScrollIndicator = NO;

    self.scrollView.showsHorizontalScrollIndicator = NO;

    self.scrollView.bounces = NO; // 防止滑动快的时候右侧出现白的

    [self addSubview:self.scrollView];

    [self.scrollView mas_makeConstraints:^(MASConstraintMaker *make) {

        

        make.top.left.right.bottom.equalTo(self);

    }];

    

    self.leftImageView = [[UIImageView alloc] init];

    [self.leftImageView addTapTarget:self action:@selector(imageViewClicked:)];

    [self.scrollView addSubview:self.leftImageView];

    [self.leftImageView mas_makeConstraints:^(MASConstraintMaker *make) {

        make.top.left.mas_equalTo(0);

        make.width.mas_equalTo(self.mas_width);

        make.height.mas_equalTo(self.mas_height);

    }];

    

    self.centerImageView = [[UIImageView alloc] init];

    [self.centerImageView addTapTarget:self action:@selector(imageViewClicked:)];

    [self.scrollView addSubview:self.centerImageView];

    [self.centerImageView mas_makeConstraints:^(MASConstraintMaker *make) {

        make.top.mas_equalTo(0);

        make.left.mas_equalTo(self.leftImageView.mas_right);

        make.width.mas_equalTo(self.mas_width);

        make.height.mas_equalTo(self.mas_height);

    }];

    

    self.rightImageView = [[UIImageView alloc] init];

    [self.rightImageView addTapTarget:self action:@selector(imageViewClicked:)];

    [self.scrollView addSubview:self.rightImageView];

    [self.rightImageView mas_makeConstraints:^(MASConstraintMaker *make) {

        make.top.mas_equalTo(0);

        make.left.mas_equalTo(self.centerImageView.mas_right);

        make.width.mas_equalTo(self.mas_width).priorityHigh();

        make.right.mas_equalTo(0);

        make.height.mas_equalTo(self.mas_height);

    }];

    

    //创建分页的标志（小红点）

    self.pagecontrol = [[UIPageControl alloc] init];

    self.pagecontrol.pageIndicatorTintColor = [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:0.7];

    self.pagecontrol.currentPageIndicatorTintColor = [UIColor redColor];

    self.pagecontrol.backgroundColor = [UIColor clearColor];

    [self addSubview:self.pagecontrol];

    [self.pagecontrol mas_makeConstraints:^(MASConstraintMaker *make) {

        make.left.right.mas_equalTo(0);

        make.bottom.mas_equalTo(-8);

        make.height.mas_equalTo(20);

    }];

}


#pragma mark - 设置展示的图片的数组

- (void)setPictures:(NSMutableArray *)pictures

{

    _pictures = pictures;

    

    if (_pictures.count == 0) {

        [self closeTimer];

        return;

    }

    

    self.currentIndex = 0; // 当前的位置

    self.pagecontrol.numberOfPages = _pictures.count; //总分页数量

    

    [self updateImages];

    [self openTimer];

}


- (void)layoutSubviews

{

    [super layoutSubviews];

    self.scrollView.contentOffset = CGPointMake(self.frame.size.width, 0);//偏移

    self.scrollView.contentSize = CGSizeMake(self.frame.size.width*3, self.frame.size.height);//总的页数

}


- (void)imageViewClicked:(UITapGestureRecognizer *)tap

{

    NSInteger index = 0;

    UIImageView *imageView = (UIImageView *)tap.view;

    if (imageView == self.leftImageView) {

        index = (self.currentIndex - 1 + _pictures.count) % _pictures.count;

    }

    else if (imageView == self.centerImageView) {

        index = self.currentIndex;

    }

    else {

        index = (self.currentIndex + 1) % _pictures.count;

    }

    

    if (self.selectHandler) {

        self.selectHandler(_pictures[index], index);

    }

}


#pragma mark - 定时器

- (void)openTimer

{

    [self closeTimer];

    self.showTimer = [NSTimer scheduledTimerWithTimeInterval:5.0 target:self selector:@selector(timerAction:) userInfo:nil repeats:YES];

    [[NSRunLoop currentRunLoop] addTimer:self.showTimer forMode:NSRunLoopCommonModes];

}


- (void)closeTimer

{

    [self.showTimer invalidate];

    self.showTimer = nil;

}


- (void)timerAction:(int)counts

{

    self.currentIndex = (self.currentIndex + 1) % _pictures.count;

    [self updateImages];

}


#pragma mark - UIScrollViewDelegate

- (void)scrollViewWillBeginDragging:(UIScrollView *)scroll

{

    // 开始拖拽 （防止滑到中间的时候过一会儿自动移动到下一张）

    [self closeTimer];

}


- (void)scrollViewDidEndDecelerating:(UIScrollView *)scroll

{

    CGPoint offset = [self.scrollView contentOffset];

    if (offset.x > self.scrollView.frame.size.width) { //向右滑动

        self.currentIndex = (self.currentIndex + 1) % _pictures.count;

    }

    else if(offset.x < self.scrollView.frame.size.width){ //向左滑动

        self.currentIndex = (self.currentIndex + _pictures.count - 1) % _pictures.count;

    }

    

    [self updateImages];

    

    [self openTimer];

}


- (void)updateImages

{

    ZGCyclePictureModel *leftModel = _pictures[(self.currentIndex - 1 + _pictures.count) % _pictures.count];

    ZGCyclePictureModel *centerModel = _pictures[self.currentIndex];

    ZGCyclePictureModel *rightModel = _pictures[(self.currentIndex + 1) % _pictures.count];

    

    [self setImageWithModel:leftModel imageView:self.leftImageView];

    [self setImageWithModel:centerModel imageView:self.centerImageView];

    [self setImageWithModel:rightModel imageView:self.rightImageView];

    

    [self.scrollView setContentOffset:CGPointMake(self.scrollView.frame.size.width, 0) animated:NO];

    

    self.pagecontrol.currentPage = self.currentIndex;

    

    if (self.didScrollHandler) {

        self.didScrollHandler(_pictures[self.currentIndex], self.currentIndex);

    }

}


- (void)setImageWithModel:(ZGCyclePictureModel *)model imageView:(UIImageView *)imageView

{

    if (model.type == ZGCyclePictureTypeLocal) {

        imageView.image = model.image;

    }

    else {

        imageView.sd_imageTransition = SDWebImageTransition.fadeTransition;

        [imageView sd_setShowActivityIndicatorView:YES];

        [imageView sd_setIndicatorStyle:UIActivityIndicatorViewStyleGray];

        [imageView sd_setImageWithURL:model.imageUrl placeholderImage:[UIImage imageNamed:@"animation.png"]];

    }

}


- (void)dealloc

{

    

}


@end


3、ZGCyclePictureModel的内容：

//

//  ZGCyclePictureModel.h

//  SummaryDemo

//

//  Created by zhaogang on 2018/4/28.

//


#import <Foundation/Foundation.h>

#import <UIKit/UIKit.h>


typedef NS_ENUM(NSInteger, ZGCyclePictureType) {

    ZGCyclePictureTypeUrl = 1,

    ZGCyclePictureTypeLocal = 2,

};


@interface ZGCyclePictureModel : NSObject


@property (nonatomic, assign) ZGCyclePictureType   type;

@property (nonatomic, strong) NSURL                *imageUrl;

@property (nonatomic, strong) UIImage              *image;


@end


//

//  ZGCyclePictureModel.m

//  SummaryDemo

//

//  Created by zhaogang on 2018/4/28.

//


#import "ZGCyclePictureModel.h"


@implementation ZGCyclePictureModel


@end

娜样刚好
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DMCircularScrollView:UIScrollView的InfiniteCircular滚动实现
04-24
DMCircularScrollView :warning: :warning: 重要的提示 以下存储库不再维护。 不会进行任何修复或改进，也不会对项目造成影响。 如果要搜索圆形滚动视图的纯Swift实现，请查看项目。 UIScrollView的无限/圆形滚动实现DMCircularScrollView实现infinite。 在为您的应用创建分页功能时，有时可能需要无限的页面循环。 例如，如果您要显示的是一个很小的照片库，则可能需要在整个场景中滑动，并在到达终点时重新开始。 用户将能够继续在一个方向上继续滑动任意数量以继续观看内容。 DMCircularScrollView允许您创建无尽的分页滚动视图。 Daniele Margutti， //www.danielemargutti.com 捐献 如果您发现此项目有用，请捐款。 没有预期的金额，我也不需要您。 许可证（MIT） 版权所有（c）2012 Da
UGUI UIScrollView 无限滚动
weixin_38813436的博客
06-16 672
平时需要做一些排行榜或者背包之类的功能时，就需要考虑生成物体的数量，因此普遍会用到对象池。 这个组件就是生成一定数量的克隆体放入对象池中，使其循环利用，从而达到无限下拉的功能。 主要函数： public virtual void Init(Action<GameObject, int> callBack, Action<GameObject, int> onClickCallBack) { DisposeAll();
iOS开发UI篇—UIScrollView控件介绍
weixin_30583563的博客
11-02 123
iOS开发UI篇—UIScrollView控件介绍 一、知识点简单介绍 1.UIScrollView控件是什么？ （1）移动设备的屏幕⼤大⼩小是极其有限的,因此直接展⽰示在⽤用户眼前的内容也相当有限 （2）当展⽰示的内容较多,超出⼀一个屏幕时,⽤用户可通过滚动⼿手势来查看屏幕以外的内容 （3）普通的UIView不具备滚动功能,不能显⽰示过多的内容 （4）UIScrollView是一...
UIScrollView基本用法总结
谋天下的博客
08-25 1309
设置UIScrollView的内容在拖动以后，内容距离UIScrollView的内边距（想象成把内容加大了，在内容本身的周围加了一圈“外边距”）。（2）通过拖拽实现监听：将scrollView的delegate关联上View Controller。（2）直接使用动画的方式来对设置contentOffset属性的值。注：（1）使用block动画的方式来对imgView进行滚动。:用来设置scrollView滚动的偏移量。：用来设置scrollView的滚动范围。4、是否显示水平和垂直滚动条。
UGUI滑动条DemoCircularScrollView.zip
01-05
UGUI上面的无限滑动列表
iOS实现UIScrollView的无限轮播功能（原理）详解
08-26
在iOS开发中，实现UIScrollView的无限轮播功能是一项常见的需求，尤其在制作广告展示或新闻轮播组件时。本文将详细解析如何利用UIScrollView及其相关机制来构建一个无限轮播的效果。 首先，我们要理解UIScrollView...
图片轮播UIScrollView循环滚动
04-04
源码IanScrollView，图片轮播UIScrollView无限循环滚动，这是利用UIScrollView实现的图片无限循环滚动效果，在很多应用上都很常见。获取网络图片，图片可以点击，控制是否显示pageControl，控制是否自动滚动，可以...
iOS实现无限循环图片轮播器的封装共4页.pdf.zip
11-22
本文将详细介绍如何实现一个无限循环的图片轮播器，并进行封装，方便在多个界面复用。 1. **无限循环** 无限循环是图片轮播器的关键特性，它意味着当图片滑动到最后一张时，会无缝衔接回第一张，给用户带来连续...
iOS利用UIScrollView实现无限滚动效果
09-01
在iOS开发中，实现无限滚动效果通常用于图片轮播或者类似功能，比如欢迎界面。本文将详细介绍如何利用UIScrollView实现一个简单易懂的无限滚动效果。首先，我们要理解这个“笨办法”的基本思想：通过在实际内容的...
UIScrollView无限轮播功能
05-05
当我们需要实现一个图片无限轮播的功能时，`UIScrollView` 结合 `RunLoop` 的机制就能发挥出强大的作用。下面我们将深入探讨如何利用 `UIScrollView` 和 `RunLoop` 实现图片的无限轮播。 首先，`UIScrollView` 具有...
UIScrollView.unitypackage
06-16
UIScrollView 创建对象池循环利用实现无限滚动 Demo还有具体实现例子Package里都有。根据自己需求也可自行扩展。
swift-CYCircularScrollView用于图片banner或信息公告显示
08-15
CYCircularScrollView 用于图片banner或信息公告显示
UIScrollView实现图片轮播器及其无限循环效果
a86322803的博客
05-22 413
http://blog.csdn.net/xyt8023y/article/details/50116571http://blog.csdn.net/azhang_coder/article/details/53243536http://www.cnblogs.com/wendingding/p/3763527.htmlhttp://blog.csdn.net/qq_27633421/article
uview轮播图
yhd1998的博客
10-18 2832
自定义 弧形滑动条 CricleScrollView
manworld1119的博客
09-20 3112
1.最进要做一个需求==>将listView  与 CricleScrollView关联  ,根据ListView 的滑动来控制CricleScrollView滑动块的位置   CricleScrollView,类似moto ticWatch主界面的 弧形ScrollView.网上关于弧形ScrollView, 网上的资源可以说少之又少.    其实View的绘制并不难,难点在于如何实时的调整
[IOS]通过UIPageControl+UIScrollView实现图片循环轮播
zjjnljt的专栏
04-13 2116
四：关于通过UIPageControl+UIScrollView实现图片循环轮播 网上关于这个功能实在是太多了，虽然很多都是很详细的，但是让人感觉总是一股脑就在那整体来实现，也就是说没有针对这个功能作下具体划分子功能，然后来让人更加明白其原理，所以再参考了很多长篇大论之后，依据个人理解，总结了一下。 关于这个功能，其实可以细分为如下几个小功能： 1.使用UIScrollView实现滑动时图片
iOS使用UIScrollView实现无限循环轮播图
Leemin_ios的博客
08-23 1735
// // ViewController.m // 无限轮播 // // Created by limin on 17/8/23. // Copyright © 2017年 none. All rights reserved. // #import "ViewController.h" @interface ViewController () /* 定时器 */ @property(n
中科曙光ParaStor300s分布式存储整机更换操作手册.docx
最新发布
07-12
中科曙光ParaStor300s分布式存储整机更换操作手册.docx
实现UISCrollView循环滚动
07-16
当滚动到原内容的末尾或开始时，将滚动位置调整到对应的副本位置，以实现循环滚动效果。 5. 可选地，你还可以添加一个定时器，在一定时间间隔内自动滚动UIScrollView，以实现自动循环滚动效果。 这是一个基本的实现...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值