通常，您希望應用程式的介面根據螢幕的尺寸和方向而顯示不同的布局。 在本章中，您將修改homepwner中的detailviewcontroller的介面，以便當它出現在具有相對較小高度的螢幕上時，文字字段集合和影象檢視併排而不是堆疊在一起 圖17.1）。
圖17.1 homepwner 的 detailviewcontroller 的兩個布局
螢幕的相對大小以size class定義。 size class 表示給定維度中螢幕空間的相對數量。 每個尺寸（寬度和高度）可以是緊湊的或正常的，因此有四種可能的 size class 組合：
請注意，size class 涵蓋螢幕尺寸和方向。 不要單單考慮裝置或介面的方向，最好是考慮 size class。compact width | compact height緊湊的寬度|緊湊的高度3.5 英吋或 4 英吋 或4.7英吋 iphone 橫向
compact width | regular height
緊湊的寬度|正常的高度所有尺寸的 iphone 縱向
regular width | compact height
正常寬度 緊湊的高度5.5英吋螢幕 iphone 橫向
regular width | regular height
正常的寬度|正常的高度所有尺寸的 ipad 任意方向
在homepwner中，您將重點關注該列表中的第一項——根據 size class 配置調整檢視屬性。 目標是使
image view 在緊湊的高度環境中位於標籤和文字欄位的右側。 在 正常 的高度環境中，image view 將在標籤和文字字段之下（如當前所示）。 使用棧檢視很非常容易就能做到。
首先，您將將現有的垂直棧檢視嵌入到另乙個棧檢視中。 這樣可以輕鬆地將 image view 新增到標籤和文字欄位的右側。
開啟homepwner.xcodeproj和main.storyboard。 選擇vertical stack view，然後單擊add new constraints選單，如圖17.2所示進行配置，並新增約束。
圖17.2 堆疊檢視約束
接下來，開啟新的堆疊檢視的屬性檢查器。 增加spacing為 8。
現在，您將要將影象檢視從內部堆疊檢視移動到剛建立的外部堆疊檢視。 這就是您將如何使 image view 顯示在介面的右側：在緊湊的高度環境中，堆疊檢視將被設定為水平，image view 將填充右側的介面。
將 image view 從乙個堆疊檢視移動到另乙個堆疊檢視可能有點棘手，因此您將在幾個步驟中執行此操作。
開啟文件大綱並展開detail view controller scene部分。 展開外部兩個堆疊檢視，如圖17.3所示。
圖17.3 擴充套件文件大綱
將image view拖動到當前包含的堆疊檢視的上方（圖17.4）。 這將從內部堆疊檢視移動到外部堆疊檢視。
圖17.4 將影象檢視移動到外部堆疊檢視
最後，摺疊內部堆疊檢視並將image view拖動到堆疊中（圖17.5）。 確保image view縮排在與內部堆疊檢視相同級別上。
您可能需要update frames，以擺脫任何警告。
圖17.5 將影象檢視移動到內部堆疊檢視下方
構建並執行應用程式。 確認堆疊檢視的行為不變。
在這一點上，您已經更新了所有 size class 通用的所有內容。 接下來，您將修改特定的 size class 以更改內容的布局。
在inte***ce builder的底部，單擊view as: iphone 7(wc hr)以展開檢視選項。 然後選擇orientation方向（圖17.6）。 讓device為 iphone 7。
圖17.6 detailviewcontroller 在 iphone 7 中顯示
接下來，您將更新外部堆疊檢視的屬性，以使 image view 位於右側。
選擇外部堆疊檢視並開啟其屬性檢查器。 在stack view部分下，找到axis屬性，然後單擊其左側的+按鈕。 從彈出式選單中，為width變化選擇any，對於height變化選擇compact（圖17.7）。 單擊add variation。 這將允許您自定義所有 iphone 的軸屬性。
圖17.7新增 size class 選項
對於新選項（hc），選擇horizontal（圖17.8）。 現在，每當介面具有緊湊的高度時，外層堆疊檢視將配置為水平。 當介面具有正常高度時，外部堆疊檢視將配置為垂直。
圖17.8 自定義 軸(axis)
你想要做的最後乙個變化是內部堆疊檢視和 image view 平均地填充外層堆疊檢視。 為此，您將自定義外部堆疊檢視的 分布(distribution)。
對於外部堆疊檢視，屬性檢查器仍然開啟，單擊distribution旁邊的+，然後從彈出選單中再次選擇width屬性為any和height屬性為compact。 將此 size class 的 分布 更改為fill equally（圖17.9）。
圖17.9 定製 distribution
構建並執行應用程式。 選擇乙個 item 並顯示其詳細資訊以新增一張**（如果沒有）。 在縱向和橫向之間旋轉（在模擬器上，您可以使用 command 加上向左或向右箭頭鍵進行旋轉），並注意介面在各種情況下是如何顯示的。
您的homepwner應用程式已完成。 您已經構建了乙個具有靈活介面的應用程式，可以拍照和儲存資料，我們希望您為您的成就感到自豪！ 值得慶祝！
在緊湊的高度環境中，使堆村的文字欄位和標籤垂直而不是水平（圖17.10）。
圖17.10堆疊的文字欄位和標籤
第十七章 部署
總的來說，部署遇到了許多坑，而且還有好多坑還沒有踩。去cocode找了許多教程，才踩了一些坑，但是關於資料庫的坑，先留著。所有的db.session.add 後面都加上db.session.commit 才行。記得，這是狗書的問題！部署教程 每次修改後需要一下命令重新部署下 git add git ...
第十七章 包
1 如果a資料夾所在目錄在環境變數，a資料夾中的 ma 模組可以被以下方式匯入 import a.ma form a import ma 2 如果 a 資料夾所在目錄在環境變數，a 資料夾中的 b 資料夾的 mb 模組可以被以下方式匯入 import a b mb from a.b import m...
夢裡人第十七章
尋找失落的夢 1 蒼蒼在北京瞎混了好幾個月了。蘇木雲回到了北京，就打 叫蒼蒼出去喝酒。彼時，蒼蒼跟隨著曾經中文系的大部隊在 北京城吃喝拉撒，已經人困馬乏地玩了一天，匆匆睡了一小覺，就在夏日的傍晚走出 c大校門。腳步踩在地上，吧嗒吧嗒，聽起來怪心寒。他們在電影學院附近的小餐館吃飯，蘇木雲眉飛色舞地為蒼...