IOS UIScrollView——用法詳解

今天面試被鄙視了不過確實(shí)平時(shí)沒觀察到!知其然知其所以然

UIScrollView是用來在屏幕上顯示那些在有限區(qū)域內(nèi)放不下的內(nèi)容嗤练。例如乃坤,在手機(jī)屏幕上顯示內(nèi)容豐富的網(wǎng)頁(yè)或者很大的圖片。在這種情況下啤贩,需要用戶對(duì)屏幕內(nèi)容進(jìn)行拖動(dòng)或縮放來查看屏幕或窗口區(qū)域外的內(nèi)容茫打。

所以居触,ScrollView應(yīng)該首先有一個(gè)窗口妖混,用來顯示內(nèi)容,其次轮洋,還要有內(nèi)容本身制市。這里的這個(gè)顯示窗口就是UIScrollView,這個(gè)窗口可以是整個(gè)手機(jī)屏幕弊予,也可以只是手機(jī)屏幕的一部分區(qū)域(屏幕其他部分可以顯示些別的東西)祥楣。內(nèi)容則是你需要查看的圖片或者網(wǎng)頁(yè)等信息視圖。通常汉柒,其大小會(huì)超過這個(gè)屏幕误褪,正因?yàn)槿绱耍覀儾乓褂肬IScrollView來查看碾褂。

使用方法

建立scrollView
先來看如何使用UIScrollView
在小窗口中顯示一副大圖兽间。

UIScrollView.jpg

假定ViewConroller已經(jīng)設(shè)置了屬性@property UIScrollView * scrollView;

- (void)viewDidLoad{
[super viewDidLoad];
//1. 建立UIScrollView窗口,我們只打算用手機(jī)的上半屏顯示圖像正塌,(這一步也可以在storyboard里完成)
self.scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, 320 , 300)];
//2.建立內(nèi)容視圖
UIImageView * view = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"tesla.jpg"]];
//3.將內(nèi)容視圖作為scrollView的子視圖
[self.scrollView addSubview: view];
//4.當(dāng)然了嘀略,還得把scrollView添加到視圖結(jié)構(gòu)中
[self.view addSubview: self.scrollView];
}

運(yùn)行一下看看,發(fā)現(xiàn)窗口正常顯示了圖片的左上角乓诽。但是根本拖不動(dòng)帜羊,看不了圖片的其他部分。這是怎么回事呢问裕?因?yàn)槲覀儧]有為scrollView設(shè)置要顯示的內(nèi)容大小。而scrollView的contenSize大小默認(rèn)是0孵坚。

內(nèi)容展示:contentSize
contentOffset
contentInset

contentSize
描述了有多大范圍的內(nèi)容需要使用scrollView的窗口來顯示粮宛,其默認(rèn)值為CGSizeZero,也就是一個(gè)寬和高都是0的范圍卖宠。

當(dāng)contentSize小于當(dāng)前scrollView的大小時(shí)巍杈,意味著用戶要顯示的內(nèi)容在窗口范圍內(nèi)是可以全部顯示的,這個(gè)時(shí)候扛伍,通常

內(nèi)容視圖是拖不動(dòng)的(有內(nèi)容沒有顯示出來才要拖嘛筷畦,都顯示得出來)。之所以說是“通炒倘鳎”鳖宾,是因?yàn)橥ㄟ^某些設(shè)置,還是可以拖得動(dòng)的逆航,后邊回彈機(jī)制里會(huì)解釋鼎文。所以要讓視圖可以拖動(dòng),我們得設(shè)置一個(gè)contentSize因俐。在前面這個(gè)簡(jiǎn)單的這個(gè)例子里拇惋,我們當(dāng)然就設(shè)置成imageView的大小就好了啊周偎。所以在第2步之后添加一句:

self.scrollView.contentSize = view.bounds.size;

這樣,就可以顯示圖片的全部?jī)?nèi)容撑帖。
但是如果你只想在窗口顯示圖片的的一部分蓉坎,也是可以的,就把contentSize設(shè)置得小一點(diǎn)就好了胡嘿。除了contentSize蛉艾,還有contentOffset,contentInset也可以結(jié)合起來使用灶平。需要注意的是伺通,contentSize的范圍是以scrollView的位置為基準(zhǔn)的。所以逢享,如果內(nèi)容視圖的frame.origin不是(0,0)罐监,則需要仔細(xì)計(jì)算內(nèi)容視圖能被顯示的范圍。
contentOffset: 描述了內(nèi)容視圖相對(duì)于scrollView窗口的位置(當(dāng)然是向上向左的偏移量咯)瞒爬。默認(rèn)值是CGPointZero弓柱,也就是(0,0)。當(dāng)視圖被拖動(dòng)時(shí)侧但,系統(tǒng)會(huì)不斷修改該值矢空。也可以通過setContentOffset:animated:方法讓圖片到達(dá)某個(gè)指定的位置。
scrollRectToVisible:animated:與setContentOffset:animated:類似禀横,只不過是將scrollView坐標(biāo)系內(nèi)的一塊指定區(qū)域移到scrollView的窗口中屁药,如果這部分已經(jīng)存在于窗口中,則什么也不做柏锄。
contentInset: 表示scrollView的內(nèi)邊距酿箭,也就是內(nèi)容視圖邊緣和scrollView的邊緣的留空距離,默認(rèn)值是UIEdgeInsetsZero趾娃,也就是沒間距缭嫡。這個(gè)屬性用的不多,通常在需要刷新內(nèi)容時(shí)才用得到抬闷。
好了妇蛀,圖片現(xiàn)在可以拖動(dòng)了。為了更清楚的進(jìn)行描述笤成,我們換一張圖片评架。大小為550*350的網(wǎng)格。
我們發(fā)現(xiàn)炕泳,當(dāng)將圖片拖到邊緣的時(shí)候古程,圖片還是可以繼續(xù)被拖動(dòng)的,會(huì)顯示contenSize之外的內(nèi)容喊崖。
如果contentSize設(shè)置為圖片的大小挣磨,拖動(dòng)到邊緣后仍然可以繼續(xù)拖動(dòng)雇逞,視圖顯示出一定的彈性,顯示出空白茁裙,一旦松手塘砸,內(nèi)容視圖會(huì)回彈,空白不會(huì)顯示在scrollView窗口中晤锥。
如果contentSize設(shè)置得比圖片的大小還小掉蔬,拖動(dòng)到contentSize指定的大小后仍然可以繼續(xù)拖動(dòng),顯示內(nèi)容視圖的更多部分矾瘾,但一旦松手女轿,內(nèi)容視圖也會(huì)回彈,超過contentSize的那部分不會(huì)顯示在scrollView窗口中壕翩。
如果contentSize設(shè)置得比圖片的大小更大蛉迹,拖動(dòng)到圖片的邊緣后仍然可以繼續(xù)拖動(dòng),顯示空白放妈,直到超過contentSize的范圍北救,才會(huì)產(chǎn)生彈性,松手后芜抒,視圖回彈珍策,靜止?fàn)顟B(tài)下我們可以看到scrollView可以顯示出contentSize范圍內(nèi)圖片范圍外的空白。
也就是說scrollView窗口在手指釋放的時(shí)候后的靜止?fàn)顟B(tài)下宅倒,只會(huì)顯示contentSize范圍內(nèi)的內(nèi)容攘宙。


UIScrollView2.jpg

scrollView的這種回彈機(jī)制,是可以設(shè)置的拐迁,相關(guān)的屬性為:bounces蹭劈,alwaysBounceHorizontal,alwaysBounceVertical唠亚,decelerationRate链方。
在拖動(dòng)的過程中持痰,我們還發(fā)現(xiàn)水平方向和垂直方向還顯示出狀態(tài)條灶搜,狀態(tài)條的顯示也是可以設(shè)置的。相關(guān)屬性為:indicatorStyleshowsHorizontalScrollIndicator showsVerticalScrollIndicatorscrollIndicatorInsets flashScrollIndicators

UIScrollView3.jpg

回彈機(jī)制:bounces
alwaysBounceHorizontal
alwaysBounceVertical

bounces
:描述的當(dāng)scrollview的顯示超過內(nèi)容區(qū)域的邊緣以及返回時(shí)工窍,是否有彈性割卖,默認(rèn)值為YES。值為YES的時(shí)候患雏,意味著到達(dá)contentSize所描繪的的邊界的時(shí)候鹏溯,拖動(dòng)會(huì)產(chǎn)生彈性。值為No的時(shí)候淹仑,拖動(dòng)到達(dá)邊界時(shí)丙挽,會(huì)立即停止肺孵。所以,如果在上面的例子當(dāng)中颜阐,將bounces設(shè)置為NO時(shí)平窘,窗口中是不會(huì)顯示contentSize范圍外的內(nèi)容的。

alwaysBounceHorizontal
:默認(rèn)值為NO凳怨,如果該值設(shè)為YES瑰艘,并且bounces也設(shè)置為YES,那么肤舞,即使設(shè)置的contentSize比scrollView的size小紫新,那么也是可以拖動(dòng)的。

alwaysBounceVertical
:默認(rèn)值為NO李剖,如果該值設(shè)為YES芒率,并且bounces也設(shè)置為YES,那么杖爽,即使設(shè)置的contentSize比scrollView的size小敲董,那么也是可以拖動(dòng)的。

狀態(tài)條顯示indicatorStyle
showsHorizontalScrollIndicator
showsVerticalScrollIndicator
scrollIndicatorInsets
flashScrollIndicators

根據(jù)我們的實(shí)際需要慰安,我們可以對(duì)狀態(tài)條進(jìn)行各種設(shè)置腋寨。

indicatorStyle
: 狀態(tài)條的風(fēng)格,默認(rèn)值為UIScrollViewIndicatorStyleDefault化焕。除此之外萄窜,還有UIScrollViewIndicatorStyleBlack, UIScrollViewIndicatorStyleWhite兩種其他風(fēng)格∪鼋埃可以用來和環(huán)境配色查刻。

showsHorizontalScrollIndicator
: 當(dāng)處于跟蹤狀態(tài)(tracking)時(shí)是否顯示水平狀態(tài)條,默認(rèn)值為YES凤类。下一節(jié)說明什么是跟蹤狀態(tài)穗泵。

showsVerticalScrollIndicator
: 當(dāng)處于跟蹤狀態(tài)(tracking)時(shí)是否顯示垂直狀態(tài)條,默認(rèn)值為YES谜疤。

scrollIndicatorInsets
: 狀態(tài)條和scrollView邊距的距離(暫時(shí)還沒想明白為什么要有這個(gè))佃延。

flashScrollIndicators
: 短暫的顯示一下狀態(tài)條,當(dāng)你將scrollView調(diào)整到最上面時(shí)夷磕,需要調(diào)用一下該方法履肃。

狀態(tài)跟蹤
之前提到過跟蹤狀態(tài)(tracking)。相關(guān)的屬性有三個(gè):tracking
dragging
decelerate
坐桩,這三個(gè)屬性表明了當(dāng)前視圖的滾動(dòng)狀態(tài)尺棋。

tracking
: 只讀,一旦用戶開始觸摸視圖(也許還沒有開始拖動(dòng))绵跷,該屬性值為YES

dragging
: 只讀膘螟,當(dāng)用戶開始拖動(dòng)(手指已經(jīng)在屏幕上滑動(dòng)一段距離了)成福,該屬性值為YES

decelerate
: 只讀,當(dāng)用戶松開手指荆残,但視圖仍在滾動(dòng)時(shí)闷叉,該值返回YES

zooming
: 只讀,用戶是否正在進(jìn)行縮放手勢(shì)脊阴。

zoomBouncing
:只讀握侧,當(dāng)縮放超過最大或者最小范圍的時(shí)候,回彈到最大最小范圍的過程中嘿期,該值返回YES品擎。

縮放
上一節(jié)我們看到了zooming屬性,scrollView除了支持拖動(dòng)之外备徐,還支持縮放萄传。

maximumZoomScale
: 最大放大比例,默認(rèn)值為1蜜猾,不得小于minimumZoomScale

minimumZoomScale
: 最小放大比例秀菱,默認(rèn)值為1,不得大于maxmumZoomScale

bouncesZoom
: 描述在縮放超過縮放比例時(shí)蹭睡,是否bounce衍菱,默認(rèn)值為YES。如果值為NO肩豁,則達(dá)到最大或最小縮放比例時(shí)會(huì)立即停止縮放脊串。否則,產(chǎn)生彈簧效果清钥。

zoomScale
: 當(dāng)前的縮放比例琼锋。系統(tǒng)會(huì)根據(jù)縮放過程調(diào)整此值。

setZoomScale:animated:
: 程序設(shè)置縮放大小祟昭。

zoomToRect:animated:
將內(nèi)容視圖縮放到指定的Rect中缕坎。

panGestureRecognizer

pinchGestureRecognizer

其他設(shè)置
delegate
: scrollView的委托對(duì)象,該委托對(duì)象必須實(shí)現(xiàn)UIScrollViewDelegate協(xié)議篡悟,這些方法會(huì)在合適的時(shí)候被調(diào)用谜叹。

scrollEnabled
:視圖是否可被拖動(dòng),默認(rèn)值為YES恰力。一旦該值設(shè)置為NO叉谜,則scrollView不再接受觸屏事件旗吁,會(huì)直接傳遞響應(yīng)鏈踩萎。

scrollToTop
:是否啟動(dòng)“滾動(dòng)至頂端”手勢(shì),默認(rèn)值為YES很钓。當(dāng)用戶使用了“滾動(dòng)至頂端”手勢(shì)(輕擊狀態(tài)欄)時(shí)香府,系統(tǒng)會(huì)要求離狀態(tài)欄最近的scrollView滾動(dòng)到頂端董栽,如果scrollToTop設(shè)置為NO,則該scrollView的delegate的scrollViewShouldScrollToTop:
方法會(huì)返回NO企孩,不會(huì)滾動(dòng)到頂端锭碳。否則,則會(huì)滾動(dòng)到頂端勿璃。滾動(dòng)到頂端之后擒抛,會(huì)給delegate發(fā)送scrollViewDidScrollToTop:消息。需要注意的是补疑,在iphone上歧沪,如果有多個(gè)scrollview的scrollToTop參數(shù)設(shè)置為YES的時(shí)候,“滾動(dòng)至頂端”手勢(shì)會(huì)失效莲组。

delaysContentTouches
:是否推遲觸屏手勢(shì)處理诊胞,默認(rèn)值為YES。設(shè)置為YES的時(shí)候锹杈,系統(tǒng)在確定是否發(fā)生scroll事件之后撵孤,才會(huì)處理觸屏手勢(shì),否則竭望,則會(huì)立即調(diào)用touchesShouldBegin:withEvent:inContentView:
方法邪码。

directionalLockEnabled
:是否鎖定某個(gè)特定方向的滾動(dòng),默認(rèn)值為NO咬清。設(shè)置為YES時(shí)霞扬,一旦用戶向水平或豎直方向拽動(dòng)時(shí),另一個(gè)方向的滾動(dòng)則被鎖定了枫振。但是如果首次拽動(dòng)是斜著的喻圃,那么則不會(huì)鎖定方向。

keyboardDismissMode
: 當(dāng)拖動(dòng)發(fā)生時(shí)粪滤,鍵盤的消失模式斧拍,默認(rèn)值是不消失。

pagingEnabled
:是否使用分頁(yè)機(jī)制杖小,默認(rèn)值為NO肆汹。當(dāng)設(shè)置為YES時(shí),會(huì)按照scrollView的寬度對(duì)內(nèi)容視圖進(jìn)行分頁(yè)予权。

decelerationRate
: 手指滑動(dòng)后抬起昂勉,頁(yè)面的減速速率∩ㄏ伲可以使用UIScrollViewDecelerationRateNormal
和UIScrollViewDecelerationRateFast
常量值來設(shè)置合理的減速速率岗照。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子攒至,更是在濱河造成了極大的恐慌厚者,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,042評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件迫吐,死亡現(xiàn)場(chǎng)離奇詭異库菲,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)志膀,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,996評(píng)論 2 384
  • 文/潘曉璐 我一進(jìn)店門熙宇,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人溉浙,你說我怎么就攤上這事奇颠。” “怎么了放航?”我有些...
    開封第一講書人閱讀 156,674評(píng)論 0 345
  • 文/不壞的土叔 我叫張陵烈拒,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我广鳍,道長(zhǎng)荆几,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,340評(píng)論 1 283
  • 正文 為了忘掉前任赊时,我火速辦了婚禮吨铸,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘祖秒。我一直安慰自己诞吱,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,404評(píng)論 5 384
  • 文/花漫 我一把揭開白布竭缝。 她就那樣靜靜地躺著房维,像睡著了一般。 火紅的嫁衣襯著肌膚如雪抬纸。 梳的紋絲不亂的頭發(fā)上咙俩,一...
    開封第一講書人閱讀 49,749評(píng)論 1 289
  • 那天,我揣著相機(jī)與錄音湿故,去河邊找鬼阿趁。 笑死,一個(gè)胖子當(dāng)著我的面吹牛坛猪,可吹牛的內(nèi)容都是我干的脖阵。 我是一名探鬼主播,決...
    沈念sama閱讀 38,902評(píng)論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼墅茉,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼命黔!你這毒婦竟也來了呜呐?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,662評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤纷铣,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后战转,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體搜立,經(jīng)...
    沈念sama閱讀 44,110評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,451評(píng)論 2 325
  • 正文 我和宋清朗相戀三年槐秧,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了啄踊。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,577評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡刁标,死狀恐怖颠通,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情膀懈,我是刑警寧澤顿锰,帶...
    沈念sama閱讀 34,258評(píng)論 4 328
  • 正文 年R本政府宣布,位于F島的核電站启搂,受9級(jí)特大地震影響硼控,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜胳赌,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,848評(píng)論 3 312
  • 文/蒙蒙 一牢撼、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧疑苫,春花似錦熏版、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,726評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至挺勿,卻和暖如春阔加,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背满钟。 一陣腳步聲響...
    開封第一講書人閱讀 31,952評(píng)論 1 264
  • 我被黑心中介騙來泰國(guó)打工刻坊, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人枣宫。 一個(gè)月前我還...
    沈念sama閱讀 46,271評(píng)論 2 360
  • 正文 我出身青樓赌结,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親吠撮。 傳聞我的和親對(duì)象是個(gè)殘疾皇子尊惰,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,452評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容