UI_07 UIScrollView、UIPageControl

⼀、UIScrollView的常⽤屬性

     UIScrollView是一個可以滾動的視圖控件，能夠用來展現大量的內容，而且能夠經過滾動查看全部的內容。UIScrollView是全部滾動視圖的基類。

一、UIScrollView核⼼功能

滾動：contentSize⼤於frame.size的時候，可以滾動。 縮放：⾃帶縮放，能夠指定縮放倍數。

二、UIScrollView滾動相關屬性

• contentSize //定義內容區域⼤⼩， contentSize>frame.size，能夠滾動

• contentOffset //視圖左上⾓距離座標原點的偏移量

• contentInset //視圖內邊界大小，或者說增長UIScrollView額外的滾動區域

• scrollsToTop //滑動到頂部（點狀態條的時候）

• pagingEnabled //是否整屏翻動

• bounces //邊界是否回彈

• scrollEnabled //是否可以滾動

• showsHorizontalScrollIndicator //控制是否顯⽰⽔平⽅向的滾動條

• showVerticalScrollIndicator //控制是否顯⽰垂直⽅向的滾動條

• alwaysBounceVertical //控制垂直⽅向遇到邊框是否反彈

• alwaysBounceHorizontal //控制⽔平⽅向遇到邊框是否反彈

三、UIScrollView縮放相關屬性

• minimumZoomScale // 縮⼩的最⼩⽐例

• maximumZoomScale //放⼤的最⼤⽐例

• zoomScale //設置變化⽐例

• zooming //判斷是否正在進⾏縮放反彈

• bouncesZoom //控制縮放的時候是否會反彈

     要實現縮放，還須要實現delegate，指定縮放的視圖是誰。

     滾動、縮放都是相對於 ScrollView 中的內容的，至關於 ScrollView 是一個窗口，裏面的內容被各類縮放、滾動改變位置，咱們看到的窗口所在的位置沒有發生改變，改變的只是裏面的內容。

• UIScrollView 中的縮放是縮放 contentSize

• 設置 UIScrollView 中子 View 的 frame 時，是相對於 UIScrollView 的 frame 的，和 contentSize 無關。

• 還原： scrollView.zoomScale = 1.0;

---

⼆、UIScrollView的常⽤代理⽅法

一、UIScrollView滾動

滾動就會觸發

- (void)scrollViewDidScroll:(UIScrollView *)scrollView 

開始減速時觸發（手指離開）

- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView 

中止時觸發

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView

二、UIScrollView縮放

代理⽅法

任何縮放放生時觸發

- (void)scrollViewDidZoom:(UIScrollView *)scrollView NS_AVAILABLE_IOS(3_2);

開始縮放前觸發

- (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(UIView *)view NS_AVAILABLE_IOS(3_2)

縮放結束觸發

- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(CGFloat)scale;

指定縮放視圖

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView;

實現步驟

• 設置UIScrollView的id<UISCrollViewDelegate> delegate代理對象

• 設置minimumZoomScale ：縮小的最小比例

• 設置maximumZoomScale ：放大的最大比例

• 讓代理對象實現上面「指定縮放視圖」的方法，返回須要縮放的視圖控件

三、UIScrollView拖拽

開始拖拽時觸發

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView 

將要結束拖拽時觸發

- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inoutCGPoint *)targetContentOffset NS_AVAILABLE_IOS(5_0);

結束拖拽時觸發

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

四、UIScrollView和delegate的通訊以下圖所示

---

3、UIPageControl

     UIPageControl與UILabel類似，⽤於指⽰當前第⼏⻚（代碼），一般與UIScrollView配合使⽤。

經常使用屬性

     currentPage      //當前⻚

     numberOfPages  //⻚⾯的總數

     currentPageIndicatorTintColor //當前頁碼指示器的顏色

     pageIndicatorTintColor        //其餘頁碼指示器的顏色的顏色

     hidesForSinglePage     //只有一頁時，是否隱藏頁碼指示器    

UIPageControl的使用見下面- (void)createPageControl 方法

綜合使用

自定義類Carousel繼承自UIScrollView，在其中添加圖片並設置代理UIScrollViewDelegate，經過方法 - (void)scrollViewDidZoom:(UIScrollView *)scrollView 實現縮放功能

Carousel.h

#import <UIKit/UIKit.h>

@interface Carousel : UIScrollView<UIScrollViewDelegate>

@property (nonatomic, retain) UIImageView *imgView;

- (instancetype)initWithFrame:(CGRect)frame andImage:(UIImage *)image;

@end

Carousel.m

#import "Carousel.h"

@implementation Carousel

- (instancetype)initWithFrame:(CGRect)frame andImage:(UIImage *)image
{
    self = [super initWithFrame:frame];
    if (self) {
       
        UIImageView *imgView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, frame.size.width, frame.size.height)];
        _imgView = imgView;
        imgView.image = image;
       
        [self addSubview:imgView];
       
        self.minimumZoomScale = 0.5;
        self.maximumZoomScale = 2.0;
        self.bounces = NO;
        self.delegate = self;
        self.showsHorizontalScrollIndicator = NO;
        self.showsVerticalScrollIndicator = NO;
       
        [imgView release];
    }
    return self;
}

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
    return _imgView;
}

- (void)scrollViewDidZoom:(UIScrollView *)scrollView
{
    if (self.zoomScale < 1) {
        _imgView.center = self.center;
    }
}

@end

RootViewController.m

#import "RootViewController.h"
#import "Carousel.h"

int imgNum = 3;
@interface RootViewController ()<UIScrollViewDelegate>
@property (nonatomic, retain) UIScrollView *scrollView;
@property (nonatomic, retain) UIPageControl *pageControl;
@end

@implementation RootViewController

- (void)dealloc
{
    [_scrollView release];
    [_pageControl release];
    [super dealloc];
}

- (void)viewDidLoad {
    [super viewDidLoad];
   
    [self createScrollView];
   
    [self createPageControl];

     NSTimer *timer = [NSTimertimerWithTimeInterval:1.75 target:self selector:@selector(pageChanged:) userInfo:nil repeats:YES];      [[NSRunLoop currentRunLoop] addTimer:timer forMode:NSDefaultRunLoopMode];

    [timer fire];
    NSLog(@"%d", -1%+3);
}

// 定時器調用此方法

- (void)pageChanged:(NSTimer *)timer;
{
    static int i=0;
    _pageControl.currentPage = i%3;
    i++;
    [self changePages:_pageControl];

}

- (void)createScrollView
{
    UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:self.view.frame];
    self.scrollView = scrollView;
   
    scrollView.contentSize = CGSizeMake(CGRectGetWidth(scrollView.frame)*imgNum, CGRectGetHeight(scrollView.frame));
    scrollView.pagingEnabled = YES;
   
    scrollView.backgroundColor = [UIColor blueColor];
   
    scrollView.delegate = self;
    scrollView.showsHorizontalScrollIndicator = NO;
   
    scrollView.bounces = NO;
    
    for (int i = 0; i<imgNum; i++) {
        NSString *imgName = [NSString stringWithFormat:@"image%d", i+1];
        Carousel *carouselScroll = [[Carousel alloc] initWithFrame:CGRectMake(CGRectGetWidth(scrollView.frame)*i, 0, CGRectGetWidth(scrollView.frame), CGRectGetHeight(scrollView.frame)) andImage:[UIImage imageNamed:imgName]];
       

        [scrollView addSubview:carouselScroll];

    }

    scrollView.scrollEnabled = YES;
   
    [self.view addSubview:scrollView];
    [scrollView release];
}

- (void)createPageControl
{
    UIPageControl *pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(78, 600, 200, 30)];
    self.pageControl = pageControl;
   
//    pageControl.backgroundColor = [UIColor redColor];
    pageControl.numberOfPages = imgNum;
   
    [pageControl addTarget:self action:@selector(changePage:) forControlEvents:UIControlEventValueChanged];
   
    [self.view addSubview:pageControl];
    [pageControl release];
}

- (void)changePage:(UIPageControl *)pageControl
{
    [_scrollView setContentOffset:CGPointMake(CGRectGetWidth(_scrollView.frame)*pageControl.currentPage, 0) animated:YES];
}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    _pageControl.currentPage = _scrollView.contentOffset.x/CGRectGetWidth(_scrollView.frame);
    for (Carousel * obj in _scrollView.subviews) {
        if ([obj isKindOfClass:[Carousel class]]) {
            if (obj.zoomScale != 1) {
                obj.zoomScale = 1.0;
                obj.imgView.center = obj.center;
            }
        }
    }
}

@end

注：使用MRC

---

4、NSTimer

     NSTimer叫作「定時器」，它的做用以下

• 在指定的時間執行指定的任務

• 每隔一段時間執行指定的任務

 

開啓：

     每隔ti秒，調用一次aTarget的aSelector方法，yesOrNo決定了是否重複執行這個任務

+ (NSTimer *)scheduledTimerWithTimeInterval:(NSTimeInterval)ti target:(id)aTarget selector:(SEL)aSelector userInfo:(id)userInfo repeats:(BOOL)yesOrNo;

中止：

     經過invalidate方法能夠中止定時器的工做，一旦定時器被中止了，就不能再次執行任務。只能再建立一個新的定時器才能執行新的任務

- (void)invalidate;

---

注意：UIScrollView沒法滾動的解決辦法

若是UIScrollView沒法滾動，多是如下緣由：

• 沒有設置contentSize

• scrollEnabled = NO

• 沒有接收到觸摸事件:userInteractionEnabled = NO

• 沒有取消autolayout功能（若是在Storyboard中添加了ScrollView的子控件，要想scrollView滾動，必須取消autolayout）