你所不知的iOS應用開發基礎知識

本文導航

本文的目的就是幫助各位設計師在最短的時間內，以實戰的方式探索iOS應用開發基礎知識。希望文章內容對大家有所幫助。

向視圖中添加圖片和文字

要通過Interface Builder向視圖當中添加圖片和文字，我們首先需要創建一些對應著不同類型內容的“容器”，也就是“Image View”與“Text View”。與添加View Controller的方式相同，我們也需要將這兩類View從右側的對象庫當中拖拽出來放到界面當中。我們還可以在規格檢查器(Size inspector)中對這些容器進行精准的定制，包括布局位置、尺寸等。

而在屬性檢查器(Attributes inspector)中，我們可以為圖片容器指定其中所要顯示的圖片，也可以控制文字容器的各種屬性。

接下來我們要向HomeViewController.xib當中添加圖片。首先刪除之前的Label控件，從庫中拖拽一個Image View到界面當中，在屬性檢查器當中的“Image”下拉列表裡選擇“home-bg.png”，然後將“Mode”設置為“Top Left”。

到規格檢查器(Size inspector)中，確保其中的4個屬性值分別為“0”、“-20”、“320”、“480”，如下圖所示：

接下來，拖拽一個Text View到界面中，雙擊編輯其中的文案，例如更改為“A Catchy Slogan Here”，在屬性檢查器中設置為居中對齊，將字色設置為白色，並禁用背景色，然後將Font類型更改為“Custom”，將其他屬性設置為“Snell Roundhand,Regular,24”。

現在我們的HomeViewController.xib看上去大致是這樣的：

因為這三個界面都是被放置在Tab Bar Controller體系當中的，也就是說我們在設計這些單獨界面的時候必須考慮到底部標簽欄的占位。Xcode可以幫助我們在界面當中模擬這類全局元素 的占位情況。確保在Xcode左側的導航欄裡選中HomeViewController.xib文件，在文檔結構列表中選擇“View”對象，然後在右側 的屬性檢查器(Attributes inspector)中找到最上面的“Simulate Metrics”一欄，在“Bottom Bar”中選擇“Tab Bar”，如下圖所示：

這個功能並不會向實際應用裡又添加一個標簽欄，它只是為我們提供一個可視化的設計指引，幫助我們對界面元素進行更精准的定位。

接下來，我們可以向Portfolio及Contact界面中添加圖片和文字內容了。具體的樣式可以參考本文開始時的目標演示圖片，或參考模板包當中提供的PSD文件。

在Portfolio界面當中創建案例縮略圖，以及在Contact界面中創建聯系方式按鈕時，我們需要使用對象庫中的Round Rect Button控件，而不是之前那樣使用Image View;因為這些地方都是需要響應用戶的操作並由此觸發相關行為的，按鈕類的控件可以幫我們實現這個目標。將Round Rect Button拖拽到界面內，到右側的屬性檢查器當中，將按鈕類型(Type)設置為“Custom”，然後就可以通過下面的“Image”屬性為其設置具 體的背景圖片了;如果需要的話，還可以進入規格檢查器(Size inspector)當中對按鈕的尺寸進行設置，使其符合按鈕圖片的大小。

3個界面都打造完畢後，點擊“Run”按鈕或使用快捷鍵Command+R來運行應用，通過iPhone模擬器來檢視當前的工作成果。

其他技巧

在iPhone模擬器中點擊Home按鍵回到首屏，你會發現我們的App圖標只是一個干巴巴的白板，在應用被打開的時候也沒有任何額外的加載圖像。

回到Xcode中，點擊導航欄中的Portfolio項目圖標，此時內容區會呈現出應用的信息概況。在其中找到“App Icons”和“Launch Images”，這裡就是我們為應用添加圖標和加載圖像的地方了。