iOS Developer新手筆記(一):初探Xcode 8

Xcode的基本操作概念,透過小短片說明。


開發環境

在接觸iOS App開發之前,我最好奇的是畫面是怎麼做出來的?是像網頁設計一行一行用程式碼刻嗎?是否要定義每個邊邊角角、然後仔細地排列素材讓他們不會被擠到跑版,接著儲存後重新整理瀏覽器看畫面呢?

很快的,這個問題得到了解答:Xcode是iOS App的開發環境,關於使用者介面和程式碼是可以分開處理的。

在撰寫任何一行程式碼前,我們就能在Storyboard內建構畫面,以及拉出頁面與頁面間的連接關係,用起來很像簡報軟體,容易上手。

當然,如果介面是中文的會更加親切…(汗)。

為了節省大家時間,接下來我會錄製許多的小短片,分享一些開發概念。


如何顯示圖片

打開Xcode選擇projectSingle View Application後,把圖片拖曳到Xcode左方導覽列,讓專案可以使用這個素材:


接著從右下方的元素,選擇放置圖片的Image View,放到畫面中拉出合適的大小:


再到右邊工具列選擇剛剛的圖片,調整呈現模式即可:

做到這個步驟,我很偷懶的想說能不能透過滑鼠點擊,完成圖片裁剪、左右鏡射、上下翻轉等繪圖軟體功能?

答案是:沒有辦法ˊ_ˋ。


替圖片加上文字

Storyboard的使用,大致就是從右下角拖各種元素放到畫面上,再從右邊的工具列調整相關的參數。

這次我們加上Label標籤,並改變文字顏色和大小:

有沒有很像操作簡報軟體的既視感?

所見即所得,實在開心!


與程式碼的互動

現在把畫面清空,拉Button元素到中間,更改名字為召喚熊熊,點右上角的兩個重疊圈圈的圖案,可以叫出左邊是Storyboard,右邊是ViewController的互動介面,要替他們正式搭起橋樑啦!

我們把召喚熊熊按住control後,直接拖到右邊的程式碼區,選擇動作為Action並命名,相關的程式碼便會自動建立。

而後在兩個大括號間輸入想要執行的動作,來print表情圖案吧。


使用模擬器

Xcode的左上角,有各種尺寸的iPhone模擬器可選擇,馬上來執行看看:


在模擬器點擊按鈕後,在下面的控制台順利印出( ̄(エ) ̄) 找我有事嗎?

至此,StoryboardButton元素,和剛剛在程式碼輸入的print內容,成功結合。


切換畫面的Segue

有了建立畫面、連結程式碼的概念之後,我們繼續來看看如何換頁,以便跨出單一頁面的小框框。

拉出一個新的ViewController,放上與貓咪擊掌的照片,按住control拖曳左邊的按鈕到新畫面選Show,中間會自動出現一條線建立起連結:


執行模擬器,點擊按鈕就可以換到新畫面:

預設為由下而上的轉場特效。


因為目前的新畫面只有表皮而已,記得新增ViewController並綁定,讓我們可以控制畫面:

ViewController就是剛剛示範的,從左邊Storyboard拖曳到的右邊程式碼區。


其他

有時候從Storyboard拉元素到程式區,會忘記下拉選單點Action,而建立成預設的Outlet;直接刪除程式碼、重拉,並不能解決問題,要記得對元素點右鍵觀看錯誤提示,兩邊都清理乾淨才可以。

收放左方導航列的快速鍵是cmd+0,右方的則是cmd+option+0,下方控制台為cmd+shift+y

想要瞭解更多,可以前往網友分享寫給Storyboard/Xib新手的總結,而內文中的VC,指的是ViewController

希望這些整理能讓讀者對App開發有多一些體會,就算工作用不到也無妨,光是知道些新東西也很有趣啊!

更何況當我們能講出一個東西的名字,就已經在認識的路上了。

Pala

曾任電商公司Research Analyst,現朝iOS Developer自學轉職中。紀錄過去兩年下班自學Python網頁設計Google Analytics分享;也推薦從架站、撰文到運營,首年12萬瀏覽的部落格心得;新文章是iOS 11新手入門課程