ios開發系列－介面

標籤：

         本章我們通過設計一個簡單的登入介面來講解一下在ios中如何設計介面。開啟上章建立的項目後，首先我們要匯入幾個需要使用的圖片。匯入方式其實很簡單。選中assets.xcassets。然後將使用的圖片拖入即可。這裡說明一下的是圖片的名稱最好帶個頁面首碼什麼的，因為雖然可以在assets.xcassets中雖然可以建立檔案夾，但最終讀取圖片的時候是沒有路徑的，也就是說如果你在不同檔案夾下有同名的圖片檔案的話會出問題。說到圖片檔案。這裡推薦一個找圖片資源的網站http://www.easyicon.net。這個圖片網站比較貼心的有兩點。1：是會講你的中文搜尋索引鍵自動轉成英文。2:是會為每張圖片都提供多種像素格式。一般登入頁包含這幾個元素：系統logo,使用者名稱輸入框，密碼輸入框，以及登陸按鈕。所以我們先找一個酷炫一點的logo.我圖省事，就拿weixin的logo來用用吧。補充說一句，由於xcode編譯的時候會對png檔案做壓縮最佳化。所以盡量選擇png圖片。iphone的螢幕寬度大約是320px左右，所以我選擇的logo的尺寸是128＊128.下載改名拖入項目後如.你會發現多出了一個2x,3x。這是幹什麼用的呢？這就涉及到蘋果的設計思路了，他的目標是希望一套代碼匹配所有裝置。所以1x就是用於普通iphone,2x用於plus,3x用於ipad.可惜實際情況，用過ipad版的都知道了。。。。。。。。

閑話少敘，資源檔準備好以後我們就開始正式設計介面了，選中main.storyboard檔案。介面如。裡面viewcontrol.control你可以理解為就是我們的aspx檔案，是我們介面的容器。裡面有一個view.可以理解相當於div.左側為所有control的列表，會顯示他的層級結構，包含了哪些東西。中間就是我們編輯app頁面的映像化介面了。右側是你選中的controller或者控制項的屬性設定，右下角為可以使用的控制項

首先我們拖入一個imageview來載入logo.你可以通過底部控制項區底部的搜尋欄來快速定位。然後設定其image屬性。這裡說明一下，如果你忘記了圖片的名稱。可以點擊右下角功能區的第4項預覽，如

然後再拖入兩個textField.其中一個設定其placeholder（就是輸入框中的輸入提示）為使用者名稱。另一個設定其placeholder為密碼。並鉤上Secure Text Entry設定，保證輸入密碼不可見。如

最後再拖入一個Button,設定其Title屬性為登入。這樣我們這個介面的所有元素都已經準備好了。接下來就是布局。在xcode中預設的布局方式是需要你提供4個值，即你的控制項左上方所在點的x,y座標和控制項本身的寬和高。如

     這在早期是可以滿足開發需要的。但由於現在iphone的螢幕的尺寸有多種。直接寫死明顯會出問題。當然你也可以在代碼中動態計算。但明顯不太直觀，調試起來也不方便。好在官方推出了AutoLayout，即自動布局。主要思路是兩種。一種是指定該控制項距離上左右相鄰元素的相對距離和高度，然後讓寬度隨螢幕自適應，還有一種就是指定控制項的寬高以及上相鄰元素的相鄰像素的相對距離，然後設定控制項水平方向自動置中。這兩種方式聽起來是不是很熟悉？這其實也就是網頁中處理螢幕不同解析度的做法，原理說清楚了，就讓我們開始具體操作吧。

    首先選中我們的imageview.由於圖片的長寬比是固定的，所以我們不可能讓圖片寬度自適應，否則圖片會變形。所以我們採用第二種方式，讓圖片固定長寬然後置中。這這裡順便說下，iphone系列手機的螢幕的可見寬度大於等於320px.如。我們選中imageview後點擊中部下方的第三個按鈕。設定imageview距離上方為8px（注意要先選中對應的紅線）.寬度為240px.高度為120px.然後點擊Add 3 constraints(即添加我們設定的3個約束)。

然後選擇底部第2個按鈕。勾選Horizontally  in container（水平置中）

 

 

然後選中使用者名稱輸入框。我們採用第一種方式，如　　

    

接下來我們以類似的方式設定密碼和登入按鈕。做完以後你會發現。左邊列表多了一個黃色的箭頭，。

點擊一下。他會提示你的幾個控制項的約束和你實際顯示的效果不一致，沒關係，一個個點擊過去選擇UpdateFrames即可

重新整理後介面效果如

 

    接下來，我們來看看運行效果吧。調試有兩種方式，一種是使用模擬器，一種是使用真機調試。如果有條件的話還是盡量使用真機。還是先講如何使用模擬器吧。如，先選擇模擬器的型號，然後點擊運行即可。

    

運行效果下

另外說一下，模擬器預設的寬度比較醜，不像手機效果，建議調整下比例。調整方式如。選中模擬器，然後點擊window,設定對應比例

關於真機調試，以前由於需要開發人員認證還是比較麻煩的，xcode7版本後簡化了很多，具體方式見這個教程 http://www.skyfox.org/ios-xcode7-debug-device.html。好本章就講到這裡。

 

ios開發系列－介面