忍者刘米米

iOS界面动画教程之自动布局

效果图

为view设置约束

为标签设置约束(相对父视图)

水平居中+垂直居中

press it with drag to view

橘黄线条意味着与实际显示有差异

  1. 橘黄实线。当前位置
  2. 橘黄虚线。应该所在的位置

标签下移5pt

在约束里的constant里修改

为菜单按钮设置约束

相对父视图的右侧间隔

press it with drag to view

与标签水平对齐

press it with drag to label

更新frame

为tableView设置约束

四周边界

更新frame

拖入tableViewCell并设置id

IB约束与代码中的关联

代码

@IBOutlet var menuHeightConstraint:NSLayoutConstraint!

步骤

点击菜单view –>选择右侧的高度约束 –>选择其connect属性 –>drag new reference outlet to ViewController

打印所有约束

@IBAction func actionToggleMenu(sender: AnyObject) {

    //打印所有约束
    for con in titleLabel.superview!.constraints {
        print(" -> \(con.description) ")
    }
}

为IB中的约束设置Id

选择对应的约束 –> 在Identifier里设置

总结

  1. Pin设置约束:使用pin设置的约束是。Spacing to nearest neighbor。与最近的UI元素间隔
  2. 使用auto layout,不能在代码里设置bounds,frame等属性