iOS廣告頁的編寫

功能：

在咱們剛剛打開App時，通常首頁會有一個廣告展現的頁面，能顯示幾張自動翻滾的圖片，還能經過點擊來跳轉到對應頁。

以下圖：

實現

這是一個給項目中Controller類用的CustomView，須要在多個Controller中使用，能夠單獨寫一個類，繼承UIView，而後定義delegate和datasource，在Controller類裏實現delegate和datasouce方法，來顯示的具體內容。這個CustomView主要經過一個ScrollView+PageView實現。Scrolview上Add了三個SubViews：當前顯示的View、顯示View的前一個View、顯示View的後一個View。

具體實現

一、建立控件並顯示

自定義了一個CustomView，有兩種方法來init：代碼和xib文件。這時會調用CustomView的不一樣init方法。從代碼建立時，調用initWithFrame;而從xib文件建立時，調用initWithCoder。

這邊用代碼來建立控件。首先會調用initwithframe方法來建立控件並設置控件frame。在這個方法裏，建立了scrollview和pageview，並add到當前類的view中。_scrollview的contentoffset爲frame的width，由於控件顯示的是scrollview的中間頁。

//建立控件，寫在Controller類的loadview方法中
- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
        _scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
        _scrollView.delegate = self;
        _scrollView.contentSize = CGSizeMake(self.frame.size.width * 3, self.frame.size.height);
        _scrollView.showsHorizontalScrollIndicator = NO;
        _scrollView.contentOffset = CGPointMake(self.frame.size.width, 0);
        _scrollView.pagingEnabled = YES;
        [self addSubview:_scrollView];
        CGRect rect = CGRectMake(80, self.bounds.size.height - 20, 160, 20);
        _pageControl = [[UIPageControl alloc] initWithFrame:rect];
        _pageControl.userInteractionEnabled = NO;
        [self addSubview:_pageControl];
        //控件顯示的頁面
        _curPage = 0;
    }
    return self;
}

控件建立了，不過內容是空的。怎麼添加具體內容呢？固然是在Controller類中實現delegate和datasource方法了。

在CustomView的.h文件中：

//內存管理方式是MRC
@property (nonatomic,assign,setter = setDataource:) id<XLCycleScrollViewDatasource> datasource;

@protocol XLCycleScrollViewDatasource <NSObject>
@required
- (NSInteger)numberOfPages;
- (UIView *)pageAtIndex:(NSInteger)index;

@end

在Controller類中，CustomView.dataSouce = self;程序就跑到CustomView的setDataource;方法中。在這個方法裏，咱們就能夠設置顯示的內容。

- (void)setDataource:(id<XLCycleScrollViewDatasource>)datasource
{
    _datasource = datasource;
    [self reloadData];
}

- (void)reloadData
{
    _totalPages = [_datasource numberOfPages];
    if (_totalPages == 0) {
        return;
    }
    _pageControl.numberOfPages = _totalPages;
    [self loadData];
}

- (void)loadData
{

    _pageControl.currentPage = _curPage;

    //從scrollView上移除全部的subview
    NSArray *subViews = [_scrollView subviews];
    if([subViews count] != 0) {
        [subViews makeObjectsPerformSelector:@selector(removeFromSuperview)];
    }
    //經過_curPage(當前顯示的頁面)，來設置顯示在Scrollview上的3個View(保存在_curViews中)
    [self getDisplayImagesWithCurpage:_curPage];

    for (int i = 0; i < 3; i++) {
        UIView *v = [_curViews objectAtIndex:i];
        v.userInteractionEnabled = YES;
        UITapGestureRecognizer *singleTap = [[UITapGestureRecognizer alloc] initWithTarget:self
                                                                                    action:@selector(handleTap:)];
        [v addGestureRecognizer:singleTap];
        [singleTap release];
        v.frame = CGRectOffset(v.frame, v.frame.size.width * i, 0);
        [_scrollView addSubview:v];
    }
    //中間頁爲顯示頁
    [_scrollView setContentOffset:CGPointMake(_scrollView.frame.size.width, 0)];
}

在設置_datasource = datasource;後，就能夠經過[_datasouce functionName]；來調用Controller類中實現的datasouce方法了。_curViews是一個NSMutableArray類，經過_curPage具體設置其中的3個object。

/**
 *  獲取須要顯示的3個View
 *
 *  @param page 當前顯示頁
 */
- (void)getDisplayImagesWithCurpage:(int)page {

    int pre = [self validPageValue:_curPage-1];
    int last = [self validPageValue:_curPage+1];

    if (!_curViews) {
        _curViews = [[NSMutableArray alloc] init];
    }

    [_curViews removeAllObjects];
    [_curViews addObject:[_datasource pageAtIndex:pre]];
    [_curViews addObject:[_datasource pageAtIndex:page]];
    [_curViews addObject:[_datasource pageAtIndex:last]];
}

能夠看到，在loadData方法中，爲每一個View添加了Tap手勢，實現點擊功能。

到這裏，控件建立了並在Controller上顯示了第一頁。理一理，假設Controller類爲A，CustomView爲B。
[A loadView] -> [B initWithFrame] -> A類中B.dataSource = self;->[B setDataSouce:]

二、滑動控件，View切換

經過- (void)scrollViewDidScroll:要捕獲ScrolView的滾動事件，能夠獲取當前ScrollView的contentOffSSet。

#pragma mark - UIScrollViewDelegate

- (void)scrollViewDidScroll:(UIScrollView *)aScrollView {
    int x = aScrollView.contentOffset.x;

    //往下翻一張
    if(x == (2*self.frame.size.width)) {
        _curPage = [self validPageValue:_curPage+1];
        [self loadData];
    }

    //往上翻
    if(x == 0) {
        _curPage = [self validPageValue:_curPage-1];
        [self loadData];
    }
}

由於設置了ScrollVeiw的pageEnabled屬性未yes，ScrollView就會根據view來設置ContentOffSet，界面不會停留在某個view的中間。經過[self loadData]來從新設置ScrollView顯示的內容。

結束了

到這兒，功能就實現了，還能夠經過添加NSTimer來動態顯示，就是能夠每隔N秒，自動切換圖片。
點擊下載代碼

我以爲有意思的一點：界面都是在代碼運行完後顯示的，就是說，一個關於界面的方法，在return後，界面纔會更新(能夠經過GCD來設置界面更新的順序)。在- (void)scrollViewDidScroll:方法中，假如界面滑動到了下一個View，這個View替換了顯示的View時，就調用了[self loadData]方法，這個方法裏，又從新設置了ScrollView的內容，又刷新了ScrollView。就顯示下一個內容來講，看着是很順暢顯示到了下個頁面，中間的調用[self loadDta]頁面的刷新，徹底被覆蓋了。神奇～