黑馬程序員基礎(chǔ)教程源碼筆記第五天10uiscrollview

UIScrollView傳智講師掌握UIScrollView的常見(jiàn)屬性UIScrollView

實(shí)現(xiàn)滾動(dòng)、縮放UIScrollView的常用代理方法UIScrollView和UIPageControl的分頁(yè)NSTimer的使用,計(jì)時(shí)器控件作業(yè)將喜馬拉雅和圖片輪播器結(jié)合在一起制作一個(gè)app的新特性界面UIScrollView快速熱身UIScrollView

是干什么的?UIScrollView

也是一種控件用來(lái)實(shí)現(xiàn)”滾動(dòng)”和”縮放”的控件UIScrollView快速熱身為什么要進(jìn)行”滾動(dòng)”或”縮放”?–

移動(dòng)設(shè)備屏幕大小有限,當(dāng)要顯示的內(nèi)容太大時(shí),為了能更方便的查看內(nèi)容所以需要”滾動(dòng)”和”縮放”UIScrollView快速熱身誰(shuí)進(jìn)行“滾動(dòng)”或”縮放”?–

“滾動(dòng)”和”縮放”指的是針對(duì)放到

UIScrollView

控件里面的內(nèi)容（可以是圖片、表格、其他控件等）,UIScrollView控件本身不動(dòng)UIScrollView快速熱身舉例：1.手機(jī)上的“設(shè)置”設(shè)置->隱私設(shè)置->Safari2.大圖滾動(dòng)顯示案例3.圖片縮放案例UIScrollView的基本使用（非常簡(jiǎn)單）1.

拖一個(gè)

UIScrollView

到界面上2.

將需要展示的內(nèi)容添加到UIScrollView中3.

設(shè)置UIScrollView的contentSize屬性-contentSize

屬性的含義是:告訴UIScrollView

要展示的內(nèi)容實(shí)際有多大（尺寸），也就是告訴

UIScrollView滾動(dòng)的范圍（能滾多遠(yuǎn)，滾到哪里是盡頭）大圖展示案例大圖展示案例步驟:1.

拖一個(gè)

UIScrollView

到屏幕2.

拖一個(gè)

UIImageView

到

UIScrollView

中3.

設(shè)置

UIImageView

的顯示圖片,

并根據(jù)實(shí)際設(shè)置的圖片的大小修改

UIImageView

的大小4.

在控制器的

viewDidLoad

方法中,

設(shè)置UIScrollView

的

contentSize

為圖片的實(shí)際大小（UIImageView

的

Image

屬性的

size）補(bǔ)充:UIScrollView無(wú)法滾動(dòng)可能的原因及解決辦法如果UIScrollView無(wú)法滾動(dòng)，可能是以下原因：沒(méi)有設(shè)置contentSizescrollEnabled

=

NO沒(méi)有接收到觸摸事件:userInteractionEnabled=NO沒(méi)有取消autolayout功能（要想scrollView滾動(dòng)，在xcode5.x

下必須取消autolayout）注意:在xcode6.1下不需要取消自動(dòng)布局也可以滾動(dòng)?！⒁釻IScrollView的

frame.size與

contentSize

的區(qū)別?frame.size指的是:UIScrollView的可視區(qū)域的大小,UIScrollView本身的大小contentSize指的是:UIScrollView中所包含的內(nèi)容的大小(要滾動(dòng)的實(shí)際內(nèi)容的大小)提問(wèn):把frame.size和

contentSize設(shè)置都一樣了,還能滾動(dòng)嗎?如果

contentSize

比

frame.size小還能滾動(dòng)嗎？總結(jié):在UIScrollView的frame.size這么大的范圍內(nèi),要顯示

contentSize這么大的內(nèi)容。是否需要滾動(dòng),取決于contentSize是否比f(wàn)rame.size大。UIScrollView的常見(jiàn)屬性:contentOffset@property(nonatomic)

CGPoint

contentOffset;屬性含義:1>

當(dāng)UIScrollView內(nèi)部的內(nèi)容滾動(dòng)時(shí),內(nèi)容相對(duì)于UIScrollView左上角的偏移2>

另一種理解方式:內(nèi)容滾動(dòng)到了什么位置案例通過(guò)點(diǎn)擊按鈕,

實(shí)現(xiàn)大圖自動(dòng)滾動(dòng)（修改

contentOffset）。步驟1.

直接實(shí)現(xiàn),直接修改

contentOffset

沒(méi)有動(dòng)畫(huà)效果2.通過(guò)UIView的動(dòng)畫(huà)方法實(shí)現(xiàn)3.通過(guò)調(diào)用UIScrollView的setContentOffset:animated:來(lái)實(shí)現(xiàn)帶動(dòng)畫(huà)效果的滾動(dòng)。UIScrollView的常見(jiàn)屬性@property(nonatomic)

UIEdgeInsets

contentInset;含義:內(nèi)容的內(nèi)邊距設(shè)置UIScrollView的內(nèi)容在拖動(dòng)以后,內(nèi)容距離UIScrollView的內(nèi)邊距。（聯(lián)想按鈕的內(nèi)邊距屬性:Inset）另一種思考方式:想象成把內(nèi)容加大了,在內(nèi)容本身的周?chē)恿艘蝗Α蓖膺吘唷?。案例演示設(shè)置了contentInset

屬性后的效果。UIScrollView的常見(jiàn)屬性利用UIScrollView顯示下面的大圖片frame.size.widthcontentInset.rightcontentInset.leftcontentInset.topcontentInset.bottomcontentSize.widthcontentOffset.ycontentOffset.xframe.size.heightcontentSize.heightUIScrollView的其他屬性@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)條“喜馬拉雅”案例通過(guò)”喜馬拉雅”案例綜合運(yùn)用剛才學(xué)過(guò)的屬性。contentSizecontentOffsetcontentInset示例圖參考步驟1>拖拽一個(gè)UIScrollView到控制器view,設(shè)置該UIScrollView大小與控制器view一致2>

設(shè)置該UIScrollView的背景色為RGB:212,

212,

2123>

向UIScrollView中增加內(nèi)容4>設(shè)置UIScrollView的contentSize的height為最下面的圖片的最大的Y值,width為0（因?yàn)闄M向不滾動(dòng)）提示:某個(gè)方向上不希望滾動(dòng),則把該方向上的contentSize的值設(shè)置為0參考步驟5>

向控制器的view中添加一個(gè)UIView到最上方,模擬"導(dǎo)航欄”注意:

直接拖拽UIView到UIScrollView上,

就導(dǎo)致UIView隨著UIScrollView進(jìn)行滾動(dòng),

這個(gè)

UIView不屬于

UIScrollView

所以拖拽的時(shí)候最好拖拽到

Scene

(場(chǎng)景)上。在

viewDidLoad

中設(shè)置contentOffset

的

y值,為-74(設(shè)置默認(rèn)滾動(dòng)的位置).6>在最底部拖拽一個(gè)UIView,

模擬”底部菜單”,高度為447>設(shè)置頂部"導(dǎo)航欄UIView"

與 底部

"菜單欄UIView"的alpha

=0.7(設(shè)置透明度)參考步驟8>設(shè)置contentInset屬性的top和bottom的值,在滾動(dòng)后預(yù)留一定的內(nèi)邊距注意:獲取某個(gè)控件的最大的Y值:CGRectGetMaxY(self.lastButton.frame);9>

設(shè)置一開(kāi)始就滾動(dòng)到某個(gè)位置,通過(guò)contentOffset屬性實(shí)現(xiàn)注意這里要把y值設(shè)置為負(fù)數(shù)該案例的主要目的:1>

了解UIScrollView的基本使用2>深入了解contentSize、contentInset、contentOffset屬性的作用和含義案例：實(shí)現(xiàn)滾動(dòng)的時(shí)候輸出當(dāng)前滾動(dòng)的位置。思考：0.獲取當(dāng)前滾動(dòng)的位置:scrollView.contentOffset1.有時(shí)候我們需要監(jiān)聽(tīng)滾動(dòng)的位置，比如當(dāng)滾到某一個(gè)位置的時(shí)候，我們要做些事情，比如到某一個(gè)位置我們彈框出來(lái)，就要監(jiān)聽(tīng)滾動(dòng)的過(guò)程，所以，我們

就一定要監(jiān)聽(tīng)滾動(dòng)事件。2.問(wèn)題：如何監(jiān)聽(tīng)滾動(dòng)事件,？答：通過(guò)代理來(lái)監(jiān)聽(tīng)。監(jiān)聽(tīng)事件的另外一種方式:代理。之前學(xué)過(guò)的一種方式是：addTarget

的方式。UIScrollView的代理對(duì)象是如何工作的？UIScrollView用戶(hù)開(kāi)始拖拽時(shí):

發(fā)送特定的消息滾動(dòng)到某個(gè)位置時(shí):

發(fā)送特定的消息用戶(hù)停止拖拽時(shí):

發(fā)送特定的消息delegate

(代理對(duì)象)UIScrollView的代理對(duì)象是如何工作的？在OC中，發(fā)送消息的意思就是調(diào)用方法因此UIScrollView和delegate的通信可以理解為下圖所示UIScrollViewdelegate

(代理對(duì)象)用戶(hù)開(kāi)始拖拽時(shí):

調(diào)用特定方法滾動(dòng)到某個(gè)位置時(shí):

調(diào)用特定方法用戶(hù)停止拖拽時(shí):

調(diào)用特定方法UIScrollView的代理對(duì)象是如何工作的？UIScrollViewdelegate

(代理對(duì)象)用戶(hù)開(kāi)始拖拽時(shí)，調(diào)用scrollViewWillBeginDragging:方法具體滾動(dòng)到某個(gè)位置時(shí)，調(diào)用scrollViewDidScroll:方法用戶(hù)停止拖拽時(shí)，調(diào)用scrollViewDidEndDragging:willDecelerate:方法再精確一點(diǎn)，UIScrollView和delegate的通信應(yīng)該為下圖所示也就是說(shuō),

只要設(shè)置好了

UIScrollView的代理對(duì)象,那么當(dāng)某個(gè)事件被觸發(fā)以后,

自動(dòng)調(diào)用代理對(duì)象的相應(yīng)方法。我們要關(guān)心的就是如何設(shè)置代理,其他細(xì)節(jié)無(wú)需關(guān)心。成為delegate的條件UIScrollView將delegate需要實(shí)現(xiàn)的方法都定義在了UIScrollViewDelegate協(xié)議中，因此要想成為UIScrollView的delegate，必須遵守UIScrollViewDelegate協(xié)議，然后實(shí)現(xiàn)協(xié)議中相應(yīng)的方法，就可以監(jiān)聽(tīng)UIScrollView的滾動(dòng)過(guò)程了某個(gè)對(duì)象成為UIScrollView

的delegate的條件1.讓這個(gè)對(duì)象遵守UIScrollViewDelegate代理協(xié)議見(jiàn)下頁(yè)圖。某個(gè)對(duì)象成為UIScrollView

的delegate的條件UIScrollView任意類(lèi)型的對(duì)象id<UIScrollViewDelegate>

delegateUIScrollViewDelegate協(xié)議//用戶(hù)開(kāi)始拖拽時(shí)調(diào)用(void)scrollViewWillBeginDragging:(UIScrollView

*)scrollView;//滾動(dòng)到某個(gè)位置時(shí)調(diào)用(void)scrollViewDidScroll:(UIScrollView

*)scrollView;//用戶(hù)結(jié)束拖拽時(shí)調(diào)用(void)scrollViewDidEndDragging:(UIScrollView

*)scrollView

willDecelerate:(BOOL)decelerate;遵守協(xié)議，實(shí)現(xiàn)相應(yīng)的方法將當(dāng)前控制器設(shè)置為UIScrollView

的代理1.

設(shè)置UIScrollView

的代理為當(dāng)前控制器–

self.scrollView.delegate

=

self;2.

讓當(dāng)前控制器遵守

UIScrollViewDelegate協(xié)議3.

在當(dāng)前控制器中實(shí)現(xiàn)代理協(xié)議中的方法將當(dāng)前控制器設(shè)置為UIScrollView

的代理設(shè)置控制器為UIScrollView的代理有2種方法：方法一：

通過(guò)代碼（self就是控制器）self.scrollView.delegate

=

self;方法二：

通過(guò)storyboard拖線(xiàn)（右擊UIScrollView）將當(dāng)前控制器設(shè)置為UIScrollView

的代理第二步，控制器應(yīng)該遵守UIScrollViewDelegate協(xié)議第三步，實(shí)現(xiàn)協(xié)議中定義的相關(guān)方法演示UIScrollView的3個(gè)代理方法-

(void)scrollViewDidScroll:用戶(hù)在滾動(dòng)的時(shí)候-

(void)scrollViewWillBeginDragging:用戶(hù)即將開(kāi)始拖拽的時(shí)候-

(void)scrollViewDidEndDragging:用戶(hù)拖拽完畢以后代理設(shè)計(jì)模式的作用總結(jié)1.

監(jiān)聽(tīng)事件（返回來(lái)就是"通知"）1>scrolView發(fā)生某某事件后，通知代理對(duì)象的某個(gè)方法2>代理對(duì)象的某個(gè)方法監(jiān)聽(tīng)scrollView的某個(gè)事件（狀態(tài)發(fā)生改變）2.

回傳數(shù)據(jù)總結(jié):代理設(shè)計(jì)模式最終的目的就是”解耦”。內(nèi)容縮放有些時(shí)候，我們可能要對(duì)某些內(nèi)容進(jìn)行手勢(shì)縮放，如下圖所示UIScrollView不僅能滾動(dòng)顯示大量?jī)?nèi)容，還能對(duì)其內(nèi)容進(jìn)行縮放處理也就是說(shuō)，要完成縮放功能的話(huà)，只需要將需要縮放的內(nèi)容添加到UIScrollView中通過(guò)UIScrollView

實(shí)現(xiàn)內(nèi)容縮放的思路1.拖拽一個(gè)UIScrollView2.

向

UIScrollView

中添加內(nèi)容（這里的內(nèi)容就是指要進(jìn)行縮放的內(nèi)容（控件））3.通過(guò)代理監(jiān)聽(tīng)縮放事件,在縮放事件中返回

UIScrollView

的某個(gè)子控件（這個(gè)子控件就是告訴

UIScrollView

對(duì)這個(gè)控件進(jìn)行縮放）4.設(shè)置縮放比:最大能放大多少倍,最小能縮小百分之多少UIScrollView的縮放原理當(dāng)用戶(hù)在UIScrollView身上使用捏合手勢(shì)時(shí)，UIScrollView會(huì)給代理發(fā)送一條消息，詢(xún)問(wèn)代理究竟要縮放自己內(nèi)部的哪一個(gè)子控件（哪一塊內(nèi)容）當(dāng)用戶(hù)在UIScrollView身上使用捏合手勢(shì)時(shí)，UIScrollView會(huì)調(diào)用代理的viewForZoomingInScrollView:方法，這個(gè)方法返回的控件就是需要進(jìn)行縮放的控件注意:UIScrollView一次只能縮放一個(gè)子控件。UIScrollViewDelegate協(xié)議遵守協(xié)議，實(shí)現(xiàn)相應(yīng)的方法//用戶(hù)使用捏合手勢(shì)時(shí)調(diào)用-

(UIView

*)viewForZoomingInScrollView:(UIScrollView

*)scrollView;代理對(duì)象UIScrollViewid<UIScrollViewDelegate>

delegate實(shí)現(xiàn)圖片縮放的具體步驟1.添加UIScrollView,設(shè)置UIScrollView的寬和高與控制器大小一致2.向UIScrollView中添加子控件UIImageView,設(shè)置圖片,設(shè)置UIImageView

的大小與圖片的實(shí)際大小一致。3.設(shè)置UIScrollView的代理為當(dāng)前控制器4.設(shè)置當(dāng)前控制器遵守UIScrollViewDelegate代理協(xié)議實(shí)現(xiàn)圖片縮放的具體步驟5.在控制器中實(shí)現(xiàn)代理方法–

-(UIView*)viewForZoomingInScrollView:方法返回要縮放的子控件6.在viewDidLoad中設(shè)置縮放比例–self.scrollView.maximumZoomScale=2.0;–self.scrollView.minimumZoomScale=0.4;**

解釋UIScrollViewDelegate中的@optional關(guān)鍵字、@required

關(guān)鍵字演示其他與縮放相關(guān)的方法即將開(kāi)始縮放的時(shí)候調(diào)用-

(void)scrollViewWillBeginZooming:(UIScrollView

*)scrollViewwithView:(UIView

*)view正在縮放的時(shí)候調(diào)用-

(void)scrollViewDidZoom:(UIScrollView

*)scrollView縮放完畢的時(shí)候調(diào)用-

(void)scrollViewDidEndZooming::(UIScrollView

*)scrollView案例:圖片輪播器效果演示。實(shí)現(xiàn)思路:1.

添加

UIScrollView2.

動(dòng)態(tài)向

UIScrollView

中添加圖片框（橫向）3.

設(shè)置

UIScrollView

的

contentSize

實(shí)現(xiàn)滾動(dòng),實(shí)現(xiàn)橫向滾動(dòng)4.實(shí)現(xiàn)分頁(yè)5.

實(shí)現(xiàn)分頁(yè)指示器

UIPageControl6.

通過(guò)使用

Nstimer

實(shí)現(xiàn)自動(dòng)滾動(dòng)圖片輪播器實(shí)現(xiàn)具體步驟1.

創(chuàng)建一個(gè)UIScrollView,

設(shè)置寬為300,

高為130(與每張圖片的大小一致)2.

向UIScrollView中添加內(nèi)容(要滾動(dòng)的內(nèi)容,添加到UIScrollView的子控件集合中)循環(huán)添加5個(gè)UIImageView,

設(shè)置圖片,

設(shè)置

frame3.設(shè)置UIScrollView的contentSize的width為5個(gè)圖片的總大小,上下不滾動(dòng)所以height為04.去掉水平滾動(dòng)條self.scrollView.showsHorizontalScrollIndicator=

NO;圖片輪播器實(shí)現(xiàn)具體步驟5.實(shí)現(xiàn)自動(dòng)分頁(yè)self.scrollView.pagingEnabled=

YES;問(wèn)題:設(shè)置完pagingEnabled=YES以后，scrollView是怎么知道該如何分頁(yè)的?答:按照UIScrollView自身的寬度來(lái)實(shí)現(xiàn)分頁(yè)的.UIScrollView的寬度就是每頁(yè)的大小。圖片輪播器實(shí)現(xiàn)具體步驟6.顯示分頁(yè)指示器1>

通過(guò)UIPageControl來(lái)實(shí)現(xiàn)2>

拽一個(gè)UIPageControl放到控制器的view中,不要放到UIScrollView中,否則就一起滾動(dòng)了.3>

設(shè)置UIPageControl的Tint

Color(其他頁(yè)顏色)和CurrentPage（當(dāng)前頁(yè)顏色）屬性顏色注意:當(dāng)把UIPageControl添加到控制器的view中的時(shí)候,這個(gè)控件和UIScrollView根本沒(méi)有任何聯(lián)系,所以沒(méi)有分頁(yè)指示功能圖片輪播器實(shí)現(xiàn)具體步驟7.實(shí)現(xiàn)分頁(yè)指示器總頁(yè)數(shù)、當(dāng)前頁(yè)。總頁(yè)數(shù):numberOfPages屬性self.pageControl.numberOfPages=

imageCount;當(dāng)前頁(yè):currentPage屬性self.pageControl.currentPage=

0;注意:在

viewDidLoad

中設(shè)置總頁(yè)數(shù)在-(void)scrollViewDidScroll:代理方法中設(shè)置當(dāng)前頁(yè)設(shè)置當(dāng)前頁(yè)的思路:通過(guò)當(dāng)前的滾動(dòng)的偏移值來(lái)計(jì)算出當(dāng)前滾動(dòng)到第幾頁(yè)了圖片輪播器實(shí)現(xiàn)具體步驟8.

通過(guò)定時(shí)器(NSTimer)實(shí)現(xiàn)自動(dòng)滾動(dòng)在

viewDidLoad

中啟動(dòng)定時(shí)器啟動(dòng)定時(shí)器的兩種方法:1>調(diào)用timerWithXxx創(chuàng)建的timer，把這個(gè)timer對(duì)象手動(dòng)加到”消息循環(huán)”中才能啟動(dòng)2>

調(diào)用scheduledTimerWithXxx創(chuàng)建的timer，自動(dòng)啟動(dòng)（創(chuàng)建完畢后自動(dòng)啟動(dòng)）。創(chuàng)建定時(shí)器的方法參見(jiàn)備注。圖片輪播器實(shí)現(xiàn)具體步驟9.在定時(shí)器的方法中實(shí)現(xiàn)滾動(dòng),代碼參考備注。思路1:1>通過(guò)

UIPageControl

獲取當(dāng)前頁(yè)數(shù),

并讓頁(yè)數(shù)+12>根據(jù)加1以后的頁(yè)數(shù)乘以每頁(yè)的寬度（每張圖片寬度）計(jì)算出contentOffset.x

的偏移值3>手動(dòng)設(shè)置偏移值,

實(shí)現(xiàn)滾動(dòng)

(通過(guò)動(dòng)畫(huà)方式設(shè)置).圖片輪播器實(shí)現(xiàn)具體步驟10.解決BugBug:當(dāng)拖拽UIScrollView的時(shí)候,保持一段時(shí)間不松手的時(shí)候,一旦松手UIScrollView會(huì)連續(xù)滾動(dòng)多次。解決思路:在即將拖拽的時(shí)候,停止計(jì)時(shí)器,拖拽完畢后再打開(kāi)一個(gè)計(jì)時(shí)器。**停止計(jì)時(shí)器:調(diào)用NSTimer

對(duì)象的invalidate

方法（當(dāng)某個(gè)計(jì)時(shí)器被停止以后,就無(wú)法再重用了,下次必須再重新創(chuàng)建一個(gè)新的計(jì)時(shí)器）。[self.timer

invalidate];-(void)scrollViewWillBeginDragging:-(void)scrollViewDidEndDragging:圖片輪播器實(shí)現(xiàn)具體步驟11.解決BugBug:當(dāng)單擊(拖拽)界面上的某個(gè)其他控件的時(shí)候,UIScrollView停止?jié)L動(dòng)的問(wèn)題。產(chǎn)生

Bug的原因:當(dāng)前處理UI界面的只有一個(gè)線(xiàn)程,當(dāng)這個(gè)線(xiàn)程處理UI的拖動(dòng)事件的時(shí)候就沒(méi)有能力再去處理滾動(dòng)操作了注意:處理UI界面的的只能是一個(gè)線(xiàn)程。所以,處理UIScrollView的滾動(dòng)和其他控件的拖拽,只能用同一個(gè)線(xiàn)程。如果多個(gè)線(xiàn)程都可以操作UI那么就會(huì)造成混亂的問(wèn)題解決思路: