iOS-UIScrollView基本使用和按頁滾動

要讓一組視圖View一起滾動,就需要滾動視圖。在Android上提供了ScrollView,而iOS則提供了UIScrollView。UIScrollView比Android上的ScrollView多出3種特性:

  1. 原生支持內容視圖超出自身大小范圍外。
  2. 原生支持拖動越界回彈的功能。
  3. 支持按頁滾動視圖。

前2個特性是Android項目中一直費盡心思想實現的功能,但都不理想,或者還有手勢沖突等問題。第三個特性一般用ViewPager來做,而不是用ScrollView,并且還自帶復用功能。那UIScrollView可以算是沒有復用功能的ViewPager了。本篇就來看看這個牛逼的UIScrollView吧。

效果截圖.png

UIScrollView創建

  • UIScrollView通過alloc和init進行創建和初始化,UIScrollView除了要設置frame外,還需要設置contentSize,代表內滾動的范圍,就是因為這個屬性,才能有內容視圖超過自身大小范圍的能力。
#import "ViewController.h"

@interface ViewController ()

/**
 * 滾動視圖
 */
@property(retain,nonatomic) UIScrollView* scrollView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    //獲取控制器View的寬、高
    CGFloat vcViewWidth = self.view.frame.size.width;
    CGFloat vcViewHeight = self.view.frame.size.height;
    
    //創建UIScrollView
    _scrollView = [[UIScrollView alloc] init];
    //設置UIScrollView的位置和寬高為控制器View的寬高
    _scrollView.frame = CGRectMake(0, 0, vcViewWidth, vcViewHeight);
    //設置畫布大小,一般比frame大,這里設置橫向能拖動4張圖片的范圍
    _scrollView.contentSize = CGSizeMake(vcViewWidth * 4, vcViewHeight);
    
    //將ScrollView添加到控制器的View上
    [self.view addSubview:_scrollView];
}

@end

添加內容

經過上面的設置,我們的UIScrollView已經添加到屏幕中了,但是還沒有內容,接下來我們給UIScrollView添加4張圖片,分別橫向排列。

  1. 我們往項目中放4張圖片,文件名分別為1、2、3、4.jpg。
UIScrollView的4張圖片.png
  1. 實例化4個ImageView,添加到UIScrollView中。
//創建圖片ImageView添加到ScrollView中
for(int i = 0; i < 4; i++) {
    NSString* imgName = [NSString stringWithFormat:@"%d.jpg", i + 1];
    UIImage* img = [UIImage imageNamed:imgName];
    UIImageView* imgView = [[UIImageView alloc] initWithImage:img];
    imgView.frame = CGRectMake(vcViewWidth * i, 0, vcViewWidth, vcViewHeight);
    [_scrollView addSubview:imgView];
}

UIScrollView的其他設置

  • 開啟、禁用滾動,默認為YES
_scrollView.scrollEnabled = YES;
  • (特性一)是否可以邊緣彈動效果,默認為YES,能讓內容超過自身大小
_scrollView.bounces = YES;
  • (特性二)開啟、禁用縱向、橫向彈動,這2個屬性控制不同方向的越界拖動、回彈,默認都為YES
//開啟橫向彈動效果
_scrollView.alwaysBounceHorizontal = YES;
//關閉縱向彈動效果
_scrollView.alwaysBounceVertical = NO;
  • (特性三)是否按照整頁滾動,默認為NO,設置為YES就是按頁來滾動
_scrollView.pagingEnabled = YES;
  • 顯示、隱藏滾動進度條,默認為YES
//隱藏橫向滾動條
_scrollView.showsHorizontalScrollIndicator = NO;
//隱藏豎向滾動條
_scrollView.showsVerticalScrollIndicator = NO;

UIScrollView設置代理

UIScrollView的代理,就是設置UIScrollView上的事件回調的協議,一般我們讓當前控制器來實現協議。

  1. 視圖控制器實現UIScrollView的代理協議UIScrollViewDelegate。
文件:ViewController.h

@interface ViewController : UIViewController<UIScrollViewDelegate>

@end
  1. 給UIScrollView設置代理,并復寫代理方法。代理方法都在代碼里,就不一一列舉了。
文件:ViewController.m

#import "ViewController.h"

@interface ViewController ()

/**
 * 滾動視圖
 */
@property(retain,nonatomic) UIScrollView* scrollView;

@end

- (void)viewDidLoad {
    [super viewDidLoad];
    
    //...省略上面提到的設置
 
     //將ScrollView添加到控制器的View上
    [self.view addSubview:_scrollView];
    //設置代理
    _scrollView.delegate = self;   
}

//滾動視圖移動時回調
- (void) scrollViewDidScroll:(UIScrollView *)scrollView {
    NSLog(@"視圖移動 x: %f", scrollView.contentOffset.x);
}

//滾動視圖結束拖動時回調
- (void) scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
    NSLog(@"視圖結束拖動");
}

//滾動視圖即將開始拖動時回調
- (void) scrollViewWillBeginDragging:(UIScrollView *)scrollView {
    NSLog(@"滾動視圖即將開始拖動");
}

//滾動視圖結束拖動時回調
- (void) scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset {
    NSLog(@"滾動視圖結束拖動");
}

//視圖即將減速時調用
- (void) scrollViewWillBeginDecelerating:(UIScrollView *)scrollView {
    NSLog(@"視圖即將減速");
}

//視圖已經結束減速時回調
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    NSLog(@"視圖已經結束減速");
}

@implementation ViewController

讓UIScrollView滾動到指定位置

  1. 馬上讓ScrollView滾動到指定位置,沒有緩慢滾動的效果。
self.scrollView.contentOffset = CGPointMake(0, 0);
//或者
[self.scrollView scrollRectToVisible:CGRectMake(0, 0, 300, 400) animated:NO];
  1. 支持緩慢的動畫滾動效果。
[self.scrollView scrollRectToVisible:CGRectMake(0, 0, 300, 400) animated:YES];
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容