AutoLayout進階 之 Hugging & Compression Resistance

AutoLayout是在ios6中引入的,極大的簡化了頁面布局,成為xib開發必備神器。然而,想要用好AutoLayout并不是一件簡單的事,其中有二個很實用的約束在各類書籍和資料里都很少提及,那就是hugging 和 compression resistance約束。下面就來說說什么是 hugging 和 compression resistance約束。

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


autoLayout3.png

Hugging約束


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

image

我對UILabel設置了上下左右4個約束(hugging約束是UILabel自帶的,用箭頭表示),由于左右兩邊的設置的約束距離較短,左右兩邊的約束優先級值為1000,大于hugging約束的251,因此,label的寬度并不是正好與文字寬度相等,而是被拉開了一點,如紅色方框所示。
下面我將做一點變化,我將右側的約束的優先值改成250,小于hugging約束,如圖所示:

autoLayout2.png

由于右側的約束優先級為250,小于hugging的約束251,因此,UILabel成功被擠壓,直到正好顯示內容的字體

Compression Resistance約束


如果理解了hugging約束,那么理解起來Compression Resistance約束就不困難了,通俗得講,Compression Resistance約束就是[“有兩個隱形的力將UILabel盡力向外拉,直到剛好顯示出文字為止”]該約束的默認優先級默認為750。正好與hugging約束相反。

autoLayout4.png

我們將約束調整,由于現在設置的約束不足以讓Label顯示出完整內容,因此,UIlabel的內容變成了“...”顯示。下面同樣將右側的約束優先值修改為749,小于Compression Resistance約束默認的750。

autoLayout5.png

可以看到,UILabel成功被“撐開”了,直到完整得顯示出所有內容。

Hugging約束和Compression Resistance約束的實際運用


文章一開始我就講了這個2個約束很有用,但是直到現在還沒有說明其到底有什么用。下面我就來說說這2個約束的實際運用。
在我做項目的時候,產品經理有一個需求,有2個Label,左邊是商品標題,右邊是單價,這兩個Label排成一行,優先顯示單價,左邊顯示不下就換行顯示,而不能用"..."顯示。大致布局大概就像這樣。

autoLayout6.png

一般的解決方法就是通過計算,算出左右兩邊的Label的寬度,再布局,這樣就要寫很多代碼,其實只要通過修改Hugging約束就能解決。

我們要做的,只要把左邊Label的Hugging約束的優先值設為250,小于右邊Label的hugging約束的優先值,再把左邊Label的Line設成0就解決上述要求啦。

最終效果


autoLayout8.png
autoLayout9.png
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容