Objective-C实现无限循环轮播器_IOS

先看看效果图:

具体实现代码:

1. 控制器    

//
// AppDelegate.m
// 无限轮播器
//
// Created by zhangmi on 16/5/16.
// Copyright  2016年 Paramount Pictures. All rights reserved.
//
#import "ViewController.h"
#import "SNInfiniteScrollView.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
 [super viewDidLoad];
 // Do any additional setup after loading the view, typically from a nib.

 NSMutableArray * images = [NSMutableArray array];
 for (int i = 0; i < 5; i++) {
  NSString * imageName = [NSString stringWithFormat:@"ad_%02d", i]; //img01
  UIImage * image = [UIImage imageNamed:imageName];
  [images addObject:image];
 }
 UIView * scrollView = [SNInfiniteScrollView scrollViewWithFrame:CGRectMake(0, 20, 414, 200) superView:self.view images:images scrollDirection:ScrollDirectionHorizontal pageIndicatorTintColor:[UIColor lightGrayColor] currentPageIndicatorTintColor:[UIColor orangeColor] imageViewcontentMode:UIViewContentModeScaleAspectFit];

 [self.view addSubview:scrollView];
}

@end

2. 显示内容界面设置

//
// AppDelegate.m
// 无限轮播器
//
// Created by zhangmi on 16/5/16.
// Copyright  2016年 Paramount Pictures. All rights reserved.
//

#import "SNInfiniteScrollView.h"

static int const ImageViewCount = 3;
#define scrollViewWidth self.scrollView.frame.size.width
#define scrollViewHeight self.scrollView.frame.size.height

@interface SNInfiniteScrollView () <UIScrollViewDelegate>

@property(weak, nonatomic) UIScrollView * scrollView;
@property(weak, nonatomic) NSTimer * timer;
/** pageIndex */
@property(nonatomic, assign) NSInteger pageIndex;

@end

@implementation SNInfiniteScrollView

- (void)setImages:(NSArray<UIImage *> *)images {

 _images = images;

 // 设置页码
 self.pageIndex = 0;

 // 设置内容
 [self updateContent];

 // 开始定时器
 [self startTimer];
}

/** 代码创建的时候调用. */
- (instancetype)initWithFrame:(CGRect)frame {
 if (self = [super initWithFrame:frame]) {
  // 滚动视图
  UIScrollView * scrollView = [[UIScrollView alloc] init];

  self.scrollView = scrollView;
  scrollView.delegate = self;
  // scroller属性
  scrollView.showsHorizontalScrollIndicator = NO;
  scrollView.showsVerticalScrollIndicator = NO;
  scrollView.pagingEnabled = YES;
  scrollView.bounces = NO;
  // 添加scrollView
  [self addSubview:scrollView];

  // 图片控件
  for (int i = 0; i < ImageViewCount; i++) {
   UIImageView * imageView = [[UIImageView alloc] init];
   // 图片不变形处理.
   imageView.contentMode = self.imageViewcontentMode;
   [scrollView addSubview:imageView];
  }
 }
 return self;
}
/** 布局 子控件, 只执行一次 */
- (void)layoutSubviews {
 [super layoutSubviews];

 self.scrollView.frame = self.bounds;
 if (self.scrollDirection == ScrollDirectionVertical) {
  self.scrollView.contentSize = CGSizeMake(0, ImageViewCount * self.bounds.size.height);
 } else {
  self.scrollView.contentSize = CGSizeMake(ImageViewCount * self.bounds.size.width, 0);
 }

 for (int i = 0; i < ImageViewCount; i++) {
  UIImageView * imageView = self.scrollView.subviews[i];

  if (self.scrollDirection == ScrollDirectionVertical) {
   imageView.frame = CGRectMake(0, i * self.scrollView.frame.size.height, self.scrollView.frame.size.width, self.scrollView.frame.size.height);
  } else {
   imageView.frame = CGRectMake(i * self.scrollView.frame.size.width, 0, self.scrollView.frame.size.width, self.scrollView.frame.size.height);
  }
 }
 // 设置内容
 [self updateContent];
}
#pragma mark - 内容更新
- (void)updateContent {
 // 设置图片
 for (int i = 0; i < self.scrollView.subviews.count; i++) {

  NSInteger pageIndex = self.pageIndex;
  // 遍历每一个imageView
  UIImageView * imageView = self.scrollView.subviews[i];

  if (i == 0) {
   pageIndex--;
  } else if (i == 2) {
   pageIndex++;
  }

  if (pageIndex < 0) {
   pageIndex = self.images.count - 1;
  } else if (pageIndex >= self.images.count) {
   pageIndex = 0;
  }
  // 图片角标 赋值给 imageView的tag
  imageView.tag = pageIndex;
  imageView.image = self.images[imageView.tag];
 }

 // 设置偏移量在中间 // 不能使用带动画 contentOffset
 if (self.scrollDirection == ScrollDirectionVertical) {
  self.scrollView.contentOffset = CGPointMake(0, scrollViewHeight);
 } else {
  self.scrollView.contentOffset = CGPointMake(scrollViewWidth, 0);
 }
}
#pragma mark - <UIScrollViewDelegate>
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
 // 找出最中间的那个图片控件
 NSInteger page = self.pageIndex;
 CGPoint point = CGPointZero;
 for (int i = 0; i < self.scrollView.subviews.count; i++) {
  UIImageView * imageView = self.scrollView.subviews[i];
  point = [scrollView convertPoint:imageView.frame.origin toView:self.superview];
  //=****** other way ****************** stone ***
  if (self.scrollDirection == ScrollDirectionVertical) {
   if (ABS(point.y - self.frame.origin.y) < 1.0) {
    page = imageView.tag;
   }
  } else {
   if (ABS(point.x - self.frame.origin.x) < 1.0) {
    page = imageView.tag;
   }
  }
 }
 self.pageIndex = page;
 self.pageControl.currentPage = page;

 //拖动结束会调用 [self updateContent];
 //#warning mark - 没有动画正常 , 有动画不动, 一直是原点
 // [self updateContent]; // 没有动画正常 , 有动画不动, 一直是原点
}
/** 开始拖拽 */
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
 // 停止定时器
 [self stopTimer];
}
/** 结束拖拽 */
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
 // 开启定时器
 [self startTimer];
}
/** 减速完毕 */
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
 // 更新内容 , 如果contentOffset 不带动画的话 不走这个方法
 [self updateContent];
}
/** 结束滚动动画 */ // 这是保险的做法吧... 如果contentOffset 不带动画的话 不走这个方法
- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView {
 // 更新内容
 [self updateContent];
}

#pragma mark - 定时器处理
- (void)startTimer {

 NSTimer * timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(next:) userInfo:nil repeats:YES];
 // [[NSRunLoop mainRunLoop] addTimer:timer forMode:NSRunLoopCommonModes];
 [[NSRunLoop currentRunLoop] addTimer:timer forMode:NSRunLoopCommonModes];
 self.timer = timer;
}

- (void)stopTimer {
 [self.timer invalidate];
 self.timer = nil;
}

- (void)next:(NSTimer *)timer {
 if (self.scrollDirection == ScrollDirectionVertical) {
  [self.scrollView setContentOffset:CGPointMake(0, 2 * self.scrollView.frame.size.height) animated:YES];
 } else {
  [self.scrollView setContentOffset:CGPointMake(2 * self.scrollView.frame.size.width, 0) animated:YES];
 }
}
//=****** 简单调用 ****************** stone ***
+ (instancetype)scrollViewWithFrame:(CGRect)frame superView:(UIView *)superView images:(NSArray<UIImage *> *)images scrollDirection:(ScrollDirection)scrollDirection pageIndicatorTintColor:(UIColor *)pageIndicatorTintColor currentPageIndicatorTintColor:(UIColor *)currentPageIndicatorTintColor imageViewcontentMode:(UIViewContentMode)imageViewcontentMode {

 //=****** 添加自定义scrollView ****************** stone ***
 SNInfiniteScrollView * scrollView = [[SNInfiniteScrollView alloc] init];
 scrollView.frame = frame;
 scrollView.imageViewcontentMode = imageViewcontentMode;
 scrollView.scrollDirection = scrollDirection;
 //=****** 添加image ****************** stone ***
 scrollView.images = images;
 //=****** 添加pageControl ****************** stone ***
 UIPageControl * pageControl = [[UIPageControl alloc] init];
 scrollView.pageControl = pageControl;
 pageControl.enabled = NO;
 pageControl.currentPageIndicatorTintColor = currentPageIndicatorTintColor;
 pageControl.pageIndicatorTintColor = pageIndicatorTintColor;
 pageControl.numberOfPages = scrollView.images.count;
 pageControl.bounds = CGRectMake(0, 0, scrollView.bounds.size.width, 44);
 pageControl.center = CGPointMake(scrollView.bounds.size.width * 0.5, scrollView.bounds.size.height * 0.9);
 [scrollView addSubview:pageControl];
 [superView addSubview:scrollView];
 //=************************ stone ***
 return scrollView;
}

@end

以上就是本文的全部内容,希望对大家的学习有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索objective-c
轮播器
objective c 无限循环、ios 轮播图 无限循环、ios 图片轮播无限循环、js 轮播图 无限循环、jquery 轮播 无限循环,以便于您获取更多的相关知识。

时间: 2024-08-30 14:20:57

Objective-C实现无限循环轮播器_IOS的相关文章

Android仿京东淘宝自动无限循环轮播控件思路详解

在App的开发中,很多的时候都需要实现类似京东淘宝一样的自动无限轮播的广告栏,所以就自己写了一个,下面是我自定义控件的思路和过程. 一.自定义控件属性 新建自定义控件SliderLayout继承于RelativeLayout,首先要考虑的就是自定义的控件需要扩展那些属性,把这些属性列出来.在这里是要实现类似于京东淘宝的无限轮播广告栏,那么首先想到的就是轮播的时长.轮播指示器的样式等等.我在这里列举了一些并且结合到了代码中. 1.扩展属性 (1)是否开启自动轮播的功能. (2)指示器的图形样式,一

Android ViewPager实现无限循环轮播广告位Banner效果

现在一些app通常会在头部放一个广告位,底部放置一行小圆圈指示器,指示广告位当前的页码,轮播展示一些图片,这些图片来自于网络.这个广告位banner是典型的android ViewPager实现,但是如果自己实现这样的ViewPager,要解决一系列琐碎的问题,比如: (1)这个广告位ViewPager要支持无限循环轮播,例如,有3张图片,A,B,C,当用户滑到最后C时候再滑就要滑到A,反之亦然. (2)ViewPager要实现自动播放,比如每个若干秒如2秒,自动切换播放到下一张图片. (3)通

IOS图片无限轮播器的实现原理_IOS

首先实现思路:整个collectionView中只有2个cell.中间始终显示第二个cell. 滚动:向前滚动当前cell的脚标为0,向后滚动当前的cell脚标为2.利用当前cell的脚标减去1,得到+1,或者-1,来让图片的索引加1或者减1,实现图片的切换. 声明一个全局变量index来保存图片的索引,用来切换显示在当前cell的图片. 在滚动前先让显示的cell的脚标变为1.代码viewDidLoad中设置 完成一次滚动结束后,代码再设置当前的cell为第二个cell(本质上就是让当前显示的

Android 使用ViewPager自动滚动循环轮播效果_Android

对Android 利用ViewPager实现图片可以左右循环滑动效果,感兴趣的朋友可以直接点击查看内容详情. 主要介绍如何实现ViewPager自动播放,循环滚动的效果及使用.顺便解决ViewPager嵌套(ViewPager inside ViewPager)影响触摸滑动及ViewPager滑动速度设置问题. 先给大家展示下效果图,喜欢的朋友可以下载源码: 1.实现 没有通过ScheduledExecutorService或Timer定期执行某个任务实现,而是简单的通过handler发送消息去

Android 使用ViewPager自动滚动循环轮播效果

对Android 利用ViewPager实现图片可以左右循环滑动效果,感兴趣的朋友可以直接点击查看内容详情. 主要介绍如何实现ViewPager自动播放,循环滚动的效果及使用.顺便解决ViewPager嵌套(ViewPager inside ViewPager)影响触摸滑动及ViewPager滑动速度设置问题. 先给大家展示下效果图,喜欢的朋友可以下载源码: 1.实现 没有通过ScheduledExecutorService或Timer定期执行某个任务实现,而是简单的通过handler发送消息去

js 轮播-一个js轮播器,可以用用但是性能差

问题描述 一个js轮播器,可以用用但是性能差 html------------------------ <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="style/main.cs

教你一步步用jQyery实现轮播器_jquery

实现原理 如图,试想一下,若是将<ul>的width属性值设置的很宽,直到可以装下你所有的图片,而每一个图片又用<li>包着并且设置了左浮动. 那么当我们向左移动ul的时候并且移动的距离为<li>的宽度,第二个<li>不就被移动到了<div>的窗口,这样一来图片不就被一张一张显示出来了吗? 接下来我们在设置<div>的属性overflow:hidden,那么<div>窗口以外的图片不显示,只显示移动到当前窗口的图片,是不是

Android实现Banner界面广告图片循环轮播(包括实现手动滑动循环)_Android

 前言:经常会看到有一些app的banner界面可以实现循环播放多个广告图片和手动滑动循环.本以为单纯的ViewPager就可以实现这些功能.但是蛋疼的事情来了,ViewPager并不支持循环翻页.所以要实现循环还得需要自己去动手.自己在网上也找了些例子,本博文的Demo是结合自己找到的一些相关例子的基础上去改造,也希望对读者有用. Demo实现的效果图如下: Demo代码: 工程目录如下图: 废话不多说,上代码. 1.主Activity代码如下: package com.stevenhu.an

javascript-js中怎么让点击事件触发前移除定时器,等点击完后再继续执行,我做的是一个轮播器

问题描述 js中怎么让点击事件触发前移除定时器,等点击完后再继续执行,我做的是一个轮播器 window.onload=function() { var oPicList=document.getElementById("picList"); var oCss=document.getElementById("css"); var aBtns=document.getElementById("btns").getElementsByTagName(