iOS UIScrollView基本使用和按頁滾動
阿新 • • 發佈:2020-06-24
要讓一組檢視View一起滾動,就需要滾動檢視。在Android上提供了ScrollView,而iOS則提供了UIScrollView。UIScrollView比Android上的ScrollView多出3種特性:
- 原生支援內容檢視超出自身大小範圍外。
- 原生支援拖動越界回彈的功能。
- 支援按頁滾動檢視。
前2個特性是Android專案中一直費盡心思想實現的功能,但都不理想,或者還有手勢衝突等問題。第三個特性一般用ViewPager來做,而不是用ScrollView,並且還自帶複用功能。那UIScrollView可以算是沒有複用功能的ViewPager了。本篇就來看看這個牛逼的UIScrollView吧。
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,vcViewWidth,vcViewHeight);
//設定畫布大小,一般比frame大,這裡設定橫向能拖動4張圖片的範圍
_scrollView.contentSize = CGSizeMake(vcViewWidth * 4,vcViewHeight);
//將ScrollView新增到控制器的View上
[self.view addSubview:_scrollView];
}
@end
複製程式碼
新增內容
經過上面的設定,我們的UIScrollView已經新增到螢幕中了,但是還沒有內容,接下來我們給UIScrollView新增4張圖片,分別橫向排列。
- 我們往專案中放4張圖片,檔名分別為1、2、3、4.jpg。
- 例項化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,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上的事件回撥的協議,一般我們讓當前控制器來實現協議。
- 檢視控制器實現UIScrollView的代理協議UIScrollViewDelegate。
檔案:ViewController.h
@interface ViewController : UIViewController<UIScrollViewDelegate>
@end
複製程式碼
- 給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滾動到指定位置
- 馬上讓ScrollView滾動到指定位置,沒有緩慢滾動的效果。
self.scrollView.contentOffset = CGPointMake(0,0);
//或者
[self.scrollView scrollRectToVisible:CGRectMake(0,300,400) animated:NO];
複製程式碼
- 支援緩慢的動畫滾動效果。
[self.scrollView scrollRectToVisible:CGRectMake(0,400) animated:YES];
複製程式碼