1. 程式人生 > >IOS開發輪播圖Banner

IOS開發輪播圖Banner

一:首先我們要建立一個繼承於UIView的類

我們在.h裡新增拓展

#import <UIKit/UIKit.h>

@class BannerView;

@protocol BannerViewDelegate <NSObject>

@optional //可選

- (void)selectImage:(BannerView *)bannerView currentImage:(NSInteger )currentImage;

@end

@interface BannerView : UIView

@property (nonatomic , weak) id <BannerViewDelegate> delegate;

//自定義init方法
- (id)initWithFrame:(CGRect)frame addImageArray:(NSMutableArray *)addImageArray;

@end

二:在.m裡宣告屬性

#import "BannerView.h"

@interface BannerView ()<UIScrollViewDelegate>

@property (nonatomic , strong) UIScrollView *scrollView;
@property (nonatomic , assign) CGFloat width;
@property (nonatomic , assign) CGFloat height;
@property (nonatomic , strong) NSMutableArray *dataArray;
@property (nonatomic , strong) UIPageControl *pageControl;
@property (nonatomic , strong) NSTimer *timer;

@end

然後在下面實現init方法

@implementation BannerView

//自定義init方法/構造方法
- (id)initWithFrame:(CGRect)frame addImageArray:(NSMutableArray *)addImageArray
{
    if (self = [super initWithFrame:frame])
    {
        //獲取self寬度
        _width = self.frame.size.width;
        
        //獲取self高度
        _height = self.frame.size.height;
        
        //改變圖片陣列 1 2 3 4 5 6
        _dataArray = [NSMutableArray arrayWithArray:addImageArray];
        
        //在陣列的最後一位新增上第一張圖片 1 2 3 4 5 6 1
        [_dataArray addObject:addImageArray[0]];
        
        //在第一個位置插入圖片6 | 6 1 2 3 4 5 6 1
        [_dataArray insertObject:[addImageArray lastObject] atIndex:0];
        
        //將scrollView新增到self上
        [self addSubview:self.scrollView];
        
        //新增page
        [self addSubview:self.pageControl];
        
        //新增定時器
        [self addTimer];
    }
    
    return self;
}

新增定時器

//新增定時器
- (void)addTimer
{
    _timer = [NSTimer timerWithTimeInterval:2 target:self selector:@selector(change) userInfo:nil repeats:YES];
    
    [[NSRunLoop currentRunLoop] addTimer:_timer forMode:NSRunLoopCommonModes];
}

定時器事件

//定時器方法
- (void)change
{
    //獲取起始位置
    CGFloat startX = _scrollView.contentOffset.x;
    
    //獲取終點
    CGFloat endX = startX + _width;
    
    if (endX == (_dataArray.count - 1) * _width)
    {
        //動畫時長  animateWithDuration
        [UIView animateWithDuration:0.25 animations:
        ^{
            //往最後一位走
            _scrollView.contentOffset = CGPointMake(endX, 0);
        }
        completion:^(BOOL finished)
        {
            //走向第二位
            _scrollView.contentOffset = CGPointMake(_width, 0);
            
            //走到對應的點
            NSInteger tmpPage = _scrollView.contentOffset.x / _width;
            
            _pageControl.currentPage = tmpPage - 1;
        }];
    }
    else
    {
        [UIView animateWithDuration:0.25 animations:
        ^{
            _scrollView.contentOffset = CGPointMake(endX, 0);
        }];
        
        //走到對應的點
        NSInteger tmpPage = _scrollView.contentOffset.x / _width;
        
        _pageControl.currentPage = tmpPage - 1;
    }
    
}

初始化ScrollView

//初始化scrollView
- (UIScrollView *)scrollView
{
    if (!_scrollView)
    {
        _scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
        
        //滾動範圍
        _scrollView.contentSize = CGSizeMake(_width * _dataArray.count, _height);
        
        //起始頁
        _scrollView.contentOffset = CGPointMake(_width, 0);
        
        //新增分頁效果
        _scrollView.pagingEnabled = YES;
        
        //禁止彈簧效果
        _scrollView.bounces = NO;
        
        _scrollView.delegate = self;
        
        //禁止水平滾動
        _scrollView.showsHorizontalScrollIndicator = NO;
        
        for (int i = 0; i < _dataArray.count; i++)
        {
            UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(_width * i, 0, _width, _height)];
            
            imageView.image = [UIImage imageNamed:_dataArray[i]];
            
            //新增手勢
            UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tapAction:)];
            
            //將手勢新增到圖片上
            [imageView addGestureRecognizer:tap];
            
            //與使用者互動
            imageView.userInteractionEnabled = YES;
            
            [_scrollView addSubview:imageView];
        }
    }
    
    return _scrollView;
}

手勢方法


//手勢方法
- (void)tapAction:(UITapGestureRecognizer *)recognizer
{
    //如果代理響應該方法 , 就走該方法
    if ([self.delegate respondsToSelector:@selector(selectImage:currentImage:)])
    {
        [self.delegate selectImage:self currentImage:self.pageControl.currentPage];
    }
}
 

初始化pageController

//初始化pageControl
- (UIPageControl *)pageControl
{
    if (!_pageControl)
    {
        _pageControl = [[UIPageControl  alloc]initWithFrame:CGRectMake(20, _height - 30, _width - 20 * 2, 30)];
        
        //小圓點的數量
        _pageControl.numberOfPages = _dataArray.count - 2;
        
        _pageControl.currentPageIndicatorTintColor  = [UIColor redColor];
        
        //不讓使用者互動
        _pageControl.userInteractionEnabled = NO;
    }
    
    return _pageControl;
}

代理方法

//代理方法  將要拖拽的時候把timer停止
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    if (_timer)
    {
        //timer停止在未來的一個時間
        [_timer setFireDate:[NSDate distantFuture]];
    }
}
//代理方法  已經結束減速
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    //恢復時間timer
    if (_timer)
    {
        [_timer setFireDate:[NSDate dateWithTimeIntervalSinceNow:2]];
    }
    
    //獲取滑動結束的偏移量
    CGPoint currentOffSet = scrollView.contentOffset;
    
    //如果是在最後一頁的話 , 讓scrollView滾到第一頁
    if (currentOffSet.x == (_dataArray.count - 1)* _width)
    {
        _scrollView.contentOffset = CGPointMake(_width, 0);
    }
    
    //如果是第一頁的時候 , 偏移量為0
    if (currentOffSet.x == 0)
    {
        _scrollView.contentOffset = CGPointMake((_dataArray.count - 2) * _width, 0);
    }
    
    //獲取最新偏移量
    CGPoint newOffSet = _scrollView.contentOffset;
    
    //獲取偏移了多少個寬度
    NSInteger tmpPage = newOffSet.x / _width;
    
    //設定當前pageControl的當前點
    _pageControl.currentPage = tmpPage - 1;
    
}

^*^封裝完畢

我們只需在要用無限輪播的類裡面,匯入標頭檔案,遵守bannerView代理 和新增元素屬性

在viewdidload初始化新增即可實現