iOS開發之分頁控件的簡單封裝

    初學了UIScrollView的分頁的功能，只能說iOS中UIScrollView這玩意兒功能太強了，除了有相似於android中的scrollview的功能，還有Viewpager的功能，好比作app引導頁、圖片輪播器等，android中通常用viewpager來作，iOS卻能夠用UIScrollView來作，並且實現起來比android要簡單。

    封裝後的好處就是，在ViewController中只須要建立一個自定義的View對象，設置好尺寸圖片以及相應的顏色並把她添加到父控件中，就能正常使用了。。也就是說，要把UIScrollView和UIPageControl的初始化、設置數據，分頁，設置屬性等等相應的操做都在我自定義的View類中進行。在頭文件中提供一些接口供外部去使用，而不暴露內部實現。

仍是和以前同樣，建立好xib文件，自定義的view類，在xib中放UIScrollView和UIPageControl，修改xib中的View的class，定義屬性、構造方法，重寫setter方法，監聽UIScrollView的滾動。。。。balabala

XXPageView.h

//
//  XXPageView.h
//  UIScrollView的簡單封裝
//
//  Created by Daniel on 16/3/6.
//  Copyright © 2016年 Daniel. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface XXPageView : UIView

+ (instancetype)pageView;

/** 圖片名字 */
@property(nonatomic, strong) NSArray *imageNames;

/** UIPageControl當前圓點的顏色 */
@property(nonatomic, strong) UIColor *currentColor;

/** UIPageControl其餘圓點的顏色 */
@property(nonatomic, strong) UIColor *otherColor;

@end

XXPageView.m

//
//  XXPageView.m
//  UIScrollView的簡單封裝
//
//  Created by Daniel on 16/3/6.
//  Copyright © 2016年 Daniel. All rights reserved.
//

#import "XXPageView.h"
@interface XXPageView() <UIScrollViewDelegate>
/** 這裏的屬性 以及scrollview的代理我都是用拖線的方式來的 */
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;

@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;
    
@end

@implementation XXPageView

+ (instancetype)pageView {
    //加載xib
    return [[[NSBundle mainBundle]loadNibNamed:NSStringFromClass(self) owner:nil options:nil]lastObject];
}

- (void)layoutSubviews
{
    [super layoutSubviews];
    
    //這些設置尺寸應該能夠用autoLayout來搞吧，如今還不會用autoLayout，後面再來優化
    
    // 設置scrollView的frame
    self.scrollView.frame = self.bounds;
    
    // 得到scrollview的尺寸
    CGFloat scrollW = self.scrollView.frame.size.width;
    CGFloat scrollH = self.scrollView.frame.size.height;
    
    // 設置pageControl
    CGFloat pageW = 100;
    CGFloat pageH = 20;
    CGFloat pageX = scrollW - pageW;
    CGFloat pageY = scrollH - pageH;
    self.pageControl.frame = CGRectMake(pageX, pageY, pageW, pageH);
    
    // 設置內容大小
    self.scrollView.contentSize = CGSizeMake(self.imageNames.count * scrollW, 0);
    
    // 設置全部imageView的frame
    for (int i = 0; i<self.scrollView.subviews.count; i++) {
        UIImageView *imageView = self.scrollView.subviews[i];
        imageView.frame = CGRectMake(i * scrollW, 0, scrollW, scrollH);
    }
}

#pragma mark - setter方法重寫
- (void)setImageNames:(NSArray *)imageNames {
    _imageNames = imageNames;
    //先移除以前全部的imageview
    //makeObjectsPerformSelector 讓全部的objects都執行某個方法
    [self.scrollView.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];
    
    //根據圖片名建立對應的imageView並添加到UIScrollView中
    for (int i = 0; i < imageNames.count; i++) {
        UIImageView *imageView = [[UIImageView alloc]init];
        imageView.image = [UIImage imageNamed:imageNames[i]];
        [self.scrollView addSubview:imageView];
    }
    
    //開啓分頁功能，也能夠在xib中設置
    //self.scrollView.pagingEnabled = YES;
    
    //設置總頁數
    self.pageControl.numberOfPages = imageNames.count;
    
    //當只有一個控件時隱藏pageControl
    //這句代碼也能夠在xib文件中設置
    //self.pageControl.hidesForSinglePage = YES;
    
    //這種方法也能夠
    //self.pageControl.hidden = imageNames.count <=1;
    
}

/** 設置當前圓點的顏色 */
-(void)setCurrentColor:(UIColor *)currentColor {
    _currentColor = currentColor;
    self.pageControl.currentPageIndicatorTintColor = currentColor;
}

/** 設置其餘圓點的顏色 */
- (void)setOtherColor:(UIColor *)otherColor {
    _otherColor = otherColor;
    self.pageControl.pageIndicatorTintColor = otherColor;
}

#pragma mark - <UIScrollViewDelegate>
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    self.pageControl.currentPage = (int)(scrollView.contentOffset.x / scrollView.frame.size.width + 0.5);
}

@end

<補充start>

這種圖片輪播通常都是能夠拖拽滑動，也能夠定時滑動的，如今給她加一個定時器，仍是監聽UIScrollView的滾動，對scrollViewWillBeginDragging方法和scrollViewDidEndDragging方法重寫，去控制定時器的開關，定時器中間隔多長時間後執行跳轉到下一頁的方法便可。

-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
    [self stopTimer];
}

-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
    [self startTimer];
}

#pragma mark - 定時器控制
-(void)startTimer {
    //建立一個定時器
    self.timer = [NSTimer scheduledTimerWithTimeInterval:1.5 target:self selector:@selector(nextPage) userInfo:nil repeats:YES];
    
    //解決當同界面的其餘控件滾動時，定時器失效的問題
    [[NSRunLoop mainRunLoop]addTimer:self.timer forMode:NSRunLoopCommonModes];
}

-(void)stopTimer {
    [self.timer invalidate];
    self.timer = nil;
}

//滾動到下一頁
-(void)nextPage {
    NSInteger page = self.pageControl.currentPage + 1;
    if(page == self.pageControl.numberOfPages) {
        page = 0;
    }
    CGPoint offset = self.scrollView.contentOffset;
    offset.x = page * self.scrollView.frame.size.width;
    [self.scrollView setContentOffset:offset animated:YES];
}

還有，加載xib的方式中，xib或者storyboard中的控價建立完以後，會調用awakeFromNib這個方法，因此初始化完以後在該方法中開啓定時器便可。

/** 當控件從xib\storyboard中建立完畢時，就會調用這個方法，建立完畢後的初始化操做，在這個方法中執行 */
- (void)awakeFromNib {
    [self setup];
}

/** 初始化代碼 */
- (void)setup {
    // 開啓定時器
    [self startTimer];
}

<補充end>

XXPageView.xib

也能夠在代碼中設置

設置XXPageView爲UIScrollView的代理

最後在ViewController中調用

//
//  ViewController.m
//  UIScrollView分頁控件的簡單封裝
//
//  Created by Daniel on 16/3/6.
//  Copyright © 2016年 Daniel. All rights reserved.
//

#import "ViewController.h"
#import "XXPageView.h"

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    //直接建立一個XXPageView
    XXPageView *pageView = [XXPageView pageView];
    
    //設置frame
    pageView.frame = CGRectMake(37, 50, 300, 200);
    
    //設置圖片內容
    pageView.imageNames = @[@"img_00", @"img_01", @"img_02",@"img_03",@"img_04"];
    
    //設置pageControl相應的顏色
    pageView.currentColor = [UIColor orangeColor];
    pageView.otherColor = [UIColor grayColor];
    
    [self.view addSubview:pageView];
}

@end

效果圖：

咦，爲啥pageControl在右下角啊？我在xib中設置的是居中啊，媽蛋。。。