搞定一像素不求人！為設計師量身打造的XCODE教程（2）

編者按：前兩天@JingDesign同學剛分享了Xcode自學指南的第一小節，今天繼續分享第二小節，幫同學們進一步了解Xcode，并利用它設計一個App界面，想跟工程師做朋友？現在就得開動咯！

@JingDesign?：上一節中，我們對Xcode有了初步的印象，相信很多的設計師朋友都可以順利的在自己的Mac上運行自己的第一個app程序了，可喜可賀！靜電說過，蘋果的Xcode提供了非常便捷的圖形化設計工具，可以讓我們幾乎不用編寫代碼，就可以完成一個簡單的app設計。那么本節中，靜電帶大家進一步了解Xcode，讓我們先從Xcode的文件結構入手，自己設計一個app界面，并運行它。

上一篇好文地址：《搞定一像素不求人！為設計師量身打造的XCODE教程（1）》

靜電的Sketch教程合集：

1. 《SKETCH設計教室！從零開始學APP設計利器SKETCH（一）》
2. 《SKETCH設計教室！從零開始學APP設計利器SKETCH（二）》
3. 《SKETCH設計教室！帶你了解超好用的SKETCH插件》
4. 《想要一稿過不加班？SKETCH絕配神器MIRROR搶先體驗》

熟悉Xcode中的各項模板

還記得上一章中我們新建的Xcode工程嗎？現在我們打開它！ 神馬？你把他刪了？好吧，我們再來復習一遍，如何開始Xcode之旅。打開Xcode之后，我們選擇左上角的“file”菜單， 接下來新建一個工程，也就是Project（快捷鍵是shift+command+n）。開發一款軟件，我們就稱之為一個工程，這樣理解就可以了。

Xcode為我們提供了多種模板，如下圖所示，application中一共有五種常用的開發模板，我們一個一個來看。

1. Master-detail Application：一種常見的列表式布局（類似于iOS中的備忘錄結構）

2. Page-Based Application：基于頁面的應用（運行后我們會發現有紙質書的翻頁效果）

3. Single View Application：只有一個頁面的獨立應用（除了啟動界面，打開后是大白板）

4. Tabbed Application：我們最常見的，底部有tab導航的模板

5. Game：游戲 （打開后我們會看到一架灰機）

靜電把幾種界面的截圖都列在下圖中，方便大家進一步理解。

在這里我們只介紹application標簽里的項目，其它標簽，現在我們還用不到，所以就先跳過吧。

使用Single View Application開始新嘗試

Single View Application是最簡單的模板，命名并保存后，我們可以看到，這個模板除了啟動界面，就是一大白板。如下圖：

上一章中，靜電告訴大家，新建一個模板后，點擊左上角的運行箭頭，就可以直接運行模擬器來查看了。運行后，啟動界面一閃而過， 然后就是一片空白。聰明的同學已經注意到了，新建后，上圖正中的hello_Xcode文件就是我們在模擬器中看到的啟動界面的內容。 然后我們看一下屏幕左邊，有一列目錄樹。這就是我們新建模板工程里用到的所有文件了，看一下每項代表的意義。

對于1，2，4項.我們可以暫時忽略，這個階段用不到這些文件. 第三項是我們著重要研究的幾個文件，這一節我們從簡單開始，首先看這個名為LaunchScreen.xib的文件，顧名思義，這個就是應用的啟動界面，下面，來點好玩的東東吧！

熟悉控件--自定義啟動界面

大家一定不會陌生，每個應用都會有自己的啟動界面，啟動界面傳達出這個軟件的功能，以及氣質，設計的好壞直接關系到使用者的第一印象.但大家剛剛看到，現在這個界面實在是太！丑！啦！只有簡陋的白底黑字。我們要讓它看起來漂亮一些，Xcode中的xib里，會提供給我們各種各樣的控件，什么是控件？打個比方，在Photoshop中，我們有文字工具，矩形工具，圓形工具等。iosAPP也由多種這樣的元素構成，這就是控件。接下來我們在演示中慢慢來熟悉控件。

點擊左側開發文件 LaunchScreen.xib，即可開始編輯工作。但這時我們發現，這個啟動界面的”畫布"尺寸好像不對啊。是的，在新版本的Xcode中，蘋果為了適應更大屏幕的手機，采取了自動適配布局。因此屏幕寬高就看起來好奇怪. 但對于初學者來說，自動適配這個屬性，現在了解有點為時過早，為了更形象化的來操作“畫布”，我們把這個特性關掉。

在軟件右側的屬性欄中，找到如下設置，將Use Auto Layout功能關掉。 下面我們還會發現一項有用的東西，就是Ise as Launch Screen。打上對勾，這個xib可視化界面就會變成啟動界面。當然，取消對勾，就是一個普通的xib界面啦。

關掉后選擇下圖的 Disable Size classes即可，默認選擇iPhone的尺寸。

接著選擇尺子圖標，如下圖。將這個“畫布”的尺寸設置為iphone的尺寸如320-480，320-568等等。大家可能注意到了，這并不是iphone的分辨率呀？在這里靜電要告訴大家，開發過程中，Xcode的長度，字號等單位，一律按設計稿的尺寸一律除以二。 也就是設計稿是640-960，除以二就是320-480。 如下圖操作，這時，“畫布”終于像點樣子了。

繼續操作，我們首先嘗試下修改這個“畫布”中的文字，與作圖軟件類似，選擇元素后，右側為屬性。我們選擇hello-Xcode文字，看到右側屬性欄已經起了變化，選擇如圖所示右側按鈕，我們可以看到，這是一個名為label的控件，框中的屬性，我們一定不會陌生，試著調調看。

調整好元素的位置，顏色等。第一步就這樣完成了，但我們還不太滿意，這個啟動界面的文字雖然可以定義了，但是我還想放一張圖片在上邊。ok，我們來放一張圖片吧！這里我們要使用一個名為image View的控件。

控件所在的位置在屏幕右下角（如果你的屏幕跟靜電的不一樣，請回過頭查閱教程第一節，看看界面如何自定義）。

控件庫里有著各種各樣的組件，我們剛才修改文字的那個，名為“label”，label主要用來承載文字內容。

那么現在我們要用這個image view來插入圖片。拖動這個組件到“畫布”上即可，這個時候的效果如下圖所示，選中這個藍色的框后，右側屬性發生變化了。 點擊圖片選擇框，但是。。。。。為什么沒有圖片呢？那是因為我們還沒有把圖片資源導入工程中。

導入圖片資源文件

我們需要準備一張跟你剛才“畫布”尺寸大小一樣的圖（記得尺寸是兩倍關系）。靜電準備的是一張640-1136的圖。接下來選擇左側有著藍色圖標的image.xcassets文件，打開后我們可以看到，左側第二列中，只有appicon的選項，這不是我們現在想要設置的東西，在如圖所示位置點右鍵，選擇“New image set”。

我們發現第三欄中出現了很多空位線框，這些框表示各種尺寸的圖片大小，適配不同的設備。將準備好的圖片拖動進去。為了方便起見（不考慮適配），靜電只準備了一張ip5尺寸的，如果想要完美適配，那么可以再準備一張640-960的圖片，分別拖動到1x， 2x，與3x的虛線框中。同時，我們將右側屬性中的，image set 的name，設置為你想要的名字，我這里輸入bg。 導入圖片的工作就完成了。

接下來回到LaunchSreen.xib界面.選中剛才拖到”畫布”中的藍色image View 框，看右側屬性欄，將image view的名字設置為你剛才起的名字，靜電起的名字是bg，這個時候大家發現沒有，圖片顯示在image view框中了。接下來把image調整到與“畫布”一樣大小。

但是你會發現，圖片把剛才的文字都蓋住了，怎么辦？ 你想到了什么嗎？ 對，圖層！xib中的圖層順序表示方法與ps等繪圖軟件相反，圖層順序表中，最上層的圖片反而在最下邊表示。這個時候我們把圖片拖動到最上邊。

剛才說的“畫布”，其實是一個view（視圖），我們可以將其理解為畫布，這個是最簡單的辦法。將框中的圖層調下順序即可讓圖片在最下層了。（有的同學找不到圖中所示的框，不要擔心，他只是被藏起來了點擊那跟豎線，將它向右拖動，找到了吧？）

這時我們的基本操作已經完工。如果大家覺得閃屏不需要文字的話，只管做一張漂漂亮亮的圖片就行了，靜電在這里放文字是為了讓大家熟悉這幾個控件。 運行模擬器看看效果，美麗的啟動界面是不是已經出現了呢？

大家可以嘗試用類似的方法，在image.xcassets里導入圖標素材，這個時候，你會發現，自己的app已經有模有樣了！為自己贊一個吧! 靜電教程中的Xcode工程文件已經附在文章末尾了，歡迎下載研究.

寫在本章最后

1. 熟悉如何新建Xcode工程，這是你開始工作的第一步。

2. 熟悉幾個常用的文件， launchScreen.xib， imanges，xcassets，以及下一章我們要講的Storyboard（故事板）。

3. 在可視化界面xib下操作”控件”，排列元素，本章我們用到的控件有image view和label，大家請回憶這兩個控件的作用。下面的章節中，我們會熟悉更多的控件的用法。”控件”，是Xcode中非常重要的組成部分，如果大家感興趣，可以玩一玩屏幕右下角組件庫中的各種組件。

4. 本文是寫給設計師看的Xcode教程，其中某些術語并不規范，專業人士請勿見笑。同時懇請大家指正文中存在的各種錯誤.

歡迎掃描二維碼關注靜電的微信號：

專為畢業生量身打造的三篇好文！幫你迅速找到好工作！

大咖前輩現身說法！親歷者經驗！
《畢業生必看！剛入行的設計師如何敲開大公司的門》

有了這個，就不怕遇到黑心老板啦！
《找工作必備！教你一眼識穿招聘公司有木有坑》

朋友擠破頭來讓你幫個忙？看看這篇！
《人情練達即文章：如何拒絕朋友免費做設計的要求？》

原文地址：ui.cn
作者：@JingDesign

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量87萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：