假如時光倒流，UI元件如何縮放?

autolayout的世界裡，UI元件的位置和大小由constraint決定。然而某些特別的UI元件，像是UILabel, UIButton等，它們的大小卻深受它們所呈現的內容影響。接下來，彼得潘將以信樂團的名曲”假如”，說明UILabel的寬度如何地被歌詞的長短而左右。

1. 加入顯示假如歌詞的UILabel，”加長”按鈕和”縮短”按鈕。

調整UILabel的寬度和位置，使其剛好有三個constraint，距離上邊界，左邊界，右邊界都是標準間距的constraint。

2. 設定label，button和View Controller的連結。(ViewController.h)

@property (weak, nonatomic) IBOutlet UILabel *label;

- (IBAction)lengthenButPressed:(id)sender;

- (IBAction)shortenButPressed:(id)sender;

加長button的touch up inside event連結到lengthenButPressed:，縮短button的touch up inside event連結到shortenButPressed:。

3. 定義加長歌詞的lengthenButPressed:和縮短歌詞的shortenButPressed:。(ViewController.m)

- (IBAction)lengthenButPressed:(id)sender {

    self.label.text = @"假如時光倒流 我能做什麼 找妳沒說的　卻想要的";

}

- (IBAction)shortenButPressed:(id)sender {

    

    self.label.text = @"假如時光倒流";

}

執行結果:

由於被leading和trailing 2個constraint控制著，為了維持和左邊界，右邊界20 points的間距，label的寬度比歌詞佔據的空間寬上許多。當我們點選”加長”，歌詞內容增加了，但是label的寬度卻不為所動，造成我們只看到”找你沒說的　卻”，到底是卻什麼呢?是卻想念的?還是卻深愛的?別再猜了，其實有個神奇的方法，可以讓label擺脫constraint的束縛，增加寬度。

切換到label的Size Inspector頁面，將焦點放在它的Content Compression Resistance Priority區塊。此屬性控制著label是否可以隨著內容變多而增加它的尺寸。預設的水平(Horizontal) priority是750，然而控制著label和右邊界 20 points間距的constraint預設的priority卻是大於750的1000，所以label輸了，無法拉長它的寬度。

讓我們偷偷地將此constraint的priority從1000降為500。現在label的Horizontal Content Compression Resistance Priority 750遠大於500，因此現在它做主，它是老大，可以自由的拉長，不受constraint的限制。

執行結果:

label順利地拉長，終於可以看到完整的歌詞了，原來答案是”卻想要的”呀! 

讓我們回過頭來看看縮短歌詞的例子。點選縮短按鈕後，歌詞變短了。原來就算時光倒留，還是改變不了label臃腫的事實呀。

有沒有什麼靈丹妙藥可以讓label減肥，剛剛好寬度就等於呈現的文字內容呢?其實是有的，答案就藏在label的Content Hugging Priority裡。此屬性控制著label是否可以隨著內容變少而縮小它的尺寸。預設的水平(Horizontal) priority是250，然而控制著label和右邊界 20 points間距的constraint目前卻是大於250的500，所以label輸了，無法縮短它的寬度。

讓我們再一次地將constraint的priority調降，讓它變為100。現在label的Horizontal Content Hugging Priority 250遠大於100，因此現在它做主，它是老大，可以自由的縮短，不再受constraint的限制。

執行結果:

當歌詞縮短，時光倒留，label真的變苗條了(變短)

  

最後，如果嫌看歌詞不過癮，不如好好來聽聽信樂團演唱的假如吧。