Xib 动态改变约束

有时候，同样的 model 在一个页面不同的状态展示的样式稍有不同，这时候我们就需要在不同的状态下稍微挪动下某个控件，这个挪动有可能从右上变到左下，也有可能是某个中间控件的显示或隐藏，导致底下的控件都需要向上挪动。

鉴于很多动态页面都是根据状态改变的，所以我们在使用Xib绘制cell时就要能灵活的根据状态挪动控件的位置。

如果你还不会使用Xib可以在网络上查找相关资料，非常简单所见即所得，能大大提高开发效率。

接下来看一个例子。

首先，拖两个 View 到界面上 ，对他们进行约束。

如图，上面紫色的 View 固定，我们想办法让底下黑色的View 动态改变。给他一个宽度高度的约束，左边距离父视图15pt , 上面距离紫色视图 15pt .

这是一个状态下的样式，我们把左边和上面的约束取消掉， 选择那个约束，右边属性选择器，取消勾选install。

然后重新设置两条约束，使黑色View在紫色 View的右边。

可以看到，我们设置了一个相对于紫色View水平居中的约束，和左边距离15pt的约束。

然后我们把这些约束，包括黑色View 宽高的约束拖到响应的ViewController中。

// 宽高
@IBOutlet weak var widthConstraint: NSLayoutConstraint!
@IBOutlet weak var heightConstraint: NSLayoutConstraint!
// 底下 uninstall 的约束
@IBOutlet weak var leftMarginConstraint: NSLayoutConstraint!
@IBOutlet weak var topMarginConstraint: NSLayoutConstraint!
// 右边 install 的约束
@IBOutlet weak var viewLeftMarginConstraint: NSLayoutConstraint!
@IBOutlet weak var centerYConstraint: NSLayoutConstraint!
复制代码

然后在最底下放一个按钮来响应改变约束（在实际项目中可能是根据状态改变），这里并对改变状态做一个动画。

@IBAction func doChange(_ sender: Any) {
	if leftMarginConstraint.isActive {
		widthConstraint.constant = 80
		heightConstraint.constant = 80
		leftMarginConstraint.isActive = false
		topMarginConstraint.isActive = false
		viewLeftMarginConstraint.isActive = true
		centerYConstraint.isActive = true
	}else{
		widthConstraint.constant = 100
		heightConstraint.constant = 100
		leftMarginConstraint.isActive = true
		topMarginConstraint.isActive = true
		viewLeftMarginConstraint.isActive = false
		centerYConstraint.isActive = false
	}
	// 使约束生效 （如果不放在动画里 表示立即生效）
	UIView.animate(withDuration: 0.3) {
	  self.view.layoutIfNeeded()
	}
}
复制代码

看下最终的效果。

以上就是如何在Xib中动态改变约束的内容。内容很简单也很实用。

转载于:https://juejin.im/post/5b33a1f4f265da59b02aa05c