iOS 8 by Tutorials (section2：開始調適型配置)

標籤：

 iOS 8 by Tutorials(翻譯1.2)  1.2、開始調適型配置

ios8的巨大變化中，Adaptive Layout的引用給iOS設計師帶來協助。在設計項目時，你可以建立簡單的布局來適應當前的iOS8裝置，這一章節是Adaptive Layout的入門，你可以學到通用的Storyboards、size classes、布局和訂製字型及超有用的助理編輯預覽（通過storyboards清晰的看出項目結構）。現在你可以從頭開始建立用關於天氣的項目，如果你不是Auto Layout的粉絲，也沒有關係，本章的第一部分提供了循序漸進的方法使用自動布局來構建一個項目，你會發現在不使用一行代碼時也能完成很多介面。

• 通用的故事版

通用的故事版將是你加入Auto Layout旅途的第一步，同樣的storyboard在iOS8上可以用於iPads和iPhones，它不需要保持一套storyboard只能同步的服務一個裝置，並且還充滿了錯誤。建立一個Single View Application項目，點開Main.storyboard，它是一個單一的storyboard但相容所有的裝置而不管裝置螢幕大小，它裡麵包含了一個簡單的view controller，但是確實一個不熟悉的大小： 

是的，它是一個”粗糙的正方形”，在File Inspector中選擇Use Size Classes，你就可以實現“一個故事版適合所有”： 

 

這個選項在iOS8的新項目是預設存在的，你也可以在更新你的項目時使用這個新的故事版。你可以在本章的第4節Adaptive View Controller Hierarchies學到在iOS8中如何更新久的故事版。

那就開始吧，開啟Main.storyboard，拖一個ImageView在介面上，在Size Inspector設定它的X的position為150，Y的position為20，Width為300，Height為265。拖一個View在介面上，在Size Inspector設定它的X的position為150，Y的position為315，Width為300，Height為265。

選擇剛剛加進去的View開啟Identity Inspector欄輸入TextContainer在你Label框中。如： 

這樣很難看出剛剛加進去的View在哪裡，這是因為它和背景顏色都是白色的。為了區別他們，現在設定背景色為Red: 74, Green: 171, Blue: 247，TextContainer view的背景色為Red: 55, Green: 128, Blue: 186. ，好了，現在看到的是這樣的： 

現在有2個view在我們的視圖上了，下面的任務就是給他們設定布局約束了。

• 添加布局約束條件

  選擇imageView，在auto layout toolbar點擊Align按鈕，選擇Horizontal Center in Container，確保它的值為0，然點擊Pin按鈕，添加一個top spacing to nearest neighbor constraint為0，如： 

剛剛的約束條件確保了imageView離介面top的距離是固定的、左右是置中的。現在我們需要配置imageView和textContainer的間距。Ctrl-dragimageView到Ctrl-drag，像這樣： 

會出現一個menu，選擇Vertical Spacing，像這樣： 

這個約束條件決定了 imageView底部和TextContainerView頂部的豎直間距。選擇Size Inspector，再選擇imageView你可以看到這樣： 

可以看出imageView上有3個約束條件 ，你可以在size inspector輕鬆的配置每一個約束條件。在Bottom Space To: TextContainer的約束條件點擊Edit，你可以設定這個約束條件的屬性，設定Constant為20，如： 

好了，現在已經實現了TextContainerView固定在imageView的底部的20px了。但是我們還是需要添加其他的三個約束條件在TextContainerView上：選擇TextContainerView，點擊Pin來顯示Add New Constraints介面，在Spacing to nearest neighbor中選擇left、right、bottom值為0，確保Constrain to margins是unchecked，這個表示移除這個介面的所有邊距（填充到左右下），點擊Add 3 constraints，添加新的3個約束條件到TextContainerView中，  

現在我們的故事版是這樣的： 

這個時候你會注意在介面上有一些黃色的約束線，這表明這些約束有問題,需要你的注意。它會在故事版自動更新時遵循約束條件，但是你立刻選擇自動更新你的imageView會縮小為zero size。這是因為你的imageView沒有任何的內容--意味著它內部的高和寬都是0（需要4個方向進行約束），如果不提供物理（圖片）的寬高限制Auto Layout會依賴於介面的內部大小來決定寬高。 在Project Navigator中，開啟Images.xcassets選擇下面的+再選擇New Image Set按鈕： 

雙擊剛剛添加的Image並且重新命名為cloud，如： 

這個cloud是一個圖片的集合，包含了non-Retina、Retina、Retina HD，只要在項目中判斷存在了該圖片，那麼在你引用該圖片的名字時iOS就能在runtime獲得圖片資源。 現在cloud圖片集是空的，你可以在此的後面下載cloud_images.zip，將cloud_small.png拖進1x，[email protected]拖進2x，[email protected]拖進3x，如： 

選擇3x，點擊鍵盤的space鍵，可以看到[email protected]的原型圖： 

加入了圖片資源後，點擊Main.storyboard再選擇imageView，將Image設定為cloud，設定View\Mode為Aspect Fit，如： 

現在圖片也有了，但是還是能看到一些黃色的約束線，我們還是需要做點什麼：首先選擇View Controller‘s的view，選擇Resolve Auto Layout Issues，最後選擇All Views\Update Frame： 

這個時候View Controller會重新安排介面去自動的解決不滿足的約束條件，這將讓我們的故事版看起來是這樣的： 

• 預覽助理編輯器

  正常情況下我們是這樣測試我們的通用故事版的：分別在iPad, iPhone 4s, 5s, 6 and 6 Plus的模擬器上運行，這還的測試方向。這個過程無疑是很費力的，但是在Xcode 6上面使用Preview Assistant Editor(預覽助理編輯)是更棒的體驗！

開啟Main.storyboard選擇Assistant Editor功能表列： 

這個時候故事版就會分為2塊，選擇Automatic -> Preview -> Main.storyboard: 

預覽助理編輯就會出現另外一個4-inch(iPhone)的故事版： 

在iPhone 4-inch中點擊介面的底部的旋轉按鈕，介面將會水平顯示： 

在多個模擬器顯示中，這是一個巨大的改變，但是等等，還有等多的！點擊+你會發現還有更多(真棒): (2014年10月26日上午1:16)

添加iPhone 5.5-inch和iPad，現在的介面是這樣的： 

有沒有橫屏時發現有點奇怪呢？對！因為圖片太大了。現在需要在imageView添加新的約束條件。Ctrl-dragimageView到controller’s view來建立新的約束，選擇Equal Heights： 

現在介面上會有一些紅色的約束條件。這是因為剛剛添加的約束和存在的有衝突。選擇剛剛的約束條件，選擇Document Outline開啟Attributes Inspector，如果First Item不是cloud.Height，那麼在First Item選擇Reverse First and Second Item： 

下一步選擇Relation為Less Than or Equal，設定Multiplier為0.4： 

這意味這這個圖片要麼保持圖片本身的大小，或者螢幕尺寸的40%高度，取最小值。 你會注意到在你更新了這個約束條件後介面會自動重新整理： 

在自動更新後你能得到多個裝置的預覽嗎？當然！預覽助理編輯是個相當進步的東西！ 介於這是一個天氣項目，我們需要添加一些lable來表示城市名字和當前的溫度。

• 添加文本資訊

  在Main.storyboard的TextContainer中添加2個Labels： 

選擇上面的那個label使用Align和Pin設定horizontally center、top spacing to nearest neighbor的值為10： 

接下來選擇Attributes Inspector功能表列，設定label的Text為Cupertino，Color為White，字型為Helvetica Neue, Thin，字型大小：150，這時你可能發現當前文字是難以辨別的，這是因為label的frame問題，你可以很快的解決它。

選擇選擇另外一個label，同樣使用Align和Pin設定horizontally center、bottom spacing to nearest neighbor的值為10，選擇Size Inspector功能表列，介面是這樣的： 

使用Attributes Inspector功能表列設定label的Text為28C，Color為White，字型為Helvetica Neue, Thin，字型大小：250

現在來需要解決之前提到的label的frame問題。選擇view controller’s view，點擊storyboard下面的Resolve Auto Layout Issues，再選擇All Views\Update Frames，你會看到storyboard是這樣的： 

2個label有點重疊吧，這不是你想要的吧。在我們修護之前還是先用assistant editor來看一下吧，在iPad上看上去很完美： 

可想而知，在iPhone上字型還是稍大了些： 

好了，你會在下一個章節來解決字型大小問題。

2014年11月10日17:31

iOS 8 by Tutorials (section2：開始調適型配置)