天天看点

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 约束的动态效果