想學習Xcode源于一次iOS推送功能的測試，證書、測試設備、專業(yè)測試人員、測試環(huán)境樣樣都缺，與開發(fā)異地溝通異常艱難，雖然最后還是做好了，但是耗費了巨大的體力！為了以后能與開發(fā)愉快的交流，省去一些科普的時間，決心去對Xcode探個究竟。
本文寫給想了解開發(fā)的產品經理以及想了解開發(fā)的設計師看（為了開發(fā)簡直費盡心力～），先從可視化的頁面入手，漸漸的了解實現(xiàn)原理，減少與開發(fā)的溝通成本和被科普時間，文章適合一點不懂代碼的人看，如果你懂一點，請速速點叉??。
創(chuàng)建項目
? ?新建項目
在App store下載Xcode，安裝好之后打開，會出現(xiàn)圖1.1的界面，選擇創(chuàng)建一個新的項目。第二步選擇菜單樣式，iOS有標簽欄、樹形結構、平鋪頁面等多種結構，我們先選擇最簡單的一種，如圖1.2，然后點擊下一步。
? ?命名項目
下一步就是給項目命名啦，快給你的第一個項目起個炫酷的名字，如圖1.3，下面的名字和標識可以先隨便填個，然后選擇下一步。會有選擇項目存放地彈框出來，選擇好存放的文件夾之后，就可以點擊創(chuàng)建啦～
如果出現(xiàn)這個頁面說明創(chuàng)建成功啦～～～～撒花個
熟悉 Xcode
是不是打開界面就覺得信息量太大，通過下圖分區(qū)，我們來了解下每個區(qū)域都是干什么的，最左邊可以看作是個資源庫目錄，里面有代碼有圖片有界面什么都有。第二個可以看成界面目錄，第三個就是具體界面，最右邊則是部件庫和各項內容的設置處。而頂部是最為一個全局設置的菜單欄。
準備素材
素材由一張icon（120*120）、啟動圖（320*568）和首頁（320*568）組成。主要熟悉Xcode如何用素材進行演示。素材是使用sketch完成，想學習的同學可以通過另一篇sketch新手啟蒙學習 。?
編輯項目
? ?設置界面－將界面設置成熟悉的手機界面
在創(chuàng)建好的界面中選擇最左邊的菜單，選中Main.storyboaard（圖3.1標記2的地方），接著展開圖3.1標記3的菜單，選中View Controller, 接著旁邊就是今天要用的界面啦。界面是不是跟手機界面差異挺大的，不像是移動端界面？
不著急，先將圖3.1中標記1的地方選擇5s（可以選別的嗒，根據(jù)你自己的手機來選擇），接著將圖3.1中標記4的地方勾去掉，彈框彈出后選擇Dissable Size Classes, 界面就設置好啦～～～～～～
? 載入素材－將第二步準備好的素材導入項目
仍然選擇最左邊的菜單，選中Assets.xcassets文件夾，旁邊會出現(xiàn)AppIcon，選中后就有上傳icon的地方，將素材中的logo拖入對應位置（不同設備有不同尺寸）。
icon上傳好了，現(xiàn)在需要上傳首頁和啟動頁的素材， 但是好像沒有可以上傳的地方～在圖3.5標識1的空白處右擊，會出現(xiàn)一長串列表，選擇New Image Set。會發(fā)現(xiàn)appicon下面多了一個，我們雙擊它給它命名為啟動頁，重復上文的步驟將啟動頁的素材拖入相應的框中。重復這個步驟添加首頁素材。然后所有素材就添加好啦～～～～～是不是感覺很厲害的樣子～～23333
? ?使用素材－距離第一個App的最后一步
界面設置好了，素材也上傳好了，感覺就差一個開發(fā)了！事實上不用寫代碼的～讓我們回到Main.storyboaard的界面。剛剛導入的素材該怎么添加到項目中成為app的頁面呢？
將圖3.6標記1的地方的圖片控件拖入默認的面板，然后再圖3.6標記2的地方下拉選擇剛剛導入素材的地方命名“啟動頁”的素材，就會發(fā)現(xiàn)圖3.6標記3的地方有剛剛上傳的“啟動頁”，只是尺寸略不對，直接拉動圖片的邊框到直至滿整個界面。
突然發(fā)現(xiàn)啟動頁做完了，但是首頁圖片要往哪里添呢？現(xiàn)在我們新建一個界面，選擇圖3.7最右邊控件列表中的第一個控件View Controller，將它拖入面板中，重復上一步驟將首頁的圖片拖入其中。 ??
運行App
此時我們在電腦上運行下我們剛完成的app吧，點擊左上角的播放按鈕。是不是很激動，竟然運行起來了，但是能看到啟動頁，卻怎么也到不了首頁～～～？
最初的交互
現(xiàn)在我們只需要讓啟動頁能轉至首頁，用一個控件就能簡單的實現(xiàn)效果。在列表中選擇button控件，將它拖入啟動頁的面板中，置于圖片上層。修改大小至全屏，將字樣清空，做一個類似隱形的按鈕。下一步至關重要，操作為鼠標右擊button控件并長按拖動與首頁面板連接，立刻會有一個黑色彈框跳出（如圖4.2），我們選擇modal，就大功告成了?。?！～～～～～～
我們來檢驗下，當你的頁面上出現(xiàn)圖4.3右邊的尖頭時，標示啟動頁到首頁的交互已經做好啦。左邊的尖頭則是選擇哪一個頁面為啟動頁的。可以嘗試移動看看效果。但是別玩壞了～～然后再運行試試，此時已經可以看到首頁了～～～此處應由歡呼！
手機演示
將自己的手機通過數(shù)據(jù)線與電腦連接，并將左上角的選項改為自己的設備，再次點擊運行按鈕。手機上會自動安裝這個app，在手機的設置中信任這個設備，就可以打開app 啦！！～～～
新年快樂！
