macOS Development - Auto Layout

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

1. 创建 Mac 工程

   

   图片.png

   默认套路，不需要解释。

2. 创建 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 的不同点，就得以后慢慢去积累了。

3. 添加约束

   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的约束了。

4. 最终效果

   

   图片.png

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

小结

这里简单地说了下 Mac 下的自动布局，至于有没有类似于 iOS 下的 Masnory 的库我也不太清楚，回头继续学习关注下，不过，我觉得原生的在简单封闭后，也是很好使的了。