2013年2月13日 星期三

假如時光倒流,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真的變苗條了(變短)
  



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


沒有留言:

張貼留言