由于录制的视频是mov格式,真不知道该怎么转换成GIF的,所以,就随便贴一张静态图来吧~
开始做之前百度了一下,有好几种方法来做这个,但是我这个要求是要用三个ImageView套在ScrollView里面实现复用,所以就用这种办法来做的
由于要有封装性,所以新建一个Carousel的类,继承与UIView。
Carousel.h
//
// Carousel.h
// 广告轮播
//
// Created by 刘雅兰 on 2017/11/28.
// Copyright © 2017年 刘雅兰. All rights reserved.
//
#import <UIKit/UIKit.h>
@interface Carousel : UIView
@property (strong,nonatomic) NSArray *images;//图片
@property (assign,nonatomic) NSTimeInterval timeInterval;//时间
@end
Carousel.m
//
// Carousel.m
// 广告轮播
//
// Created by 刘雅兰 on 2017/11/28.
// Copyright © 2017年 刘雅兰. All rights reserved.
//
#import "Carousel.h"
#define SCREEN_WIDTH ([[UIScreen mainScreen] bounds].size.width)
@interface Carousel()<UIScrollViewDelegate>
@property (strong,nonatomic) UIScrollView *scrollView;
@property (strong,nonatomic) UIPageControl *pageControl;
@property (assign,nonatomic) NSTimer *timer;//定时器
@property (assign,nonatomic) NSInteger currentPage;
@property (strong,nonatomic) UIImageView *leftImageView;
@property (strong,nonatomic) UIImageView *middleImageView;
@property (strong,nonatomic) UIImageView *rightImageView;
@property (strong ,nonatomic) NSMutableArray *arrayView;
@end
@implementation Carousel
-(instancetype)initWithFrame:(CGRect)frame{
self = [super initWithFrame:frame];
if (self) {
_currentPage = 0;
[self createUI];
}
return self;
}
-(void)createUI{
_scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, 220)];
_scrollView.showsHorizontalScrollIndicator = NO;
_scrollView.showsVerticalScrollIndicator = NO;
_scrollView.pagingEnabled = YES;
_scrollView.scrollEnabled = YES;
_scrollView.bounces = 0;
[self addSubview:_scrollView];
// _leftImageView = [[UIImageView alloc]initWithFrame:CGRectMake(SCREEN_WIDTH * 0, 0, SCREEN_WIDTH, 220)];
// _leftImageView.userInteractionEnabled = YES;
// [_scrollView addSubview:_leftImageView];
//
// _middleImageView = [[UIImageView alloc]initWithFrame:CGRectMake(SCREEN_WIDTH * 1, 0, SCREEN_WIDTH, 220)];
// _middleImageView.userInteractionEnabled = YES;
// [_scrollView addSubview:_middleImageView];
//
// _rightImageView = [[UIImageView alloc]initWithFrame:CGRectMake(SCREEN_WIDTH * 2, 0, SCREEN_WIDTH, 220)];
// _rightImageView.userInteractionEnabled = YES;
// [_scrollView addSubview:_rightImageView];
NSInteger imgViewCounts = 3;
_scrollView.contentSize = CGSizeMake(imgViewCounts *SCREEN_WIDTH, 220);
for (NSInteger i = 0; i < imgViewCounts; i++) {
UIImageView *imgView = [UIImageView new];
imgView.frame = CGRectMake(SCREEN_WIDTH *i, 0, SCREEN_WIDTH, 220);
[_scrollView addSubview:imgView];
if (i == 0){
_leftImageView = imgView;
}
if (i == 1) {
_middleImageView = imgView;
}
if (i == 2) {
_rightImageView = imgView;
}
}
_scrollView.contentOffset = CGPointMake(SCREEN_WIDTH, 0);
_pageControl = [[UIPageControl alloc]initWithFrame:CGRectMake(0, 200, SCREEN_WIDTH, 20)];
_pageControl.currentPageIndicatorTintColor = [UIColor blackColor];
_pageControl.pageIndicatorTintColor = [UIColor whiteColor];
[self addSubview:_pageControl];
// 显示中间的视图
// _scrollView.contentOffset = CGPointMake(SCREEN_WIDTH, 0);
_scrollView.delegate = self;
// 开始是第一张图片
_currentPage = 0;
// _leftImageView.backgroundColor = [UIColor redColor];
// _middleImageView.backgroundColor = [UIColor yellowColor];
// _rightImageView.backgroundColor = [UIColor blueColor];
// _leftImageView.image = [UIImage imageNamed:_images[_images.count - 1]];
// _middleImageView.image = [UIImage imageNamed:_images[_currentPage]];
// _rightImageView.image = [UIImage imageNamed:_images[_currentPage + 1]];
_arrayView = [NSMutableArray arrayWithCapacity:3];
[_arrayView addObject:_leftImageView];
[_arrayView addObject:_middleImageView];
[_arrayView addObject:_rightImageView];
}
//滚动
-(void)scrollViewDidScroll:(UIScrollView *)scrollView {
// [self stopTimer];
[self checkOffset];
// [self stopTimer];
}
-(void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView{
// [self autoScroll];
}
-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
// [self autoScroll];
}
// 每次向左滑动到rightImageView,且滑动结束后把middleImageView的图片更新为rightImageView一样的图片,rightImageView更新为nextIMG,且scrollView.contentOffset强制调整为middleImageView.frame.x,最后更新leftImageView
// 每次向右滑动到leftImageView,且滑动结束后把middleImageView的图片更新为leftImageView一样的图片,leftImageView更新为lastIMG,且scrollView.contentOffset强制调整为middleImageView.frame.x,最后更新rightImageView
/*
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
CGFloat currentX = scrollView.contentOffset.x;
NSLog(@"scrollViewDidEndDecelerating%.2f",currentX);
if (currentX == 0) {
id obj = _arrayView.lastObject;
[_arrayView removeLastObject];
[_arrayView insertObject:obj atIndex:0];
int i = 0;
for (UIImageView *imgView in _arrayView) {
imgView.frame = CGRectMake(i * SCREEN_WIDTH, 0, SCREEN_WIDTH, 220);
i++;
}
[_scrollView setContentOffset:CGPointMake(SCREEN_WIDTH, 0)];
} else if (currentX == 2 * SCREEN_WIDTH) {
id obj = _arrayView.firstObject;
[_arrayView removeObjectAtIndex:0];
[_arrayView insertObject:obj atIndex:_arrayView.count];
int i = 0;
for (UIImageView *imgView in _arrayView) {
imgView.frame = CGRectMake(i * SCREEN_WIDTH, 0, SCREEN_WIDTH, 220);
i++;
}
[_scrollView setContentOffset:CGPointMake(SCREEN_WIDTH, 0)];
}
}
*/
-(void)checkOffset {
// 左
if (_scrollView.contentOffset.x <= 0) {
_middleImageView.image = _leftImageView.image;
_scrollView.contentOffset = CGPointMake(SCREEN_WIDTH, 0);
_currentPage--;
[self refreshIMG];
}
// 右
else if (_scrollView.contentOffset.x >= SCREEN_WIDTH *2) {
_middleImageView.image = _rightImageView.image;
_scrollView.contentOffset = CGPointMake(SCREEN_WIDTH, 0);
_currentPage++;
[self refreshIMG];
}
}
- (void)refreshIMG {
if (_currentPage < 0) {
_currentPage = _images.count-1;
}
else if (_currentPage >= _images.count) {
_currentPage = 0;
}
// middleImageView的img为01.jpg的时候,leftImageView应显示06.img
NSInteger leftIndex;
if (_currentPage == 0) {
leftIndex=_images.count-1;
}else{
leftIndex=_currentPage-1;
}
NSInteger rightIndex;
if (_currentPage+1 == _images.count) {
rightIndex = 0;
}else{
rightIndex = _currentPage +1;
}
// 左
_leftImageView.image = [UIImage imageNamed:_images[leftIndex]];
// 中
_middleImageView.image = [UIImage imageNamed:_images[_currentPage]];
// 右
_rightImageView.image = [UIImage imageNamed:_images[rightIndex]];
// 小点
_pageControl.currentPage = _currentPage;
}
#pragma mark setter
- (void)setImages:(NSArray *)images {
_images = images;
_pageControl.numberOfPages = images.count;
[self refreshIMG];
// [self beginTimer];
// [self autoScroll];
}
- (void)setTimeInterval:(NSTimeInterval)timeInterval {
_timeInterval = timeInterval;
// return;
[self autoScroll];
}
- (void)autoScroll {
if (!_timer) {
_timer= [NSTimer scheduledTimerWithTimeInterval:_timeInterval target:self selector:@selector(sad) userInfo:nil repeats:YES];
[[NSRunLoop mainRunLoop]addTimer:_timer forMode:NSDefaultRunLoopMode];
}
}
- (void)sad {
NSLog(@"haha");
CGPoint offset = CGPointMake(SCREEN_WIDTH *2, 0);
[_scrollView setContentOffset:offset animated:YES];
}
- (void)stopTimer {
[_timer invalidate];
_timer = nil;
}
/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
// Drawing code
}
*/
@end
可以看到我注释了一大堆,纠结好这个不容易啊!!!还求助了各种大神!
接下来,在ViewController里面使用了
ViewController.m
//
// ViewController.m
// 广告轮播
//
// Created by 刘雅兰 on 2017/11/28.
// Copyright © 2017年 刘雅兰. All rights reserved.
//
#import "ViewController.h"
#import "Carousel.h"
@interface ViewController ()<UIScrollViewDelegate>
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
UIView *viewUp = [[UIView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 64)];
UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(146, 44, 100, 20)];
label.text = @"BLACKPINK";
[viewUp addSubview:label];
[self.view addSubview:viewUp];
NSArray *images = @[@"01.jpg",@"02.jpg",@"03.jpg",@"04.jpg",@"05.jpg",@"06.jpg"];
Carousel *carousel = [[Carousel alloc] initWithFrame:CGRectMake(0, 100, self.view.frame.size.width, 220)];
carousel.images = images;
carousel.timeInterval = 2.0;
[self.view addSubview:carousel];
// Do any additional setup after loading the view from its nib.
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
/*
#pragma mark - Navigation
// In a storyboard-based application, you will often want to do a little preparation before navigation
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
// Get the new view controller using [segue destinationViewController].
// Pass the selected object to the new view controller.
}
*/
@end
ok呐,就酱紫,折磨了我三天!
demo链接:https://gitee.com/LanXiaoMei/FengZhuangGuangGaoLunBoTu/tree/master