愛瘋手機.tw / appholic.tw ：app程式 / app programming

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，完成後，花已經移動好了。