iOS 使用UIView做轮播

最新推荐文章于 2022-08-10 15:39:19 发布

布衣秀才

最新推荐文章于 2022-08-10 15:39:19 发布

阅读量755

点赞数

本文介绍了一个自定义的BannerView组件，该组件基于UIKit框架，用于实现iOS应用中的轮播图功能。文章详细展示了BannerView的接口及其实现细节，包括如何设置轮播图的图片数组、自动滚动效果、响应用户点击事件等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转自：https://blog.youkuaiyun.com/wang6177/article/details/56289572

BannerView.h

#import <UIKit/UIKit.h>

@protocol BannerViewDelegate;

@interface BannerView : UIView <UIScrollViewDelegate>
{
    __unsafe_unretained id <BannerViewDelegate> _delegate;
}

@property (nonatomic, assign) id <BannerViewDelegate> bannerdelegate;

@property (nonatomic, assign) NSInteger currentPage;

@property (nonatomic, readonly) UIScrollView *scrollView;

@property (nonatomic, readonly) UIPageControl *pageControl;

-(void)shouldAutoShow:(BOOL)shouldStart;
- (id)initWithFrame:(CGRect)frame;
-(void)setImageViewAry:(NSArray <UIView *>*)iViewAry;
-(void)setCurrentPage:(NSInteger)currentPage;
@end

@protocol BannerViewDelegate <NSObject>

@optional
- (void)didClickPage:(BannerView *)view atIndex:(NSInteger)index;//点击选中
-(void)selectPageIndex:(long)index;//当前显示的页码
@end

BannerView.m

//
//  BannerView.m
//  Library
//
//  Created by pactera on 16/12/12.
//  Copyright © 2016年 Pactera. All rights reserved.
//

#import "BannerView.h"
@interface BannerView ()
{
    UIView *_firstView;
    UIView *_middleView;
    UIView *_lastView;
    
    float _viewWidth;
    float _viewHeight;
    
    NSTimer *_autoScrollTimer;
    
    UITapGestureRecognizer *_tap;
    BOOL startanimation;
}
@property (nonatomic, strong) NSArray <UIView *>* viewList;

@property (nonatomic) NSInteger showIndex;
@end

@implementation BannerView
- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        _viewWidth = self.bounds.size.width;
        _viewHeight = self.bounds.size.height;
        
        //设置scrollview
        _scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, _viewWidth, _viewHeight)];
        _scrollView.delegate = self;
        _scrollView.contentSize = CGSizeMake(_viewWidth * 3, _viewHeight);
        _scrollView.showsHorizontalScrollIndicator = NO;
        _scrollView.pagingEnabled = YES;
        _scrollView.backgroundColor = [UIColor clearColor];
        _scrollView.delegate = self;
        
        [self addSubview:_scrollView];
        
        //设置分页
        _pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, 0, _viewWidth, 30)];
        _pageControl.userInteractionEnabled = NO;
        _pageControl.currentPageIndicatorTintColor = [UIColor colorWithHexString:ThemeColor];
        _pageControl.pageIndicatorTintColor = [UIColor lightGrayColor];
        _pageControl.backgroundColor = [UIColor clearColor];
        [self addSubview:_pageControl];
        [_pageControl mas_makeConstraints:^(MASConstraintMaker *make) {
            make.width.mas_equalTo(_viewWidth);
            make.height.mas_equalTo(20);
            make.left.equalTo(0);
            make.bottom.equalTo(self.bottom);
        }];
        UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(handleTap:)];
        [self addGestureRecognizer:tap];
    }
    return self;
}

#pragma mark 单击手势
-(void)handleTap:(UITapGestureRecognizer*)sender
{
    if ([_bannerdelegate respondsToSelector:@selector(didClickPage:atIndex:)]) {
        [_bannerdelegate didClickPage:self atIndex:_currentPage+1];
    }
    
}

#pragma mark 设置imageViewAry
-(void)setImageViewAry:(NSArray <UIView *>*)iViewAry
{
    if (iViewAry) {
        _viewList = iViewAry;
        _currentPage = 0; //默认为第0页
        _pageControl.numberOfPages = _viewList.count;
    }
    
    [self reloadData];
}

#pragma mark 刷新view页面
-(void)reloadData
{
    if (!_firstView) {
        NSLog(@"1");
        startanimation = YES;
    }else{
        [UIView animateWithDuration:0.5 animations:^{
            _firstView.frame = CGRectMake(_viewWidth, 0, _viewWidth, _viewHeight);
            _middleView.frame = CGRectMake(0, 0, _viewHeight, _viewHeight);
            _lastView.frame = CGRectMake(_viewWidth*2, 0, _viewWidth, _viewHeight);
            //            NSLog(@"2");
            startanimation = NO;
        } completion:^(BOOL finished) {
            
        }];
    }
    
    [_firstView removeFromSuperview];
    [_middleView removeFromSuperview];
    [_lastView removeFromSuperview];
    //从数组中取到对应的图片view加到已定义的三个view中
    if (_currentPage==0) {
        _firstView = [_viewList lastObject];
        _middleView = [_viewList objectAtIndex:_currentPage];
        if(_viewList.count>(_currentPage+1)){
            _lastView = [_viewList objectAtIndex:_currentPage+1];
        }
    }
    else if (_currentPage == _viewList.count-1)
    {
        if((_currentPage-1)>=0){
            _firstView = [_viewList objectAtIndex:_currentPage-1];
        }
        _middleView = [_viewList objectAtIndex:_currentPage];
        _lastView = [_viewList firstObject];
    }
    else
    {
        if((_currentPage-1)>=0){
            _firstView = [_viewList objectAtIndex:_currentPage-1];
        }
        _middleView = [_viewList objectAtIndex:_currentPage];
        if(_viewList.count>(_currentPage+1)){
            _lastView = [_viewList objectAtIndex:_currentPage+1];
        }
    }
    
    //设置三个view的frame，加到scrollview上
    _firstView.frame = CGRectMake(0, 0, _viewWidth, _viewHeight);
    _lastView.frame = CGRectMake(_viewWidth*2, 0, _viewWidth, _viewHeight);
    if (startanimation == YES) {
        _middleView.frame = CGRectMake(_viewWidth, 0, _viewWidth, _viewHeight);
    }else{
        [UIView animateWithDuration:0.5 animations:^{
            
            _middleView.frame = CGRectMake(_viewWidth, 0, _viewWidth, _viewHeight);
            
            
        }];
    }
    [_scrollView addSubview:_firstView];
    [_scrollView addSubview:_middleView];
    [_scrollView addSubview:_lastView];
    
    //设置当前的分页
    _pageControl.currentPage = _currentPage;
    
    //显示中间页
    _scrollView.contentOffset = CGPointMake(_viewWidth, 0);
    [_bannerdelegate selectPageIndex:_currentPage];//当前显示的页面序号
}

#pragma mark scrollvie停止滑动
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    //手动滑动时候暂停自动替换
    [_autoScrollTimer invalidate];
    _autoScrollTimer = nil;
    _autoScrollTimer = [NSTimer scheduledTimerWithTimeInterval:10 target:self selector:@selector(autoShowNextImage) userInfo:nil repeats:YES];
    [[NSRunLoop currentRunLoop]addTimer:_autoScrollTimer forMode:NSDefaultRunLoopMode];
    //得到当前页数
    float x = _scrollView.contentOffset.x;
    
    //往前翻
    if (x<=0) {
        if (_currentPage-1<0) {
            _currentPage = _viewList.count-1;
        }else{
            _currentPage --;
        }
    }
    
    //往后翻
    if (x>=_viewWidth*2) {
        if (_currentPage==_viewList.count-1) {
            _currentPage = 0;
        }else{
            _currentPage ++;
        }
    }
    [self reload];
}
-(void)reload
{
    startanimation = YES;
    
    [_firstView removeFromSuperview];
    [_middleView removeFromSuperview];
    [_lastView removeFromSuperview];
    //从数组中取到对应的图片view加到已定义的三个view中
    if (_currentPage==0) {
        _firstView = [_viewList lastObject];
        _middleView = [_viewList objectAtIndex:_currentPage];
        if(_viewList.count>(_currentPage+1)){
            _lastView = [_viewList objectAtIndex:_currentPage+1];
        }
    }
    else if (_currentPage == _viewList.count-1)
    {
        if((_currentPage-1)>=0){
            _firstView = [_viewList objectAtIndex:_currentPage-1];
        }
        _middleView = [_viewList objectAtIndex:_currentPage];
        _lastView = [_viewList firstObject];
    }
    else
    {
        if((_currentPage-1)>=0){
            _firstView = [_viewList objectAtIndex:_currentPage-1];
        }
        _middleView = [_viewList objectAtIndex:_currentPage];
        if(_viewList.count>(_currentPage+1)){
            _lastView = [_viewList objectAtIndex:_currentPage+1];
        }
    }
    
    //设置三个view的frame，加到scrollview上
    _firstView.frame = CGRectMake(0, 0, _viewWidth, _viewHeight);
    _lastView.frame = CGRectMake(_viewWidth*2, 0, _viewWidth, _viewHeight);
    if (startanimation == YES) {
        _middleView.frame = CGRectMake(_viewWidth, 0, _viewWidth, _viewHeight);
    }else{
        [UIView animateWithDuration:0.5 animations:^{
            
            _middleView.frame = CGRectMake(_viewWidth, 0, _viewWidth, _viewHeight);
            
            
        }];
    }
    [_scrollView addSubview:_firstView];
    [_scrollView addSubview:_middleView];
    [_scrollView addSubview:_lastView];
    
    //设置当前的分页
    _pageControl.currentPage = _currentPage;
    
    //显示中间页
    _scrollView.contentOffset = CGPointMake(_viewWidth, 0);
}
#pragma mark 自动滚动
-(void)shouldAutoShow:(BOOL)shouldStart
{
    if (shouldStart)  //开启自动翻页
    {
        if (!_autoScrollTimer) {
            _autoScrollTimer = [NSTimer scheduledTimerWithTimeInterval:10 target:self selector:@selector(autoShowNextImage) userInfo:nil repeats:YES];
            [[NSRunLoop currentRunLoop]addTimer:_autoScrollTimer forMode:NSDefaultRunLoopMode];
            
        }
    }
    else   //关闭自动翻页
    {
        if (_autoScrollTimer.isValid) {
            [_autoScrollTimer invalidate];
            _autoScrollTimer = nil;
        }
    }
}

#pragma mark 展示下一页
-(void)autoShowNextImage
{
    if (_currentPage == _viewList.count-1) {
        _currentPage = 0;
    }else{
        _currentPage ++;
    }
    [self reloadData];
}
#pragma mark 设置当前页面
-(void)setCurrentPage:(NSInteger)currentPage{
    if(currentPage>-1&¤tPage<_viewList.count){
        _currentPage=currentPage;
        [self reloadData];
    }
}
/*
 // Only override drawRect: if you perform custom drawing.
 // An empty implementation adversely affects performance during animation.
 - (void)drawRect:(CGRect)rect {
 // Drawing code
 }
 */

@end

使用方式

 _oneView = [[oneview alloc]init];
    _threeView = [[threeview alloc]init];
//    _twoView = [[twoview alloc]init];
//    _fourview = [[fourview alloc]init];
    
    BannerView *bannerview = [[BannerView alloc]initWithFrame:
                              CGRectMake(0, 74 + 345, self.view.frame.size.width, 301)];
    [bannerview setImageViewAry:@[_oneView,_threeView]];
    [bannerview shouldAutoShow:YES];
    [bannerview setCurrentPage:1];
    bannerview.bannerdelegate = self;
    [self.view addSubview:bannerview];