iOS 广告轮播图的实现与封装

轮播视图的BannerView.h文件

#import <UIKit/UIKit.h>

@class BannerModel;

@interface BannerView : UIView

@property (nonatomic ,copy)void (^tapModelsBlock)(BannerModel *bm);

-(void)setBannerView:(NSMutableArray *)models;

@end

轮播视图的BannerView.m文件   .xib文件的设置请看屏幕快照主要是创建了一个轮播图的模板，主要是UIView(根视图)-->UIscrollView（上下左右layout设置为0）、UIPageControl（底部）-->bgView（UIscrollView的子视图，上下左右为0，等高，宽度拖线[@property (weak, nonatomic) IBOutlet NSLayoutConstraint *bgWidth;]，总共6个限制）

#import "BannerView.h"

#import "BannerModel.h"

#import "Button.h"

#import "UIImageView+WebCache.h"

@interface BannerView ()<UIScrollViewDelegate>

@property (weak,nonatomic)IBOutletUIScrollView *scrollView;

@property (weak,nonatomic)IBOutletNSLayoutConstraint *bgWidth;

@property (weak,nonatomic)IBOutletUIView *bgView;

@property (assign ,nonatomic)NSInteger index;

@property (assign ,nonatomic)NSInteger models_Count;

@property (weak,nonatomic)IBOutletUIPageControl *pageControl;

@property (nonatomic ,strong)NSMutableArray *currentModels;

@property (strong,nonatomic)NSTimer *timer;

@end

@implementation BannerView

-(void)awakeFromNib{

    

//    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(deviceChange:) name:UIDeviceOrientationDidChangeNotification object:nil];

    self.scrollView.delegate =self;

    self.scrollView.pagingEnabled = YES;

    self.scrollView.showsVerticalScrollIndicator = NO;

    self.scrollView.showsHorizontalScrollIndicator = NO;

    self.scrollView.bounces =NO;

}

#pragma mark - 自动滚动广告页面方法

-(void)autoScroll:(NSTimer *)timer{

//    NSLog(@"自动翻转当前页:::::::::--->%ld",_index+1);

    

    if (_index ==_models_Count -1) {

        _index =0;

    }else{

        _index ++;

    }

    _pageControl.currentPage =_index;

    [UIViewanimateWithDuration:0.5animations:^{

        [self.scrollViewsetContentOffset:CGPointMake(_index *APPW, 0)];

    }];

}

//#pragma mark - 设备横竖屏改变

//-(void)deviceChange:(NSNotification *)notice{

//

////    NSLog(@"%@",notice);

////    UIDeviceOrientation  orient = [UIDevice currentDevice].orientation;

//    

//    [self.scrollView setContentOffset:CGPointMake(_index * APPW, 0) animated:YES];

//    //横竖屏时，——bgView的宽度也要跟着变化，重新设定

//    _bgWidth.constant = _models_Count * APPW;

//    

////    [_buttonView setFrame:CGRectMake(0, 0, Screen_W, 75)];

//    

////    NSLog(@"屏幕宽度---->%lf",Screen_W);

//

//

//

//}

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView;{

    /****暂停定时器****/

//    [_timer setFireDate:[NSDate distantFuture]];

    [selfcloseTimer];

}

#pragma mark - 滑动视图滑动结束代理

- (void) scrollViewDidEndDecelerating:(UIScrollView *)scrollView

{

    

    self.index = scrollView.contentOffset.x /APPW;

//    NSLog(@"当前页--->%ld",_index+1);

    [self.scrollViewsetContentOffset:CGPointMake(_index *APPW, 0)];

    _pageControl.currentPage =_index;

    /****打开定时器****/

//    [_timer setFireDate:[NSDate distantPast]];

    [selfopenTimer];

}

#pragma mark - 滚动广告设置这个方法可以供外界调用，主要用于传递轮播图的url地址与其他信息

-(void)setBannerView:(NSMutableArray *)models{

    _bgWidth.constant = models.count *APPW;

    self.scrollView.contentSize =CGSizeMake(models.count,0);

    _currentModels = (NSMutableArray *)models;

    _pageControl.numberOfPages = models.count;

    _models_Count = models.count;

    NSLog(@"图片数---->%ld",models.count);

//    移除_bgView上所有imageView的子控件

    for (UIImageView *imvin_bgView.subviews) {

        if([imvisKindOfClass:[UIImageViewclass]]){

            [imv removeFromSuperview];

        }

    }

    if (models.count ==0) {

        UIImageView *imageView = [[UIImageViewalloc]init];

        [_bgViewaddSubview:imageView];

        [imageView mas_makeConstraints:^(MASConstraintMaker *make) {

            make.top.height.width.equalTo(self.scrollView);

            make.leading.equalTo(self.scrollView);

        }];

        [imageView setImage:[UIImageimageNamed:@"DNF"]];

        return;

    }

    for(int i =0;i < models.count;i ++){

        UIImageView *lastView =_bgView.subviews.lastObject;

        UIImageView *imageView = [[UIImageViewalloc]init];

        [_bgViewaddSubview:imageView];

        [imageView mas_makeConstraints:^(MASConstraintMaker *make) {

            make.top.height.width.equalTo(self.scrollView);

            if (i ==0) {

                make.leading.equalTo(self.scrollView);

            }else{

                make.leading.equalTo(lastView.mas_trailing);

                }

            }];

        BannerModel *currentBM = models[i];

        NSURL *url = [NSURLURLWithString:currentBM.indexBanner];

        [imageView sd_setImageWithURL:urlplaceholderImage:[UIImageimageNamed:@"DNF"]];

        UITapGestureRecognizer *tap = [[UITapGestureRecognizeralloc]initWithTarget:selfaction:@selector(imageTapAction:)];

        [imageView setUserInteractionEnabled:YES];

        [imageView addGestureRecognizer:tap];

    }

    [selfopenTimer];

    

}

-(void)openTimer{

    //广告循环播放

    _timer = [NSTimerscheduledTimerWithTimeInterval:5.0target:selfselector:@selector(autoScroll:)userInfo:nilrepeats:YES];

}

-(void)closeTimer{

    [_timerinvalidate];

    _timer =nil;

}

#pragma mark - 图片点击事件

-(void)imageTapAction:(UITapGestureRecognizer *)tap{

   

    BannerModel *bm =_currentModels[_index];

   

    self.tapModelsBlock(bm);

    

}

控制器的实现轮播效果主要是调用bannerView的-(void)setBannerView:(NSMutableArray *)models这个方法

#pragma mark - 首页广告

    BannerView *bannerView = [[[NSBundlemainBundle]loadNibNamed:@"BannerView"owner:niloptions:nil]firstObject];

    _bannerView = bannerView;

    [_headViewaddSubview:bannerView];

点击事件的block回调

    _bannerView.tapModelsBlock = ^(BannerModel *model){

        NSLog(@"点击广告页");

    };

    [bannerView mas_makeConstraints:^(MASConstraintMaker *make) {

        make.top.leading.trailing.equalTo(_headView);

        make.height.equalTo(@200);

    }];

    //    广告页网络请求

    [selfrequestHeadView];

#pragma mark - 网络请求首页广告，建立模型最后调用bannerView的-(void)setBannerView:(NSMutableArray *)models这个方法，网络请求类请用自己熟悉的或AFNetworking，这一步主要是拿到数据建立模型，最后调用方法

-(void)requestHeadView{

    [HYBNetworkingpostWithUrl:KshowBannerparams:nilsuccess:^(id response) {

        NSLog(@"请求成功---%@",response);

        if ([response[@"code"]integerValue]==0) {

            NSMutableArray *bannerArr = [NSMutableArrayarray];

            for (NSDictionary *dicin response[@"jsonObj"]) {

                BannerModel *model = [[BannerModelalloc]initWithDic:dic];

                [bannerArr addObject:model];

            }

            

            [_bannerViewsetBannerView:bannerArr];

        }else{

            MMPopupItem *item1 =MMItemMake(@"返回",MMItemTypeNormal, ^(NSInteger index) {

            });

            MMAlertView *alertView = [[MMAlertViewalloc]initWithTitle:@"错误提示"detail:response[@"msg"]items:@[item1]];

            [alertView show];

        }

    } fail:^(NSError *error) {

        [selfrequestNetWorkingFailAlert];

    }];

}

最后效果图请看gif图片，这里需要注意的是本人用了Masonry、SDWebImage（这两个是必须的）等一些第三方库