iPhone/iPod, 應用程式開發

[APP開發]Xcode自行開發”點光明燈”App

梅干2011/10/05
梅問題-xcode教學-自行開發點光明燈App
  上星期梅干曾分享電火球的App範例,其製作的過程中並不困難,在電火球的範例中,開關閉得透過switch鈕來作控制,但iPhone的螢幕本身就是多點觸控面板,因此梅干便在想,若能直接透過觸碰螢幕,來開關電火球,那就更有趣了,於是梅干就上網找了一些文件,哈~終於實現,直接透過點螢幕就可開關閉燈光,而單純開關閉燈光,感覺點空虛,所以梅干希望當點到燈,亮起來時能播放點音樂,就這樣東湊湊西湊湊的,又完成另一個App的小範例,而梅干想很久到底要叫啥,最後就把它取名叫”點光明燈”,希望各位會喜歡。

開發環境:
MAC OSX:10.6.8
XCode:3.2.5

範例重點:
touches:單點觸控
AVFoundation.framework:音樂套件

準備素材:
1.二張圖片,分別為亮燈與不亮燈
2.57×57應用程式的圖示
3.音樂檔
梅問題-xcode教學-自行開發點光明燈App

建立新專案:
Step1
開啟Xcode建立一個新專案。
梅問題-xcode教學-自行開發點光明燈App
Step2
選擇View-based應用程式模版。
梅問題-xcode教學-自行開發點光明燈App
Step3
將專案命名為touchBrightLamp,並儲存起來。
梅問題-xcode教學-自行開發點光明燈App
匯入素材:
Step4
當專案建立好後,對著專案名稱按滑鼠右鍵,選擇Add / New Group選項。
梅問題-xcode教學-自行開發點光明燈App
Step5
建立好新群組後,將素材檔案直接拖拉到新群組中。
梅問題-xcode教學-自行開發點光明燈App
Step6
放滑鼠後,接著把Copy items into...選項勾選起來,再按Add鈕把檔案給匯入。
梅問題-xcode教學-自行開發點光明燈App
Step7
匯入後,點選.plist檔,將Icon file處輸入icon.png
梅問題-xcode教學-自行開發點光明燈App
屬性宣告:
Step8
點選touchBrightLampViewController.h檔,分別宣告二個屬性,與合成方法。
梅問題-xcode教學-自行開發點光明燈App
版面配置與連接:
Step9
設定好後,雙響touchBrightLampViewController.xib檔。
梅問題-xcode教學-自行開發點光明燈App
Step10
進入InterfaceBuilder後,先從Libray中將ImageView元件,拖拉到View的視窗中。
梅問題-xcode教學-自行開發點光明燈App
Step11
ImageView元件,並將Image下拉選單中,選擇fire_off.png
梅問題-xcode教學-自行開發點光明燈App
Step12
接著按住Alt鍵,拖拉ImageView元件,將元件再複製一份出來,再把Image選為fire_on.png
梅問題-xcode教學-自行開發點光明燈App
Step13
好了之後,開啟連結面板,將剛在.h宣告的屬性名稱,與ImageView的元件綁定在一起。
梅問題-xcode教學-自行開發點光明燈App
建立touches觸碰事件:
Step14
回到touchBrightLampViewController.m檔,先在上方輸入@synthesize,將剛所建立元件的實體名稱,給建立起來。
梅問題-xcode教學-自行開發點光明燈App
Step15
有借有還,在dealloc中,把剛所建立的實體給釋放掉。
梅問題-xcode教學-自行開發點光明燈App
Step16
回到上方,在touchesBegan中,是放置手指按下時,做什麼事情,而touchesEnded是放開放時,做什麼事情,這邊梅干給它二個動作,一個是當手指按下就+1,並判斷目前的觸碰的次數,當為一次時,就把燈亮圖片開啟,若大於二次以上,就把值設成0,並把亮燈圖片給關閉。
梅問題-xcode教學-自行開發點光明燈App
模擬器測試:
Step17
完成後,再按上方的Build鈕,進行測試,這時就會看到,一隻超大的iPhone,並隨便對著螢幕點點看。
梅問題-xcode教學-自行開發點光明燈App
Step18
哈~點一下就亮,再點一下就暗~。
梅問題-xcode教學-自行開發點光明燈App
加入音樂Framework:
Step19
這時對著Frameworks資料夾,按滑鼠右鍵,選擇Add / Existing Frameworks
梅問題-xcode教學-自行開發點光明燈App
Step20
點一下AVFoundation.framework,再按Add加入。
梅問題-xcode教學-自行開發點光明燈App
Step21
完成後,再把剛加入的檔案,拖到Frameworks資料夾中,比較方便管理。
梅問題-xcode教學-自行開發點光明燈App
Step22
回到.h檔,在上方加入AVAudioPlayer *audioPlayer;
梅問題-xcode教學-自行開發點光明燈App
Step23
再回到.m檔,在viewDidLoad處,輸入音樂檔名,再把音樂給實體化建立起來。

發佈至實機測試:
Step24
接著再回到觸碰的地方,分別將按下時就播放音樂,當再按一次就關閉音樂,最後記得再到dealloc,加入[audioPlayer release];將它釋放掉。
梅問題-xcode教學-自行開發點光明燈App
Step25
由於模擬器,無法進行此部分的測試,因此這時把iPhone與電腦連接,再將左上角設為Device,再按Build and Run鈕。
梅問題-xcode教學-自行開發點光明燈App
Step26
這時就會將App,發佈至實機上。
梅問題-xcode教學-自行開發點光明燈App
Step27
完成後,這時在實機上,就會看到剛所同步的應用程式,這時點下就可開啟應用程式,點下應用程式就可進入,這時記得開啟啦叭,再隨便對著螢幕點一下。
梅問題-xcode教學-自行開發點光明燈App
Step28
當燈亮起時,背景就會播放最hido的台灣濱崎步-彩樺姐的保佑。
梅問題-xcode教學-自行開發點光明燈App
  前天之所以會到Youtube,把影片轉成mp3音樂檔,就是為了此範例,而基於版權問題,在範例下載的部分,梅干已將音樂給刪除,如需要的朋友們,請自行建立所需的音樂檔,而這算是先前電火球的進化版,點燈再搭配背景音樂,讓梅干做完整個人都光明了起來,也趕快製作一個,讓自已也光明一下吧~
[範例下載]
UAG軍規iPhone防摔殼