03a - DragMultipleViews

iPhone SDK開發範例大全第二章之二(2/14):2009年08月23日星期日

iPhone SDK開發範例大全即iPhone Developer's CookBook的中文譯本,程式可由erica網站下載。第二章講View(視圖),程式共有十四個:

本文講第二個程式03a -DragMultipleViews:

(A)這個程式會顯示16朵不同顏色的花在iPhone螢幕,並且可以移動每一朵花。

(B)程式啟動後,程式顯示16朵不同顏色的花,見下圖右方iPhone,這時程式開始等使用者drag任何一朵花。整個程式包含DragView class(4~26行)、HelloController class(27~49行)、sampleAppDelegate class及main()。我們都已知道,程式會從main()跳入sampleAppDelegate的applicationDidFinishLaunching,再跳入HelloController class裡的loadView(32~49行)。

loadView執行完,整個螢幕就滿佈了十六朵花,現在看看loadView是怎麼做到的?

33~36行:產生第一個view,也就是root view

37~48行:從NSArray *threeFlowers = [NSArray ...];到for(int i=0; ..) loop結尾,共loop十六次,每次放一朵花在root view之上。for loop中最重要的一行就是第42行:

DragView *dragger = [[DragView alloc] initWithFrame: dragRect];

46行,如下,setUserInteractionEnabled是UIView的property,documentation中說是default YES,事實上不然,必需自己設定為YES,否則,花移不會動:

[dragger setUserInteractionEnabled:YES];

dragger就是一朵 一朵的花,設定好了之後,再用46行[self.view addSubview:dragger];將一朵花放上去。設定?是設定什麼?除了loadView裡的64x64的 frame 、不同顏色的花之外,最重要的是讓使用者可以移動每一朵花。這件事完全是由DragView這個class完成。看一下4~26行的DragView class:

第4行的@interface DragView: UIImageView 宣告 DragView是 UIImageView 的subclass,而 UIImageView是UIResponder的subclass,UIResponder的subclass裡有許多回應 user action的method,這用到的兩個是 touchesBegin ( 第10行 )及 touchesMoved(第17行),當 iPhone OS接收到使用者按下( touch )螢幕中的某一朵花的時候,就會找到對應的那一個dragger,並呼叫其touchesBegin。如果使用者按下( touch )螢幕中的某一朵花並且移動 ( drag ) 它的時候,iPhone OS就會找到對應的那一個 dragger,並呼叫其 touchMoved。

身為程式設計師的我們,就必需寫出touchesBegin及touchMoved這兩個程式,overwrite UIResponder的default touchesBegin 及 touchMoved,default 程式只是 return ( 詳情用SDK3.0 Xcode/help/documentation , UIResponder說明)。而我們寫的程式需讓touchesBegin定出 touch 位置,touchMoved設定新的 frame 位置。

測試詳情再往下看。

(C)測試touch:下面第一圖中只剩最下方的一朵花沒擺好,試著 touch ( iPhone simulator用mouse click ) 這一朵花,可以看到break在 touchBegin,花並未移動。也不會 break在 touchMoved。Break的這一行 CGPoint pt = [[touches AnyObject] locationInView:self]; 值得一看:

[touches anyObject] 回傳的是系統傳來的一個UITouch class object.

[[touches AnyObject] locationInView:self];則回傳self的location,self是什麼?就是手指去點的那一朵花。看UITouch中locationInView method,可知self是個UIView,而整句的回傳值是個CGPoint。也就是self的frame的CGPoint。

(D)測試drag:下面第一圖中只剩最下方的一朵花沒擺好,試著 touch ( iPhone simulator用mouse click ) & drag 這一朵花,可以看到 break 在 touchBegin,花並未移動。drag則造成如下面第二圖 break 在 touchMoved,花仍未移動。最後一圖仍 break 在 touchMoved,完成後,花已經移動好了。