IOS轮播图

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了IOS轮播图相关的知识,希望对你有一定的参考价值。

轮播图播放的主要技术在于:

cell的封装。这里采用UICollectionViewCell实现。

#import <UIKit/UIKit.h>

@interface CircleViewCell : UICollectionViewCell

@property (nonatomic, strong) UIImage* image;

@property (nonatomic, assign) NSInteger index;

@end

//

//  CircleViewCell.m

//  lunbo

//

//  Created by  JIAOXIANGJIE on 16/10/12.

//  Copyright © 2016年 lumen. All rights reserved.

//

 

#import "CircleViewCell.h"

 

@interface CircleViewCell()

 

@property (nonatomic, strong) UIImageView* imageview;

 

@end

 

@implementation CircleViewCell

 

-(instancetype)init{

    if(self = [super init]){

        [self myInit];

    }

    

    return self;

}

 

-(instancetype)initWithCoder:(NSCoder *)aDecoder

{

    if(self = [super initWithCoder:aDecoder])

        [self myInit];

    

    return self;

}

 

-(instancetype)initWithFrame:(CGRect)frame

{

    if(self = [super initWithFrame:frame])

        [self myInit];

    

    return self;

}

 

-(void)layoutSubviews

{

    [super layoutSubviews];

    

    self.imageview.frame = self.contentView.bounds;

}

 

-(UIImageView*)imageview

{

    if(_imageview == nil){

        _imageview = [[UIImageView alloc] init];

        

        _imageview.contentMode = UIViewContentModeScaleAspectFill;

        _imageview.userInteractionEnabled = YES;

        _imageview.backgroundColor = [UIColor whiteColor];

    }

    

    return _imageview;

}

 

-(void)setImage:(UIImage *)image

{

    _image = image;

    

    self.imageview.image = image;

}

 

//

//  CircleScrollView.h

//  lunbo

//

//  Created by  JIAOXIANGJIE on 16/10/12.

//  Copyright © 2016年 lumen. All rights reserved.

//

 

#import <UIKit/UIKit.h>

 

@class CircleScrollView;

@protocol CircleScrollViewDelegate <NSObject>

 

- (void)didClickImageAtIndex:(NSInteger)index scrollView:(CircleScrollView *)scrollView;

 

@end

 

@interface CircleScrollView : UIView

 

@property (nonatomic, weak) id<CircleScrollViewDelegate> delegate;//设置代理

@property (nonatomic, assign) NSTimeInterval duringTimel;//间隔时间

 

-(void)images:(NSArray*)images;

-(void)closeTimer;

-(void)openTimer;

 

@end

-(void)myInit{

    [self.contentView addSubview:self.imageview];

}

@end

 

//

//  CircleScrollView.m

//  lunbo

//

//  Created by  JIAOXIANGJIE on 16/10/12.

//  Copyright © 2016年 lumen. All rights reserved.

//

 

#import "CircleScrollView.h"

#import "CircleViewCell.h"

 

@interface CircleScrollView()<UICollectionViewDataSource,UICollectionViewDelegate>

 

@property (nonatomic, strong) UICollectionView* collectionView;

@property (nonatomic, strong) NSArray* images;//图片数组

@property (nonatomic, assign) NSInteger imagecount;//图片数量

@property (nonatomic, strong) NSMutableArray* cellData;//数组

 

@property (nonatomic, strong) UIPageControl* pageControl;

@property (nonatomic, strong) NSTimer* timer;

@property (nonatomic, strong) NSLock* mlock;//加锁 用于多线程

 

@end

 

@implementation CircleScrollView

 

static NSString *CollectionCellID = @"CollectionCellID";

 

-(instancetype)initWithFrame:(CGRect)frame

{

    if(self = [super initWithFrame:frame]){

        //初始化数据信息

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

        flowLayout.itemSize = frame.size;

        flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;

        flowLayout.minimumLineSpacing = 0;

        flowLayout.minimumInteritemSpacing = 0;

        flowLayout.sectionInset = UIEdgeInsetsMake(0, 0, 0, 0);

        

        self.collectionView = [[UICollectionView alloc] initWithFrame:self.bounds

                                                 collectionViewLayout:flowLayout];

        self.collectionView.delegate = self;

        self.collectionView.dataSource = self;

        self.collectionView.pagingEnabled = YES;

        self.collectionView.showsHorizontalScrollIndicator = NO;

        self.collectionView.showsVerticalScrollIndicator = NO;

        self.collectionView.alwaysBounceHorizontal = YES;

        self.collectionView.alwaysBounceVertical = NO;

        self.collectionView.backgroundColor = [UIColor whiteColor];

        [self.collectionView registerClass:[CircleViewCell class]

                forCellWithReuseIdentifier:CollectionCellID];

        [self addSubview:self.collectionView];

        

        self.pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake( 0, self.bounds.size.height - 30, self.bounds.size.width, 30)];

        self.pageControl.tag = 100;

        self.pageControl.userInteractionEnabled = NO;

        [self addSubview:self.pageControl];

        [self bringSubviewToFront:self.pageControl];

        self.backgroundColor = [UIColor whiteColor];

        self.mlock = [[NSLock alloc] init];

    }

    

    return self;

}

 

-(void)setDuringTimel:(NSTimeInterval)duringTimel

{

    _duringTimel = duringTimel;

    

    if(duringTimel < 0.001)

        return;

    

    [self closeTimer];

    [self openTimer];

}

 

-(void)images:(NSArray*)images

{

    [self.mlock lock];

    [self closeTimer];

    

    _images = images;

    _imagecount = images.count;

    

    self.cellData = [[NSMutableArray alloc] init];

    for(NSInteger i = 0; i < 100; i++){

        for (NSInteger j = 0; j < _imagecount; j++) {

            [self.cellData addObject:@(j)];

        }

    }

    

    [self.collectionView reloadData];

    [self.collectionView scrollToItemAtIndexPath:[NSIndexPath indexPathForRow:50 * _imagecount inSection:0]

                                atScrollPosition:UICollectionViewScrollPositionLeft

                                        animated:NO];

    //设置

    self.pageControl.hidden = _imagecount > 0 ? NO: YES;

    self.pageControl.numberOfPages = _imagecount;

    self.pageControl.currentPage = 0;

    

    [self openTimer];

    [self.mlock unlock];

}

 

-(void)closeTimer

{

    if(self.timer)

        [self.timer invalidate];

}

 

-(void)openTimer

{

    if(_duringTimel > 0.8)

        self.timer = [NSTimer scheduledTimerWithTimeInterval:_duringTimel

                                                      target:self

                                                    selector:@selector(onTimer)

                                                    userInfo:nil

                                                     repeats:YES];

}

 

-(void)onTimer

{

    if(self.cellData.count > 0){

        NSArray* array = [self.collectionView indexPathsForVisibleItems];

        

        if(array.count == 0)

            return;

        

        NSIndexPath* indexPath = array[0];

        NSInteger row = indexPath.row;

        

        if(row % _imagecount == 0){

            row = 50 * _imagecount;

            [self.collectionView scrollToItemAtIndexPath:[NSIndexPath indexPathForRow:row inSection:0] atScrollPosition:UICollectionViewScrollPositionLeft animated:NO];

        }

        [self.collectionView scrollToItemAtIndexPath:[NSIndexPath indexPathForRow:row + 1 inSection:0] atScrollPosition:UICollectionViewScrollPositionLeft animated:YES];

        self.pageControl.currentPage = (row + 1) % _imagecount;

    }

}

 

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {

    return 1;

}

 

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {

    return self.cellData.count;

}

 

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath

{

    CircleViewCell* cell = [collectionView dequeueReusableCellWithReuseIdentifier:CollectionCellID forIndexPath:indexPath];

    

    NSInteger index = [_cellData[indexPath.row] integerValue];

    cell.image = _images[index];

    cell.index = index;

    

    return cell;

}

 

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {

    // 动画停止, 重新定位到第 50 组模型

    int inc = ((int)(scrollView.contentOffset.x / scrollView.frame.size.width)) % _imagecount;

    [self.collectionView scrollToItemAtIndexPath:[NSIndexPath indexPathForRow:50 * _imagecount + inc inSection:0] atScrollPosition:UICollectionViewScrollPositionLeft animated:NO];

    

    // 设置 PageControl

    self.pageControl.currentPage = inc;

}

 

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {

    CircleViewCell *cell = (CircleViewCell *)[collectionView cellForItemAtIndexPath:indexPath];

    if ([self.delegate respondsToSelector:@selector(didClickImageAtIndex:scrollView:)]) {

        [self.delegate didClickImageAtIndex:cell.index scrollView:self];

    }

}

@end

 

//

//  ViewController.m

//  lunbo

//

//  Created by  JIAOXIANGJIE on 16/10/12.

//  Copyright © 2016年 lumen. All rights reserved.

//

 

#import "ViewController.h"

#import "CircleScrollView.h"

 

@interface ViewController ()<CircleScrollViewDelegate>

 

@end

 

@implementation ViewController

 

- (void)viewDidLoad {

    [super viewDidLoad];

 

    self.view.backgroundColor = [UIColor lightGrayColor];

    

    CGSize size = [UIScreen mainScreen].bounds.size;

    CircleScrollView* scrollview = [[CircleScrollView alloc] initWithFrame:CGRectMake(0, 20, size.width, size.width * 504 / 1080)];

    scrollview.delegate = self;

    [scrollview images:@[[UIImage imageNamed:@"photo_loading"]]];      // 占位图

    [self.view addSubview:scrollview];

    

    UIImage *m1 = [UIImage imageNamed:@"m1.jpg"];

    UIImage *m2 = [UIImage imageNamed:@"m2.jpg"];

    UIImage *m3 = [UIImage imageNamed:@"m3.jpg"];

    UIImage *m4 = [UIImage imageNamed:@"m4.jpg"];

    UIImage *m5 = [UIImage imageNamed:@"m5.jpg"];

    

    CircleScrollView* scroll1 = [[CircleScrollView alloc] initWithFrame:CGRectMake(0, 220, size.width, size.width * 504 / 1080)];

    scroll1.delegate = self;

    scroll1.duringTimel = 1.0;

    [scroll1 images:@[m1,m2]];

    

    CircleScrollView* view = [[CircleScrollView alloc] initWithFrame:CGRectMake( 0, 420, size.width, size.width * 504 / 1080)];

    view.delegate = self;

    [view images:@[m1, m2, m3, m4, m5]];

    [self.view addSubview:view];

}

 

- (void)didReceiveMemoryWarning {

    [super didReceiveMemoryWarning];

    

}

 

- (void)didClickImageAtIndex:(NSInteger)index scrollView:(CircleScrollView *)scrollView {

    NSLog(@"%li", index);

}

@end

效果图:

技术分享技术分享

以上是关于IOS轮播图的主要内容,如果未能解决你的问题,请参考以下文章

vue_cli轮播图--swiper插件

这周用到的圆形轮播插件 mislider.js

IOS轮播图

iOS--轮播图实现

幼儿园小程序实战开发教程(中篇)

幼儿园小程序实战开发教程(中篇)