Ios教程網 >> IOS編程開發 >> IOS開發基礎 >> 用CollectionView封裝一個廣告視圖

用CollectionView封裝一個廣告視圖

編輯：IOS開發基礎

前言

相信很多初學iOS的朋友一開始都會學到如何用ScrollView做一個可以循環播放的廣告視圖，一般來說，要做一個可以逐頁逐頁滾動的廣告視圖，可以通過在ScrollView上水平連續添加多個ImageView來實現。但是如果在要播放的廣告圖片太多的情況下，這種方法會導致需要創建多個ImageView，占用內存。但是使用CollectionView來做就完全不同了，在這裡我分享一個用CollectionView做的廣告視圖（名為KHAdView），代碼放在Github上，使用說明也有中英版的，各位朋友有需自取哈。GitHub代碼

效果圖

在進行說明前先放上效果圖給大家看看，其實也就是一般的廣告視圖，精華都在代碼裡，強烈建議去github下載源代碼來看

使用CollectionView的好處

利用UICollectionView的復用機制，系統最多只會創建兩個CollectionViewCell，也就是說系統最多只會創建兩個ImageView，在這種情況下，我們就可以做到用兩個ImageView滿足播放無限張圖片的需求，大大減小了對內存的損耗！
可以同時使用UICollectionViewDelegate 和 UIScrollViewDelegate，方便操作和監聽不同的事件

KHAdView的特點

支持雙向循環滾動
可自定義廣告視圖
既可以加載URL也可以加載本地文件

如何使用KHAdView

下載並復制KHAdView文件夾下的源代碼到你的工程目錄。

初始化KHAdView，並為其賦值一個Frame。

KHAdView *view = [[KHAdView alloc]initWithFrame:CGRectMake(0, 0, kScreen_Width, KHAdView_Height)];self.tableView.tableHeaderView = view;

當然，你也可以通過Auto Layout來設置它的大小和位置

使用“setDataSource: WithSourceType:”方法給KHAdView添加數據源，通過SourceType來指定加載的數據源是URL還是本地文件。
```
[self.khAdView setDataSource:_urlArr WithSourceType:KHSourceInternetType];
```
開啟定時器，讓廣告視圖循環滾動。
```
[self.khAdView startTimer];
```
到此你就成功添加了一個高性能的廣告視圖！

自定義還可以得到新的效果

如何自定義：

改變控件的顏色

改變底部背景欄的顏色，默認是黑色

self.khAdView.bottomViewColor = [UIColor redColor];

改變PageControl的指示顏色，默認是白色

self.khAdView.pageIndicatorTintColor = [UIColor yellowColor];

改變當前頁PageControl的指示顏色，默認是紅色

self.khAdView.currentPageIndicatorTintColor = [UIColor blackColor];

改變底部背景欄的高度，默認是30
```
self.khAdView.bottomViewHeight = 50;
```
改變底部背景欄的透明度，默認是0.3
```
self.khAdView.alpha = 1.0;
```
改變定時器的時間間隔，默認是2
```
self.khAdView.timeInterval = 1.f;
```
改變廣告視圖的滾動方向，默認是從右向左滾動
```
self.khAdView.direction = KHScrollDirectionFromLeft;
```

隱藏底部背景欄和頁碼指示器，默認不隱藏

self.khAdView.hideBottomView = YES;self.khAdView.hidePageControl = YES;

核心代碼

如何實現循環滾動

所謂的循環滾動，其實只是一個假象。假如有ABC三張圖片需要展示，要實現循環，只需要拷貝頭尾兩張圖片，並添加到ABC三張圖片的首尾，形成CABCA的圖片結構。接下來就是關鍵了，當圖片按照如下順序滾動A-->B-->C-->A連續滾動，我們就可以在其中一個方向上看到循環滾動了。最後，我們還需要用scrollViewDidScroll這個代理方法來監聽當前正在展示的是第幾張圖片，如果是第二張A圖片，這個時候我們就要調用方法，讓CollectionView偷偷地（不帶動畫效果）Scroll到第一張A圖片，這一步也是最“狡詐”的一步。另一個方向的循環滾動也是同理可得。這段核心代碼如下：

- (void)setDataSource:(NSArray *)dataSource WithSourceType:(KHSourceType)sourceType{
    _dataSource = dataSource;
    self.images = [NSMutableArray array];
    NSInteger count = dataSource.count + 2;
    
    for (NSInteger i = 0; i < count; i++) {
        UIImage *image = nil;
        switch (sourceType) {
            case KHSourceInternetType:
                if (0 == i) {
                    image = [UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:[dataSource lastObject]]]];
                }else if(count - 1 == i){
                    image = [UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:[dataSource firstObject]]]];
                }else{
                    image = [UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:dataSource[i - 1]]]];
                }
                [self.images addObject:image];
                break;
                
            default:
                if (0 == i) {
                    image = [UIImage imageNamed:[dataSource lastObject]];
                }else if(count - 1 == i){
                   image = [UIImage imageNamed:[dataSource firstObject]];
                }else{
                    image = [UIImage imageNamed:dataSource[i - 1]];
                }
                [self.images addObject:image];
                break;
        }
    }
    
    [self.collectionView reloadData];
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    NSInteger currentPage = (scrollView.contentOffset.x / CGRectGetWidth(self.frame)) - 1;
    self.pageControl.currentPage = currentPage;
    
    if (currentPage < 0)
    {
        self.pageControl.currentPage = self.dataSource.count - 1;
        [self.collectionView scrollToItemAtIndexPath:[NSIndexPath indexPathForItem:self.dataSource.count inSection:0] atScrollPosition:UICollectionViewScrollPositionCenteredHorizontally animated:NO];
        return;
    }
    else if (currentPage == self.dataSource.count)
    {
        self.pageControl.currentPage = 0;
        [self.collectionView scrollToItemAtIndexPath:[NSIndexPath indexPathForItem:1 inSection:0] atScrollPosition:UICollectionViewScrollPositionCenteredHorizontally animated:NO];
        return;
    }
}