美文网首页
无限轮播器

无限轮播器

作者: Fun箱Dao柜 | 来源:发表于2016-07-01 08:56 被阅读73次
#import <UIKit/UIKit.h>

@interface XMGInfiniteScrollView : UIView
/** 需要显示的图片数据(要求里面存放UIImage对象) */
@property (nonatomic, strong) NSArray *images;
@end


#import "XMGInfiniteScrollView.h"
#import "XMGImageCell.h"

@interface XMGInfiniteScrollView()  <UICollectionViewDataSource, UICollectionViewDelegate>
/** 定时器 */
@property (nonatomic, weak) NSTimer *timer;
/** 用来显示图片的collectionView */
@property (nonatomic, weak) UICollectionView *collectionView;
@end

@implementation XMGInfiniteScrollView

static NSInteger XMGItemCount = 100;
static NSString * const XMGImageCellId = @"XMGImageCell";

- (instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {
        // 布局
        UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
        layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
        layout.minimumLineSpacing = 0;
        
        // UICollectionView
        UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:layout];
        collectionView.dataSource = self;
        collectionView.pagingEnabled = YES;
        collectionView.delegate = self;
        collectionView.showsHorizontalScrollIndicator = NO;
        collectionView.showsVerticalScrollIndicator = NO;
        [collectionView registerNib:[UINib nibWithNibName:NSStringFromClass([XMGImageCell class]) bundle:nil] forCellWithReuseIdentifier:XMGImageCellId];
        [self addSubview:collectionView];
        self.collectionView = collectionView;
    }
    return self;
}

- (void)setImages:(NSArray *)images
{
    _images = images;
    
    // 设置默认显示最中间的图片
    [self.collectionView scrollToItemAtIndexPath:[NSIndexPath indexPathForItem:(XMGItemCount * self.images.count) / 2 inSection:0] atScrollPosition:UICollectionViewScrollPositionNone animated:NO];
    
    // 开启定时器
    [self startTimer];
}

- (void)layoutSubviews
{
    [super layoutSubviews];
    
    // collectionView
    self.collectionView.frame = self.bounds;
    
    // layout
    UICollectionViewFlowLayout *layout = (UICollectionViewFlowLayout *)self.collectionView.collectionViewLayout;
    layout.itemSize = self.bounds.size;
}

#pragma mark - 定时器
- (void)startTimer
{
    self.timer = [NSTimer scheduledTimerWithTimeInterval:1.5 target:self selector:@selector(nextPage) userInfo:nil repeats:YES];
    [[NSRunLoop currentRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];
}

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

- (void)nextPage
{
    CGPoint offset = self.collectionView.contentOffset;
    offset.x += self.collectionView.frame.size.width;
    [self.collectionView setContentOffset:offset animated:YES];
}

#pragma mark - <UICollectionViewDataSource>
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return XMGItemCount * self.images.count;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    XMGImageCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:XMGImageCellId forIndexPath:indexPath];
    
    cell.imageView.image = self.images[indexPath.item % self.images.count];
    
    return cell;
}

#pragma mark - 其他
/**
 *  重置cell的位置到中间
 */
- (void)resetPosition
{
    // 滚动完毕时,自动显示最中间的cell
    NSInteger oldItem = self.collectionView.contentOffset.x / self.collectionView.frame.size.width;
    NSInteger newItem = (XMGItemCount * self.images.count / 2) + (oldItem % self.images.count);
    NSIndexPath *indexPath = [NSIndexPath indexPathForItem:newItem inSection:0];
    [self.collectionView scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionNone animated:NO];
}

#pragma mark - <UICollectionViewDelegate>
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    // 停止定时器
    [self stopTimer];
}

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    // 开启定时器
    [self startTimer];
}

/**
 *  scrollView滚动完毕的时候调用(通过setContentOffset:animated:滚动)
 */
- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView
{
    [self resetPosition];
}

/**
 *  scrollView滚动完毕的时候调用(人为拖拽滚动)
 */
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    [self resetPosition];
}
@end

调用

- (void)viewDidLoad {
    [super viewDidLoad];
    
    XMGInfiniteScrollView *scrollView = [[XMGInfiniteScrollView alloc] init];
    scrollView.images = @[
                          [UIImage imageNamed:@"img_00"],
                          [UIImage imageNamed:@"img_01"]
                          ];
    scrollView.frame = CGRectMake(0, 0, self.view.frame.size.width, 200);
    scrollView.backgroundColor = [UIColor redColor];
    [self.view addSubview:scrollView];
}

分页显示

    // 3.设置总页数
    self.pageControl.numberOfPages = count;
    
    // 4.单页的时候是否隐藏pageControl
    self.pageControl.hidesForSinglePage = YES;
//    if (count <= 1) {
////        self.pageControl.alpha = 0;
//        self.pageControl.hidden = YES;
//    }
    
    // 5.设置pageControl图片(KVC)
    [self.pageControl setValue:[UIImage imageNamed:@"current"] forKeyPath:@"_currentPageImage"];
    
    [self.pageControl setValue:[UIImage imageNamed:@"other"] forKeyPath:@"_pageImage"];
  

相关文章

  • 无限循环图片、文字轮播器 SDCycleScrollView

    无限循环图片、文字轮播器。

  • 无限图片轮播器 --- Objective-C

    KNBannerView 无限循环轮播器:本地图片,网络图片(图片缓存) 一.功能描述及要点 1.无限图片轮播器,...

  • 无限轮播器

    调用 分页显示

  • iOS 图片轮播器无限滚动的实现

    我们都知道,实现图片轮播器最主要的功能就是如何让图片能够无限轮播,本篇文章就重点讨论一下无限轮播的思路,弱化其他方...

  • iOS无限轮播器

    最近自己动手造轮子,实现了一个无限图片轮播器,并扩展了丰富的自定义属性,可以自定义滚动方向、播放间隔、点击事件等。...

  • 无限图片轮播器

    项目中很多时候会碰到这个需求,实现多张图片的无限循环轮转,以前做过,项目中几个地方的都用到了,当时没有封装,几个...

  • iOS无限轮播器

    好吧,我觉得还是直接给个 demo 实在点 。下载地址 轮播实现的过程大致为创建一个 scrollView ,在上...

  • iOS无限轮播器

    地址:github.com/junjiewang1111/unlimitedUIImageView首先,创建轮播器...

  • Swift无限循环的图片轮播

    前言 我们常见的一些广告位、图片轮播都是可以无限轮播的,以前参考文章 iOS开发系列--无限循环的图片浏览器,自己...

  • 推荐广告位轮播开源库

    1.SDCycleScrollView: UIColloctView实现无限循环图片轮播器(推荐使用)。GitHu...

网友评论

      本文标题:无限轮播器

      本文链接:https://www.haomeiwen.com/subject/exrfjttx.html