ElegantSnap 一個優雅的，易用的iOS/tvOS/macOS自動佈局框架, 超級詳細的使用教程，多視圖水平等寬/垂直等高排列

ElegantSnap

ElegantSnap(Base on SnapKit) to make Auto Layout easy and elegant on both iOS and OS X.

基於SnapKit, 用法簡潔優雅,可運行在iOS、tvOS、macOS上自動佈局庫

Requirements / 使用條件

• iOS 10.0+ / Mac OS X 10.12+ / tvOS 10.0+
• Xcode 9.0+
• Swift 5.0+

Installation / 安裝

CocoaPods

pod 'ElegantSnap'

Carthage

github "ZuopanYao/ElegantSnap"

Manually / 手動安裝

If you prefer not to use either of the aforementioned dependency managers, you can integrate SnapKit into your project manually.

若是您不喜歡以上管理依賴庫的方式，則能夠手動將 ElegantSnap 集成到項目中。

Usage / 使用

Compare with SnapKit / 與 SnapKit 比較

ElegantSnap	SnapKit
aView.make([.top()]) // aView.make([.top(nil, nil)]) // aView.make([.top(nil)])	aView.snp.makeConstraints { (make) in     make.top.equalToSuperview() }
aView.make([.top(20)]) // aView.make([.top(nil, 20)])	aView.snp.makeConstraints { (make) in     make.top.equalToSuperview().offset(20) }
aView.make([.top(base.snp.bottom)]) // aView.make([.top(base.snp.bottom, nil)])	aView.snp.makeConstraints { (make) in     make.top.equalTo(base.snp.bottom) }
aView.make([.top(base.snp.bottom, 20)])	aView.snp.makeConstraints { (make) in     make.top.equalTo(base.snp.bottom).offset(20) }
...	...
aView.make([.width()]) // aView.make([.width(nil)])	aView.snp.makeConstraints { (make) in     make.top.equalToSuperview() }
aView.make([.width(200)])	aView.snp.makeConstraints { (make) in     make.width.equalTo(200) }
aView.make([.width(base.snp.width)])	aView.snp.makeConstraints { (make) in     make.width.equalTo(base.snp.width) }
...	...

Quick Start / 快速上手

Example 1 / 示例 1

import ElegantSnap

class ViewController: NSViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let aView = NSView()
        view.addSubview(aView, constraints: [.top(), .leading(), .width(200), .height(400)])
        
        // view.addSubview(aView)
        // aView.make([.top(), .leading(), .width(200), .height(400)])
    }
}

equal to / 等同於

import SnapKit

class ViewController: NSViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let aView = NSView()
        view.addSubview(aView)
                
        aView.snp.makeConstraints { (make) in
            make.top.equalToSuperview()
            make.leading.equalToSuperview()
            make.width.equalTo(200)
            make.height.equalTo(400)
        }
    }
}

Example 2 / 示例 2

import ElegantSnap

class ViewController: NSViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let aView = NSView()
        view.addSubview(aView, constraints: [.top(), .leading(), .width(200), .height(400)])
        
        let myView = NSView()
        view.addSubview(myView, constraints: [.top(aView.snp.bottom, 20), .leading(), .width(300), .height(aView.snp.height)])
    }
    
}

equal to / 等同於

import SnapKit

class ViewController: NSViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let aView = NSView()
        view.addSubview(aView)
                
        aView.snp.makeConstraints { (make) in
            make.top.equalToSuperview()
            make.leading.equalToSuperview()
            make.width.equalTo(200)
            make.height.equalTo(400)
        }
        
        let myView = NSView()
        view.addSubview(myView)
        
        myView.snp.makeConstraints { (make) in
            make.top.equalTo(aView.snp.bottom).offset(20)
            make.leading.equalToSuperview()
            make.width.equalTo(300)
            make.height.equalTo(aView.snp.height)
        }
    }
}

多視圖排列

多個View等寬水平排列

import ElegantSnap

class ViewController: NSViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
                
        let aView = NSView()
        aView.wantsLayer = true
        aView.layer?.backgroundColor = NSColor.red.cgColor
        
        let bView = NSView()
        bView.wantsLayer = true
        bView.layer?.backgroundColor = NSColor.blue.cgColor
        
        let cView = NSView()
        cView.wantsLayer = true
        cView.layer?.backgroundColor = NSColor.black.cgColor
        
        let dView = NSView()
        dView.wantsLayer = true
        dView.layer?.backgroundColor = NSColor.purple.cgColor
        
        view.addSubview([aView, bView, cView, dView],
                        constraints: [.height(80), .top(20)], spacing: (10, -10, 20), direction: .horizontal)
    }
}

多個View等高垂直排列

import ElegantSnap

class ViewController: NSViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
                
        let aView = NSView()
        aView.wantsLayer = true
        aView.layer?.backgroundColor = NSColor.red.cgColor
        
        let bView = NSView()
        bView.wantsLayer = true
        bView.layer?.backgroundColor = NSColor.blue.cgColor
        
        let cView = NSView()
        cView.wantsLayer = true
        cView.layer?.backgroundColor = NSColor.black.cgColor
        
        let dView = NSView()
        dView.wantsLayer = true
        dView.layer?.backgroundColor = NSColor.purple.cgColor
        
        view.addSubview([aView, bView, cView, dView],
                        constraints: [.width(80), .leading(20)], spacing: (10, -10, 20), direction: .vertical)
    }
}

前往主頁