ElegantSnap 一个优雅的，易用的iOS/tvOS/macOS自动布局框架, 超级详细的使用教程，多视图水平等宽/垂直等高排列

Posted 2020-11-24 HarveyCC

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)
    }
}

前往主页