猫猫学iOS 之广告轮播图,collectionView制作(源码)

猫猫分享,必须精品

原创文章,欢迎转载。转载请注明:翟乃玉的博客

地址:http://blog.csdn.net/u013357243

源码共享:https://github.com/znycat/NYCarouselView

效果图

源代码

NYCarouselView.h

//
//  NYCarouselView.h
//  广告轮播CollectionView
//
//  Created by IOS on 15/12/26.
//  Copyright ? 2015年 com.itcat.com. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface NYCarouselView : UICollectionView
/**
 *  启动时钟
 */
-(void)startTimer;
/**
 *  停止时钟
 */
-(void)updateTimer;

-(instancetype)initWithFrame:(CGRect)frame imageNames:(NSArray *)imageNames;

@property (nonatomic, strong) NSArray *imageNames;

/**
 *  每个轮播图片的点击事件
 */
@property (nonatomic, copy) void(^cellDidSelectItemAtIndexPath)(UICollectionView *collection,NSIndexPath *indexPath);

@end

NYCarouselView.m

//
//  NYCarouselView.m
//  广告轮播CollectionView
//
//  Created by IOS on 15/12/26.
//  Copyright ? 2015年 com.itcat.com. All rights reserved.
//

#import "NYCarouselView.h"

@interface NYCarouselView()<UICollectionViewDataSource,UICollectionViewDelegate>

@property (nonatomic, weak) UIPageControl *carouselPageControl;

@property (nonatomic, strong) NSTimer *timer;

@end
@implementation NYCarouselView

static NSString * const carouselID = @"NYCarouselView";

-(instancetype)initWithFrame:(CGRect)frame
{

    UICollectionViewFlowLayout *carouseLayout = [[UICollectionViewFlowLayout alloc]init];

    carouseLayout.itemSize = frame.size;// 设置cell的尺寸

    carouseLayout.minimumLineSpacing = 0;// 清空行距

    carouseLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;// 设置滚动的方向

    [self registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:carouselID];

    self.dataSource = self;
    self.delegate = self;

    [self startTimer];

    return [super initWithFrame:frame collectionViewLayout:carouseLayout];

}

-(instancetype)initWithFrame:(CGRect)frame imageNames:(NSArray *)imageNames
{

    self.imageNames = imageNames;
    [self scrollViewDidScroll:self];
    return [self initWithFrame:frame];
}

-(void)layoutSubviews{
    [super layoutSubviews];
    self.bounces = NO;//去掉弹簧效果
    self.showsHorizontalScrollIndicator = NO;//去掉水平显示的拖拽线
    self.pagingEnabled = YES;//分页效果
}

#pragma mark - UICollectionViewDataSource,UICollectionViewDelegate

-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return self.imageNames.count;
}

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:carouselID forIndexPath:indexPath];

    UIImageView *imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:self.imageNames[indexPath.row]]];
    cell.backgroundView = imageView;

    return cell;
}

-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    self.cellDidSelectItemAtIndexPath(collectionView,indexPath);
}

#pragma mark - 分页
//分页控件的监听方法
-(void)pageChanged:(UIPageControl *)page
{
    [self.timer invalidate];
    //根据页数,调整滚动视图中得图片位置contentOffset
    CGFloat x = page.currentPage * self.bounds.size.width;
    [self setContentOffset:CGPointMake(x, 0) animated:YES];
    [self startTimer];
}

#pragma mark - 时钟
/**启动时钟*/
-(void)startTimer
{

    self.timer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(updateTimer) userInfo:nil repeats:YES];

    //添加运行循环
    [[NSRunLoop currentRunLoop]addTimer:self.timer forMode:NSRunLoopCommonModes];

}

-(void)updateTimer
{
    //页号发生变化
    //(当前页数 + 1) % 总页数
    NSUInteger count = self.imageNames.count;
    if (count == 0) {
        NSLog(@"图片个数是0");
        return;
    }
    int page = (self.carouselPageControl.currentPage+1) % (int)count;
    self.carouselPageControl.currentPage = page;
    //调用监听方法。让滚动视图滚动
    [self pageChanged:self.carouselPageControl];
}

/**
 抓住图片时,停止时钟,松手后,开启时钟
 */
-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    //停止时钟,停止后就不能在使用,如果要启用时钟,需要重新实例化
    [self.timer invalidate];
}

-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{

    //启动时钟
    [self startTimer];

}

#pragma mark - UIScrollView代理
// 只要一滚动就会调用
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    //    NSLog(scrollView.);
    // 获取当前的偏移量,计算当前第几页
    int page = scrollView.contentOffset.x / scrollView.bounds.size.width + 0.5;

    // 设置页数
    self.carouselPageControl.currentPage = page;

}

#pragma mark - 懒加载
-(UIPageControl *)carouselPageControl
{
    if (_carouselPageControl == nil) {

        UIPageControl * carouselPageControl = [[UIPageControl alloc]init];

        //总页数
        carouselPageControl.numberOfPages = self.imageNames.count;
        //控件尺寸
        CGSize size = [_carouselPageControl sizeForNumberOfPages:self.imageNames.count];

        carouselPageControl.bounds = CGRectMake(0, 0, size.width, size.height);
        //pageControl的位置
        carouselPageControl.center = CGPointMake(self.center.x, self.bounds.size.height * 0.85);

        //设置颜色
        carouselPageControl.pageIndicatorTintColor = [UIColor redColor];

        carouselPageControl.currentPageIndicatorTintColor = [UIColor blackColor];

        //添加监听方法
        [carouselPageControl addTarget:self action:@selector(pageChanged:) forControlEvents:UIControlEventValueChanged];
        [self.window addSubview:carouselPageControl];
        _carouselPageControl = carouselPageControl;
    }
    return _carouselPageControl;
}
-(NSArray *)imageNames{
    if (_imageNames == nil) {
        _imageNames = [NSArray array];
    }
    return _imageNames;
}

@end
时间: 2024-10-08 09:49:30

猫猫学iOS 之广告轮播图,collectionView制作(源码)的相关文章

猫猫学iOS 之广告轮播图,collectionView制作

猫猫分享,必须精品 原创文章,欢迎转载.转载请注明:翟乃玉的博客 地址:http://blog.csdn.net/u013357243 效果图 不多说,好不好先看效果,之前做过一个scrollView的轮播图,但是很局限,很多多余代码,今天猫猫重新做了一个用collectionView的流水布局做的一个,可以拿去做广告轮播,也可以做系统新特性哦,来,看下效果吧. 源码共享:https://github.com/znycat/NYCarouselView 很久很久以前就想做了.总而言之,猫猫代码有

js实现轮播图效果(附源码)--原生js的应用

1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="Author" content="奇客艺术"> <meta name="keyword" content="关键字"> <meta name=

JavaScripts广告轮播图以及定时弹出和定时隐藏广告

轮播图: 函数绑定在body标签内 采用3张图,1.jpg   2.jpg  3.jpg  利用定时任务执行设置图片属性 src  利用for循环可以完成3秒一次 一替换. 定时弹出广告: 由于body标签已经绑定了函数 所以直接用 window 加载事件 函数 广告图片的默认display属性是none 3秒后将广告图片的 display属性 设置成block  就可以形成3秒后显示广告图片 弹出后 需要清理定时 然后在写一个3秒定时 隐藏的函数 ,最后也要清理定时. <script> fu

预约挂号系统之首页广告轮播图

轮播图设计 <div id="main_top_left"> <div id="list" style="left: -650px;"> <img src="../img/slideshow_5.jpg" alt="5"/> <img src="../img/slideshow_1.jpg" alt="1"/> <

iOS: 无限循环轮播图简单封装

轮播图思路: 1.首先要有一个ScrollView和两张图片,把图片放到ScrollView上. 2.要想滚动ScrollView的宽度需设置屏宽的2倍. 3.循环滚动,当滚动到最后一张图片时,采用偏移的方法,将偏移量归零,回到第一张图片. 4.将第二张的图片上的所有值赋给第一张图片. 5.设置让它自己滚动,需添加定时器. 需要的第三方数据库:SDWebImage m.文件内: #imporst "ScrollView.h" @interface ScrollView ()<UI

android中广告轮播图总结

功能点:无限轮播.指示点跟随.点击响应.实现思路: 1.指示点跟随,指示点通过代码动态添加,数量由图片数量决定. 在viewpager的页面改变监听中,设置点的状态选择器enable,当前页时,setEnable(true),非当前页设置为false.由于图片是从网络获取,数量不定,所以此处不能使用switch写死,需要设置变量记录当前和前一个.代码如下: llAddPoint为添加指示点的线性布局 prePosition为前一个位置,初始化时设为0,newPosition为当前位置 int n

iOS UICollectionView 实现轮播图

利用UICollectionView 实现轮播图 : 具体代码如下, 简单粗暴, : <span style="font-size:24px;">// // ViewController.m // CollectionPhotosView // // Created by 帝炎魔 on 16/5/30. // Copyright © 2016年 帝炎魔. All rights reserved. // /** * UICollectionView 实现轮播图的实现 将定时器

iOS UIScrollView 实现轮播图

利用UIScrollView实现轮播图 , 需要三个ImageView轮流切换,具体原理就不讲解了. 具体实现代码如下: <span style="font-size:24px;">// // ViewController.m // PhotosShowDemo // // Created by 帝炎魔 on 16/5/29. // Copyright © 2016年 帝炎魔. All rights reserved. // #import "ViewContro

jquery 广告轮播图

轮播图 /*轮播图基本功能: * 1图片切换 * 1.1图片在中间显示 * 1.2图片淡入淡出 * 2左右各有一个按钮 * 2.1点击左按钮,图片切换上一张 * 2.2点击右按钮,图片切换下一张 * 2.3鼠标滑过按钮,按钮颜色加深 * 3底部的导航点 * 3.1图片为第几张时,点在那第几张 * 3.2鼠标滑到第几个点,图片切换到第几张 * 4图片自动轮播 * 4.1默认自动下一张 * 4.2鼠标在图片范围时,停止切换 * 4.3鼠标离开图片范围,恢复自动切换 * 5鼠标放在图片范围时,变为小手