使用CollectionView简单实现轮播广告栏效果

使用CollectionView简单实现轮播广告栏效果

当自己在做项目时感觉老是得重复写一些广告栏，嫌麻烦，所以自己简单封装了一个广告栏，不足之处希望大家指出，下面简单写下部分代码供大家参考：

- ViewController.m

NSString *urlStr = @"http://api-v2.mall.hichao.com/forum/banner?ga=%2Fforum%2Fbanner";

    NSURL *url = [NSURL URLWithString:urlStr];

    NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:url];

    //9.0版本之前可以用
    [NSURLConnection  sendAsynchronousRequest:request queue:[NSOperationQueue mainQueue] completionHandler:^(NSURLResponse * _Nullable response, NSData * _Nullable data, NSError * _Nullable connectionError) {

        id responseObject = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingMutableContainers error:nil];

        [self handleDataObjectWithOnject:responseObject];
    }];
#pragma mark -封装数据
-(void)handleDataObjectWithOnject:(id)responseObject
{
    [self.ADArray removeAllObjects];

    NSArray *items = responseObject[@"data"][@"items"];
    for (NSDictionary *dic in items)
    {
        ADModel *adModel = [[ADModel alloc]init];

        NSDictionary *dict = dic[@"component"];

        adModel.picUrl = dict[@"picUrl"];

        [self.ADArray addObject:adModel];
    }
    self.adView.ADDataSource  =self.ADArray;
}

• ADView.m

#pragma mark - 懒加载
- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        _ADDataSource = [NSMutableArray array];
    }
    return self;
}
-(UICollectionView *)ADCollectionView
{
    if (!_ADCollectionView) {

        UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];

        //横向滚动
        layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;

        //设置Cell的大小
        layout.itemSize = self.frame.size;

        //清空行距
        layout.minimumLineSpacing = 0;

        UICollectionView *collectionView = [[UICollectionView alloc]initWithFrame:self.bounds collectionViewLayout:layout];

        collectionView.dataSource = self;
        collectionView.delegate = self;

        //关闭下滑线
        collectionView.showsHorizontalScrollIndicator = NO;

        //关闭弹簧效果
        collectionView.bounces = NO;

        //开启翻页模式
        collectionView.pagingEnabled = YES;

        collectionView.backgroundColor = [UIColor whiteColor];

        [self addSubview:collectionView];

        [collectionView registerClass:[ADCell class] forCellWithReuseIdentifier:@"ADCell"];

        _ADCollectionView = collectionView;

    }
    return _ADCollectionView;
}
/**
 *  创建页数
 *
 */
-(void)creatPageControl
{
    pageControl = [[UIPageControl alloc]init];
    pageControl.frame = CGRectMake(0, self.frame.size.height - 20, self.frame.size.width, 20);
    pageControl.tag = 1000;
    pageControl.numberOfPages = _ADDataSource.count - 1;
    pageControl.pageIndicatorTintColor = [UIColor blackColor];
    pageControl.currentPageIndicatorTintColor = [UIColor whiteColor];
    [self addSubview:pageControl];
}

#pragma mark - setter方法
-(void)setADDataSource:(NSMutableArray *)ADDataSource
{
    _ADDataSource = ADDataSource;

    [_ADDataSource addObject:ADDataSource.firstObject];
    //1.刷新
    [self.ADCollectionView reloadData];
    //2.创建页数
    [self creatPageControl];
    //3.创建定时器
    [self createTimer];
}
#pragma mark - 创建定时器
-(void)createTimer
{
    self.timer = [NSTimer scheduledTimerWithTimeInterval:2 target:self selector:@selector(changeImageView) userInfo:nil repeats:YES];
}
#pragma mark - 切换图片
-(void)changeImageView
{
    num++;

    if (num >= _ADDataSource.count - 1)
    {
        num = 0;
        //当滚动到最后一张图片时，回滚到开头不采用动画
        [self scrollToItem:num animated:NO];
    }else
    {
        //滚动到指定的图片
        [self scrollToItem:num animated:YES];
    }
}

#pragma mark - 滚动到指定的图片
-(void)scrollToItem:(NSInteger)index animated:(BOOL)animated
{
    NSIndexPath *indexPath = [NSIndexPath indexPathForRow:index inSection:0];
    [self.ADCollectionView scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionNone animated:animated];
}
#pragma mark - UICollectionViewDataSource
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 1;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return _ADDataSource.count;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{

    ADCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"ADCell" forIndexPath:indexPath];

    cell.adModel = _ADDataSource[indexPath.item];

    return cell;
}

#pragma mark - 滚动时会触发
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGPoint offset = self.ADCollectionView.contentOffset;

    NSInteger page = offset.x / CGRectGetWidth(self.ADCollectionView.frame);

    pageControl.currentPage = page;

    num = page;

    if (page >= _ADDataSource.count - 1)
    {
        [self scrollToItem:0 animated:NO];
    }
}

效果如下

简单广告栏例子下载地址

https://github.com/Chj1995/ADViewWithCollectionViewDemo.git

简单广告栏下工具栏例子下载地址

https://github.com/Chj1995/ADToolView.git

---