macOS|macOS Development - Auto Layout macOSDevelopment-AutoLayout

最近不玩王者农药后，闲来就觉得得无聊，为打发时间，研究下 Mac 应用开发，不管是 iOS 开发，还是 Mac，正常套路下都是先学界面布局，说到界面，那就不得不说 Auto Layout 了，下面就开搞一个最简单的自动布局 Demo：

【macOS|macOS Development - Auto Layout】创建 Mac 工程

文章图片
图片.png 默认套路，不需要解释。
创建 View

override func viewDidLoad() { super.viewDidLoad() let otherView = NSView(frame: .zero) otherView.wantsLayer = true otherView.layer?.backgroundColor = NSColor.blue.cgColor self.view.addSubview(otherView) }

在 iOS 中创建 View 是用 UIView，在 Mac 中，则使用的是 NSView，其实套路很明显，在 iOS 中是 UI 开头的，在 Mac 下就换成 NS 开头就可以。这里不说全部，只说很多一部分都是这样。看上面代码，Mac 下得通过 view.layer 来设置展示效果，对于和 iOS 的不同点，就得以后慢慢去积累了。
添加约束

class ViewController: NSViewController { override func viewDidLoad() { super.viewDidLoad() let otherView = NSView(frame: .zero) otherView.wantsLayer = true otherView.layer?.backgroundColor = NSColor.blue.cgColor otherView.translatesAutoresizingMaskIntoConstraints = false view.addConstraint(_YHLayoutConstraintMake(otherView, .left, .equal, view, .left, 10)) view.addConstraint(_YHLayoutConstraintMake(otherView, .right, .equal, view, .right, -10)) view.addConstraint(_YHLayoutConstraintMake(otherView, .top, .equal, view, .top, 10)) view.addConstraint(_YHLayoutConstraintMake(otherView, .bottom, .equal, view, .bottom, -10)) self.view.addSubview(otherView) } }@inline(__always) internal func _YHLayoutConstraintMake(_ item: AnyObject, _ attr1: NSLayoutAttribute, _ related: NSLayoutRelation, _ toItem: AnyObject? = nil, _ attr2: NSLayoutAttribute = .notAnAttribute, _ constant: CGFloat = 0, priority: NSLayoutPriority = 1000, multiplier: CGFloat = 1, output: UnsafeMutablePointer? = nil) -> NSLayoutConstraint { let c = NSLayoutConstraint(item:item, attribute:attr1, relatedBy:related, toItem:toItem, attribute:attr2, multiplier:multiplier, constant:constant) c.priority = priority if output != nil { output?.pointee = c } return c }

这里我们直接使用 NSLayoutConstraint 来进行自动布局，原生的自动布局写法有点烦琐，所以在使用前对它进行简单的封闭，详细就看上面的 _YHLayoutConstraintMake 方法，实现了这个全局方法后，添加约束时就会显得比较简单了：

otherView.translatesAutoresizingMaskIntoConstraints = false view.addConstraint(_YHLayoutConstraintMake(otherView, .left, .equal, view, .left, 10)) view.addConstraint(_YHLayoutConstraintMake(otherView, .right, .equal, view, .right, -10)) view.addConstraint(_YHLayoutConstraintMake(otherView, .top, .equal, view, .top, 10)) view.addConstraint(_YHLayoutConstraintMake(otherView, .bottom, .equal, view, .bottom, -10))

这样就可以给 otherView 添加距离 View 上下左右边距为10的约束了。
最终效果

文章图片
图片.png 因为是自动布局，所以不管 Window 怎么拉伸，otherView 相对于 Window 的上下左右边距都是10。