IOS 封装轮播图

轮播图为一种常见的方式,常用于各种网站,或者App中,当然,作为APP的启动视图也是不错的选择。

闲时封装了一个,仅供新手参考。

1.新建工程,建立轮播图类


建立一个空的工程,新建一个类,起名为Carousel,继承于UIView

2.编写Carousel类接口

 1 @interface Carousel : UIView
 2 typedef NS_ENUM(NSInteger,UICarouselPageType){
 3     //建立一个枚举型,来设置Carousel的样式
 4     UICarouselPageTypeCenter,//设置pageControl在中心
 5     UICarouselPageTypeLeft,  //设置pageControl在左侧
 6     UICarouselPageTypeRight, //设置pageControl在右侧
 7 };
 8 @property(nonatomic,strong)NSArray *ImageArry;//用于接收来自外部的图片
 9 @property(nonatomic,assign)NSTimeInterval duration;//用于接收每张图片的持续时间
10 @property(nonatomic,assign)UICarouselPageType PageType;
11 @end

3.内部代码

1.用懒加载的方式定义UIScrollView和UIPageControl

(1)为Carousel类建立延展

 

1 @interface Carousel()<UIScrollViewDelegate>
2 @property(nonatomic,strong)UIScrollView *scroll;
3 @property(nonatomic,strong)UIPageControl *pageControl;
4 @property(nonatomic,assign)int index;
5 @property(nonatomic,strong)NSTimer *timer;
6 @end

(2)重写初始化方法

1 -(instancetype)initWithFrame:(CGRect)frame{
2     self =[super initWithFrame:frame];
3     if (self) {
4         _timer =[[NSTimer alloc]init];
5         _index=0;
6     }
7     return self;
8 }

(3)scrollView

 1 -(UIScrollView *)scroll{
 2     if (_scroll==nil) {
 3         _scroll =[[UIScrollView alloc]initWithFrame:self.bounds];
 4         _scroll.delegate=self;
 5         _scroll.contentSize=CGSizeMake([_ImageArry count]*WIDTH,HEIGHT);
 6         _scroll.pagingEnabled=YES;//允许整页翻动
 7         _scroll.bounces=NO;
 8         _scroll.showsHorizontalScrollIndicator=NO;
 9         _scroll.showsVerticalScrollIndicator=NO;
10         for (int i=0; i<[_ImageArry count]; i++) {
11             UIImageView *imageView =[[UIImageView alloc]initWithFrame:CGRectMake(i*WIDTH, 0, WIDTH, HEIGHT)];
12             UIImage *image=[_ImageArry objectAtIndex:i];
13             imageView.image=image;
14             [_scroll addSubview:imageView];
15         }
16     }
17     return _scroll;
18 }

(4)pageControl

 1 -(UIPageControl *)pageControl{
 2     if (_pageControl ==nil) {
 3         _pageControl =[[UIPageControl alloc]init];
 4         [self setPageControlFrame];
 5         _pageControl.numberOfPages=[_ImageArry count];
 6         _pageControl.pageIndicatorTintColor=[UIColor greenColor];
 7         _pageControl.currentPageIndicatorTintColor=[UIColor redColor];
 8         [_pageControl addTarget:self action:@selector(change:) forControlEvents:UIControlEventValueChanged];
 9     }
10     return _pageControl;
11 }
12 -(void)setPageControlFrame{
13     //当PageType有不同值的时候 有不同的frame
14     if (_PageType==UICarouselPageTypeLeft) {
15         _pageControl.frame=CGRectMake(0,HEIGHT-20,150,20);
16     }else if (_PageType ==UICarouselPageTypeRight){
17         _pageControl.frame=CGRectMake(WIDTH-150,HEIGHT-20,150,20);
18     }else{
19         _pageControl.frame=CGRectMake(WIDTH/2-75,HEIGHT-20,150,20);
20     }
21 }
22 -(void)change:(UIPageControl *)page{
23     [_timer invalidate];
24     _timer=nil;
25     _scroll.contentOffset=CGPointMake(page.currentPage*WIDTH, 0);
26     _index=(int)page.currentPage;//重新给index赋值
27     _timer =[NSTimer scheduledTimerWithTimeInterval:_duration target:self selector:@selector(lunbo) userInfo:nil repeats:YES];
28 }

(5) 重写ImageArray的set方法

1 -(void)setImageArry:(NSArray *)ImageArry{
2     //重写Set方法 当ImageArray有值的时候显示scrollView和PageControl
3     if (_ImageArry!=ImageArry) {
4         _ImageArry =ImageArry;
5         [self addSubview:self.scroll];
6         [self addSubview:self.pageControl];
7         _timer =[NSTimer scheduledTimerWithTimeInterval:_duration target:self selector:@selector(lunbo) userInfo:nil repeats:YES];
8     }
9 }

(6)Scroll的代理方法

 1 -(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
 2     //开始拖动时销毁计时器
 3     [_timer invalidate];
 4     _timer =nil;
 5 }
 6 -(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
 7     //减速结束时重新生成计时器
 8     _index=(int)_pageControl.currentPage;//重新给index赋值
 9     _timer =[NSTimer scheduledTimerWithTimeInterval:_duration target:self selector:@selector(lunbo) userInfo:nil repeats:YES];
10 }
11 -(void)scrollViewDidScroll:(UIScrollView *)scrollView{
12     _pageControl.currentPage=scrollView.contentOffset.x/WIDTH;
13 }

4.应用Carousel类

 1 #import "ViewController.h"
 2 #import "Carousel.h"
 3 @interface ViewController ()
 4 @end
 5 @implementation ViewController
 6
 7 - (void)viewDidLoad {
 8     [super viewDidLoad];
 9     Carousel *lunbo =[[Carousel alloc]initWithFrame:CGRectMake(0, 100, 414, 300)];
10     NSMutableArray *arr=[[NSMutableArray alloc]initWithCapacity:9];
11     for (int index=1; index<10; index++) {
12         UIImage *image =[UIImage imageNamed:[NSString stringWithFormat:@"%d.jpg",index]];
13         [arr addObject:image];
14     }
15     lunbo.duration=1;
16     lunbo.PageType=UICarouselPageTypeCenter;
17     lunbo.ImageArry=arr;
18     [self.view addSubview:lunbo];
19     // Do any additional setup after loading the view, typically from a nib.
20 }

效果图:

时间: 2024-10-12 23:20:46

IOS 封装轮播图的相关文章

原生JS面向对象思想封装轮播图组件

原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能实现都分别分为不同的模块.目前我封装的这个版本还不适配移动端,只适配PC端. 主要的功能有:自动轮播,点击某一张图片对应的小圆点就跳转到指定图片,有前后切换按钮.使用的时候只需要传入图片的路径以及每张图片分别所对应的跳转路径还有目标盒子ID就可以了,还可以自定义每张图轮播的延时,不过延时参数不是必须

用原生js封装轮播图

原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不懂的可以直接私信我 slide.js /* * 轮播图 */ function Slide(elem, ms, d, ind){ this.el = elem; this.w = parseInt(getStyle(elem, "width")); this.h = parseInt(ge

初识 swift 封装轮播图

一.简介 换了一家公司.换了一个环境刚开始来公司自然不能有一丝一毫的放松,每天即使是没有什么工作也是看看这个博客.那个源码.尽量让自己更充实.慢慢的开始写几篇博客记录下自己遇到的一些问题和解决方法.其实也没什么就是瞎写没有什么思路反正就是遇到问题然后解决掉.最后分享出去. 随着工作走向正规公司的项目不是那么赶.也就有时间尝试一些新的东西.只是不想刚开始编程哪会那么激进今天学这个明天学那个了.APPLE 发布 swift 有一年多了.不能说好也不能说不好.总之没有了解过时没有话语权的.所以就想试试

iOS中 轮播图放哪最合适? 技术分享

我们知道,轮播图放在cell或collectionViewCell上会影响用户层级交互事件,并且实现起来比较麻烦,现在推出一个技术点:答题思路是:将UIScrollView放在UIView或UICollectionView或者UITableView上,将UIScrollView的y设为需要的大小,加载在你的现有图层上,然后改变偏移量即可,具体如下: 效果如下: 代码如下: 以UICollectionView为例 //表头可以做轮播图 UIScrollView *scrollView = [[UI

原生js封装轮播图

个人实际开发中用到的效果问题总结出来便于自己以后开发查看调用,如果也适用其他人请随意拿走勿喷就行! 原生js对于思路要求比较高,在js代码我都写有备注,足够理解并使用,即使是小白或者刚入行的程序员也比叫好理解,其轮播图只是一个简单的效果,缺点没有写动画效果看起来比较生硬,优点简单好学,容易理解,非常实用 轮播图介绍 : 三张图片,图片下方有对应图片数量的三个指示点,左右有切换指示,左右指示可要可不要 HTML代码 <div id="mlBox"> <div id=&q

iOS开发---轮播图模块(普通版)

// 用ScrollView实现图片轮播 // ViewController.m // Slider-轮播 // // Created by JamesXiang on 15/7/21. // Copyright (c) 2015年 JamesXiang. All rights reserved. // #import "ViewController.h" @interface ViewController () <UIScrollViewDelegate> @proper

iOS 无限轮播图的两种实现

首先说一下实现的思想: 用UIScrollView实现,在scrollView上添加3个UIImageView,分别用来显示上一张图片,当前显示的图片,下一张图片.scrollView在不滑动的时候永远显示当前图片(第二张图片)即contentOffset = CGPointMake(scrollViewW,0),在滑动的时候可以预览部分上一张图片或下一张图片.现在以向左滑动为例,因为已经设置好三张图片,我们向左滑动可以看到下一张图片的一部分(此时屏幕显示着部分当前图片和部分下一张图片).如果完

封装轮播图

创建一对继承于UIView的类,在.h文件中添加属性.初始化方法, // 数组@property (nonatomic, strong) NSMutableArray *imgNameArray;// 初始化方法- (instancetype)initWithFrame:(CGRect)frame interVal:(NSTimeInterval)interval; 在.m的文件中添加相应的属性 // scrollView@property (nonatomic, strong) UIScrol

封装一个简单的原生js焦点轮播图插件

轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放.本篇文章的主要目的是分享封装插件的思路. 轮播图的我一开始是写成非插件形式实现的效果,后来才改成了封装成插件的形式. 首先要明白轮播图的实现原理和基本布局,大概就是外面有一个容器包裹着(通常是div),容器设置宽高,以及overflow为hidden,超出宽高部分隐藏, 容器里面又包含着另一个容器,包裹着所有的图片,宽为所有图片的总宽度,ul的position为absolute,通过改变ul的left