IOS實現自動循環滾動廣告--ScrollView的優化和封裝

jopen 10年前發布 | 58K 次閱讀 iOS開發移動開發 IOS

一、問題分析

在許多App中，我們都會見到循環滾動的視圖，比如廣告，其實想實現這個功能并不難，用ScrollView就可以輕松完成，但是在制作的過程中還存在幾個小問題，如果能夠正確的處理好這些小問題，無論從效果還是性能上都會得到優化。

問題一

第一個問題是如何用ScrollView來展示N個視圖。想要實現這個效果，可以把N個視圖依次按順序添加到ScrollView上，然后把 ScrollView的contentSize設置為N個視圖的尺寸，通過滑動ScrollView來查看加在上面的視圖。

問題二

第二個問題是如何完成圖片的循環滾動，也就是展示完最后一張之后會接著展示第一張，形成圖片的循環展示。想要實現這個效果，首先需要讓ScrollView實現自動分頁，這樣可以保證滑動結束展示的是完整的視圖；其次，需要根據當前展示的頁數來設置ScrollView的contentOffset。

對于第一個問題的解決是用的最簡單的方式，但實際上忽略了一個很重要的問題，那就是如果要展示的視圖數量N非常大的時候，我們該如何做呢？假設通過ScrollView來展示的每個視圖的寬度恰好是屏幕的寬度，那么在展示的時候，其實能夠呈現在我們眼前的最多只有兩個視圖，也就是要么是完整的一個視圖，要么是兩個不完整的視圖。因此，我們只需要有三個視圖，就能夠完成循環的展示。

問題三

第三個問題是在循環滾動的過程中，希望知道當前的頁數，這個頁數可以通過contentOffset.x來計算，通常會用UIPageControl來表示。此外，當點擊某一個視圖的時候，要能夠知道當前點擊的視圖是哪一個。

問題四

第四個問題是自動展示下一頁的功能，這個需要寫好跳到下一頁的方法，然后通過NSTimer定時器來完成。

除了上面的幾個問題，大家也可以為其添加更多的功能。那么對于ScrollView自動翻頁這樣通用的功能，最好的方式是將其封裝起來，這樣可以大大的提高效率。下面的代碼是把UIScrollView、UIPageControl封裝到了一個UIView中，而其中的ScrollView用來循環展示多張圖片。

二、功能實現

1、封裝Scrollview代碼.h：

//  WHScrollAndPageView.h
//  循環滾動視圖
//
//  Created by jereh on 15-3-15.
//  Copyright (c) 2015年 jereh. All rights reserved.
//

#import <UIKit/UIKit.h>

@protocol WHcrollViewViewDelegate;

@interface WHScrollAndPageView : UIView <UIScrollViewDelegate>
{
    __unsafe_unretained id <WHcrollViewViewDelegate> _delegate;
}

@property (nonatomic, assign) id <WHcrollViewViewDelegate> delegate;

@property (nonatomic, assign) NSInteger currentPage;

@property (nonatomic, strong) NSMutableArray *imageViewAry;

@property (nonatomic, readonly) UIScrollView *scrollView;

@property (nonatomic, readonly) UIPageControl *pageControl;

-(void)shouldAutoShow:(BOOL)shouldStart;

@end

@protocol WHcrollViewViewDelegate <NSObject>

@optional
- (void)didClickPage:(WHScrollAndPageView *)view atIndex:(NSInteger)index;

@end

2、封裝Scrollview代碼.m:

//  WHScrollAndPageView.m
//  循環滾動視圖
//
//  Created by jereh on 15-3-15.
//  Copyright (c) 2015年 jereh. All rights reserved.
//

#import "WHScrollAndPageView.h"

@interface WHScrollAndPageView ()
{
    UIView *_firstView;
    UIView *_middleView;
    UIView *_lastView;

    float _viewWidth;
    float _viewHeight;

    NSTimer *_autoScrollTimer;

    UITapGestureRecognizer *_tap;
}

@end

@implementation WHScrollAndPageView

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {

        _viewWidth = self.bounds.size.width;
        _viewHeight = self.bounds.size.height;

        //設置scrollview
        _scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, _viewWidth, _viewHeight)];
        _scrollView.delegate = self;
        _scrollView.contentSize = CGSizeMake(_viewWidth * 3, _viewHeight);
        _scrollView.showsHorizontalScrollIndicator = NO;
        _scrollView.pagingEnabled = YES;
        _scrollView.backgroundColor = [UIColor blackColor];
        _scrollView.delegate = self;
        [self addSubview:_scrollView];

        //設置分頁
        _pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, _viewHeight-30, _viewWidth, 30)];
        _pageControl.userInteractionEnabled = NO;
        _pageControl.currentPageIndicatorTintColor = [UIColor redColor];
        _pageControl.pageIndicatorTintColor = [UIColor whiteColor];
        [self addSubview:_pageControl];

        //設置單擊手勢
        _tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(handleTap:)];
        _tap.numberOfTapsRequired = 1;
        _tap.numberOfTouchesRequired = 1;
        [_scrollView addGestureRecognizer:_tap];
    }
    return self;
}

#pragma mark 單擊手勢
-(void)handleTap:(UITapGestureRecognizer*)sender
{
    if ([_delegate respondsToSelector:@selector(didClickPage:atIndex:)]) {
        [_delegate didClickPage:self atIndex:_currentPage+1];
    }
}

#pragma mark 設置imageViewAry
-(void)setImageViewAry:(NSMutableArray *)imageViewAry
{
    if (imageViewAry) {
        _imageViewAry = imageViewAry;
        _currentPage = 0; //默認為第0頁

        _pageControl.numberOfPages = _imageViewAry.count;
    }

    [self reloadData];
}

#pragma mark 刷新view頁面
-(void)reloadData
{
    [_firstView removeFromSuperview];
    [_middleView removeFromSuperview];
    [_lastView removeFromSuperview];

    //從數組中取到對應的圖片view加到已定義的三個view中
    if (_currentPage==0) {
        _firstView = [_imageViewAry lastObject];
        _middleView = [_imageViewAry objectAtIndex:_currentPage];
        _lastView = [_imageViewAry objectAtIndex:_currentPage+1];
    }
    else if (_currentPage == _imageViewAry.count-1)
    {
        _firstView = [_imageViewAry objectAtIndex:_currentPage-1];
        _middleView = [_imageViewAry objectAtIndex:_currentPage];
        _lastView = [_imageViewAry firstObject];
    }
    else
    {
        _firstView = [_imageViewAry objectAtIndex:_currentPage-1];
        _middleView = [_imageViewAry objectAtIndex:_currentPage];
        _lastView = [_imageViewAry objectAtIndex:_currentPage+1];
    }

    //設置三個view的frame，加到scrollview上
    _firstView.frame = CGRectMake(0, 0, _viewWidth, _viewHeight);
    _middleView.frame = CGRectMake(_viewWidth, 0, _viewWidth, _viewHeight);
    _lastView.frame = CGRectMake(_viewWidth*2, 0, _viewWidth, _viewHeight);
    [_scrollView addSubview:_firstView];
    [_scrollView addSubview:_middleView];
    [_scrollView addSubview:_lastView];

    //設置當前的分頁
    _pageControl.currentPage = _currentPage;

    //顯示中間頁
    _scrollView.contentOffset = CGPointMake(_viewWidth, 0);
}

#pragma mark scrollvie停止滑動
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    //手動滑動時候暫停自動替換
    [_autoScrollTimer invalidate];
    _autoScrollTimer = nil;
    _autoScrollTimer = [NSTimer scheduledTimerWithTimeInterval:2 target:self selector:@selector(autoShowNextImage) userInfo:nil repeats:YES];

    //得到當前頁數
    float x = _scrollView.contentOffset.x;

    //往前翻
    if (x<=0) {
        if (_currentPage-1<0) {
            _currentPage = _imageViewAry.count-1;
        }else{
            _currentPage --;
        }
    }

    //往后翻
    if (x>=_viewWidth*2) {
        if (_currentPage==_imageViewAry.count-1) {
            _currentPage = 0;
        }else{
            _currentPage ++;
        }
    }

    [self reloadData];
}

#pragma mark 自動滾動
-(void)shouldAutoShow:(BOOL)shouldStart
{
    if (shouldStart)  //開啟自動翻頁
    {
        if (!_autoScrollTimer) {
            _autoScrollTimer = [NSTimer scheduledTimerWithTimeInterval:2 target:self selector:@selector(autoShowNextImage) userInfo:nil repeats:YES];
        }
    }
    else   //關閉自動翻頁
    {
        if (_autoScrollTimer.isValid) {
            [_autoScrollTimer invalidate];
            _autoScrollTimer = nil;
        }
    }
}

#pragma mark 展示下一頁
-(void)autoShowNextImage
{
    if (_currentPage == _imageViewAry.count-1) {
        _currentPage = 0;
    }else{
        _currentPage ++;
    }

    [self reloadData];
}

@end

3、使用封裝好的Scrollview代碼.m:

//  ViewController.m
//  循環滾動視圖
//
//  Created by jereh on 15-3-15.
//  Copyright (c) 2015年 jereh. All rights reserved.
//

#import "ViewController.h"
#import "WHScrollAndPageView.h"
#define NUM 10

@interface ViewController ()<WHcrollViewViewDelegate>
{
    WHScrollAndPageView *_whView;
}

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    //創建view （view中包含UIScrollView、UIPageControl，設置frame）
    _whView = [[WHScrollAndPageView alloc] initWithFrame:CGRectMake(0, 44, 320, 400)];

    //把N張圖片放到imageview上
    NSMutableArray *tempAry = [NSMutableArray array];
    for (int i=1; i<NUM; i++) {
        UIImageView *imageView = [[UIImageView alloc] init];
        imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"image%i.jpg",i]];
        [tempAry addObject:imageView];
    }

    //把imageView數組存到whView里
    [_whView setImageViewAry:tempAry];

    //把圖片展示的view加到當前頁面
    [self.view addSubview:_whView];

    //開啟自動翻頁
    [_whView shouldAutoShow:YES];

    //遵守協議
    _whView.delegate = self;
}

#pragma mark 協議里面方法，點擊某一頁
-(void)didClickPage:(WHScrollAndPageView *)view atIndex:(NSInteger)index
{
    NSLog(@"點擊了第%li頁",index);
}

#pragma mark 界面消失的時候，停止自動滾動
-(void)viewDidDisappear:(BOOL)animated
{
    [_whView shouldAutoShow:NO];
}

@end

本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1430789419241.html

iOS開發移動開發 IOS

IOS實現自動循環滾動廣告--ScrollView的優化和封裝

問題一

問題二

問題三

問題四

1、封裝Scrollview代碼.h：

2、封裝Scrollview代碼.m:

3、使用封裝好的Scrollview代碼.m:

相關經驗

相關資訊

相關文檔

目錄