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真的變苗條了(變短)
最後,如果嫌看歌詞不過癮,不如好好來聽聽信樂團演唱的假如吧。
沒有留言:
張貼留言