UIStackView

UIStackView to resize/layout

自適應(yīng)、適配、布局這幾個關(guān)鍵詞一直伴隨著iOS開發(fā),從以前的單一尺寸屏幕,到現(xiàn)在的多尺寸屏幕,Apple一直致力于讓開發(fā)人員盡可能少在這些事上耗費過多的精力,所以Apple在2012年推出了Auto Layout特性,2014年又推出了Adaptive Layout、Size Classes,2015年iOS 9中又增加了新的控件:UIStackView。這些無一不是我們開發(fā)者做適配的利器。

UIStackView簡介

UIStackView Class Reference 1

The UIStackView class provides a streamlined interface for laying out a collection of views in either a column or a row. Stack views let you leverage the power of Auto Layout, creating user interfaces that can dynamically adapt to the device’s orientation, screen size, and any changes in the available space. The stack view manages the layout of all the views in its arrangedSubviews property. These views are arranged along the stack view’s axis, based on their order in the arrangedSubviews array. The exact layout varies depending on the stack view’s axis, distribution, alignment, spacing, and other properties.


simple display
simple display

UIStackView提供了一個高效的接口用于平鋪一行或一列的視圖組合。對于嵌入到StackView的視圖,你不用再添加自動布局的約束了。Stack View管理這些子視圖的布局,并幫你自動布局約束。

StackView其實一個視圖容器,不過它會對它的子視圖根據(jù)一定規(guī)則自動布局,將子視圖按棧的排列方式進行布局。

UIStackView主要的屬性

一般情況下,我們不需要對stackView.subviews做任何約束,只需要通過對stackView的axis, distribution, alignment, spacing屬性進行修改 2

  • Axis 方向
    StackView有水平和垂直兩個方向的布局模式

    axis

  • Spacing 間隔
    StackView可以設(shè)置子視圖之間的間隔

  • Alignment 對齊方式
    StackView可以設(shè)置子視圖的對齊方式(水平方向和垂直方向的該屬性值有所區(qū)別):

    alignment

    • Fill:子視圖填充StackView。
    • Leading:靠左對齊。
    • Trailing:靠右對齊。
    • Center:子視圖以中線為基準對齊。
    • Top:靠頂部對齊。
    • Bottom:靠底部對齊。
    • First Baseline:按照第一個子視圖中文字的第一行對齊,同時保證高度最大的子視圖底部對齊(只在axis為水平方向有效)。
    • Last Baseline:按照最后一個子視圖中文字的最后一行對齊,同時保證高度最大的子視圖頂部對齊(只在axis為水平方向有效)。
  • Distribution 分布方式
    StackView可以設(shè)置子視圖的分布方式:

    • Fill:默認分布方式。
    • Fill Equally:子視圖的高度或?qū)挾缺3忠恢隆?/li>
    • Fill:Proportionally:按比例分布。
    • Equal Spacing:子視圖保持同等間隔。
    • Equal Centering:每個子視圖中心線之間保持一致。
  • baselineRelativeArrangement
    determines whether the vertical spacing between views is measured from the baselines.
    決定了其視圖間的垂直間隙是否根據(jù)基線測量得到,選中 Baseline Relative 將根據(jù)subview的基線調(diào)整垂直間距。3

  • layoutMarginsRelativeArrangement
    determines whether the stack view lays out its arranged views relative to its layout margins.
    決定了 stack 視圖平鋪其管理的視圖時是否要參照它的布局邊距,選中 Layout Margins Relative 將相對于標準邊界空白來調(diào)整subview位置。

UIStackView的嵌套

Typically, you use a single stack view to lay out a small number of items. You can build more complex view hierarchies by nesting stack views inside other stack views.

既然UIStackView繼承了UIView,那么UIStackView也可以看做是一個UIView而被包含在UIStackView內(nèi),亦及嵌套使用。

UIStackView的嵌套

UIStackView 與 UICollectionView 的選取

UIStackView 實現(xiàn)有對齊要求的視圖布局非常非常得簡單,而使用 UICollectionView 和 UITableView 來實現(xiàn),相對而言就比較麻煩。
相比于collectionView而言,stackView更加小巧靈活,然而想要完成更精致的效果,最終還是得使用UICollectionView。

注意!

Be careful to avoid introducing conflicts when adding constraints to views inside a stack view. As a general rule of thumb, if a view’s size defaults back to its intrinsic content size for a given dimension, you can safely add a constraint for that dimension.

1. Distribution 分布方式的方向垂直于Axis。
2. 有時可能排版較亂,除了設(shè)置屬性來布局之外,我們還可以手動添加屬性,且"手動添加的享有更高的優(yōu)先級"。
(Apple官方建議開發(fā)人員應(yīng)優(yōu)先采用StackView來設(shè)計用戶界面,然后再根據(jù)實際需求來添加約束)

后記

The UIStackView is a nonrendering subclass of UIView; that is, it does not provide any user interface of its own. Instead, it just manages the position and size of its arranged views. As a result, some properties (like backgroundColor) have no effect on the stack view. Similarly, you cannot override layerClass, drawRect:, or drawLayer:inContext:.

UIStackView不是萬能的,但它可以在布局和自適應(yīng)方面給開發(fā)者帶來便利,在恰當(dāng)?shù)那樾蜗率褂肧tackView可以事半功倍。而且因為UIStackView是UIView的子類,所以也可以將動畫效果作用于UIStackView上,在方便布局之余還能提高用戶體驗。

隔桌安卓小伙伴不滿了,這不就是LinearLayout嗎?
額 -_-!


ThanksTo:

[1] UIStackView Class Reference --
https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIStackView_Class_Reference/index.html#//apple_ref/occ/instp/UIStackView/distribution
[2] UIStackView小窺 --
http://www.devtalking.com/articles/uistackview/?utm_source=tuicool&utm_medium=referral
[3] 簡便的自動布局,對UIStackView的個人理解! --
http://www.cnblogs.com/bokeyuanlibin/p/5693575.html


// 純代碼的下次再總結(jié)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,182評論 6 543
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,489評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,290評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,776評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 72,510評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,866評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,860評論 3 447
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 43,036評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,585評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 41,331評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,536評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,058評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,754評論 3 349
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,154評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,469評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,273評論 3 399
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 48,505評論 2 379

推薦閱讀更多精彩內(nèi)容

  • 這是一篇挺老的文章,主要就是介紹在iOS9時推出的控件UIStackView。我發(fā)現(xiàn)網(wǎng)上的資料并不算多,而AppC...
    Liberalism閱讀 11,131評論 2 26
  • 距離iOS9發(fā)布已經(jīng)接近一年了,我們即將引來新的iOS 10,為何在這個時候來介紹iOS9中新引入的一個布局組件呢...
    CZ_iOS閱讀 7,549評論 9 59
  • UIStackView 類提供了一個高效的接口用于平鋪一行或一列的視圖組合。Stack視圖使你依靠自動布局的能力,...
    Chivalrous閱讀 814評論 1 2
  • 前言 首先,我們通過下面這張圖片引出今天的主角 大家看到了什么,是愛嗎?不,這不是愛,不是愛,是滿滿的‘愁緒’???...
    一念之見閱讀 2,218評論 0 2
  • 升級iOS9.0后,增加了一些新特性.讓們來一點點的了解一下吧.今天我們先學(xué)習(xí)一下UIstackView,因為它是...
    圖長伴閱讀 537評論 0 1