讓不懂程式設計的人愛上iPhone開發(2018秋iOS12+Swift4.2+Xcode10版)-02
“絕地打靶”小遊戲
在我們學習iPhone開發的第一站,將建立一個叫“絕地打靶”的小遊戲。當遊戲最終完成後的效果如下:

遊戲的規則很簡單,你需要拖動滑動條上的紅色靶心,讓它所在的位置儘可能接近我們設定的目標數字(每次隨機生成)。比如在上圖中的目標數字是84。因為你沒法直接看到滑動條上靶心所在位置的數字,所以就得去猜。
當你覺得差不多的時候,可以按下Hit me!按鈕,然後就會出現一個對話方塊告訴你猜的結果如何。

你猜的數字越接近目標數字,你的得分就越高。當你按下OK按鈕後就會關閉對話方塊,然後開始新一輪的遊戲。你可以一直玩下去,直到按下”重新來過“按鈕(左下角的那個),它會把累積得分重置為0。
雖然開發完這款小遊戲沒法讓你成為國民老公,不過即便是億萬富豪也得有個啟動資金吧。
幫你整理思路的待完成事務清單
練習:現在你已經大概知道遊戲大概的最終視覺效果了,也瞭解了遊戲的基本規則。如果感興趣的話,可以嘗試寫下來為了製作這款遊戲要做哪些事情。當然,很可能此時你腦中一片空白,但Don’t panic。不要恐慌,從零開始沒有你想象的那麼難。
我還是給你點提示吧:“為了製作這款遊戲,我們需要把Hit Me!按鈕放到螢幕中,然後當玩家觸碰它的時候彈出對話方塊。。。”諸如此類的事情,你可以按這個思路去想,無論想到什麼,想寫下來。哪怕你現在一行程式碼都不會寫也不要緊。在做任何事情之前,我們首先需要了解的是需要做什麼,具體如何去實現反而不是那麼重要。
一旦你明白自己該做哪些事情,你就可以真正著手開始去思考如何去實現,不管是請求高手指點,在網上求助,或是自己去查詢各種文件來學習。再次強調一點,知道該做什麼是最最重要的。很多初學者(包括一些老鳥)在開始寫程式碼之前很少思考,也不會在紙上寫寫畫畫,他們甚至不知道自己最終要實現的是個什麼樣的東西,也難怪很容易就會在中間受阻了。
每當我開始做一個產品的時候,無論是應用還是遊戲,首先都會把這個產品要實現的功能詳細列出來。這就是我的開發用事務清單(to-do list)。有了這樣的清單,可以把一個產品的設計和功能分解為很多小的模組,從而在具體實現的時候降低了複雜度。
很多時候我們靈光乍現有了非常NB的一個創意,但一旦坐在電腦前開始寫程式碼的時候,就會覺得這個事太難了,簡直無法實現。比如製作一款像MineCraft一樣NB的獨立遊戲,想想就令人望而生畏,要做的事情太多了,究竟該從哪裡著手開始呢?還是那句話,列一個清單出來,把你要做的事情分解為具體而小的步驟。如果某個步驟讓你覺得非常複雜,就繼續分解下去,直到你認為馬上可以操作為止。然後就從那裡去開始執行吧。
毫無疑問,這個練習對於新手來說有點困難,或許依然是無從下手吧。
但隨著你對軟體開發的理解逐漸深入,你會發現如何將一個完整的產品設計分解為具體可執行的模組或元件。
說了這麼多,或許你還是找不著北吧。這裡我就勉為其難整理一下開發這款遊戲要做的事務清單吧:
- 在螢幕中放一個按鈕,在按鈕上放一個標籤”打我啊笨蛋!”,或者其它你喜歡的
2.當玩家觸碰Hit Me這個按鈕的時候,需要讓應用彈出一個對話方塊,告訴玩家他猜的準不準。當然在此之前我們需要計算玩家的得分 ,並把得分放到對話方塊的彈出資訊中。
3.在螢幕上放置一些文字標籤,比如”Score:”,“Round:”。有些文字標籤的內容會隨著遊戲的進展發生變化,比如玩家的得分,每輪遊戲結束後都會增加。
4.在螢幕上放一個滑動條,把它的數值範圍設定在1到100之間。
5.當玩家觸碰Hit Me按鈕後讀取滑動條上的數值。
6.在每輪遊戲開始的時候生成一個隨機數,並把它顯示在螢幕中。這個隨機數就是目標數值。
7.比較滑動條上的數值和所生成的隨機數,並基於它們之間的差異值來計算玩家的得分。最後把這個分數放到對話方塊的彈出資訊中。
8.在螢幕上放置一個“重新來過”的按鈕。使用它來重置玩家得分和遊戲輪數。
9.把應用設定為橫向顯示
10.美化介面:smile:
當然,我可能漏掉了某些事情,不過有了這樣的一個清單,起碼你知道該幹嗎了。哪怕是如此簡單的一款遊戲,都需要我們去做這麼多的事情。當然,具體如何來實現先不要著急,無論這款遊戲是PC版,Mac版,iOS版,還是Android版,我們都需要做以上的這些事情,只是具體的實現方法不同而已。
所以,在具體開發產品之前最重要的是明確自己要做哪些事情。
再次重申一下本系列教程的目的,與其說是教你如何做iPhone開發,不如說讓你如何具備程式猿的思維方式,從而可以和他們更好的溝通。
給自己一個前進的理由-完成只有一個按鈕的應用
我們嘮嘮叨叨了這麼長時間,卻沒有實現任何一個實際的目標,這樣可不行。接下來要給大家一個小小的獎勵,用最簡單的操作來實現只有一個按鈕的應用。也就是to-do list中的第一條。當你觸碰按鈕的時候,會彈出一個提示資訊。就這麼簡單,但卻是整個遊戲的基礎。
這個小應用的實際執行效果類似下面:

好了,終於到了真正寫程式碼的時候了!想來你已經有了macOS Mojave作業系統,並且已經下載安裝了最新版本的Xcode(目前是10.0),這真是極好的。如果你用的是之前的版本,請務必升級到最新版本。如果沒有這兩樣,下面的看也白看。
重要的事情強調三遍:一定要從官方下載!一定要從官方下載!一定要從官方下載!
在iOS12和之前的版本間存在著某些巨大的差異,可能有些公司還在用老的Xcode和iOS版本,但作為新手來說,就沒必要了,一切從新開始。
此外,Swift是一門全新的語言,它自身的進化非常快速且巨大,因此如果你的Xcode版本比較陳舊,那麼哥可不敢保證這教程裡面的程式碼都能順順溜溜的跑下去~同樣的 ,為了保險起見,對於新手而言,哥不建議你使用beta版的開發工具,只採用從Mac App Store裡面下載的正式版本。
還等什麼呢,別害怕,只要你還能看能寫,下面的事情就能搞定:
Step1: 開啟Xcode
考慮到你可能第一次接觸iOS開發,連Xcode都不知道怎麼開啟。那麼多廢話兩句。你可以開啟Finder(Mac系統的’我的電腦’),然後進入Applications這個目錄,然後找到Xcode,就可以打開了。
如果你是Mac老使用者,最簡單的方法就是點Mac最右上角的Spotlight(有點象放大鏡的一個小圖示),然後輸入Xcode,回車,就可以了。

當然,如果你直接把Xcode的圖示放在下方的Dock裡面是最好。方法很簡單,右鍵單擊Dock上Xcode的圖示,然後選擇Options-Keep in Dock,這樣Xcode以後就直接顯示在Dock中了。

開啟Xcode後,首先看到的是歡迎介面,喜迎你的到來。

Step2 建立新專案
這時候點選左側的Create a new Xcode project,會開啟一個輔助介面,幫你選擇所需要的模板。

因為我們這個系列的教程是iPhone開發,所以要手動切換到iOS,然後在Application下面選擇Single View App。

如果你對新鮮事物充滿好奇心,可能會點選左邊的不同圖示和文字,你會看到不同的模板。
所謂的模板是Xcode為了幫開發者節省時間而預先配置好的一些專案。每個從模板中建立的新專案都預設包含了開發應用所需要的很多資原始檔。模板的好處就是讓你省了很多敲程式碼的工作。
如果你用的不是Xcode10.1,或許這裡所顯示的模板會有所差異,但至少就“絕地打靶”這個遊戲來說,所需要的模板在這裡是有的。
那麼問題來了,為毛我們這裡要選擇Single View App。其實很簡單,我們現在只需要一個最基本的模板,也就是所謂的單介面應用模板,至於其它複雜的東西一律都用不到。對於其它各種型別的模板,隨著學習和實際開發工作的進行,你會逐漸接觸到的,這裡就不浪費時間了。
Step3: 輸入專案資訊
點選Next,你會看到一個新的提示介面,裡面需要輸入和選擇一些資訊,你可以照著下面的來:

注意在Language這裡要選擇Swift!!!這是因為我們當前系列的教程將採用Swift程式語言。
1.Product Name:
這裡填BullsEye,當然你也可以取個其它的名字,不過儘量避免在專案名稱中使用空格或者特殊符號。
2.Team:
如果你已經加入了蘋果開發者計劃,那麼這裡就會顯示你的團隊名稱。這裡我們先暫時不進行相關設定,在隨後的教程中會對此進行處理。
3.Organization Name:
你的夢想團隊名稱,或者你自己的名字。這裡我填的是eseedo,你可以隨便填上其它的。
4.Organization Identifier:
這裡是com.icode,這個識別符號是我用來識別自己的APP,通常是反轉域名,只要符合com.xxxx.xxxx這種命名習慣就行。。
不要過分擔心這裡填的資訊對不對,因為這些都是可以修改的。
5.Language:
這裡填Swift,不過如果你想嘗試Objective-C,也可以自己去體驗。
6.Use Core Data:
這裡不需要勾選,Core Data是iOS的一個類庫,目前還不需要涉及到。
7.Include Unit Tests:
不需要勾選,目前我們還不會涉及到單元測試
8.Include UI Tests:
不需要勾選,目前我們暫時還不涉及到。
Step4: 選擇專案儲存地點
資訊完成後點選Next,此時Xcode會要求你提供儲存專案的位置。
選擇一個位置儲存專案檔案,具體在哪裡取決於你的個人喜好。

選擇完後,Xcode會使用Product Name為專案自動建立一個新的資料夾。
在底部有一個提示框詢問你’Create Git repository on My Mac’。現在你先不用管它,它是用來進行Git版本控制的。 關於Git版本控制系統,我們在後面會慢慢接觸,它可以幫助開發者更好的管理專案原始碼。
Step5: 一切準備就緒,點選Create完成建立。
點選Create,Xcode會基於Single View Application這個模板建立一個名為BullsEye的新專案。完成後的螢幕顯示如下:

如果你的Xcode版本不同,那麼這裡的一些小細節會有所差異。不過Don’t panic~這些小小的差異並不影響到我們的學習。
Step6.嘗試執行專案
此時點選最左上角的Run按鈕(紅綠燈右邊的三角)

注意:如果這是你首次使用Xcode,那麼會提示你enable developer mode。只需要點選Enable,然後輸入密碼讓Xcode做相應改變就好了~

Xcode會開始努力的工作,然後在iOS Simulator模擬器上執行這個全新的應用。當然,首次啟動的時候會看到下面的畫面。

當然,實在沒什麼看頭,不過是一個灰白的介面而已,而且你也沒法和它互動,但不管怎樣,這是我們一個真正的里程碑。恭喜你~
如果Xcode提示Build Failed或者Xcode cannot run using the selected device,那麼要檢查下左上角是否選中了某個具體的iOS模擬器,而不是iOS Device:

在Xcode 10.1中,預設的iOS模擬器是iPhone XR,可見Tim Cook對這個機型的期待算是最高的~
Step8 停止執行專案
在Run按鈕的旁邊是Stop,當你看煩了的時候就可以點它停止應用。
你可能會嘗試使用在模擬器的介面選擇選單欄的Hardware-Home來退出應用,但這樣做其實不能真正的退出應用。它只是從Simulator的螢幕上消失了,但應用仍然懸停在Simulator的記憶體中,就像在真機上一樣。
在你按下stop之前,Xcode中會顯示”Running BullsEye on iPhone XR“。

當然,你也可以不停止執行應用,直接返回Xcode來修改原始碼。但直到你再次按下Run按鈕前這些修改都不會實際生效。
問:當我們按下Run按鈕時發生了什麼?
首先,Xcode會將專案的原始碼從Swift語言編譯(通俗點可以叫翻譯)成iPhone(或模擬器)可以理解的機器語言。雖然說開發iPhone應用的程式語言是Swift或是Objective-C,但iPhone自己可理解不了這種語言。因此需要一個翻譯的過程。
編譯器是Xcode的一部分,它可以幫助你將Swift的原始碼轉換成可執行的二進位制程式碼。同時它還會整理收集所有組成應用的其它資源-資原始檔,圖片,storyboard檔案等等,並把這些東西打包到一個叫“應用程式束(application bundle)”的東西里面。
以上的整個過程又稱之為building(編譯)專案。如果在這個過程中有任何錯誤(比如拼寫錯誤),build會失敗。如果一切正常,application bundle(應用程式束)會被拷貝到模擬器或裝置中,同時會執行該應用。所有的這一切都是由強大的Run按鈕來搞定的。
如果你看不懂上面這段話,也不要著急,對於目前來說這並不重要。甚至對很多程式設計老手來說這些東西也不是那麼的重要。
在繼續我們的iOS開發探索之旅之前,先多廢話幾句iOS的進化史。
從iOS1到現在的iOS12,iOS系統版本經過了多次更新。和android不同,通常新的iOS系統版本覆蓋率要佔絕大多數。
iPhone OS 1.0(2007年,這個年代還沒有iOS哦,iOS是後來改的名字)
iPhone OS 2.0(2008年)
iPhone OS 3.0(2009年)
iOS4.0(2010年,首次將iPhone OS更名為iOS)
iOS4伴隨iPhone4一起出現,打造了歷史上最受人歡迎的一代蘋果手機,同時也是喬幫主親自發布的最後一款手機。
iOS5(2011年)
iOS5的釋出伴隨著iPhone4S,而就在這一年喬幫主去世了,在iPhone4S釋出的第二天早上。。。
iOS6(2012年)
此時幫主已經往生西方極樂世界,廚子Cook接過了蘋果的海盜旗,然後從良成了海軍。就在這一年,iOS之父Scott Forstall被Cook驅逐出了蘋果。
從Cook時代開始,蘋果對中國市場的重視與日俱增。
iOS7(2013)
2013年WWDC大會上,Cook宣佈iOS7的問世,由喬幫主在蘋果的靈魂伴侶Jony爵士一手打造。iOS7的設計風格變化堪稱革命,徹底拋棄了喬幫主和Scott鍾愛的擬物化設計風格,轉為微軟力導的扁平化設計,讓很多開發者一時難以接受。
iOS8(2014)
這是一次完全屬於Cook的釋出會。三年的轉型,外界評價紛紜,不管怎樣,蘋果已經徹底Cook化了。
iOS9(2015)
從2014年10月30日Tim Cook出櫃以來,蘋果的產品定位發生了徹底的變更,那就是開始跟時尚結合。Apple Watch是表現最明顯的一款產品,而對於iOS的各種裝置來說,用Rosegold玫瑰金來吸引中國的萬千女性也只有懂時尚的人才想得到吧~
iOS10(2016)
對於iOS10來說,最大的亮點莫過於開放了SiriKit,以及對電話功能、地圖功能和iMessage功能更強大的支援。
iOS11(2017)
不用多說,iOS11最大的特色就是增加了ARKit和Core ML,從而直接支援增強現實和人工智慧的相關特性。對很多消費者來說,目前可能還沒有感覺到ARKit和Core ML的強大威力,但個人覺得iOS11所支援的這兩大特性其實也是未來十到二十年資訊產業的根基。
iOS12(2018)
客觀來說,相比iOS11的銳意創新,iOS12可以說主要是填坑,也就是把一些體驗不太好的地方進行優化,但並沒有增加什麼值得一提的新東西。當然,ARKit2.0新增的多人互動功能和諸多其它功能算是一大亮點。
再說下裝置解析度的問題吧
目前支援iOS 12的主流iOS裝置的解析度如下。首先來看看2018年秋季釋出的幾款新品的解析度:
iPhone XR 1792x828
iPhone XS 2436x1125
iPhone XS Max 2688x1242
2018版11寸iPad+Pro/">iPad Pro 2388x 1668
2018版12.9寸iPad Pro 2732x2048
然後是之前的老裝置的解析度:

關於解析度的問題,我們在後面的學習過程中還會詳細講解。
好了,稍事休息之後,讓我們繼續iOS開發的學習吧。
新增按鈕
現在這個介面實在是慘不忍睹,實在是難以入目。接下來讓我們新增一個按鈕上去。
首先回到Xcode中來。在Xcode視窗的左側是所謂的導航區域(Navigator area)。頂部的小圖示決定了哪個導航器是可見的,當前的導航器是Project Navigator(專案導航),也就是說它展示了專案中的所有檔案列表。你也可以點其它圖示看看,但為了簡單起見,這裡先不解釋那麼多。
在專案導航中,檔案的組織形式和實際硬盤裡的專案結構可能有關,也可能不同。
你可以根據個人喜好隨意拖動它們的位置。關於專案中各個檔案的作用,你暫且不去管它,後面再說。
Step1 開啟storyboard(故事板)檔案
在當前的專案導航中,找到一個名為”Main.storyboard”的檔案,點選選中它。

在一瞬間,你剛剛看到的介面就會切換到Interface Builder(介面編輯器)了。在舊版本的Xcode中,Interface Builder和Xcode是分開的各自獨立的工具,但是從Xcode4開始,Interface Builder被整合到Xcode裡面去。因此這裡的所謂切換到Interface Builder,並不是說打開了新的工具,而是指切換到了一個新的開發介面。而這個開發介面的主要作用是放置我們所製作產品的互動介面中的視覺化元素。
有一些牛人和熟手拒絕使用Interface Builder,xib和storyboard之類的視覺化程式設計工具,而習慣於手寫所有的視覺控制元件。這沒什麼,但通常來說,如果是專門針對iOS開發的應用,使用視覺化程式設計工具可以大大提高開發的效率,尤其適合在程式碼層級不是那麼熟練的新手。
注意,從iOS7開始,用模板建立的專案預設採用storyboard,而非之前的xib檔案。關於storyboard和xib的區別這裡不多說,以後慢慢接觸吧。
Step2.storyboard(故事板)概覽
此時你可以點選Xcode右上角的”Hide or show utilities”按鈕,如圖所示:

還可以點選其它按鈕,通過這些按鈕可以更改Xcode的介面佈局。而這個”Hide or show utilities”按鈕可以顯示或隱藏Xcode右側的新面板。
此時介面如下:

這裡就是應用的storyboard。storyboard(故事板)裡面包含了應用中所有介面的設計,並通過箭頭顯示介面之間的跳轉關係。當然目前來說這個storyboard裡面只包含了一個單一介面。
不過這裡的裝置尺寸是iPhone8的大小。為了儘可能簡化操作,第一個應用的設計是針對iPhone SE的。後面我們會學習如何讓應用適配到其它裝置。
在Interface Builder視窗的底部點選”View as: iPhone 8”,選擇iPhone SE,也就是倒數第二小的iPhone。此時介面中的矩形會變得稍小一些。

接下來在Xcode的工具欄中,在Stop按鈕的附近選擇BullsEye > iPhone SE。

現在再點選Run按鈕跑跑看。
然而並沒有什麼卵用~ 只不過模擬器的尺寸變成了iPhone SE的而已。

Step 3在Object Library中找到按鈕控制元件
在Xcode右側面板的下方你會看到Object Library(也即物件庫),上下滾動,可以找到一個名為Button的專案。也可以直接在最下面的搜尋欄裡面輸入button來搜尋。

Step 4 點選Button,把它拖曳到工作區的白色檢視上。

這樣我們就添加了新的按鈕,而且非常簡單,只是拖曳放下而已。對於iOS應用中的所有其它使用者介面元素,都可以採取類似的方式操作。後續我們還將大量重複這樣的操作,很快你就會對此非常習慣。這就是傳說中的視覺化程式設計。
關於視覺化程式設計的幾句廢話
視覺化程式設計是隨著面向物件程式設計概念的興起而變得普及的。對於舊石器時代的程式猿來說,開發工具遠沒有今天的各種花哨SDK好用,部分程式猿甚至習慣於在文字編輯器裡面直接寫就程式碼。當然,這樣做的好處是讓這些舊石器時代開發者奠定了非常牢固的程式碼基礎。直到現在仍然有很多程式猿偏好於在非常簡單的介面中寫程式碼。但這種類似寫文章的編碼方式也有很多不足之處,首先它要求程式猿對程式語言,各種類庫,API非常的熟悉,不說可以達到左右手互博的程度,起碼寫10行程式碼不會輕易出一個錯。如若不然,放到編譯工具裡面除錯的時候會讓人頭大。隨著面嚮物件語言的興起,以及開發工具的進步,各平臺的程式碼編輯器都開始變得智慧起來,可以第一時間發現程式碼的低階語法錯誤和拼寫錯誤,大大提高了程式猿的效率,也解救了大量的經常丟三落四宅男的時間。但僅僅對程式碼級別的敏感還不足夠,人們逐漸發現很多的標準控制元件是沒有必要每次都重複去編寫的,特別是一些基本的按鈕,檢視,和使用者互動元素都可以直接重用。也因此現在基本上所有的大型程式設計工具都提供了簡單易用的視覺化程式設計環境。比如Visual Studio,Xcode,Netbeans,JBuilder等等,包括Eclipse也可以通過外掛來實現視覺化程式設計。當然,還有Adobe全系列的產品也是如此。
目前的主流遊戲開發引擎Unity3d,Unreal更是如此。
補充一點,對於非程式猿出身的產品和設計人員來說,視覺化程式設計其實也是非常有利的原型工具。很多人問iOS應用開發最好的原型工具是什麼?什麼樣的回答都有,比如Axure, Pop等等專業的原型設計工具,但大部分人都不會提到Xcode。
其實最好的iOS應用開發原型工具是Xcode這個視覺化開發工具。你只需要瞭解一點點Xcode的使用方法,甚至不需要學會一行程式碼,就可以直接做一個帶有視覺效果的單一介面應用,放在裝置上實際檢視展示效果。如果你再稍微懂一些程式設計的東西,那麼可以在很短的時間裡實現多介面的應用視覺元素。至於應用本身的各種複雜功能,在製作原型的時候可以直接無視。一個懂Xcode的iOS產品經理才能更好的跟開發人員溝通。一個懂Xcode 的UI和設計人員簡直如虎添翼,可以第一時間來精細調整介面佈局,在裝置上檢視互動效果,而不是停留在紙上談兵的階段。
Step5. 放入其它控制元件,體驗下視覺化程式設計的快感
比如標籤,滑動條,切換開關按鈕,什麼亂八七糟的都拖到檢視上吧。
這一刻你不再是一個程式猿,而是一個畫家,你要做的事情也和在Photoshop上設計介面沒有區別。
Step6. 雙擊按鈕,編輯其中的內容為“王師傅寬油大法好”之類的,隨便你

當然,有時候你可能會看到在按鈕的周圍有明顯的邊框,其實完全不用擔心。對於處女座的同學,可以手動關閉。在Xcode的選單欄中選擇Editor-Canvas-Show Bounds Rectangles即可開啟或關閉這種邊框。
完成之後,點選Xcode左上的Run按鈕。現在應用會在模擬器中執行,並顯示一個按鈕。當然,這個時候你去碰它的話它還是不會理你的!

在繼續之前,先嘮叨幾句廢話~
在學習iOS程式設計的時候,要適當的瞭解一個事實,那就是一些新的系統版本中的功能在執行舊系統版本的模擬器或裝置上不一定能跑起來。同樣,新的系統版本也會拋棄或者禁用舊系統版本的一些功能,因此在執行新系統版本的模擬器或裝置上也不一定能跑起來。
腫麼辦?首先新版本被刪除或禁用的功能蘋果都會重點說明,儘量避免使用。然後就是要在裝置上多測試。模擬器上的測試基本上都能找到此類問題。而裝置上的測試則能發現一些與硬體特徵相關的問題,比如記憶體不足,硬體特性呼叫等等。
關於自動儲存
通常來說Xcode會幫你自動儲存,但考慮到它本身的脆弱性(特別是iOS之父Scott Forstall的黯然離去),還有停電外星生物干擾貓爬上桌之類的不可抗力事件,最好還是時不時按下Command +S組合鍵。基本上我會每半分鐘不自覺就按一次Command +s,無論之前在做什麼。
原始碼編輯器
現在介面上的這個按鈕還不能和玩家產生互動,因此讓我們來實現一個彈出式對話方塊。在最終完成的遊戲版本中,對話方塊會顯示玩家的當前得分,不過這裡我們來個比較隨意的,比如只顯示一行文字“正宗的麻婆豆腐應該這麼做”
再廢話一句,第一次看這個教程的時候新手可能有一些不理解的地方,但別鑽牛角尖,先看完,對一些重要的概念我會重複展示,直到你熟悉為止。別沒學會走就想成飛豬。你要做的就是,跟著學。
Step7 新增程式碼
在Xcode左側的專案導航(也就是檔案列表)中找到ViewController.swift,滑鼠點選它。
然後剛才的Interface Builder(介面編輯器)就消失了,出現在你眼前的是世界上最恐怖的東西-程式碼。是的,這些花花綠綠的字母和數字組合就是我們這個應用的Swift原始碼。

如果你的Xcode編輯器視窗中沒有在每行程式碼前顯示行數,那麼同樣可以從選單欄中進行設定。從Xcode頂部選單欄中選擇Xcode-Preferences…-Text Editing,切換到Editing選項卡,然後在Line Numbers前面勾選上即可。
如果你不喜歡對著白屏怎麼辦?這裡有個小小的技巧,畢竟程式猿一天到晚對著電腦看程式碼很傷眼睛,所以可以自己設定自己喜歡的背景來調節。點選Xcode—>Preferences…,然後切換到Fonts&Colors,就可以選擇自己喜歡的色彩搭配了。我這裡選的是Dusk,你看著辦,我覺得Midnight也不錯~

回到我們的程式碼。
在ViewController.swift中,在最後一個}花括號前面新增以下程式碼:
@IBAction func showAlert(){ }
此時ViewController.swift中的完整程式碼如下:

你對這段Swift程式碼感覺如何?估計什麼感覺都沒有。在我告訴你答案之前,有必要介紹一下view controller(檢視控制器)的概念。
什麼是view controller(檢視控制器)
之前我們開啟過Main.storyboard檔案,然後在Xcode內建的Interface Builder裡面用拖曳的方式添加了一些控制元件。很簡單,不過是灰白背景上有一個孤零零的按鈕而已,或許你還加了點別的什麼,不過這好歹也算是使用者介面。然後剛才我們還在ViewController.swift裡面添加了人生的第一行處女程式碼。
這兩個檔案,Main.storyboard和ViewController.swift共同組成了一個view controller(檢視控制器)的設計和實現。
在開發iOS應用的過程中,我們要大量用到檢視控制器。檢視控制器,顧名思義,就是控制一個檢視的工具,或者說管理一個單一介面的工具。
讓我們來舉個例子說明吧。比如說我們有個簡單的菜譜應用。當你開啟這個應用的時候,它的主介面上會列出所有的菜譜。當你觸碰某個菜譜的時候,就會開啟一個新的介面,裡面顯示了詳細的文字介紹,做法,還有令人垂涎欲滴的美味食品照片。主介面和具體的菜譜介面分別由各自的檢視控制器來管理。

這兩個介面的作用各不相同。左邊的Recipse list是菜譜清單,其中列出了幾種不同的菜譜名稱。而右邊的Recipse Details介面則會顯示某種菜譜的具體內容。
這樣你就需要至少兩個檢視控制器,其中一個知道如何顯示清單,而另一個則需要知道如何顯示圖片和菜譜說明。
可以提前透露一點,iOS應用開發的一個原則是,應用中的所有介面都必須有自己的檢視控制器~
現在我們的這個應用只有一個介面(白色背景加無厘頭的按鈕),因此只需要一個檢視控制器。而這個檢視控制器的名稱是ViewController。Main.storyboard和ViewController.swift檔案共同實現了該檢視控制器。
簡單來說,Main.storyboard檔案包含了檢視控制器中的介面設計,而ViewController.swift則包含了檢視控制器的功能-也就是讓使用者介面工作的邏輯,使用Swift語言來編寫。
因為我們在建立專案時選擇了Single View App模板,Xcode會自動為我們建立一個檢視控制器。之後我們還將新增一個新的介面,並建立一個屬於自己的檢視控制器。
Step8 建立關聯
我們剛剛新增到ViewController.swift中的程式碼可以通知Interface Builder,當前的檢視控制器有一個’showAlert’動作,觸發該動作將顯示一個彈出警告框。現在我們需要將按鈕和動作關聯在一起。
回到Xcode,點選Main.storyboard以回到Interface Builder。
此時在Interface Builder的左側應該顯示一個Outline pane(輪廓面板),其中將列出storyboard中的所有視覺元素。如果看不到該面板,可以點選Interface Builder畫布左下角的小切換按鈕。

點選剛才的按鈕’王師傅寬油大法好’(或者其它內容比如“吃貨老外至今還在成都”),按住鍵盤上的Ctrl鍵,從按鈕到View Controller上拖出一條線,你可以看到一個藍色的線條從按鈕一直到View Controller。(如果不按Ctrl鍵,也可以點選右鍵拖動的方式,但是記住不要在中途鬆開滑鼠)
當線條拖到View Controller時,鬆開滑鼠鍵,然後會顯示一個小的彈出選單。
這裡包含了兩個部分,一個是’Action Segue’,另一個是“Sent Events’,每個部分下面又有幾個選項。這裡我們關心的是Sent Events下面的showAlert選項。該選項也是我們在ViewController.swift原始碼中所新增的動作名稱。
點選showAlert選中它。此時Interface Builder將會在介面的按鈕和程式碼@IBAction fuc showAlert()之間建立關聯。
具體的操作參考下圖:

通過剛才簡單的拖曳操作,這樣做就可以讓Interface Builder幫你在按鈕和showAlert動作之間建立一種關聯。從現在開始,這樣你觸碰這個按鈕,就會執行showAlert動作。這就是你如何讓按鈕和其它控制元件真正產生互動的方式:在Interface Builder中通過拖曳和某個控制元件建立一個關聯。
我們現在可以檢視已經建立的這個關聯,選中該按鈕,在Xcode右側Utilities面板的Connections Inspector選項卡下可以看到。
點選小箭頭形狀的按鈕就可以切換到Connections Inspector:
在左側的Sent Events部分,Touch Up Inside事件和showAlert動作關聯了起來。如果你要刪除這種關聯,可以點選小x圖示(現在別這麼做!)。

此時我們也可以在Swift檔案中檢視這種關聯。
在Xcode中選擇ViewController.swift。
注意到在@IBAction func showAlert() {這行程式碼的左邊有一個實心圓。
點選這個實心圓就可以看到程式碼所關聯的動作。

讓按鈕知道自己做什麼
現在我們已經有了一個帶按鈕的介面,同時把它和showAlert這個動作關聯起來。從而當玩家觸碰按鈕的時候會執行這個動作。不過我們還沒有告訴應用,這個動作具體的內容是什麼。
在Xcode中選擇ViewController.swift。
在@IBAction func showAlert()的花括號之間新增程式碼如下:
@IBAction func showAlert(){ let alert = UIAlertController(title:"把油桶踢過來", message:”看王師傅教你做正宗的四川麻婆豆腐", preferredStyle: .alert) let action = UIAlertAction(title:"2019年要跟著學幾個拿手菜",style: .default,handler: nil) alert.addAction(action) present(alert, animated: true, completion: nil) }

在{}的程式碼裡面,建立了一個提示對話方塊,標題是“把油桶踢過來”,訊息體是“看王師傅教你做正宗的四川麻婆豆腐”,然後一個簡單的按鈕,上寫“2019年要跟著學幾個拿手菜”。
那麼標題和訊息體的區別何在?兩個都會顯示文字,不過標題通常字型大點,而且是粗體顯示。
現在點選Xcode左上側的Run按鈕。
如果你沒打錯字的話,應用會在模擬器中執行修改後的應用。而且當你觸碰按鈕的時候會彈出一個提示對話方塊。
注意:以上程式碼請千萬不要直接拷貝貼上,一方面你需要自己來手動敲入所有的程式碼來熟悉所學。另一方面,直接拷貝貼上的程式碼可能會因為全形和半形字元的原因導致根本就無法順利執行。

恭喜你,你的第一個iOS應用大功告成了,祝你早日賣腎成功。
或許這其中有很多東西你還是不懂,沒關係,不管怎樣,我們搞定了。
到目前為止,我們已經完成了清單上的前兩項:在螢幕上放一個按鈕,當玩家觸碰按鈕的時候顯示一個提示對話方塊。好了,你現在可以泡上一壺茶好好休息一下了。別一下子吃太飽,慢慢來。
什麼?出問題了?沒搞定?
如果你沒能成功的看到上面的對話方塊,反而看到紅色的Build Failed提示,那麼確保你沒敲錯程式碼。即便是最小的錯誤也可能讓Xcode困惑不已。它所謂的智慧感應畢竟還是有限的。在程式猿的人生中,看到紅色的錯誤提示,然後如瘋狗般的查詢錯誤的來源消磨了有為青年的大部分美好青春。
作為產品經理或設計人員的你,應該可以體會到程式猿的痛苦了吧?
在編寫程式碼的過程中,最常見的錯誤就是大小寫問題。Swift程式語言是對大小寫敏感的,也就是說AlertView和alertView對它來說是完全不同的東西。Xcode看到此類事物會給你一個<something>undeclared或是’Use of unresolved identifier’的紅色提示。於是你崩潰了。。。據bug星球長老會的小道訊息,80%以上的程式碼錯誤來自於大小寫和誤拼。。。
當Xcode告訴你”Parse Issue”或”Expected <something>”的時候,很可能你忘了在每行程式碼的最後加上一個花括號或是)。
在編碼的過程中,諸如此類的小細節常常讓人困擾不已。大小寫,誤拼,標點符號構成了程式碼錯誤的主力軍。有些程式碼錯誤在除錯的時候就會被發現,雖然讓程式猿很頭大,但至少還不至於禍害眾生。但有些程式碼錯誤是在產品交付之後才被發現,代價就不用說了。
幸運的是,一般如大小寫錯誤,誤拼,標點符號之類的錯誤很容易在編譯的過程中被發現。
當Xcode發現某個錯誤的時候,會將左側的專案導航面板切換成Issue Navigator麻煩導航欄(你可以通過上面的小圖示切換回去)。這裡列出了Xcode所發現的所有錯誤和警告資訊。
比如下圖中我漏掉了一個逗號。
點選左側的錯誤資訊,Xcode會帶你到相關的程式碼行,甚至還會提示你如何進行修改:

別指望每次出現錯誤的時候你都能享受到這種五星級服務,實際上大部分的程式碼錯誤都需要你手動尋找,或是使用一些技巧讓Xcode幫你來定位。
關於錯誤和提示
Xcode使用紅色來標示error(錯誤),用黃色來標示warning(警告)。錯誤是致命的(死神恩賜),如果出現編譯錯誤,那麼應用是無法執行的。警告則是提供了參考資訊。Xcode的意思是,“你或許不想這麼做,不過如果你實在想要這麼做,那就做吧,只是後果自負哦。”
個人認為對待warning的態度應該和error一樣嚴肅。儘量做到讓自己的應用實現0 warning,0 error。即便不能,也要做好備註,提醒自己或別人。warning所在的地方以及可能導致的後果。
好了,如果沒有找到錯誤,成功的看到提示,你今天的學習就可以到此結束了。
休息,休息一下吧。
本人聯絡方式:
微信:iseedo
郵件: ofollow,noindex" target="_blank">[email protected]
QQ討論群: 375143733
如有疑問,請先發送郵件到我的郵箱: [email protected]
我會在收到郵件後儘早答覆。
也可以加微信,但可能不是很合適的答疑途徑。
另外,為了節省大家的寶貴時間,提高溝通效率,請在提問的時候儘量附上 專案原始碼以及以下資訊 :
1.開發環境(系統版本,Xcode和iOS版本)
2.問題描述及重現(想實現什麼效果,結果是怎樣的,具體涉及到什麼操作)
3.為解決問題所做的努力(做了哪些嘗試,分別是怎樣的結果)