写一个图片轮播器(使用collectionView)

一、属性

我们需要一个 collectionView 和一个 NStimer 。collectionView 用来存放需要循环播放的对象, NSTimer 用来定时滚动collectionView

@interface ViewController ()<UICollectionViewDelegate,UICollectionViewDataSource>

@property(nonatomic,strong)UICollectionView* showCollection;

@property(nonatomic,strong)NSTimer* timer;
@end

提示:需要用到UISCrollView 或者 UICollectionView,我们可以直接遵守其代理、数据源。

二、初始化对象

初始化collectionView:

#pragma mark - 初始化collectionView
-(void)initCollectionView{
    //layout
    UICollectionViewFlowLayout* layout = [[UICollectionViewFlowLayout alloc]init];

    self.showCollection = [[UICollectionView alloc]initWithFrame:CGRectMake(120, 120, 200, 180) collectionViewLayout:layout];
    _showCollection.delegate = self;
    _showCollection.dataSource = self;
    [self.view addSubview:_showCollection];

    //基本设置
    _showCollection.pagingEnabled = YES;
    _showCollection.showsHorizontalScrollIndicator = NO;
    layout.itemSize = CGSizeMake(200, 180);
    layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    layout.minimumLineSpacing = 0;
    layout.minimumInteritemSpacing = 0;

}

添加timer:

#pragma mark - 添加timer
-(void)addTimer{
    self.timer = [NSTimer scheduledTimerWithTimeInterval:1.5 target:self selector:@selector(nextPage) userInfo:nil repeats:YES];
    [[NSRunLoop mainRunLoop]addTimer:_timer forMode:NSRunLoopCommonModes];
}

-(void)nextPage{
    //当前偏移量
    CGPoint current = _showCollection.contentOffset;

    if (current.x == _showCollection.frame.size.width*6) {
        current.x = 0;
    }else{
        current.x += _showCollection.frame.size.width;
    }

    //UIScrollView自带方法
    [_showCollection setContentOffset:current animated:YES];

}

提示:NSTimer需要加入到运行循环

三、数据源方法

实现数据源方法:此处设置section为1,有六张图片设置item为7,最后一个item放跟第一张图片一样的,这样就可以给用户一种假象:用户会以为是第一张,我们在这个地方需要修改偏移量offset(在后边会上代码)

#pragma mark - 数据源方法
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return 7;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{

    ShowCollectionViewCell* cell = [collectionView dequeueReusableCellWithReuseIdentifier:key forIndexPath:indexPath];
    cell.backgroundColor = [UIColor redColor];

    cell.icon = [NSString stringWithFormat:@"%zd",indexPath.item+1];
    return cell;
}

注意:自定义我们需要的cell,需要注册,”key“最好static一个静态的

- (void)viewDidLoad {
    [super viewDidLoad];
    //创建
    [self initCollectionView];

    //注册
    [_showCollection registerClass:[ShowCollectionViewCell class] forCellWithReuseIdentifier:key];

    //添加timer
    [self addTimer];
}

四、代理方法

1,用户自己查看的时候需要暂停timer;2、用户停止查看,重新开启timer;3、最后一个的时候,设置从第一个重新开始

#pragma mark - 代理方法
-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
    [_timer invalidate];
}
-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
    [self addTimer];

}
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
    //所在页数
    int pageNumber = _showCollection.contentOffset.x/_showCollection.frame.size.width;
    //如果是最后一页,设置偏移量为0,重新循环
    if (pageNumber == 6) {
        _showCollection.contentOffset = CGPointMake(0, 0);
    }
}

五、自定义collectionViewCell

在这里直接粘代码,开发中根据不同的需求自定义

在collectionViewCell.h文件中:

@property(nonatomic,copy)NSString* icon;

在collectionViewCell.m文件中:实现初始化方法,setter方法

#import "ShowCollectionViewCell.h"
@interface ShowCollectionViewCell()
@property(nonatomic,strong)UIImageView* imageView;
@end

@implementation ShowCollectionViewCell

-(instancetype)initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    if (self) {
        _imageView = [[UIImageView alloc]init];
        [self addSubview:_imageView];
    }

    return self;
}

-(void)setIcon:(NSString *)icon{
    _icon = [icon copy];
    _imageView.image = [UIImage imageNamed:icon];
}

-(void)layoutSubviews{
    [super layoutSubviews];

    _imageView.frame = self.bounds;
}
@end

注意点:1、初始化collectionViewCell别忘记注册

    2、跟tableView不同的是,我们只需要写出重用cell 的代码,系统会创建

 

以上就可以写出一个简单实用的轮播器了。

初入博客园,大家多多关照。

时间: 2024-11-08 23:55:58

写一个图片轮播器(使用collectionView)的相关文章

Vue学习—Vue写一个图片轮播组件

1.先看效果: 熟悉的图片轮播,只要是个网站,百分之90以上会有个图片轮播.我认为使用图片轮播. 第一可以给人以一种美观的感受,而不会显得网站那么呆板, 第二可以增加显示内容,同样的区域可以显示更多内容. 2.每学一个新东西 ,图片轮播都是很好的练手案例,而且,也很实用. 3.基本要求:页面加载,自动播放.鼠标悬停,停止播放.鼠标离开,继续播放 点击左右箭头切换上一张,下一张图片. 下方小圆点显示当前位第几张图片. 4.使用Vue实现,想法: 5.示例代码 结构html: <template>

Swift版本的图片轮播器框架

由于在开发中,总是要写图片轮播器之类的东东,写的烦了,忍不住就用Swift写了一个非常方便的图片轮播器的框架https://github.com/SarielTang/CycleView 大家在使用的时候,只需要像这样: import CycleView class className : PictureCycleController{ //override loadView function //重写loadViewe方法 override func loadView() { super.lo

UIScrollView实现图片轮播器及其无限循环效果

图片轮播器: 一.实现效果 实现图片的自动轮播            二.实现代码 storyboard中布局 代码: 1 #import "YYViewController.h" 2 3 @interface YYViewController () <UIScrollViewDelegate> 4 @property (weak, nonatomic) IBOutlet UIScrollView *scrollview; 5 /** 6 * 页码 7 */ 8 @prop

UISCrollView —— 图片轮播器实现(三)——(第二讲)

1. 所用知识点 1> UIScrollView的基本属性,和UIPageControl设置,还有就是要用到NSTimer来定时实现UIScrollView的图片轮播 2> NSTimer简单介绍: 2.1  NSTimer叫做“定时器”,它的作用如下 * 在指定的时间执行指定的任务 * 每隔一段时间执行指定的任务 2.2  NSTimer简单使用: 1> 调用下面的方法就会开启一个定时任务 + (NSTimer *)scheduledTimerWithTimeInterval:(NST

Android高级图片滚动控件,编写3D版的图片轮播器

转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/17482089 大家好,好久不见了,最近由于工作特别繁忙,已经有一个多月的时间没写博客了,我也是深感惭愧.那么今天的这篇既然是阔别了一个多月的文章,当然要带来更加给力点的内容了,那么话不多说,赶快进入到今天的正题吧. 说 到图片轮播器,很多的Android应用中都会带有这个功能,比如说网易新闻.淘宝等.最新我们公司的一款应用也加入了这个功能,并且在图片轮播的基础上 还增加了三维立体

UIScorllView和UIPageControl的使用实现图片轮播器

首先我们要先建一个project,选择iOS下的第一个Application 中的Single View Application 开始工作已经准备完毕现在我们进入到Main.storyboard拖控件 需要用到的控件有 UIScrollView也就是滚动的那个 UIPageControl也就是图片下面那几个小点 NSTimer就是定时器让其自动换页的 第一步:拖控件连线 在Main.storyboard拖一个UIScrollView放在屏幕上,在UIScrollView下面放一个UIPageCo

实现一个图片轮播-3d播放效果

前言:最近在做一个音乐播放器,首页要做一个图片轮播,看了bootstrap的carousel插件以及移动端的swipe.js库,都是平面图片轮播的效果,所以自己想着实现类似网易云app里那种3d图片轮播的效果,所以写下此文 使用方法: 首先,引入Swipe.js和Swipe.css 定义轮播列表ul[data-ride="swipe"],然后每一个轮播项都加上类 class="item" : 1 <!DOCTYPE html> 2 <html la

IOS 05 UIScrollView介绍 图片轮播器

移动设备的屏幕?大?小是极其有限的,因此直接展?示在?用户眼前的内容也相当有限 当展?示的内容较多,超出?一个屏幕时,?用户可通过滚动?手势来查看屏幕以外的内容 普通的UIView不具备滚动功能,不能显?示过多的内容 UIScrollView是?一个能够滚动的视图控件,可以?用来展?示?大量的内容,并且可以通过滚 动查看所有的内容 在IOS中UIScrollView这个控件还是比较常用和重要的. 很多时候,我们想在UIScrollView正在滚动 或 滚动到某个位置 或者 停?止滚动 时做?一些

沉浸式图片轮播器 -- DDGBannerScrollView使用文档

写在前面 几乎每个app都会用到图片轮播器,而且图片轮播器也越来越高大上,沉浸式等拉高了APP的档次 ,没有一个高大上的图片轮播器,都不好意思上架. 像一些知名的app都采用了图片轮播的背景渐变色,举几个栗子:优酷的首页,喜马拉雅,蜻蜓fm,哔哩哔哩漫画等, page索引也是玩的很高大上,系统的早已满足不了了需求. 鉴于此和项目的需要,在前人的基础上,整理了一个这个库,志在简单的几句代码,就能让应用看上去高大上. github:[DDGBannerScrollView](https://gith