使用 UIStackView 構建動態的 iOS 布局

lumm9 8年前發布 | 9K 次閱讀 iOS開發 移動開發 UIStackView

來自: http://www.oschina.net/translate/building-dynamic-layouts-for-ios-with-uistackview

iOS上的視圖布局向來都比較復雜。在iPad和不同尺寸的iPhone誕生之前,開發者習慣硬編碼視圖布局。隨著不同尺寸的iOS設備出現,這種方式已然不可取。為了解決這個問題,Apple提供了 AutoLayout,它利用基于約束的布局系統根據設備規格 動態調整你的用戶界面 。 AutoLayout解決了很多問題,但是它不易于掌握、不容易適應變化以及調整起來耗時耗力。舉個例子,如果我想在兩個控件中間添加另外一個,那么我必須重寫很多約束來保證它正確的插入。

那么我們能既 簡單 又可以動態的布局視圖嗎?我最喜歡的iOS9的變化就是,它帶來了一個全新的控件 UIStackView, UIStackView可以簡化我們對視圖布局的處理,它不像我們以前使用過的其它控件。在這篇博客,我將會詳盡的介紹如何使用 UIStackView來構建動態、漂亮的用戶界面。

UIStackView簡介

Apple注意到了我們使用 AutoLayout痛楚,于是提供了一個工具使我們的生活更加輕松。  UIStackView 通過設置一些簡單的屬性在運行時創建約束來消除我們手動創建這些約束的痛苦,這意味著我們可以向 UIStackView 通過簡單的拖拽來添加控件,它會自動為我們生成約束。它甚至還允許我們在運行時添加和刪除視圖(你需要設置它隱藏)。

不需要像 AutoLayout那樣配置約束,取而代之的是你需要設置一些很有描述性的屬性,比如坐標( Axis )、間隔( Spacing )、對齊( Alignment )以及分布( Distribution  )等。自然的,你可以在屬性設置面板上來配置,這樣你就可以通過鼠標輕松的制作出在所有iOS設備上都還不錯的用戶界面了。

UIStackView是我們工具庫里的一個很好的補充,同時它也是不需要渲染的 UIView的子類。正因為它不做渲染,你不能夠設置它的背景色和重構它的Draw方法。相反,它是用來幫助你布局子視圖的控件。另一個限制是,它與低于iOS9版本的設備不兼容,也就是說如果你需要向前兼容,還必須繼續配置約束( 記得在 Xamarin Insights 上查一下用戶數據,看有多少用戶仍然使用iOS9以前版本的系統)。

從StackLayout上添加和刪除視圖

UIStackView有一個添加和刪除子視圖的API,它可以讓你不用去過多考慮你的視圖布局。在stack view中的任何視圖都需要用 ArrangedSubviews屬性來添加,而不是SubView。

//Add View
MyUIStackView.AddArrangedSubview(myView);

//Remove view
MyUIStackView.RemoveArrangedSubview(myView);

簡單擴展一下,利用下面的方法,你可以輕松的為添加和刪除視圖加上動畫效果。

// Animate stack
UIView.Animate(0.25, ()=>{
    // Adjust stack view
    MyUIStackView.LayoutIfNeeded();
});

更多

在我們的文檔網站上,有很多不錯的文檔來幫助你使用 UIStackViews

UIStackView已經集成在最新版本 Xamarin Studio和Visual Studio的 Xamarin.iOS中。如果你目標的最低版本是iOS9以上,那么,你就可以利用 UIStackView來構建在所有 iOS設備上都不錯的用戶界面了。

 本文由用戶 lumm9 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!