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

UIScrollView傳智講師掌握UIScrollView的常見屬性UIScrollView

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

是干什么的?UIScrollView

也是一種控件用來實現(xiàn)”滾動”和”縮放”的控件UIScrollView快速熱身為什么要進行”滾動”或”縮放”?–

移動設備屏幕大小有限,當要顯示的內容太大時,為了能更方便的查看內容所以需要”滾動”和”縮放”UIScrollView快速熱身誰進行“滾動”或”縮放”?–

“滾動”和”縮放”指的是針對放到

UIScrollView

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

拖一個

UIScrollView

到界面上2.

將需要展示的內容添加到UIScrollView中3.

設置UIScrollView的contentSize屬性-contentSize

屬性的含義是:告訴UIScrollView

要展示的內容實際有多大（尺寸），也就是告訴

UIScrollView滾動的范圍（能滾多遠，滾到哪里是盡頭）大圖展示案例大圖展示案例步驟:1.

拖一個

UIScrollView

到屏幕2.

拖一個

UIImageView

到

UIScrollView

中3.

設置

UIImageView

的顯示圖片,

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

UIImageView

的大小4.

在控制器的

viewDidLoad

方法中,

設置UIScrollView

的

contentSize

為圖片的實際大小（UIImageView

的

Image

屬性的

size）補充:UIScrollView無法滾動可能的原因及解決辦法如果UIScrollView無法滾動，可能是以下原因：沒有設置contentSizescrollEnabled

=

NO沒有接收到觸摸事件:userInteractionEnabled=NO沒有取消autolayout功能（要想scrollView滾動，在xcode5.x

下必須取消autolayout）注意:在xcode6.1下不需要取消自動布局也可以滾動。……注意UIScrollView的

frame.size與

contentSize

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

contentSize設置都一樣了,還能滾動嗎?如果

contentSize

比

frame.size小還能滾動嗎？總結:在UIScrollView的frame.size這么大的范圍內,要顯示

contentSize這么大的內容。是否需要滾動,取決于contentSize是否比frame.size大。UIScrollView的常見屬性:contentOffset@property(nonatomic)

CGPoint

contentOffset;屬性含義:1>

當UIScrollView內部的內容滾動時,內容相對于UIScrollView左上角的偏移2>

另一種理解方式:內容滾動到了什么位置案例通過點擊按鈕,

實現(xiàn)大圖自動滾動（修改

contentOffset）。步驟1.

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

contentOffset

沒有動畫效果2.通過UIView的動畫方法實現(xiàn)3.通過調用UIScrollView的setContentOffset:animated:來實現(xiàn)帶動畫效果的滾動。UIScrollView的常見屬性@property(nonatomic)

UIEdgeInsets

contentInset;含義:內容的內邊距設置UIScrollView的內容在拖動以后,內容距離UIScrollView的內邊距。（聯(lián)想按鈕的內邊距屬性:Inset）另一種思考方式:想象成把內容加大了,在內容本身的周圍加了一圈”外邊距”。案例演示設置了contentInset

屬性后的效果。UIScrollView的常見屬性利用UIScrollView顯示下面的大圖片frame.size.widthcontentInset.rightcontentInset.leftcontentInset.topcontentInset.bottomcontentSize.widthcontentOffset.ycontentOffset.xframe.size.heightcontentSize.heightUIScrollView的其他屬性@property(nonatomic)

BOOL

bounces;設置UIScrollView是否需要彈簧效果@property(nonatomic,getter=isScrollEnabled)

BOOL

scrollEnabled;設置UIScrollView是否能滾動@property(nonatomic)

BOOL

showsHorizontalScrollIndicator;是否顯示水平滾動條@property(nonatomic)

BOOL

showsVerticalScrollIndicator;是否顯示垂直滾動條“喜馬拉雅”案例通過”喜馬拉雅”案例綜合運用剛才學過的屬性。contentSizecontentOffsetcontentInset示例圖參考步驟1>拖拽一個UIScrollView到控制器view,設置該UIScrollView大小與控制器view一致2>

設置該UIScrollView的背景色為RGB:212,

212,

2123>

向UIScrollView中增加內容4>設置UIScrollView的contentSize的height為最下面的圖片的最大的Y值,width為0（因為橫向不滾動）提示:某個方向上不希望滾動,則把該方向上的contentSize的值設置為0參考步驟5>

向控制器的view中添加一個UIView到最上方,模擬"導航欄”注意:

直接拖拽UIView到UIScrollView上,

就導致UIView隨著UIScrollView進行滾動,

這個

UIView不屬于

UIScrollView

所以拖拽的時候最好拖拽到

Scene

(場景)上。在

viewDidLoad

中設置contentOffset

的

y值,為-74(設置默認滾動的位置).6>在最底部拖拽一個UIView,

模擬”底部菜單”,高度為447>設置頂部"導航欄UIView"

與 底部

"菜單欄UIView"的alpha

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

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

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

就一定要監(jiān)聽滾動事件。2.問題：如何監(jiān)聽滾動事件,？答：通過代理來監(jiān)聽。監(jiān)聽事件的另外一種方式:代理。之前學過的一種方式是：addTarget

的方式。UIScrollView的代理對象是如何工作的？UIScrollView用戶開始拖拽時:

發(fā)送特定的消息滾動到某個位置時:

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

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

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

(代理對象)用戶開始拖拽時:

調用特定方法滾動到某個位置時:

調用特定方法用戶停止拖拽時:

調用特定方法UIScrollView的代理對象是如何工作的？UIScrollViewdelegate

(代理對象)用戶開始拖拽時，調用scrollViewWillBeginDragging:方法具體滾動到某個位置時，調用scrollViewDidScroll:方法用戶停止拖拽時，調用scrollViewDidEndDragging:willDecelerate:方法再精確一點，UIScrollView和delegate的通信應該為下圖所示也就是說,

只要設置好了

UIScrollView的代理對象,那么當某個事件被觸發(fā)以后,

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

的delegate的條件1.讓這個對象遵守UIScrollViewDelegate代理協(xié)議見下頁圖。某個對象成為UIScrollView

的delegate的條件UIScrollView任意類型的對象id<UIScrollViewDelegate>

delegateUIScrollViewDelegate協(xié)議//用戶開始拖拽時調用(void)scrollViewWillBeginDragging:(UIScrollView

*)scrollView;//滾動到某個位置時調用(void)scrollViewDidScroll:(UIScrollView

*)scrollView;//用戶結束拖拽時調用(void)scrollViewDidEndDragging:(UIScrollView

*)scrollView

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

的代理1.

設置UIScrollView

的代理為當前控制器–

self.scrollView.delegate

=

self;2.

讓當前控制器遵守

UIScrollViewDelegate協(xié)議3.

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

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

通過代碼（self就是控制器）self.scrollView.delegate

=

self;方法二：

通過storyboard拖線（右擊UIScrollView）將當前控制器設置為UIScrollView

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

(void)scrollViewDidScroll:用戶在滾動的時候-

(void)scrollViewWillBeginDragging:用戶即將開始拖拽的時候-

(void)scrollViewDidEndDragging:用戶拖拽完畢以后代理設計模式的作用總結1.

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

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

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

向

UIScrollView

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

UIScrollView

的某個子控件（這個子控件就是告訴

UIScrollView

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

(UIView

*)viewForZoomingInScrollView:(UIScrollView

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

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

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

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

解釋UIScrollViewDelegate中的@optional關鍵字、@required

關鍵字演示其他與縮放相關的方法即將開始縮放的時候調用-

(void)scrollViewWillBeginZooming:(UIScrollView

*)scrollViewwithView:(UIView

*)view正在縮放的時候調用-

(void)scrollViewDidZoom:(UIScrollView

*)scrollView縮放完畢的時候調用-

(void)scrollViewDidEndZooming::(UIScrollView

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

添加

UIScrollView2.

動態(tài)向

UIScrollView

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

設置

UIScrollView

的

contentSize

實現(xiàn)滾動,實現(xiàn)橫向滾動4.實現(xiàn)分頁5.

實現(xiàn)分頁指示器

UIPageControl6.

通過使用

Nstimer

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

創(chuàng)建一個UIScrollView,

設置寬為300,

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

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

設置圖片,

設置

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

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

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

通過UIPageControl來實現(xiàn)2>

拽一個UIPageControl放到控制器的view中,不要放到UIScrollView中,否則就一起滾動了.3>

設置UIPageControl的Tint

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

imageCount;當前頁:currentPage屬性self.pageControl.currentPage=

0;注意:在

viewDidLoad

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

通過定時器(NSTimer)實現(xiàn)自動滾動在

viewDidLoad

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

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

UIPageControl

獲取當前頁數(shù),

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

的偏移值3>手動設置偏移值,

實現(xiàn)滾動

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

對象的invalidate

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

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

Bug的原因:當前處理UI界面的只有一個線程,當這個線程處理UI的拖動事件的時候就沒有能力再去處理滾動操作了注意:處理UI界面的的只能是一個線程。所以,處理UIScrollView的滾動和其他控件的拖拽,只能用同一個線程。如果多個線程都可以操作UI那么就會造成混亂的問題解決思路: