iOS开发-(自动布局全解)

interfaceBuilder 自动布局的约束

假设在xib中放入一个textview,那我们需要让它在屏幕上完全显示。

设置textview的绝对位置,在iPhone4上一点对应2个像素,而在iphone6或者是在iphone6s上对应的将是3个像素,如是进行横竖屏切换,显然iphone4的像素显然就不合适了

iOS开发-(自动布局全解)_第1张图片
textview.png

如何对控件添加约束

其实苹果默认识对每一个控件进行自动的auto layout ,trait variations 的,只是这种默认的视图大小是600*600的尺寸,显然这个大小也是不合适的

iOS开发-(自动布局全解)_第2张图片
系统默认的布局.png

使用约束布局一个界面

*注意点一:为textvie w添加约束后,就不可以在设置控件的frame。以后的动画也需要根据约束进行操作。

*注意点二:每一条约束就相当于一个等式

iOS开发-(自动布局全解)_第3张图片
设置控件的约束.png

改变约束的高度

iOS开发-(自动布局全解)_第4张图片
设置约束的高度.png

在view上放置一个label,为 label添加约束,右键label拖向view控件,松手。

注意点:蓝色的指示线代表正常的约束,橘黄色的约束代表的是约束被破坏了。

iOS开发-(自动布局全解)_第5张图片
破坏的约束视图.png

解决办法:

iOS开发-(自动布局全解)_第6张图片
解决png

此时,label于view之间约束的关系为:

iOS开发-(自动布局全解)_第7张图片
label于vie w约束的关系.png

修改label的center的位置

iOS开发-(自动布局全解)_第8张图片
修改label的位置约束.png

为vie w添加一个约束,为but ton添加约束

注意点:添加同级约束,label和button之间约束时,仍然是从lab e l右键拖至label,松手
注意点2:修改同级约束的值,仍然是相同的做法,而此时,我们要的是label按照label进行对齐。因此,first iterm应该是button,seconditerm应该是label

为控制器视图添加一个tabelview,设置约束

注意点:此时的ta be view 设置的top bottom属性都是根据它最近的控件进行的设置。left right属性是相对于父视图进行的设置

iOS开发-(自动布局全解)_第9张图片
ta be view注意点视图.png

自动布局的方法就这样了,接下来就是如何利用约束创建动画

让autolayout正常工作,我们不可以直接的操作视图的frame属性,只可以利用约束创建autolayout动画

首先做一个点击button按钮,让view的高度变化,再次点击button,高度返回原来的值。
创建一个NSLayoutConstraint属性并关联导航的高度约束
@IBOutlet var menuHeightConstraint : NSLayoutConstraint!

iOS开发-(自动布局全解)_第10张图片
关联高度.png

@IBAction func actionToggleMenu(_ sender: Any) { isMenuOpen = !isMenuOpen menuHeightConstraint.constant = isMenuOpen ? 200.0 : 60.0 titleLabel.text = isMenuOpen ? "select iterm" : "packing list" }
注意点:我们修改了约束后,视图的布局并不会立即进行刷新,重绘。只是进行一次标记,会在之后的时间点进行重绘。这个时间点就是在调用layoutifneed方法之后。
核心代码:
UIView.animate(withDuration: 1.0, delay: 0.0, usingSpringWithDamping: 0.4, initialSpringVelocity: 0.4, options: .curveEaseInOut, animations: { () -> Void in self.view.layoutIfNeeded()// }, completion: nil) }

接下来就是让button按钮旋转一个角度:
let angle = self.isMenuOpen ? CGFloat(M_PI_4) : 0.0 self.buttonMenu.transform = CGAffineTransform(rotationAngle: angle)

查看一个控件所有的约束
for con in (titleLabel.superview?.constraints)! { print("->\(con.description)") }
点击button的时候让title label可以向左移动100个点,首先应该从constraints属性中找出这个label,改变它在x轴上的约束
for constraint in titleLabel.superview!.constraints { if constraint.firstItem as? NSObject == titleLabel && constraint.firstAttribute == .centerY { // constraint.constant = isMenuOpen ? 10 : 0.0 } }

那么怎样通过约束修改创建动画呢,可以为每个约束分配一个标示,可以更好地对约束进行管理

iOS开发-(自动布局全解)_第11张图片
约束标示.png

if constraint.identifier == "TitleCenterY" { constraint.isActive = false; //移除之前的约束,需要添加一个新的约束 let newConstraint = NSLayoutConstraint(item: titleLabel, attribute: .centerY, relatedBy: .equal, toItem: titleLabel.superview, attribute: .centerY, multiplier: isMenuOpen ? 0.67 : 1.0, constant: 5.0) newConstraint.identifier = "TitleCenterY" newConstraint.isActive = true continue }
运行效果:

iOS开发-(自动布局全解)_第12张图片
运行效果.gif

下载地址

你可能感兴趣的:(iOS开发-(自动布局全解))