Cartography-Swift的自动布局第三方库(官方文档翻译)

Rindia 发布于2019-06-25 14:32 / 2158人阅读

摘要：要注意的是，在必要的情况下会对自动对视图进行重新布局。此外，它提供了一种方便的方法，支持复合属性的设置，因此你可以一次分配多个属性。支持如果你有疑问的话，别犹豫，直接提交。关于由创建并受的项目启发。

源地址:https://github.com/robb/Cartography

使用Cartography，你可以抛开链式语法，使用声明式的代码设置你的自动布局约束!

简而言之，他可以让你将如下的代码：

addConstraint(NSLayoutConstraint(
    item: button1,
    attribute: .Right,
    relatedBy: .Equal,
    toItem: button2,
    attribute: .Left,
    multiplier: 1.0,
    constant: -12.0
))

替换为以下的代码

layout(button1,button2){ button1,button2 in
    button1.right == button2.left - 12

如果你在使用Cartography的过程中遇到困难, 可以联系作者 [Twitter] 或者 [email] .

用法

调用layout方法，传入UIView或NSView类型实例，在闭包中声明各个视图的不同属性之间的约束:

layout(view1, view2) { view1, view2 in
    view1.width   == (view1.superview!.width - 50) * 0.5
    view2.width   == view1.width - 50
    view1.height  == 40
    view2.height  == view1.height
    view1.centerX == view1.superview!.centerX
    view2.centerX == view1.centerX

    view1.top >= view1.superview!.top + 20
    view2.top == view1.bottom + 20
}

对于每个等式或不等式左边的view，Cartography会自动将其translatesAutoresizingMaskIntoConstraints属性设置为false。如果这个view不是受你控制的----比如它是属于一个苹果提供的UIViewController类----你需要在声明约束时对其保持适当的关注。

要注意的是，layout在必要的情况下会对自动对视图进行重新布局。如果你想要自己控制这个布局的步骤的话，你可以用constrain方法来代替它:

constrain(view1) { view1 in
    view1.width  == 100
    view1.height == 100
    view1.center == view.superview!.center
}

UIView.animateWithDuration(0.5, animations: view1.layoutIfNeeded)

约束的替换

你可以获取一个约束组(group)内的多种约束,随后用新的一些约束来替换它们。

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)

为了方便起见，layout和constrain方法都会返回ConstraintGroup实例:

let group = layout(button) { button in
    button.width  == 100
    button.height == 400
}

支持的属性

Cartography支持所有iOS 8和 OS X 10.9内置的属性，如下：

width

height

top

right

bottom

left

leading

trailing

centerX

centerY

baseline

以及iOS的特性

firstBaseline

leftMargin

rightMargin

topMargin

bottomMargin

leadingMargin

trailingMargin

centerXWithinMargins

centerYWithinMargins

edgesWithinMargins

这些属性都可以通过以下运算符来进一步细化:*, /, + and
-。

此外，它提供了一种方便的方法，支持复合属性的设置，因此你可以一次分配多个属性。

layout(view) { view in
    view.size   == view.superview!.size / 2
    view.center == view.superview!.center
}

layout(view) { view in
    view.edges == inset(view.superview!.edges, 20, 20, 40, 20)
}

多个视图对齐

如果你需要让多个视图对齐一个共有的边缘，你可以使用align方法。

layout(view1, view2, view3) { view1, view2, view3 in
    align(top: view1, view2, view3)
}

这相当于view1.top == view2.top; view2.top == view3.top。还可以对top, right bottom, left, leading, trailing,
centerX, centerY 和 baseline进行相似的设置.

视图均匀分布

为了让视图均匀分布，无论是水平的还是垂直的，我们都可以调用distribute 函数:

layout(view1, view2, view3) { view1, view2, view3 in
    distribute(by: 10, horizontally: view1, view2, view3)
}

这相当于 view1.trailing == view2.leading - 10; view2.trailing == view3.leading - 10.

设置优先级

你可以通过~操作符来设置约束的优先级:

layout(view) { view in
    view.width  >= 200 ~ 100
    view.height >= 200 ~ 100
}

获取约束

由于==, >=, <= 和 ~ 生成了 NSLayoutConstraint 实例, 如果你在之后需要用到生成的结果的话，你可以用如下的方法来获取它:

var width: NSLayoutConstraint?

layout(view) { view in
    width = (view.width == 200 ~ 100)
}

要注意的是，复合属性的声明一次返回多个约束:

var constraints: [NSLayoutConstraint]?

layout(view) { view in
    constraints = (view.size == view.superview!.size ~ 100)
}

文档

在这里可以查看文档。更多的信息可以在gh-pages 查看。

支持

如果你有疑问的话，别犹豫，直接提交。

关于Cartography

Cartography由Robb Böhnke创建并受Florian Kugler的[FLKAutoLayout]项目启发。

云服务器服务器托管谷歌自动翻译谷歌自动翻译自动布局第三方库

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/15825.html

Android Studio 提示与技巧（官方文档翻译）

摘要：智能渲染使用智能渲染，中显示快速修复渲染的错误的链接。这将提取从调试的过程相关数据，并显示调试器中的中。根据所选中的目录类型，会提供创建适当的文件类型。支持高分辨率视网膜显示在和。文件快速原型文件，不会创造任何项目文件。这是翻译官方的文档，英语好的可以直接去官方文档查看，英语不好，大家就将就看吧，算是我翻译的第一篇技术文章，因为是个英语渣，技术也渣，所以最近在学英语，就尝试着自己来翻...

_Dreams 2019-06-24 19:27 评论0 收藏0
玩转TensorFlow Lite：有道云笔记实操案例分享

摘要：如何进行操作本文将介绍在有道云笔记中用于文档识别的实践过程，以及都有些哪些特性，供大家参考。年月发布后，有道技术团队第一时间跟进框架，并很快将其用在了有道云笔记产品中。微软雅黑宋体以下是在有道云笔记中用于文档识别的实践过程。这一两年来，在移动端实现实时的人工智能已经形成了一波潮流。去年，谷歌推出面向移动端和嵌入式的神经网络计算框架TensorFlowLite，将这股潮流继续往前推。Tens...

Hanks10100 2019-04-25 18:25 评论0 收藏0
iOS 学习资料整理

摘要：这份学习资料是为初学者所准备的旨在帮助初学者们快速找到适合自己的学习资料节省他们搜索资料的时间使他们更好的规划好自己的学习路线更快的入门更准确的定位的目前所处的位置该文档会持续更新同时也欢迎更多具有丰富经验的开发者将自己的常用的一些工具学习这份学习资料是为 iOS 初学者所准备的, 旨在帮助 iOS 初学者们快速找到适合自己的学习资料, 节省他们搜索资料的时间, 使他们更好的规划好自...

everfly 2019-06-25 14:13 评论0 收藏0
【超齐全】iOS 学习资料整理

好赶货，收藏。原文iOS 学习资料整理这份学习资料是为 iOS 初学者所准备的, 旨在帮助 iOS 初学者们快速找到适合自己的学习资料, 节省他们搜索资料的时间, 使他们更好的规划好自己的 iOS 学习路线, 更快的入门, 更准确的定位的目前所处的位置. 该文档会持续更新, 同时也欢迎更多具有丰富经验的 iOS 开发者将自己的常用的一些工具, 学习资料, 学习心得等分享上来, 我将定期筛选合...

Flands 2019-06-25 14:15 评论0 收藏0
React项目实战：环境搭建

摘要：官方文档中文翻译构建用户界面的库。官方文档建议学习时以官方文档为准，中文翻译或者第三方作者的教程可以帮助你理清思路会用到的重要知识点我也会进行简明的解释，如遇到错误或者不理解的内容，欢迎实时指出。前言前面提到前端大统一的概念，如果感兴趣，欢迎说说自己的看法，点击前往。Web前端框架层出不穷，不可能面面俱到，这里给个小建议：如果对Weex App感兴趣，应该选择vue框架；如果...

cnio 2019-08-21 17:47 评论0 收藏0