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

前往主页

原文地址:https://www.cnblogs.com/yaozuopan/p/12142841.html

时间: 2024-10-10 00:12:26

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

IOS开发之自动布局框架设计(二)

[上集剧情概要:上集我们主要剖析了原生的NSLayoutConstraint实现自动布局的方式,我们知道是通过constraintWithItem这个初始化的方法来配备所需要的7个参数,然后通过addConstraint方法将布局添加进去,并且定义了 NSLayoutAttribute,NSLayoutRelation这些枚举] 如果我们自己设计一款布局框架可以怎么设计呢? 1.封装原有的NSLayoutConstraint类,可以将代码的实现更加简洁化.例如:Masonry,SDAutoLay

IOS开发之自动布局框架设计(三)

[上集剧情概要:上集我们主要试着用连式结构写了一个简单地布局的设计的demo,首先通过block方式实现链式调用,然后封装添加布局的约束到block里面,实现了上下左右的简单布局] 好吧,各位观众,接下来抛砖引玉,逐渐去添加一些布局功能的时候到了..... 首先,我们考虑一个问题,因为上集我们主要是默认相对视图为superview,而且都是用默认偏移量constant,并没有倍数关系,那么我们如何加入toItem和multiplier这两个参数呢??? 用什么方式展示给用户更为好的呢??? 思考

IOS开发之自动布局框架设计(四)

[上集剧情概要:上集我们主要实现了一个完整的自动布局的框架,这集我们主要研究下比较流行的开源布局框架Masonry的布局思路] 我们先来看看是如何开始使用Masonry的,一般我们使用这个布局框架的时候,都会调用以下代码..... [self.view1 mas_makeConstraints:^(MASConstraintMaker *make) { make.left.mas_equalTo(50); make.right.mas_equalTo(-50); make.top.mas_equ

资深hacker带大家如何攻破一个网站!超级详细的教学教程

温馨提示:非法利用网络技术可违反计算机信息破坏罪,切勿利用技术违法犯罪. 话不多说今天带大家实战如何轻松拿站 现在我们获取了网站服务器的IP地址为:173.236.138.113 寻找同一服务器上的其它网站,我们使用sameip.org. 我们需要关于你网站的以下信息: DNS records (A, NS, TXT, MX and SOA) Web Server Type (Apache, IIS, Tomcat) Registrar (the company that owns your d

开源一个C#写的Android和IOS都能跑的 打击感强的RPG玩玩。

不废话直接上图 关于下载和打开 没错,我强调过很多次的,Unity3D开发的.  如果你还不懂Unity3D 的基本开发套路,如何打开Unity如何安装Unity这些问题.我建议你先不要索要源代码. 下载后,直接打开这个工程......  然后打开根目录下载ManTuLanSi这个Scence  ,如果你是用PC,就可以按  ASDW开前  来控制前后左右.痛快的打一下怪吧. 源代码齐全吗?? 因为美术资源是别人的,所以实际源代码会有部分美术资源替换了.不过,代码还是这份代码.完全没变. 能商用

如何做一个优雅的人

--无论从事什么职业,我们首先是一个女人或者男人.女人应该像淑女,男人应该像绅士,愿所有的中国人都是淑女和绅士. --这里所说的文化.教养并不是大学生.硕士生或者博士生之类,而是一个人的行为举止中透露出来的素养,这是你们从书本上学不到的东西. --懂得标准,你就可以改变:不懂标准,你就没有信心. --人一开口,我们就知道他的内才有多少,所以,每个人都应该不断地丰富自己的内心世界. --如果你让他感觉到你很关心他,你真的很在乎他的病能不能好,那你就是一个很有修养的医生. 今天,我非常高兴有机会和你

[Android开源]一个非常简单易用用来花式展示二维码样式生成的库QRCodeStyle

类库说明 一个非常简单易用用来花式展示二维码样式生成的库 自由组合二维码样式 使用范例 设置带圆边圈的logo Bitmap logo = BitmapFactory.decodeResource(getResources(), R.mipmap.logo); ImageView logo_iv = (ImageView) findViewById(R.id.logo_circle_space_iv); Bitmap targetBitmap = QRCodeStyle.Builder.buil

【Java&Android开源库代码剖析】のandroid-async-http(如何设计一个优雅的Android网络请求框架,同时支持同步和异步请求)开篇

在<[Java&Android开源库代码剖析]のandroid-smart-image-view>一文中我们提到了android-async-http这个开源库,本文正式开篇来详细介绍这个库的实现,同时结合源码探讨如何设计一个优雅的Android网络请求框架.做过一段时间Android开发的同学应该对这个库不陌生,因为它对Apache的HttpClient API的封装使得开发者可以简洁优雅的实现网络请求和响应,并且同时支持同步和异步请求. 网络请求框架一般至少需要具备如下几个组件:1

iOS超全开源框架、项目和学习资料汇总:UI篇

上下拉刷新控件 1. MJRefresh --仅需一行代码就可以为UITableView或者CollectionView加上下拉刷新或者上拉刷新功能.可以自定义上下拉刷新的文字说明.(推荐) 2. SVPullToRefresh --下拉刷新控件4500+star,值得信赖3. CBStoreHouseRefreshControl --一个效果很酷炫的下拉刷新控件3600+star4. BreakOutToRefresh --一个下拉刷新打砖块的开源 Swift 库,能让用户在等待下拉刷新的时候