自動(dòng)布局第一篇

最近看到一篇博客介紹自動(dòng)布局,順便用SB 簡單快速實(shí)現(xiàn)。下面是博客鏈接http://tutuge.me/2015/05/23/autolayout-example-with-masonry/


例子一:并排兩個(gè)label,寬度由內(nèi)容決定。父級View寬度不夠時(shí),優(yōu)先顯示左邊label的內(nèi)容.

思路可以看博客里面的思路腕窥,主要是Autolayout中的兩個(gè)重要的屬性“Content Compression Resistance”和“Content Hugging”。


效果圖


左邊的Label筛婉,注意紅色箭頭
右邊的Label簇爆,注意比左邊優(yōu)先級低


例子二:四個(gè)ImageView整體居中,可以任意顯示爽撒、隱藏入蛆。上面博客是自己實(shí)現(xiàn)的容器View,其實(shí)我們可以更簡單快速UIStackView來實(shí)現(xiàn)硕勿。


效果圖

思路是四個(gè)ImageView設(shè)置約束寬高哨毁。放進(jìn)UIStackView,然后隱藏或者改變寬度約束為零源武。設(shè)置容器UIStackView 的約束即可扼褪。


每個(gè)Image約束


外層UIStackView的約束

有個(gè)技巧在View動(dòng)畫塊里設(shè)置會(huì)有自然的過渡。


關(guān)鍵代碼

例子三:子View的寬度始終是父級View或者本身的一半(或者任意百分比)粱栖。


效果圖


思路是第一確定一個(gè)View 的寬度话浇,然后View 和 父View 設(shè)置等寬度,然后設(shè)置約束的比例即可闹究。

如果是同一個(gè)View則幔崖,確定高或者寬,然后設(shè)置Aspect Ratio渣淤。


看紅色箭頭


看紅色箭頭

代碼地址:https://github.com/renmoqiqi/AutolayoutDemo

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末赏寇,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子价认,更是在濱河造成了極大的恐慌嗅定,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,265評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件用踩,死亡現(xiàn)場離奇詭異渠退,居然都是意外死亡忙迁,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,078評論 2 385
  • 文/潘曉璐 我一進(jìn)店門智什,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人丁屎,你說我怎么就攤上這事荠锭。” “怎么了晨川?”我有些...
    開封第一講書人閱讀 156,852評論 0 347
  • 文/不壞的土叔 我叫張陵证九,是天一觀的道長。 經(jīng)常有香客問我共虑,道長愧怜,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,408評論 1 283
  • 正文 為了忘掉前任妈拌,我火速辦了婚禮拥坛,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘尘分。我一直安慰自己猜惋,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,445評論 5 384
  • 文/花漫 我一把揭開白布培愁。 她就那樣靜靜地躺著著摔,像睡著了一般。 火紅的嫁衣襯著肌膚如雪定续。 梳的紋絲不亂的頭發(fā)上谍咆,一...
    開封第一講書人閱讀 49,772評論 1 290
  • 那天,我揣著相機(jī)與錄音私股,去河邊找鬼摹察。 笑死,一個(gè)胖子當(dāng)著我的面吹牛倡鲸,可吹牛的內(nèi)容都是我干的港粱。 我是一名探鬼主播,決...
    沈念sama閱讀 38,921評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼旦签,長吁一口氣:“原來是場噩夢啊……” “哼查坪!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起宁炫,我...
    開封第一講書人閱讀 37,688評論 0 266
  • 序言:老撾萬榮一對情侶失蹤偿曙,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后羔巢,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體望忆,經(jīng)...
    沈念sama閱讀 44,130評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡罩阵,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,467評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了启摄。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片稿壁。...
    茶點(diǎn)故事閱讀 38,617評論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖歉备,靈堂內(nèi)的尸體忽然破棺而出傅是,到底是詐尸還是另有隱情,我是刑警寧澤蕾羊,帶...
    沈念sama閱讀 34,276評論 4 329
  • 正文 年R本政府宣布喧笔,位于F島的核電站,受9級特大地震影響龟再,放射性物質(zhì)發(fā)生泄漏书闸。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,882評論 3 312
  • 文/蒙蒙 一利凑、第九天 我趴在偏房一處隱蔽的房頂上張望浆劲。 院中可真熱鬧,春花似錦哀澈、人聲如沸梳侨。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,740評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽走哺。三九已至,卻和暖如春哲虾,著一層夾襖步出監(jiān)牢的瞬間丙躏,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,967評論 1 265
  • 我被黑心中介騙來泰國打工束凑, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留晒旅,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,315評論 2 360
  • 正文 我出身青樓汪诉,卻偏偏與公主長得像废恋,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子扒寄,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,486評論 2 348

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