美文网首页
封装广告轮播图

封装广告轮播图

作者: 兰歌er | 来源:发表于2017-12-01 10:11 被阅读14次
    效果图: 轮播图.jpg

    由于录制的视频是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

    相关文章

      网友评论

          本文标题:封装广告轮播图

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