天天看點

iOS 自動布局 Auto Layout 入門 04 限制的動态效果

前面幾節使用的限制都是通過Interface Builder添加的,這一節我們來看看運作時限制是怎麼樣的。

首先我們删除沒有背景色的那個按鈕

iOS 自動布局 Auto Layout 入門 04 限制的動态效果

添加以下方法到ViewController.m中:

- (IBAction)buttonTapped:(UIButton *)sender
{
    if ([[sender titleForState:UIControlStateNormal] isEqualToString:@"X"])
    {
        [sender setTitle:@"A very long title for this button" forState:UIControlStateNormal];
    }
    else
    {
        [sender setTitle:@"X" forState:UIControlStateNormal];
    }
}
           

這個action的作用是,當按鈕被點選時,修改按鈕的标題。通過Interface Builder,将兩個按鈕都連接配接到這個action上。

程式執行效果如下:

iOS 自動布局 Auto Layout 入門 04 限制的動态效果
iOS 自動布局 Auto Layout 入門 04 限制的動态效果

無論哪一個按鈕的标題更長,界面的布局始終遵循我們設定的限制:

  • 下方的按鈕始終水準居中
  • 下方的按鈕于底部有20個點的間隔
  • 上方的按鈕始終于下方的按鈕左對齊
  • 上方的按鈕與下方的按鈕垂直間距為40

接下來,我們為兩個按鈕添加等寬限制:

iOS 自動布局 Auto Layout 入門 04 限制的動态效果

由于我們之前為按鈕設定了‘Size to Fit Content'屬性,執行程式,點選兩個按鈕,可以看到,兩個按鈕始終以較大的按鈕為參考對象來設定寬度:

iOS 自動布局 Auto Layout 入門 04 限制的動态效果
iOS 自動布局 Auto Layout 入門 04 限制的動态效果
iOS 自動布局 Auto Layout 入門 04 限制的動态效果

我們還可以為某個按鈕添加寬度限制,這個寬度限制會覆寫掉‘Size to Fit Contant'屬性。這樣,兩個按鈕的寬度都變成了我們設定一個固定值:

iOS 自動布局 Auto Layout 入門 04 限制的動态效果

程式執行效果如下,無論我們如何點選按鈕,兩個按鈕的寬度都不會改變:

iOS 自動布局 Auto Layout 入門 04 限制的動态效果