概述

移動(dòng)設(shè)備的屏幕大小是極其有限的，因此直接展示在用戶眼前的內(nèi)容也相當(dāng)有限.當(dāng)展示的內(nèi)容較多，超出一個(gè)屏幕時(shí)，用戶可通過滾動(dòng)手勢來查看屏幕以外的內(nèi)容,普通的UIView不具備滾動(dòng)功能，不能顯示過多的內(nèi)容。UIScrollView是一個(gè)能夠滾動(dòng)的視圖控件，可以用來展示大量的內(nèi)容，并且可以通過滾動(dòng)查看所有的內(nèi)容

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

UIScrollView使用

基本使用

UIScrollView的用法很簡單，將需要展示的內(nèi)容添加到UIScrollView中

設(shè)置UIScrollView的contentSize屬性，告訴UIScrollView所有內(nèi)容的尺寸，也就是告訴它滾動(dòng)的范圍

界面設(shè)計(jì)

點(diǎn)擊滾動(dòng)，圖片往下移。實(shí)現(xiàn)代碼：

#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];// 設(shè)置scrollView內(nèi)容的尺寸(滾動(dòng)的范圍) // self.scrollView.contentSize = CGSizeMake(892, 480); // self.scrollView.contentSize = self.minionView.image.size;self.scrollView.contentSize = self.minionView.frame.size; // 總體內(nèi)容的范圍(滾動(dòng)范圍) }- (IBAction)scroll {CGPoint offset = self.scrollView.contentOffset;offset.x += 10;offset.y += 10;[self.scrollView setContentOffset:offset animated:YES]; } @end

無法滾動(dòng)的解決辦法

如果UIScrollView無法滾動(dòng)，可能是以下原因：

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

常見屬性

@property(nonatomic) CGPoint contentOffset; 這個(gè)屬性用來表示UIScrollView滾動(dòng)的位置 @property(nonatomic) CGSize contentSize; 這個(gè)屬性用來表示UIScrollView內(nèi)容的尺寸，滾動(dòng)范圍（能滾多遠(yuǎn)） @property(nonatomic) UIEdgeInsets contentInset; 這個(gè)屬性能夠在UIScrollView的4周增加額外的滾動(dòng)區(qū)域 @property(nonatomic) BOOL bounces; 設(shè)置UIScrollView是否需要彈簧效果 @property(nonatomic,getter=isScrollEnabled) BOOL scrollEnabled; 設(shè)置UIScrollView是否能滾動(dòng) @property(nonatomic) BOOL showsHorizontalScrollIndicator; 是否顯示水平滾動(dòng)條 @property(nonatomic) BOOL showsVerticalScrollIndicator; 是否顯示垂直滾動(dòng)條

?

代理delegate

很多時(shí)候，我們想在UIScrollView正在滾動(dòng) 或 滾動(dòng)到某個(gè)位置 或者 停止?jié)L動(dòng) 時(shí)做一些特定的操作 要想完成上述功能，前提條件就是能夠監(jiān)聽到UIScrollView的整個(gè)滾動(dòng)過程 當(dāng)UIScrollView發(fā)生一系列的滾動(dòng)操作時(shí)， 會(huì)自動(dòng)通知它的代理（delegate）對(duì)象，給它的代理發(fā)送相應(yīng)的消息，讓代理得知它的滾動(dòng)情況 也就是說，要想監(jiān)聽UIScrollView的滾動(dòng)過程，就必須先給UIScrollView設(shè)置一個(gè)代理對(duì)象，然后通過代理得知UIScrollView的滾動(dòng)過程

實(shí)現(xiàn)代理分三步：

第一步：就設(shè)置UIScrollView所在的控制器 為 UIScrollView的delegate

通過代碼（self就是控制器） self.scrollView.delegate = self; 或者 通過storyboard拖線（右擊UIScrollView） 第二步：控制器應(yīng)該遵守UIScrollViewDelegate協(xié)議

第三步：實(shí)現(xiàn)協(xié)議中定義的相關(guān)方法

常用的代理方法有：

// 用戶開始拖拽時(shí)調(diào)用 - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView; // 滾動(dòng)到某個(gè)位置時(shí)調(diào)用 - (void)scrollViewDidScroll:(UIScrollView *)scrollView; // 用戶結(jié)束拖拽時(shí)調(diào)用 - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate;

內(nèi)容縮放

縮放實(shí)現(xiàn)步驟

設(shè)置UIScrollView的id<UISCrollViewDelegate> delegate代理對(duì)象

設(shè)置minimumZoomScale ：縮小的最小比例

設(shè)置maximumZoomScale ：放大的最大比例

讓代理對(duì)象實(shí)現(xiàn)下面的方法，返回需要縮放的視圖控件

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView; 跟縮放相關(guān)的其他代理方法 縮放完畢的時(shí)候調(diào)用 - (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(UIView *)view 正在縮放的時(shí)候調(diào)用 - (void)scrollViewDidZoom:(UIScrollView *)scrollView

實(shí)例代碼

#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];// 設(shè)置內(nèi)容尺寸self.scrollView.contentSize = self.minionView.frame.size;// 設(shè)置self.scrollView.delegate = self;// 設(shè)置最大和最小的縮放比例self.scrollView.maximumZoomScale = 2.0;self.scrollView.minimumZoomScale = 0.2; }/*** 當(dāng)用戶開始拖拽scrollView時(shí)就會(huì)調(diào)用*/ - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {NSLog(@"開始拖拽-----"); }/*** 只要scrollView正在滾動(dòng),就會(huì)調(diào)用*/ - (void)scrollViewDidScroll:(UIScrollView *)scrollView {NSLog(@"----正在滾動(dòng)--%@", NSStringFromCGPoint(scrollView.contentOffset)); }/*** 當(dāng)用戶使用捏合手勢的時(shí)候會(huì)調(diào)用** @return 返回的控件就是需要進(jìn)行縮放的控件*/ - (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {NSLog(@"----開始縮放");return self.minionView; }/*** 正在縮放的時(shí)候會(huì)調(diào)用*/ - (void)scrollViewDidZoom:(UIScrollView *)scrollView {NSLog(@"----正在縮放"); }- (void)didReceiveMemoryWarning {[super didReceiveMemoryWarning];// Dispose of any resources that can be recreated. }@end

效果：

實(shí)踐-圖片輪播

UIPageControl分頁

只要將UIScrollView的pageEnabled屬性設(shè)置為YES，UIScrollView會(huì)被分割成多個(gè)獨(dú)立頁面，里面的內(nèi)容就能進(jìn)行分頁展示 一般會(huì)配合UIPageControl增強(qiáng)分頁效果，UIPageControl常用屬性如下： 一共有多少頁 property(nonatomic) NSInteger numberOfPages; 當(dāng)前顯示的頁碼 @property(nonatomic) NSInteger currentPage; 只有一頁時(shí)，是否需要隱藏頁碼指示器 @property(nonatomic) BOOL hidesForSinglePage; 其他頁碼指示器的顏色 @property(nonatomic,retain) UIColor *pageIndicatorTintColor; 當(dāng)前頁碼指示器的顏色 @property(nonatomic,retain) UIColor *currentPageIndicatorTintColor;

NSTimer定時(shí)器

NSTimer叫做“定時(shí)器”，它的作用如下

• 在指定的時(shí)間執(zhí)行指定的任務(wù)
• 每隔一段時(shí)間執(zhí)行指定的任務(wù)

調(diào)用下面的方法就會(huì)開啟一個(gè)定時(shí)任務(wù) + (NSTimer *)scheduledTimerWithTimeInterval:(NSTimeInterval)ti target:(id)aTargetselector:(SEL)aSelectoruserInfo:(id)userInforepeats:(BOOL)yesOrNo;

每隔ti秒，調(diào)用一次aTarget的aSelector方法，yesOrNo決定了是否重復(fù)執(zhí)行這個(gè)任務(wù)

通過invalidate方法可以停止定時(shí)器的工作，一旦定時(shí)器被停止了，就不能再次執(zhí)行任務(wù)。只能再創(chuàng)建一個(gè)新的定時(shí)器才能執(zhí)行新的任務(wù) - (void)invalidate; //時(shí)鐘停止

實(shí)例代碼：

// // 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) {//如果為空，創(chuàng)建一個(gè)_scrollView=[[UIScrollView alloc] initWithFrame:CGRectMake(10, 20, 300, 130)];_scrollView.backgroundColor=[UIColor redColor];//取消彈簧效果_scrollView.bounces=NO;// 取消水平滾動(dòng)條_scrollView.showsHorizontalScrollIndicator = NO;_scrollView.showsVerticalScrollIndicator = NO;// 要分頁_scrollView.pagingEnabled = YES;// contentSize_scrollView.contentSize = CGSizeMake(kImageCount * _scrollView.bounds.size.width, 0);// 設(shè)置代理_scrollView.delegate = self;[self.view addSubview:_scrollView];}return _scrollView;}- (UIPageControl *)pageControl {if (_pageControl == nil) {// 分頁控件，本質(zhì)上和scrollView沒有任何關(guān)系，是兩個(gè)獨(dú)立的控件_pageControl = [[UIPageControl alloc] init];// 總頁數(shù)_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);// 設(shè)置顏色_pageControl.pageIndicatorTintColor = [UIColor redColor];_pageControl.currentPageIndicatorTintColor = [UIColor blackColor];[self.view addSubview:_pageControl];// 添加監(jiān)聽方法/** 在OC中，絕大多數(shù)"控件"，都可以監(jiān)聽UIControlEventValueChanged事件，button除外" */[_pageControl addTarget:self action:@selector(pageChanged:) forControlEvents:UIControlEventValueChanged];}return _pageControl; }// 分頁控件的監(jiān)聽方法 - (void)pageChanged:(UIPageControl *)page {// 根據(jù)頁數(shù)，調(diào)整滾動(dòng)視圖中的圖片位置 contentOffsetCGFloat x = page.currentPage * self.scrollView.bounds.size.width;[self.scrollView setContentOffset:CGPointMake(x, 0) animated:YES]; }- (void)viewDidLoad {[super viewDidLoad];//設(shè)置圖片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];}//計(jì)算imageView[self.scrollView.subviews enumerateObjectsUsingBlock:^(UIImageView *imageView, NSUInteger idx, BOOL *stop) {// 調(diào)整x => origin => frameCGRect frame = imageView.frame;frame.origin.x = idx * frame.size.width;imageView.frame = frame;}];// 分頁初始頁數(shù)為0self.pageControl.currentPage = 0;// 啟動(dòng)時(shí)鐘 [self startTimer];}- (void)startTimer {self.timer = [NSTimer timerWithTimeInterval:2.0 target:self selector:@selector(updateTimer) userInfo:nil repeats:YES];// 添加到運(yùn)行循環(huán) [[NSRunLoop currentRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes]; }- (void)updateTimer {// 頁號(hào)發(fā)生變化// (當(dāng)前的頁數(shù) + 1) % 總頁數(shù)int page = (self.pageControl.currentPage + 1) % kImageCount;self.pageControl.currentPage = page;// 調(diào)用監(jiān)聽方法，讓滾動(dòng)視圖滾動(dòng) [self pageChanged:self.pageControl]; }- (void)didReceiveMemoryWarning {[super didReceiveMemoryWarning];// Dispose of any resources that can be recreated.s }#pragma mark - ScrollView的代理方法 // 滾動(dòng)視圖停下來，修改頁面控件的小點(diǎn)（頁數(shù)） - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {// 計(jì)算頁數(shù)int page = scrollView.contentOffset.x / scrollView.bounds.size.width;self.pageControl.currentPage = page; }/**修改時(shí)鐘所在的運(yùn)行循環(huán)的模式后，抓不住圖片解決方法：抓住圖片時(shí)，停止時(shí)鐘，松手后，開啟時(shí)鐘*/ - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {// 停止時(shí)鐘，停止之后就不能再使用，如果要啟用時(shí)鐘，需要重新實(shí)例化 [self.timer invalidate]; }/*** 停止?jié)L動(dòng)，開啟時(shí)鐘*/ - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {[self startTimer]; }@end

效果：

源碼下載：點(diǎn)擊下載

?

總結(jié)

以上是生活随笔為你收集整理的iOS UI基础-7.0 UIScrollView的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。