iOS简单实现轮播图效果

本文实例为大家分享了iOS简单实现轮播图效果的具体代码,供大家参考,具体内容如下

平常在开发过程中,首页的轮播图总是少不了,轮播图我们都知道肯定是要使用 UIScrollView ,难点就在最后一张图片被滑动时,如何回到第一张图片以及第一张滑动到最后一张。
我们可以使用如下方式实现轮播图,在划到3后面的1后,设置 contentOffset 回到最先的1,并设置 pageControl ,即可达到效果 (从1划到3也同理)

看一下效果:

完成这种轮播图,我们的 View 需要如下的属性和方法

@interface RoundView : UIView
 
@property (nonatomic,strong) UIScrollView   *scrollView;
//存放ScrollView每一个page的图片的array
@property (nonatomic) NSMutableArray        *imgArray;
@property (nonatomic) UIPageControl         *pageControl;
//定时器
@property (nonatomic,strong) NSTimer        *__nullable timer;
 
- (instancetype)initWithFrame:(CGRect)frame imgArray:(NSArray *)array;
 
@end

在创建View的时候使用 initWithFrame:(CGRect)frame imgArray:(NSArray *)array,传入需要展示的 imgArray ,在 view 内进行处理。

在该方法的实现中,首先就是对图片数组array的处理,得到我们需要的imgArray

- (instancetype)initWithFrame:(CGRect)frame imgArray:(NSArray *)array{
    self=[super initWithFrame:frame];
    
    self.imgArray=[[NSMutableArray alloc]init];
    [self.imgArray addObject:[array lastObject]];
    [self.imgArray addObjectsFromArray:array];
    [self.imgArray addObject:[array firstObject]];
}

这样,我们的 imgArray 就变成了最开始演示原理的样式,为 @[first object,array,lastobject]

然后我们初始化一下 ScrollView

self.scrollView=[[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, frame.size.width, frame.size.height)];
    [self.scrollView.layer setCornerRadius:10.0];
    self.scrollView.contentSize=CGSizeMake(frame.size.width * self.imgArray.count, frame.size.height);
    self.scrollView.pagingEnabled=YES;
    self.scrollView.contentOffset=CGPointMake(frame.size.width, 0);
    self.scrollView.showsVerticalScrollIndicator=NO;
    self.scrollView.showsHorizontalScrollIndicator=NO;
    self.scrollView.delegate=self;
    [self.scrollView addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOptionNew context:nil];

很简单,就是一些属性、代理的设置 根据 imgArray 的大小设置 contentSize ,另外对 contentOffset 添加一个观察者,方便后续对pageControl和contentOffset进行设置。

然后,我们根据 imgArray 将图片填入到 scrollView 中

for(int i=0;i<self.imgArray.count;i++){
        CGRect imgFrame=CGRectMake(frame.size.width* i, 0, frame.size.width , frame.size.height);
        UIImageView* imgView=[[UIImageView alloc]initWithFrame:imgFrame];
        //这里我就不传入图片了,测试的imgArray中为颜色,使用颜色替代
        imgView.backgroundColor=self.imgArray[i];
        [self.scrollView addSubview:imgView];
    }

然后对pageControl和timer进行初始化

self.pageControl=[[UIPageControl alloc]initWithFrame:CGRectMake(0, frame.size.height-20, frame.size.width, 20)];
    self.pageControl.numberOfPages=array.count;
    self.pageControl.currentPage=0;
    self.pageControl.tintColor=[UIColor whiteColor];
    
    self.timer=[NSTimer scheduledTimerWithTimeInterval:5.0 target:self selector:@selector(scrollImage) userInfo:nil repeats:YES];
    //添加到runloop中
    NSRunLoop *runloop=[NSRunLoop currentRunLoop];
    [runloop addTimer:self.timer forMode:NSRunLoopCommonModes];
    
    [self addSubview:self.scrollView];
    [self addSubview:self.pageControl];

这里设置的是5秒钟后自动滚动轮播图,可以根据需要自己设置,scrollmage 方法后面会讲

我们看一下我们需要的 scrollView 的代理方法

1.scrollViewDidScroll:

- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    CGFloat offsetX=scrollView.contentOffset.x;
    offsetX+=scrollView.frame.size.width*0.5;
    
    //因为最前面还有一个imgView
    int page=offsetX/scrollView.frame.size.width-1;
    self.pageControl.currentPage=page;
    
}

此方法用来计算 contentOffset 对应的 pageControl 的 page ,需要注意的是在第一张图片之前还有最后一张图片,所以计算的时候需要-1

2.scrollViewWillBgeinDragging:

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
    [self.timer invalidate];
    self.timer=nil;
}

在scrollView即将被划动时,取消自动轮播,将timer设置为nil

3.scorllViewDidEndDragging: willDecelearate:

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
    self.timer=[NSTimer scheduledTimerWithTimeInterval:5.0 target:self selector:@selector(scrollImage) userInfo:nil repeats:YES];
    
    //优先级 设置到当前的runloop中
    NSRunLoop *runloop=[NSRunLoop currentRunLoop];
    [runloop addTimer:self.timer forMode:NSRunLoopCommonModes];
}

在将要结束划动的时候,重新设置timer 并添加到当前的runloop中

实现轮播图的核心代码

对 contentOffset 的监听

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context{
    
    if([keyPath isEqualToString:@"contentOffset"]){
        //[change objectForKey:NSKeyValueChangeNewKey] 是一个对象
        CGPoint offset= [[change objectForKey:NSKeyValueChangeNewKey] CGPointValue];
        //当划到3后面的1时
        if(offset.x >= self.scrollView.contentSize.width-self.scrollView.frame.size.width){
            [self.scrollView setContentOffset:CGPointMake(self.scrollView.frame.size.width, 0)];
            self.pageControl.currentPage=0;
        }
        //当划到1前面的3时
        else if(offset.x <= 0){
            [self.scrollView setContentOffset:CGPointMake(self.scrollView.contentSize.width-2*self.scrollView.frame.size.width, 0)];
            self.pageControl.currentPage=self.pageControl.numberOfPages-1;
        }
    }
    
}

首先[change objectForKey:NSKeyValueChangeNewKey] 是一个对象,我们可以通过  CGPointValue 去得到contentOffset

然后我们对 contentOffset 的 x 进行判断,如果在最后一张图片,即3后面的1时,将scrollView的contentOffset 设置为初始的1所在的位置,这里不能设置动画

同理,如果在1前面的3时,将scrollView的contentOffset 设置为初始的3所在的位置,这里不能设置动画

需要注意 pageControl 的设置也应该实时设置

最后,我们将自己轮播的方法 scrollImage 填写

-(void)scrollImage{
            
    NSInteger page=[self.pageControl currentPage];
    page++;
    CGFloat offsetX= page * self.scrollView.frame.size.width+self.scrollView.frame.size.width;
    
    [self.scrollView setContentOffset:CGPointMake(offsetX, 0) animated:YES];
}

从当前的 page 滚动至下一个 page ,设置动画

至此我们完成了支持滑动和自己定时播放的简单页面的轮播图

(0)

相关推荐

  • 两行IOS代码实现轮播图

    此篇文章讲述IOS轮播图,仅需要几步就可以完成,很简单了. 第一步:利用cocopods导入KJBannerView组件 #import "KJBannerView.h" 第二步:在m文件加入代理 <KJBannerViewDelegate> //并且定义组件 @property (nonatomic,strong) KJBannerView *banner2; 第三步:实现就仅此一步 -(void)initData{ KJBannerView *banner2 = [[K

  • iOS实现带有缩放效果的自动轮播图

    本文实例为大家分享了iOS带有缩放效果的自动轮播图,供大家参考,具体内容如下 可直接设置frame然后加载到视图上使用. 效果就是这样的,图片切换的过程中还是有卡顿,不够流畅,后续更新. 直接上代码. .h文件包含: #import <UIKit/UIKit.h> @interface CustomScrollView : UIView @property (strong,nonatomic) NSArray *imageArr; @end .m文件包含: #import "Cust

  • iOS实现无限循环轮播图效果

    本文实例为大家分享了iOS实现无限循环轮播图的具体代码,供大家参考,具体内容如下 轮播图基础控件,左滑右滑都能无限循环 预览 思路 (1)在第一张左边加一张最后一张的图片,往左滑到边缘结束后计算偏移量迅速定位成最后一张 #pragma mark - pagecontrol事件 // 这个是点击小圆点条进行切换,到边不能循环 - (void)pageControlTouched { // 点击的时候停止计时 [self.kvTimer setFireDate:[NSDate distantFutu

  • IOS 开发之网络图片轮播图的实现

    IOS 开发之网络图片轮播图的实现 截图 1.使用 LJPhotoGroupView *_ljPhotoGroupView = [[LJPhotoGroupView alloc]initWithItem:self.ljUrlArray]; _ljPhotoGroupView.backgroundColor = [UIColor blackColor]; _ljPhotoGroupView.frame = CGRectMake(0, 0, kDEVICEWIDTH, kDEVICEHEIGHT);

  • iOS实现轮播图banner示例

    楼主项目中需要有一个轮播图,因为比较简单,就自己写了个,因为是从网上弄得图片 所以用了SDWebImage 这个三方库 当然自己也可以去掉 类型后面有*号 如用使用 请自行加上..... 代码:.h 文件 @protocol TJXViewDelegate<NSObject> //判断点击的那个 -(void)sendImageName:(TJXView *)TJXView andName:(NSInteger)selectImage; @end @interface TJXView : UI

  • iOS使用UIScrollView实现无限循环轮播图效果

    本文实例为大家分享了iOS使用UIScrollView实现无限循环轮播图的具体代码,供大家参考,具体内容如下 代码: // // ViewController.m // 无限轮播 // // Created by limin on 17/8/23. // Copyright © 2017年 none. All rights reserved. // #import "ViewController.h" @interface ViewController ()<UIScrollVi

  • 简单实现轮播图效果的实例

    一.要点: 1.页面加载时,图片重合,叠在一起[绝对定位]; 2.第一张显示,其它隐藏; 3.设置下标,给下标设置颜色让它随图片移动; 4.鼠标移动到图片上去,显示左右移动图标,鼠标移走,继续轮播; 二.实现代码: html代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"

  • vue.js实现简单轮播图效果

    学习了vue.js也有一段时间了,做了个小demo来熟悉一下,很常见的demo,-------轮播图,没学vue之前的轮播图用JavaScript或者jquery都非常简单,发现用vue来写也挺有意思的.说下简单的思路,图片的轮播用v-if或者v-show来代替原来的Js滑动,过度效果用transition可简单实现,注意,滑动过程中是能看见两张图的,所以要用两个transition. (1)先写出整体的框架 <template> <div class="slide-show&

  • JavaScript实现简单轮播图效果

    本文实例为大家分享了js实现简单轮播图效果的具体代码,可以实现左右翻转,图片切换显示等效果,供大家参考,具体内容如下 效果展示: 代码展示: <!doctype html> <html> <!-- 学习功能:使用JavaScript实现图片轮播,左右翻转,图片切换显示等. author: lisa于2018-5-30 --> <title> <meta charset="utf-8"> </title> <b

  • 简单实现js轮播图效果

    本文实例为大家分享了js实现轮播图效果展示的具体代码,供大家参考,具体内容如下 html结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; font-size:14px; -webkit-use

  • Android实现ViewPage轮播图效果

    在android移动端的开发中,首页轮播图是一个特别常见的功能,所以今天就来将最近写的一个小demo记录一下. 首先当然是新建一个项目代码如下: activity_main.xml文件: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:to

  • 微信小程序非swiper组件实现的自定义伪3D轮播图效果示例

    本文实例讲述了微信小程序非swiper组件实现的自定义伪3D轮播图效果.分享给大家供大家参考,具体如下: 效果如下: 我用了很笨的方法实现的,大致就是: 1.当前点击的div(view)如果前后都有内容,那么,当前div(view)就设置到中间,前一个就设置到左边,前一个的前面所有全部设置到最左边,后面一个设置到右边,后面所有设置到最右边 2.当前点击的div(view)如果前面无内容,即第一个,那么,当前div(view)设置到中间,后面一个设置到右边,后面所有设置到最右边 3.当前点击的di

  • 微信小程序实现的3d轮播图效果示例【基于swiper组件】

    本文实例讲述了微信小程序实现的3d轮播图效果.分享给大家供大家参考,具体如下: 前面写过一篇3d轮播,就是这篇,使用的方法比较笨拙,而且代码不简洁.这次发现swiper也能实现同样的效果.故记录一下. 先看看效果: wxml: <swiper previous-margin='50px' next-margin='50px' bindchange="swiperChange" style='height:{{swiperH}};'> <swiper-item wx:f

  • Android开发实现的自动换图片、轮播图效果示例

    本文实例讲述了Android开发实现的自动换图片.轮播图效果.分享给大家供大家参考,具体如下: 50行代码急速实现轮播图: 先看效果: 两个例子没太大区别, 不过i是布局文件中控件的Height不一样罢了这里一第二个为例: public class MainActivity extends Activity { int[] imageIds = new int[]{ R.drawable.a00,R.drawable.a01,R.drawable.a02,R.drawable.a3,R.draw

  • Flutter实现可循环轮播图效果

    效果图 壹.控件分解图 贰.代码实现 贰点壹.构建根布局 新建AdPictureWidget继承自StatefulWidget,新建_AdPictureWidgetState类继承自State<AdPictureWidget>,根布局为Stack,代码如下: class AdPictureWidget extends StatefulWidget { @override _AdPictureWidgetState createState() => _AdPictureWidgetStat

  • JS实现轮播图效果

    本文实例为大家分享了JS实现轮播图展示的具体代码,供大家参考,具体内容如下 原理介绍 1.html <div id="swiper-container" class="swiper-container" onmouseenter="swiperImg()" onmouseleave="stopSwiper()"> <div id="img-list" style="left:0p

随机推荐

其他