StackView

StackView學習

自適應(yīng)绢馍、適配、布局這幾個關(guān)鍵詞一直伴隨著iOS開發(fā)肠套,從以前的單一尺寸屏幕舰涌,到現(xiàn)在的多尺寸屏幕,Apple一直致力于讓開發(fā)人員盡可能少在這些事上耗費過多的精力你稚,所以Apple在2012年推出了Auto Layout特性瓷耙,2014年又推出了Adaptive Layout朱躺、Size Classes,2015年又推出了Stack View哺徊。這些無一不是我們開發(fā)者做適配的利器室琢。今天就讓我們看看StackView是怎么一回事。

在iOS9中落追,Apple引入了UIStackView盈滴,他讓你的應(yīng)用可以通過簡單的方式,縱向或橫向的疊放你的views轿钠。UIStackView采用auto layout的方式來管理他的子視圖的位置和尺寸巢钓。讓你更簡單的構(gòu)建自適應(yīng)的UI。

Apple對于布局的發(fā)展歷程大致的介紹到此疗垛,下面結(jié)合實例對StackView的屬性進行學習症汹;

StackView其實一個視圖容器,不過它會對它的子視圖根據(jù)一定規(guī)則自動布局贷腕,將子視圖按棧的排列方式進行布局背镇,并且有幾個主要的屬性:

新建工程,依舊用storyboard進行操作泽裳;

1瞒斩、選中storyboard,在頁面搜索Stack View涮总,你會發(fā)現(xiàn)StackView有水平和垂直兩個方向的布局模式(內(nèi)部空間的布局規(guī)則)胸囱;

2、拖拽一個新的水平StackView(PeopleStackView)并設(shè)置它在父視圖的位置瀑梗,相對位置(0烹笔、100、0抛丽、0)à《上谤职、下、左亿鲜、右》

3柬帕、拖進stackview四張圖片,默認對齊方式為Fill狡门;

4、StackView常用兩個屬性其馏,Aligntioin/Distributon;先用代碼實現(xiàn),為方便起見仔引,在PeopleStackView下方拉進一個新的水平StackView(AligntionStack)并設(shè)置它在父視圖的位置,里邊放一個Label咖耘,一個segment,選中segment版保,修改屬性夫否,



5凰慈、同理設(shè)置Distributon的Stackview,以及內(nèi)部控件森篷;

6豺型、對齊方式

//Fill:子視圖填充StackView。

//Leading:靠左對齊坎藐。

//Trailing:靠右對齊哼绑。

//Center:子視圖以中線為基準對齊碉咆。

//Top:靠頂部對齊。

//Bottom:靠底部對齊茂浮。

//FirstBaseline:按照第一個子視圖中文字的第一行對齊壳咕。

//Last Baseline:按照最后一個子視圖中文字的最后一行對齊。

7幌羞、分布比例

//Fill:默認分布方式熔任。

//Fill Equally:子視圖的高度或?qū)挾缺3忠恢隆?/p>

//Fill:Proportionally:StackView自己計算出它認為合適的分布方式。

//Equal Centering:每個子視圖中心線之間保持一致的分布方式。

//Equal Spacing:子視圖保持同等間隔的分布方式晴及。

說明:

1、不論你拉取的是水平還是垂直可以在屬性中更改巾陕,

2蔚鸥、這些屬性都可以可視化更改,故不再累述

3馆类、stackview就是一個容器弹谁,會根據(jù)你設(shè)置的對齊方式和分布方式內(nèi)部實現(xiàn)布局。


[Demo git地址](https://github.com/kamawshuang/iOS9--Study)


更多精彩內(nèi)容請關(guān)注“IT實戰(zhàn)聯(lián)盟”哦~~~

![IT實戰(zhàn)聯(lián)盟.jpg](http://upload-images.jianshu.io/upload_images/326255-f67b0f0dd5fe5874.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/500)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末沟于,一起剝皮案震驚了整個濱河市旷太,隨后出現(xiàn)的幾起案子销睁,更是在濱河造成了極大的恐慌,老刑警劉巖睡毒,帶你破解...
    沈念sama閱讀 212,718評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件冗栗,死亡現(xiàn)場離奇詭異,居然都是意外死亡钠至,警方通過查閱死者的電腦和手機胎源,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,683評論 3 385
  • 文/潘曉璐 我一進店門乒融,熙熙樓的掌柜王于貴愁眉苦臉地迎上來摄悯,“玉大人奢驯,你說我怎么就攤上這事”窀螅” “怎么了邮偎?”我有些...
    開封第一講書人閱讀 158,207評論 0 348
  • 文/不壞的土叔 我叫張陵禾进,是天一觀的道長。 經(jīng)常有香客問我艇拍,道長宠纯,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,755評論 1 284
  • 正文 為了忘掉前任快集,我火速辦了婚禮廉白,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘勃黍。我一直安慰自己晕讲,他們只是感情好马澈,可當我...
    茶點故事閱讀 65,862評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著勤婚,像睡著了一般涤伐。 火紅的嫁衣襯著肌膚如雪缨称。 梳的紋絲不亂的頭發(fā)上睦尽,一...
    開封第一講書人閱讀 50,050評論 1 291
  • 那天型雳,我揣著相機與錄音,去河邊找鬼沿量。 笑死冤荆,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的钓简。 我是一名探鬼主播,決...
    沈念sama閱讀 39,136評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼芥被,長吁一口氣:“原來是場噩夢啊……” “哼拴魄!你這毒婦竟也來了席镀?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,882評論 0 268
  • 序言:老撾萬榮一對情侶失蹤顶捷,失蹤者是張志新(化名)和其女友劉穎屎篱,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體重虑,經(jīng)...
    沈念sama閱讀 44,330評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡秦士,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,651評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片命爬。...
    茶點故事閱讀 38,789評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡遇骑,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出落萎,到底是詐尸還是另有隱情炭剪,我是刑警寧澤,帶...
    沈念sama閱讀 34,477評論 4 333
  • 正文 年R本政府宣布媒鼓,位于F島的核電站错妖,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏暂氯。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 40,135評論 3 317
  • 文/蒙蒙 一擎厢、第九天 我趴在偏房一處隱蔽的房頂上張望动遭。 院中可真熱鬧,春花似錦厘惦、人聲如沸哩簿。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,864評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽形入。三九已至全跨,卻和暖如春浓若,著一層夾襖步出監(jiān)牢的瞬間渺杉,已是汗流浹背是越。 一陣腳步聲響...
    開封第一講書人閱讀 32,099評論 1 267
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留倚评,地道東北人馏予。 一個月前我還...
    沈念sama閱讀 46,598評論 2 362
  • 正文 我出身青樓,卻偏偏與公主長得像呢岗,于是被迫代替她去往敵國和親蛹尝。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,697評論 2 351

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

  • 目錄 0挫酿、前言 一愕难、Auto Layout前世今生 二、Auto Layout基礎(chǔ)知識 1.Auto Layout...
    浮游lb閱讀 24,422評論 3 89
  • 這篇文章緊跟上邊autolayout的一些小技巧拄衰,如果你沒有看過饵骨,不防先看下《你真的會用autolayout...
    檻內(nèi)濁物閱讀 10,321評論 7 46
  • 我的博客, 各位看官有時間賞光 UIStackView UIStackView介紹 隨著autolayout的推廣...
    VIC_LI閱讀 9,001評論 0 17
  • UIStackView to resize/layout 自適應(yīng)居触、適配、布局這幾個關(guān)鍵詞一直伴隨著iOS開發(fā)轮洋,從以...
    萌新小透明閱讀 2,101評論 1 1
  • 翻譯自“Auto Layout Guide”。 1 入門 1.1 理解自動布局 自動布局根據(jù)視圖層級結(jié)構(gòu)中視圖上的...
    lakerszhy閱讀 3,569評論 3 26