iOS UI基礎-7.0 UIScrollView

概述

移動設備的屏幕大小是極其有限的，所以直接展現在用戶眼前的內容也至關有限.當展現的內容較多，超出一個屏幕時，用戶可經過滾動手勢來查看屏幕之外的內容,普通的UIView不具有滾動功能，不能顯示過多的內容。UIScrollView是一個可以滾動的視圖控件，能夠用來展現大量的內容，而且能夠經過滾動查看全部的內容

• UIScrollView的常見屬性
• UIScrollView的經常使用代理方法
• UIScrollView的縮放

UIScrollView使用

基本使用

UIScrollView的用法很簡單，將須要展現的內容添加到UIScrollView中

設置UIScrollView的contentSize屬性，告訴UIScrollView全部內容的尺寸，也就是告訴它滾動的範圍

界面設計

點擊滾動，圖片往下移。實現代碼：

#import "MJViewController.h"

@interface MJViewController ()
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
@property (weak, nonatomic) IBOutlet UIImageView *minionView;
- (IBAction)scroll;
@end

@implementation MJViewController
- (void)viewDidLoad
{
    [super viewDidLoad];
    
    // 設置scrollView內容的尺寸(滾動的範圍)
//    self.scrollView.contentSize = CGSizeMake(892, 480);
//    self.scrollView.contentSize = self.minionView.image.size;
    self.scrollView.contentSize = self.minionView.frame.size; // 整體內容的範圍(滾動範圍)
}

- (IBAction)scroll {
    CGPoint offset = self.scrollView.contentOffset;
    offset.x += 10;
    offset.y += 10;
    [self.scrollView setContentOffset:offset animated:YES];
}
@end

沒法滾動的解決辦法

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

• 沒有設置contentSize
• scrollEnabled = NO
• 沒有接收到觸摸事件:userInteractionEnabled = NO
• 沒有取消autolayout功能（要想scrollView滾動，必須取消autolayout）

常見屬性

@property(nonatomic) CGPoint contentOffset;

這個屬性用來表示UIScrollView滾動的位置

 

@property(nonatomic) CGSize contentSize;

這個屬性用來表示UIScrollView內容的尺寸，滾動範圍（能滾多遠）

 

@property(nonatomic) UIEdgeInsets contentInset;

這個屬性可以在UIScrollView的4周增長額外的滾動區域

 

@property(nonatomic) BOOL bounces;

設置UIScrollView是否須要彈簧效果

 

@property(nonatomic,getter=isScrollEnabled) BOOL scrollEnabled;

設置UIScrollView是否能滾動

 

@property(nonatomic) BOOL showsHorizontalScrollIndicator;

是否顯示水平滾動條

 

@property(nonatomic) BOOL showsVerticalScrollIndicator;

是否顯示垂直滾動條

 

代理delegate

不少時候，咱們想在UIScrollView正在滾動 或 滾動到某個位置 或者 中止滾動 時作一些特定的操做

要想完成上述功能，前提條件就是可以監聽到UIScrollView的整個滾動過程

當UIScrollView發生一系列的滾動操做時， 會自動通知它的代理（delegate）對象，給它的代理髮送相應的消息，讓代理得知它的滾動狀況

也就是說，要想監聽UIScrollView的滾動過程，就必須先給UIScrollView設置一個代理對象，而後經過代理得知UIScrollView的滾動過程

實現代理分三步：

第一步：就設置UIScrollView所在的控制器 爲 UIScrollView的delegate

經過代碼（self就是控制器）

self.scrollView.delegate = self;

或者 經過storyboard拖線（右擊UIScrollView）

 

 

第二步：控制器應該遵照UIScrollViewDelegate協議

第三步：實現協議中定義的相關方法

經常使用的代理方法有：

// 用戶開始拖拽時調用
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView;
// 滾動到某個位置時調用
- (void)scrollViewDidScroll:(UIScrollView *)scrollView;
// 用戶結束拖拽時調用
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate;

內容縮放

縮放實現步驟

1. 設置UIScrollView的id<UISCrollViewDelegate> delegate代理對象
2. 設置minimumZoomScale ：縮小的最小比例
3. 設置maximumZoomScale ：放大的最大比例
4. 讓代理對象實現下面的方法，返回須要縮放的視圖控件

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

 

跟縮放相關的其餘代理方法

縮放完畢的時候調用

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

正在縮放的時候調用

- (void)scrollViewDidZoom:(UIScrollView *)scrollView

實例代碼

#import "MJViewController.h"

@interface MJViewController () <UIScrollViewDelegate>
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
@property (weak, nonatomic) IBOutlet UIImageView *minionView;
@end
// 代理 \ 委託

@implementation MJViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    // 設置內容尺寸
    self.scrollView.contentSize = self.minionView.frame.size;
    
    // 設置
    self.scrollView.delegate = self;
    
    // 設置最大和最小的縮放比例
    self.scrollView.maximumZoomScale = 2.0;
    self.scrollView.minimumZoomScale = 0.2;
}

/**
 *  當用戶開始拖拽scrollView時就會調用
 */
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    NSLog(@"開始拖拽-----");
}

/**
 *  只要scrollView正在滾動,就會調用
 */
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    NSLog(@"----正在滾動--%@", NSStringFromCGPoint(scrollView.contentOffset));
}

/**
 *  當用戶使用捏合手勢的時候會調用
 *
 *  @return 返回的控件就是須要進行縮放的控件
 */
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
    NSLog(@"----開始縮放");
    return self.minionView;
}

/**
 *  正在縮放的時候會調用
 */
- (void)scrollViewDidZoom:(UIScrollView *)scrollView
{
    NSLog(@"----正在縮放");
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

效果：

實踐-圖片輪播

UIPageControl分頁

只要將UIScrollView的pageEnabled屬性設置爲YES，UIScrollView會被分割成多個獨立頁面，裏面的內容就能進行分頁展現

 

通常會配合UIPageControl加強分頁效果，UIPageControl經常使用屬性以下：

一共有多少頁

property(nonatomic) NSInteger numberOfPages;

 

當前顯示的頁碼

@property(nonatomic) NSInteger currentPage;

只有一頁時，是否須要隱藏頁碼指示器

 

@property(nonatomic) BOOL hidesForSinglePage;

其餘頁碼指示器的顏色

 

@property(nonatomic,retain) UIColor *pageIndicatorTintColor;

 

當前頁碼指示器的顏色

@property(nonatomic,retain) UIColor *currentPageIndicatorTintColor;

 

NSTimer定時器

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

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

 

調用下面的方法就會開啓一個定時任務

+ (NSTimer *)scheduledTimerWithTimeInterval:(NSTimeInterval)ti target:(id)aTarget

  selector:(SEL)aSelector

  userInfo:(id)userInfo

  repeats:(BOOL)yesOrNo;

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

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

- (void)invalidate; //時鐘中止

實例代碼：

//
//  UYViewController.m
//  圖片輪播器
//
//  Created by jiangys on 15/5/23.
//  Copyright (c) 2015年 uxiaoyuan. All rights reserved.
//

#import "UYViewController.h"
#define kImageCount 5

@interface UYViewController ()<UIScrollViewDelegate>

@property (nonatomic,strong) UIScrollView *scrollView;
@property (nonatomic,strong) UIPageControl *pageControl;

@property (nonatomic, strong) NSTimer *timer;

@end

@implementation UYViewController

-(UIScrollView *)scrollView
{
    if (_scrollView==nil) {
        //若是爲空，建立一個
        _scrollView=[[UIScrollView alloc] initWithFrame:CGRectMake(10, 20, 300, 130)];
        _scrollView.backgroundColor=[UIColor redColor];
        
        //取消彈簧效果
        _scrollView.bounces=NO;
        
        // 取消水平滾動條
        _scrollView.showsHorizontalScrollIndicator = NO;
        _scrollView.showsVerticalScrollIndicator = NO;
        
        // 要分頁
        _scrollView.pagingEnabled = YES;
        
        // contentSize
        _scrollView.contentSize = CGSizeMake(kImageCount * _scrollView.bounds.size.width, 0);
        
        // 設置代理
        _scrollView.delegate = self;
        
        [self.view addSubview:_scrollView];
                     
    }
    return _scrollView;

}

- (UIPageControl *)pageControl
{
    if (_pageControl == nil) {
        // 分頁控件，本質上和scrollView沒有任何關係，是兩個獨立的控件
        _pageControl = [[UIPageControl alloc] init];
        // 總頁數
        _pageControl.numberOfPages = kImageCount;
        // 控件尺寸
        CGSize size = [_pageControl sizeForNumberOfPages:kImageCount];
        
        _pageControl.bounds = CGRectMake(0, 0, size.width, size.height);
        _pageControl.center = CGPointMake(self.view.center.x, 130);
        
        // 設置顏色
        _pageControl.pageIndicatorTintColor = [UIColor redColor];
        _pageControl.currentPageIndicatorTintColor = [UIColor blackColor];
        
        [self.view addSubview:_pageControl];
        
        // 添加監聽方法
        /** 在OC中，絕大多數"控件"，均可以監聽UIControlEventValueChanged事件，button除外" */
        [_pageControl addTarget:self action:@selector(pageChanged:) forControlEvents:UIControlEventValueChanged];
    }
    return _pageControl;
}

// 分頁控件的監聽方法
- (void)pageChanged:(UIPageControl *)page
{
    // 根據頁數，調整滾動視圖中的圖片位置 contentOffset
    CGFloat x = page.currentPage * self.scrollView.bounds.size.width;
    [self.scrollView setContentOffset:CGPointMake(x, 0) animated:YES];
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    //設置圖片
    for (int i=0; i<kImageCount; i++) {
        NSString *imageName=[NSString stringWithFormat:@"img_%02d",i+1];
        UIImage *image=[UIImage imageNamed:imageName];
        
        UIImageView *imageView=[[UIImageView alloc] initWithFrame:self.scrollView.bounds];
        imageView.image=image;
        
        [self.scrollView addSubview:imageView];
    }
    //計算imageView
    [self.scrollView.subviews enumerateObjectsUsingBlock:^(UIImageView *imageView, NSUInteger idx, BOOL *stop) {
        // 調整x => origin => frame
        CGRect frame = imageView.frame;
        frame.origin.x = idx * frame.size.width;
        
        imageView.frame = frame;
    }];
    
    // 分頁初始頁數爲0
    self.pageControl.currentPage = 0;
    
    // 啓動時鐘
    [self startTimer];
    
}

- (void)startTimer
{
    self.timer = [NSTimer timerWithTimeInterval:2.0 target:self selector:@selector(updateTimer) userInfo:nil repeats:YES];
    // 添加到運行循環
    [[NSRunLoop currentRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];
}

- (void)updateTimer
{
    // 頁號發生變化
    // (當前的頁數 + 1) % 總頁數
    int page = (self.pageControl.currentPage + 1) % kImageCount;
    self.pageControl.currentPage = page;

    // 調用監聽方法，讓滾動視圖滾動
    [self pageChanged:self.pageControl];
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.s
    
}

#pragma mark - ScrollView的代理方法
// 滾動視圖停下來，修改頁面控件的小點（頁數）
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    // 計算頁數
    int page = scrollView.contentOffset.x / scrollView.bounds.size.width;
    
    self.pageControl.currentPage = page;
}

/**
 修改時鐘所在的運行循環的模式後，抓不住圖片
 
 解決方法：抓住圖片時，中止時鐘，鬆手後，開啓時鐘
 */
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    // 中止時鐘，中止以後就不能再使用，若是要啓用時鐘，須要從新實例化
    [self.timer invalidate];
}

/**
 *  中止滾動，開啓時鐘
 */
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    [self startTimer];
}


@end

效果：

源碼下載：點擊下載