AutoLayout進(jìn)階 之 Hugging & Compression Resistance

AutoLayout是在ios6中引入的,極大的簡(jiǎn)化了頁(yè)面布局洲尊,成為xib開(kāi)發(fā)必備神器远豺。然而,想要用好AutoLayout并不是一件簡(jiǎn)單的事坞嘀,其中有二個(gè)很實(shí)用的約束在各類書(shū)籍和資料里都很少提及躯护,那就是hugging 和 compression resistance約束。下面就來(lái)說(shuō)說(shuō)什么是 hugging 和 compression resistance約束丽涩。

我們可以在這個(gè)位置找到Hugging 和 Compression Resistance約束


autoLayout3.png

Hugging約束


Hugging priority 確定view有多大的優(yōu)先級(jí)阻止自己變大榛做。這么講還是比較抽象,那么用UILabel舉例,通俗的講就是 “有兩個(gè)隱形的力將UILabel盡力向里擠壓检眯,直到剛好顯示出文字為止”
該約束的默認(rèn)優(yōu)先級(jí)為251厘擂。如果還是不明白的話,可以看看下面的例子锰瘸。

image

我對(duì)UILabel設(shè)置了上下左右4個(gè)約束(hugging約束是UILabel自帶的刽严,用箭頭表示),由于左右兩邊的設(shè)置的約束距離較短避凝,左右兩邊的約束優(yōu)先級(jí)值為1000舞萄,大于hugging約束的251,因此管削,label的寬度并不是正好與文字寬度相等倒脓,而是被拉開(kāi)了一點(diǎn),如紅色方框所示含思。
下面我將做一點(diǎn)變化崎弃,我將右側(cè)的約束的優(yōu)先值改成250,小于hugging約束含潘,如圖所示:

autoLayout2.png

由于右側(cè)的約束優(yōu)先級(jí)為250饲做,小于hugging的約束251,因此遏弱,UILabel成功被擠壓盆均,直到正好顯示內(nèi)容的字體

Compression Resistance約束


如果理解了hugging約束漱逸,那么理解起來(lái)Compression Resistance約束就不困難了泪姨,通俗得講,Compression Resistance約束就是[“有兩個(gè)隱形的力將UILabel盡力向外拉饰抒,直到剛好顯示出文字為止”]該約束的默認(rèn)優(yōu)先級(jí)默認(rèn)為750肮砾。正好與hugging約束相反。

autoLayout4.png

我們將約束調(diào)整循集,由于現(xiàn)在設(shè)置的約束不足以讓Label顯示出完整內(nèi)容唇敞,因此,UIlabel的內(nèi)容變成了“...”顯示咒彤。下面同樣將右側(cè)的約束優(yōu)先值修改為749疆柔,小于Compression Resistance約束默認(rèn)的750。

autoLayout5.png

可以看到镶柱,UILabel成功被“撐開(kāi)”了旷档,直到完整得顯示出所有內(nèi)容。

Hugging約束和Compression Resistance約束的實(shí)際運(yùn)用


文章一開(kāi)始我就講了這個(gè)2個(gè)約束很有用歇拆,但是直到現(xiàn)在還沒(méi)有說(shuō)明其到底有什么用鞋屈。下面我就來(lái)說(shuō)說(shuō)這2個(gè)約束的實(shí)際運(yùn)用范咨。
在我做項(xiàng)目的時(shí)候,產(chǎn)品經(jīng)理有一個(gè)需求厂庇,有2個(gè)Label,左邊是商品標(biāo)題渠啊,右邊是單價(jià),這兩個(gè)Label排成一行权旷,優(yōu)先顯示單價(jià)替蛉,左邊顯示不下就換行顯示,而不能用"..."顯示拄氯。大致布局大概就像這樣躲查。

autoLayout6.png

一般的解決方法就是通過(guò)計(jì)算,算出左右兩邊的Label的寬度译柏,再布局镣煮,這樣就要寫(xiě)很多代碼,其實(shí)只要通過(guò)修改Hugging約束就能解決鄙麦。

我們要做的典唇,只要把左邊Label的Hugging約束的優(yōu)先值設(shè)為250,小于右邊Label的hugging約束的優(yōu)先值黔衡,再把左邊Label的Line設(shè)成0就解決上述要求啦蚓聘。

最終效果


autoLayout8.png
autoLayout9.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末腌乡,一起剝皮案震驚了整個(gè)濱河市盟劫,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌与纽,老刑警劉巖侣签,帶你破解...
    沈念sama閱讀 217,657評(píng)論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異急迂,居然都是意外死亡影所,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,889評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門僚碎,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)猴娩,“玉大人,你說(shuō)我怎么就攤上這事勺阐【碇校” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 164,057評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵渊抽,是天一觀的道長(zhǎng)蟆豫。 經(jīng)常有香客問(wèn)我,道長(zhǎng)懒闷,這世上最難降的妖魔是什么十减? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,509評(píng)論 1 293
  • 正文 為了忘掉前任栈幸,我火速辦了婚禮,結(jié)果婚禮上帮辟,老公的妹妹穿的比我還像新娘速址。我一直安慰自己,他們只是感情好由驹,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,562評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布壳繁。 她就那樣靜靜地躺著,像睡著了一般荔棉。 火紅的嫁衣襯著肌膚如雪闹炉。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 51,443評(píng)論 1 302
  • 那天润樱,我揣著相機(jī)與錄音渣触,去河邊找鬼。 笑死壹若,一個(gè)胖子當(dāng)著我的面吹牛嗅钻,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播店展,決...
    沈念sama閱讀 40,251評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼养篓,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了赂蕴?” 一聲冷哼從身側(cè)響起柳弄,我...
    開(kāi)封第一講書(shū)人閱讀 39,129評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎概说,沒(méi)想到半個(gè)月后碧注,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,561評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡糖赔,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,779評(píng)論 3 335
  • 正文 我和宋清朗相戀三年萍丐,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片放典。...
    茶點(diǎn)故事閱讀 39,902評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡逝变,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出奋构,到底是詐尸還是另有隱情壳影,我是刑警寧澤,帶...
    沈念sama閱讀 35,621評(píng)論 5 345
  • 正文 年R本政府宣布声怔,位于F島的核電站态贤,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏醋火。R本人自食惡果不足惜悠汽,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,220評(píng)論 3 328
  • 文/蒙蒙 一箱吕、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧柿冲,春花似錦茬高、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,838評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至宿饱,卻和暖如春熏瞄,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背谬以。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,971評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工强饮, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人为黎。 一個(gè)月前我還...
    沈念sama閱讀 48,025評(píng)論 2 370
  • 正文 我出身青樓邮丰,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親铭乾。 傳聞我的和親對(duì)象是個(gè)殘疾皇子剪廉,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,843評(píng)論 2 354

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