iOS 自動循環播放廣告控件實現

jopen 9年前發布 | 2K 次閱讀 Objective-C IOS

摘要 iOS下實現的一個簡單的循環播放小廣告的控件,為了節約內存,使用三個imageview來實現

1.原理:圖片:圖片集合名稱保存成array;     

           輪播:為了實現滑動效果,至少需要三個imageview,為了確保左右滑動,需要一直顯示中間的view

           每次滑動后都需要重新加載三個view的圖片。并設置當前圖片下標

2.接口:提供給viewcontroller一個判斷左右滑動的接口,并實現滑動效果

            提供給pagecontroller一個設置頁面的接口,根據下標設置當前現實頁

3.代碼:ADScrollView,附詳細注釋

.h

@interface ADScrollView : UIScrollView {
    NSTimer *_timer;
}

@property (nonatomic, retain) NSMutableArray *ads;          // 圖集

@property (nonatomic, retain) NSMutableArray *images;       // 視圖集合(三個視圖,左中右)

@property (nonatomic, assign) NSUInteger nowImageIndex;     // 當前圖片下表
@property (nonatomic, assign) CGPoint         curPoint;     // 當前視圖坐標

- (void)changeToImage:(NSUInteger)index;                    // 改變到某個廣告,當我們點擊pagecontrol的某個頁時,將頁號作為參數竄過來,即可實現效果

// 滑動后,將最后的坐標點傳過來,即可判斷是左滑還是右滑,并實現滑動效果
// 返回1:右滑   -1:左滑    0:未滑動
- (NSInteger)scrollToPoint:(CGPoint)point;

@end

.m

@implementation ADScrollView

- (void)dealloc {
    // 關閉定時器并釋放
    [_timer invalidate];
    _timer = nil;
}

- (id)init {
    self = [super init];
    if (self) {
        self.ads = [NSMutableArray arrayWithObjects:@"ad01.png", @"ad02.png", @"ad03.jpg", nil];
        
        // scroll的分頁設置
        self.pagingEnabled = YES;
        self.showsHorizontalScrollIndicator = NO;
        self.showsVerticalScrollIndicator = NO;
        self.contentSize = CGSizeMake(3 * 320, 100.0);
        
        NSInteger kCount = [_ads count];
        self.images = [[NSMutableArray alloc] initWithCapacity:3];
        // 初始化三個切換頁
        for (int i = 0; i < 3; i++) {
            UIImageView *view = [[UIImageView alloc] initWithImage:[UIImage imageNamed:[_ads objectAtIndex:(i+kCount-1)%kCount]]];
            view.frame = CGRectMake(i*320, 0, 320, 100);
            [self addSubview:view];
            [self.images addObject:view];
        }
        _nowImageIndex = 0;
        self.bounds = CGRectMake(320, 0, 320, 100);
        _curPoint = self.bounds.origin;   // 當前左上角坐標
        
        // 初始化定時器
        _timer = [NSTimer scheduledTimerWithTimeInterval:5.0 target:self selector:@selector(scrollTimer) userInfo:nil repeats:YES];
        //self.adDelegate = nil;
    }
    return self;
}

#pragma mark - 定時器
- (void)scrollTimer {
    // 自動播放
    [self scrollRectToVisible:CGRectMake(640, 0, 320, 100) animated:YES];
}

#pragma mark - 設置顯示第幾頁
- (void)changeToImage:(NSUInteger)index {
    _nowImageIndex = index;         // 當前視圖下標切換過去
    
    // 設置三個view的顯示
    self.bounds = CGRectMake(320, 0, 320, 100);
    ((UIImageView *)[self.images objectAtIndex:2]).image = [UIImage imageNamed:[self.ads objectAtIndex:[self getImageNext]]];     // 加載下一張視圖
    ((UIImageView *)[self.images objectAtIndex:1]).image = [UIImage imageNamed:[self.ads objectAtIndex:_nowImageIndex]];     // 加載當前窗口視圖
    ((UIImageView *)[self.images objectAtIndex:0]).image = [UIImage imageNamed:[self.ads objectAtIndex:[self getImagePre]]];     // 加載上一個窗口視圖
}

#pragma mark - 判斷左滑 右滑 實現滑動效果
- (NSInteger)scrollToPoint:(CGPoint)point {
    NSInteger dictionary = 0;
    if (point.x-_curPoint.x == 320.0 || point.x-_curPoint.x == -640.0) {  // 右滑
        _nowImageIndex = [self getImageNext];    // 獲取當前圖片下標
        dictionary = 1;
    }
    else if (0 != point.x - _curPoint.x){       // 左滑
        _nowImageIndex = [self getImagePre];    // 獲取當前圖片下標
        dictionary = -1;
    }
    
    // 始終顯示的是中間視圖,只不過各個視圖加載的圖片變了
    self.bounds = CGRectMake(320, 0, 320, 100);
    ((UIImageView *)[self.images objectAtIndex:2]).image = [UIImage imageNamed:[self.ads objectAtIndex:[self getImageNext]]];     // 加載下一張視圖
    ((UIImageView *)[self.images objectAtIndex:1]).image = [UIImage imageNamed:[self.ads objectAtIndex:_nowImageIndex]];     // 加載當前窗口視圖
    ((UIImageView *)[self.images objectAtIndex:0]).image = [UIImage imageNamed:[self.ads objectAtIndex:[self getImagePre]]];     // 加載上一個窗口視圖
    
    return dictionary;       // 如果是右滑  返回yes  左滑返回no
}

#pragma mark - 獲取圖片下標
- (NSInteger)getImageNext {
    if (_nowImageIndex == [_ads count] - 1) {
        return 0;
    }
    return _nowImageIndex + 1;
}

- (NSInteger)getImagePre {
    if (0 == _nowImageIndex) {
        return [_ads count]-1;
    }
    return _nowImageIndex-1;
}

@end

ViewController需要設置ADScrollView的委托,并實現兩個方法

// scrollview 滑動結束,響應手勢滑動處理
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    NSInteger dic = [_adScroll scrollToPoint:scrollView.bounds.origin];
    if (1 == dic) {     // 右滑
        _page.currentPage = (_page.currentPage+1)%_page.numberOfPages;
    }
    else if (-1 == dic){  // 左滑
        _page.currentPage = (_page.currentPage+_page.numberOfPages-1)%_page.numberOfPages;
    }
}

// scrollview動作結束,響應自動輪播方式處理
- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView {
    NSInteger dic = [_adScroll scrollToPoint:scrollView.bounds.origin];
    if (1 == dic) {     // 右滑
        _page.currentPage = (_page.currentPage+1)%_page.numberOfPages;
    }
    else if (-1 == dic){  // 左滑
        _page.currentPage = (_page.currentPage+_page.numberOfPages-1)%_page.numberOfPages;
    }
}

// uipageControl的響應方法
- (void)scrolTimer:(NSInteger)dictionary {
    if (1 == dictionary) {
        _page.currentPage = (_page.currentPage+_page.numberOfPages+1)%_page.numberOfPages;
    }
    else if(-1 == dictionary) {
        _page.currentPage = (_page.currentPage+_page.numberOfPages-1)%_page.numberOfPages;
    }
    NSLog(@"%@",_adScroll);
}

ps:只需要這些設置就可以實現廣告的輪播了,

對于廣告的大小可以根據實際情況自己改,

我這個是320*100的尺寸

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!