縮放自如的熊大王 - ScrollView的縮放

愛麗絲夢遊仙境裡的Alice喝了神奇藥水後會在一瞬間放大縮小，距離這本書的出版已經一百多年了，放大縮小的藥水仍舊沒有發明，但是iPhone神奇的多點觸碰，已經搶先一步實現了縮放的功能。即便螢幕比我們的手掌還小，然而只要以小小的手指頭做縮放的手勢，即可實現圖片的縮放功能。透過內建的UIScrollView元件，圖片的縮放其實只是雕蟲小技，不足為外人道也。接下來就讓威風凜凜的森林熊大王以牠的特寫圖片為各位示範縮放的效果吧 。( 感謝藝術家朋友Jorinde Jankowski (張友鷦)提供可愛的熊大王)

1. 建立Single View Application專案 ZoomScrollViewTest。

2.  在畫面上添加佔滿螢幕的Scroll View和Image View。

3. 設定圖片的縮放比例
 

於Scroll View的Attributes Inspector頁面，設定圖片的縮放比例。如上圖所示，我們將Max設為2，如此到時候圖片放大的極限將為Image View尺寸的2倍。Min設為0.5，圖片縮小的極限將為Image View尺寸的一半。

4. 設定ZoomScrollViewTestViewController為scroll view的delegate。

到時候要實現圖片的縮放，還需要controller化身代理人，實作某個宣告於UIScrollViewDelegate的method。

5.  將image view連結至ZoomScrollViewTestViewController，宣告property imageView。

 

6.   遵從UIScrollViewDelegate protocol。 (ZoomScrollViewTestViewController.h)


@interface ZoomScrollViewTestViewController : UIViewController
<UIScrollViewDelegate>

7. 定義UIScrollViewDelegate的viewForZoomingInScrollView: method。

說明:
回傳欲縮放的UI元件。就像Alice在童話故事裡被選定具有放大縮小的天命，我們也必須指定誰具有天命。在這裡我們指定熊大王具有縮放的能力。可以放大，熊大王才能夠保護森林，可以縮小，熊大王才可以躲避獵人的追補。若是沒有實作此method，或是回傳nil，到頭來將還是一場空，使用者的手指再怎麼於畫面上縮放，熊大王還是無動於衷。

執行App:

正常尺寸的熊大王

為了保護森林子民放大的熊大王

為了躲避獵人追補縮小的熊大王

ps: 如果想在模擬器上測試縮放，感受熊大王的威風也是ok的。只要按住option鍵，即可以滑鼠模擬縮放手勢。