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<NSLayoutConstraint?>? = 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 的庫我也不太清楚，回頭繼續學習關注下，不過，我覺得原生的在簡單封閉後，也是很好使的了。