UIScorllView和UIPageControl的使用實現(xiàn)圖片輪播器

2019-11-14 18:29:13

字體：大中小

來源：轉載

供稿：網友

首先我們要先建一個PRoject，選擇iOS下的第一個application 中的Single View Application

開始工作已經準備完畢現(xiàn)在我們進入到Main.storyboard拖控件

需要用到的控件有

UIScrollView也就是滾動的那個
UipageControl也就是圖片下面那幾個小點
NSTimer就是定時器讓其自動換頁的

第一步：拖控件連線

在Main.storyboard拖一個UIScrollView放在屏幕上，在UIScrollView下面放一個UIPageControl（注意是下面而不是在UIscrollView上放，如果放到UIScrollView上將看不到UIPageControl）
進行連線，將其連到ViewController.m中的@interface ViewController () 和@end中間

#import "ViewController.h"@interface ViewController ()@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;@end

第二步：下面我們要在ViewDidLod中把一個UIImageView加到scrollView中。同時我們要將5張圖片放到Images.xcassets中，代碼如下

// 廣告圖片總數    int count = 5;    CGSize size = self.scrollView.frame.size;    for (int i = 0; i < count; i++) {        NSString *imageName = [NSString stringWithFormat:@"img_%02d", i + 1];        UIImage *image = [UIImage imageNamed:imageName];        UIImageView *iconView = [[UIImageView alloc] initWithImage:image];        [self.scrollView addSubview:iconView];        // 設置frame        CGFloat x = i * size.width;        iconView.frame = CGRectMake(x, 0, size.width, size.height);    }

這里要注意的就是5個UIimageView的尺寸，寬和高都一樣，唯獨不一樣的就是他的X，需要1張1張圖片往后排

第三步：設置scrollView的滾動范圍以及設置分頁，代碼如下

    // 設置滾動范圍    self.scrollView.contentSize = CGSizeMake(count * size.width, 0);    // 滾動條不顯示    self.scrollView.showsHorizontalScrollIndicator = NO;    self.scrollView.showsVerticalScrollIndicator = NO;    // 設置分頁    self.scrollView.pagingEnabled = YES;    // 設置pagecontrol    self.pageControl.numberOfPages = count;

上面代碼中滾動條不顯示那兩行代碼是因為UIScrollView默認是有橫豎滾動條的，那兩行代碼分別讓水平的和豎直的的滾動條不顯示，一定要讓scrollView設置分頁否則那個分頁器不會跟著走，最后設置pageControl的頁數

第四步：設置scorllView的代理，代理大家都應該熟悉了把，首先要在@interface ViewController ()后面遵循代理代碼如下
@interface ViewController () <UIScrollViewDelegate>
然后在ViewDidLod中設置誰遵循這個代理那當然是ViewController了代碼如下

    // 設置代理    self.scrollView.delegate = self;

好了下面開始實現(xiàn)UIScrollView的代理方法了
我們需要用的代理的方法有3個分別是

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate

第一個是scrollView滾動時調用的方法，第二個是開始拖拽時調用的方法，第三個是結束拖拽時調用的方法

首先我們先想scrollView滾動時是不是拖拽到一半以上松手就能到下一張圖片，答案肯定是的。那么就來寫這個方法，代碼如下

// 正在滾動時- (void)scrollViewDidScroll:(UIScrollView *)scrollView{    int page = (scrollView.contentOffset.x + scrollView.frame.size.width / 2) / scrollView.frame.size.width;    self.pageControl.currentPage = page;}

這里計算page頁數用到了我們非常熟悉的把一個數 / 多少得到的數比如112 / 10 等于多少很明顯是 11 這樣就能很好通過尺寸把該顯示的頁面算出來，對了忘了說contentOffset是什么意思了，這個就可以理解為是拖拽的距離

第五步：現(xiàn)在要實現(xiàn)定時器功能了，讓其自動翻頁，首先要在@interface ViewController () @end中定義一個定時器timer 代碼如下

@property (nonatomic, strong) NSTimer *timer;

有人會問為什么要定義這個，因為后面不止一方法需要用到這個timer

定義一個定時器方法，代碼如下

- (void)addTimer{    NSTimer *timer = [NSTimer timerWithTimeInterval:2.0 target:self selector:@selector(nextImage) userInfo:nil repeats:YES];    self.timer = timer;    // 消息循環(huán)    NSRunLoop *runLoop = [NSRunLoop currentRunLoop];    [runLoop addTimer:timer forMode:NSRunLoopCommonModes];}

這是一個定時器的方法，里面創(chuàng)建了定時器，并加入了消息循環(huán)中，這里面要設置定時器2s之后應該執(zhí)行哪個方法，很顯然要讓它2s之后進行翻頁啊，那么我們就來寫下這個方法nextImage，代碼如下

- (void)nextImage{    // 當前頁碼    NSInteger page = self.pageControl.currentPage;    if (page == self.pageControl.numberOfPages - 1) {        page = 0;    } else {        page++;    }        CGFloat offsetX = page * self.scrollView.frame.size.width;    [UIView animateWithDuration:1.0 animations:^{        self.scrollView.contentOffset = CGPointMake(offsetX, 0);    }];    }

這個方法中首先先定義一個page來保存當前的page，然后進行判斷如果是最后一張要將頁面換成0（這個并不完美會直接從最后一張往回到第一張，但我學習視頻的那個老師沒有給出解決方法）其他的進行page加1 設置完page數那么我們需要讓其自動滾動啊，那我們就來設置scrollView的offset，定義offsetX 等于page數乘以scrollView的寬度，這樣正好能移動到下一個視圖，同時給移動加一個動畫

之后在ViewDidLod中調用此方法，代碼如下

[self addTimer];

第六步：下面來到UIScrollView的代理方法中，其中還有兩個代理方法我們沒有實現(xiàn)，就是開始拖拽和結束拖拽的方法，代碼如下

// 開始拖拽的時候調用- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{    // 停止定時器    [self.timer invalidate];}// 結束拖拽的時候調用- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{    [self addTimer];}

這里的開始拖拽是要把定時器停止，不然你拖拽不動也會翻頁，所有要把定時器停止，把定時器停止了，那我們要向讓其在動起來，那么就要讓其在開啟，要在結束拖拽時開始定時器。

如果你到這一步了，那么恭喜你的圖片輪播器就做好了！

完整代碼如下

#import "ViewController.h"@interface ViewController () <UIScrollViewDelegate>@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;@property (nonatomic, strong) NSTimer *timer;@end@implementation ViewController- (void)viewDidLoad {    [super viewDidLoad];    // 廣告圖片總數    int count = 5;    CGSize size = self.scrollView.frame.size;    for (int i = 0; i < count; i++) {        NSString *imageName = [NSString stringWithFormat:@"img_%02d", i + 1];        UIImage *image = [UIImage imageNamed:imageName];        UIImageView *iconView = [[UIImageView alloc] initWithImage:image];        [self.scrollView addSubview:iconView];        // 設置frame        CGFloat x = i * size.width;        iconView.frame = CGRectMake(x, 0, size.width, size.height);    }        // 設置滾動范圍    self.scrollView.contentSize = CGSizeMake(count * size.width, 0);    // 滾動條不顯示    self.scrollView.showsHorizontalScrollIndicator = NO;    self.scrollView.showsVerticalScrollIndicator = NO;    // 設置分頁    self.scrollView.pagingEnabled = YES;    // 設置pagecontrol    self.pageControl.numberOfPages = count;    // 設置代理    self.scrollView.delegate = self;    [self addTimer];}- (void)addTimer{    NSTimer *timer = [NSTimer timerWithTimeInterval:2.0 target:self selector:@selector(nextImage) userInfo:nil repeats:YES];    self.timer = timer;    // 消息循環(huán)    NSRunLoop *runLoop = [NSRunLoop currentRunLoop];    [runLoop addTimer:timer forMode:NSRunLoopCommonModes];}- (void)nextImage{    // 當前頁碼    NSInteger page = self.pageControl.currentPage;    if (page == self.pageControl.numberOfPages - 1) {        page = 0;    } else {        page++;    }        CGFloat offsetX = page * self.scrollView.frame.size.width;    [UIView animateWithDuration:1.0 animations:^{        self.scrollView.contentOffset = CGPointMake(offsetX, 0);    }];    }#pragma mark - scrollView代理方法// 正在滾動時- (void)scrollViewDidScroll:(UIScrollView *)scrollView{    int page = (scrollView.contentOffset.x + scrollView.frame.size.width / 2) / scrollView.frame.size.width;    self.pageControl.currentPage = page;}// 開始拖拽的時候調用- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{    // 停止定時器    [self.timer invalidate];}// 結束拖拽的時候調用- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{    [self addTimer];}@end