[快速学会Swift第三方库] Cartography篇

Cartography 是用来声明 Swift 中的 Auto Layout，无需输入任何 stringly 就可设置自己 Auto Layout 的约束声明。

目录

编码之前

导入 Cartography

推荐使用CocoaPods进行导入，CocoaPods是一个负责管理iOS项目中第三方开源库的工具，安装CocoaPods之后使用命令行就能轻松地对所有第三方开源库进行安装和更新，而不需要每次上GitHub去下载。
CocoaPods的安装过程传送门：iOS 9 导入类库全面详尽过程（Ruby安装->CocoaPods安装->导入类库）
手动下载：GitHub-Cartography主页

装好CocoaPods后，修改Podfile文件内容为如下：

source 'https://github.com/CocoaPods/Specs.git'platform :ios, '9.0'use_frameworks!target 'Web' dopod 'Cartography', '~> 0.6.0'endxcodeproj 'Desktop/Web/Web.xcodeproj'

target后面为工程名，最后一行为工程路径(这里的Web是我的工程名)

再执行命令：

$ pod install

其他操作

另外还需要在Target->工程名->Build Settings->Search Paths->User Header Search Paths处添加Cartography所在的目录：

最后在你需要用到Cartography的类中加上：

import Cartography

基本约束

示例代码

    func baseConstrain() {        let view1 = UIView()        let view2 = UIView()        view1.backgroundColor = UIColor.blueColor()        view2.backgroundColor = UIColor.redColor()        self.view.addSubview(view1)        self.view.addSubview(view2)        constrain(view1, view2) { (view1, view2) in            //view宽度等于父视图宽度-50的一半            view1.width == (view1.superview!.width - 50) * 0.5            //view2的宽度等于view1宽度-50            view2.width   == view1.width - 50            //view的高度等于40            view1.height == 40            //view2的高度等于view1的高度            view2.height == view1.height            //view1水平居中            view1.centerX == view1.superview!.centerX            //view2和view1中心水平对齐            view2.centerX == view1.centerX            //view1的顶部离父视图的顶部距离大于20            view1.top >= view1.superview!.top + 20            //view2的顶部离view1的底部距离等于20            view2.top == view1.bottom + 20        }    }

运行结果

替换约束

示例代码

    func replaceConstrain()  {        let view = UIView()        view.backgroundColor = UIColor.blueColor()        self.view.addSubview(view)        constrain(view) { (view) in            view.width == 100            view.height == 100        }        let group = ConstraintGroup()        //设定view位置于左上角        constrain(view, replace: group) { (view) in            view.top == view.superview!.top            view.left == view.superview!.left        }        //设定view位置于右下角        constrain(view, replace: group) { (view) in            view.bottom == view.superview!.bottom            view.right == view.superview!.right        }        //执行动画        UIView.animateWithDuration(0.5, animations: view.layoutIfNeeded)    }

运行结果

可以看到view从左上角移动到右下角，最终如下所示：

复合约束与对齐

示例代码

    func aligning()  {        let view1 = UIView()        let view2 = UIView()        let view3 = UIView()        view1.backgroundColor = UIColor.blueColor()        view2.backgroundColor = UIColor.redColor()        view3.backgroundColor = UIColor.greenColor()        self.view.addSubview(view1)        self.view.addSubview(view2)        self.view.addSubview(view3)        constrain(view1, view2, view3) { (view1, view2, view3) in            //复合约束，view1大小为父视图的1/4，位置居中            view1.size == view1.superview!.size / 4            view1.center == view1.superview!.center            view2.size == view1.size / 2            view3.size == view1.size / 3            //3个view的顶部对齐            align(top: view1, view2, view3)            //3个view水平均匀分布，相邻view之间距离为10            distribute(by: 10, horizontally: view1, view2, view3)        }    }

运行结果

边距

示例代码

   func edge()  {        let view = UIView()        view.backgroundColor = UIColor.blueColor()        self.view.addSubview(view)        constrain(view) { (view) in            //view与父视图的上下左右边距均为20            view.edges == inset(view.superview!.edges, 20, 20, 20, 20)        }    }

运行结果

深入学习

这里列出了最主要的几种约束，如果你希望能够更加深入地学习Cartography，可以前往GitHub-Cartography主页