上周,我參加了 iOSDevCampDC 并發(fā)表了演講，在這里很榮幸的聽到了 @atomicbird 關(guān)于 StackViews 的演講。我之前寫過一篇文章,向大家介紹了使用 StackViews 來做簡易動畫的有多方便，更被使用 StackViews 能夠非常簡單地完成橫豎屏的切換所震驚。
例如，下面這個簡單的有著一張圖片和一些文本的視圖。它在豎屏下看起來挺好的，但是一旦屏幕旋轉(zhuǎn)了，就不那么好看了...
<iframe height=498 width=510 src="https://www.natashatherobot.com/wp-content/uploads/StackViewRotationBad.mp4?_=1" allowfullscreen></iframe>
可是呢,僅僅改為在Storyboard中使用一個簡單的StackView(不需要寫額外的代碼)，你就可以擁有一個好用的旋轉(zhuǎn)適配效果了。
<iframe height=498 width=510 src="https://www.natashatherobot.com/wp-content/uploads/StackViewRotationDemo.mp4?_=2" allowfullscreen></iframe>
步驟
第一個步驟是一個垂直排列的 StackView，里面放一個 ImageView 和一個 TextView：
奇詭一招
這里的關(guān)鍵就是當(dāng)屏幕方向從豎屏變?yōu)闄M屏的時候，我們需要同時把 StackViews 從垂直切換為水平。
為了實際看看這個過程，我推薦在 Storyboard 中改變到水平方向模式(超愛 Xcode8 的這個表單)。
注意到 Xcode 8 的 Storyboard 中告訴你在水平方向上高度被壓縮了這點十分便利。因為這點愛死 Xcode 8 了。
這招就是在高度為緊湊 (Compact) 的時候把 StackView 設(shè)為水平方向的。要做到這個，選中 StackView，然后來到屬性視圖。你會發(fā)現(xiàn)在 StackView 軸向?qū)傩韵旅娴囊粋€小小的+ -- 點擊它!
現(xiàn)在選擇 Any Width -> Compact Height -> Any Gamut:
這里的關(guān)鍵當(dāng)然是緊湊高度。現(xiàn)在你可以在緊湊高度模式下 (Compact Height mode) 改變 StackView 的布局到水平方向了！
這樣就完成了！你可以立刻看到在 Storyboard 中改變方向的后的效果，甚至都不用運行這個應(yīng)用。
有一個值得注意的是，在 Storyboard 中有一個 bug -- 在你改變屏幕方向的時候，可能會出現(xiàn)一個關(guān)于你的布局的警告。要解決這個警告,只要在變化前后的 StackView 的AutoLayout屬性中，改變 hugging 或 compression 的優(yōu)先級(哪個都行)就好。ˉ_(ツ)_/ˉ
結(jié)論
我沒有在為屏幕旋轉(zhuǎn)方向適配布局這方面研究太多，所以這個技巧絕對是一個值得記住的好東西。手動的為不同的壓縮尺寸改變 AutoLayout 屬性聽起來就不讓人開心，特別是產(chǎn)品經(jīng)理叫你多加“就一個小小的東西啦”進(jìn)去的時候...再次感謝 @atomicbird 和我們分享這個小但是超有用的小技巧。
本文由 SwiftGG 翻譯組翻譯，已經(jīng)獲得作者翻譯授權(quán)，最新文章請訪問 http://swift.gg。
