一个有意思的 Swift 动态布局框架 Neon

前奏

自从 iOS 设备发展到多尺寸屏幕后，适配就一直占开发过程中很大的一部分工作量。这时候就得慢慢脱离传统的 setFrame 模式来设置大小，更多的转用 AutoLayout 来做适配，大幅减少工作~~不过凡事都未必，脑洞大开的人们总是能想出各种各样有意思的点子，今天就给大家介绍一款新动态布局的框架 - Neon

Neon

Neon 是一款非常优雅的 Swift 动态布局框架，它小巧到只有一个文件，好吧，OC怎么写也得两个文件，给跪了··哈哈·· XD

废话不多说，先看个效果图

swiftcn-Neon-demo

是不是很帅？看下作者的介绍

Neon 是围绕如何让用户界面设计得更自然的框架 - 主视图锚定在屏幕两侧/边角，辅助视图被排列在相对于他的位置上。通过膨胀和收缩，以填补屏幕，使界面大小屏幕的手机和平板上都能方便快捷的动态布局。没有更多的限制，没有太多古怪的语法格式。没有的自动布局的约束，巴拉巴拉省略一万字···

目前 Neon 还处于 beta 阶段，不过其新颖的模式很讨人喜欢，纯代码布局，设定主要视图（图中中间鼠标拖动的视图）和辅助视图（随着拖动被压缩的视图）即可完成视图依赖的设定，来我们看下 Demo 里的主要布局代码

anchorView.groupInCorner(group: .Vertical, views: [view11, view12, view13], inCorner: .TopRight, padding: 10, width: 40, height: 40) view1.alignAndFillWidth(align: .ToTheRightMatchingTop, relativeTo: anchorView, padding: 10, height: 50) containerView.groupAndAlign(group: .Horizontal, andAlign: .UnderMatchingLeft, views: [view2, view3, view4], relativeTo: view1, padding: 10, width: 60, height: 60) view5.alignAndFillWidth(align: .ToTheRightMatchingTop, relativeTo: view4, padding: 10, height: 60) view6.alignAndFill(align: .UnderMatchingLeft, relativeTo: view2, padding: 10) view7.alignAndFillHeight(align: .AboveMatchingRight, relativeTo: view1, padding: 10, width: 60) view8.alignAndFillWidth(align: .ToTheLeftMatchingTop, relativeTo: view7, padding: 10, height: 70) view9.alignBetweenVertical(align: .UnderMatchingLeft, primaryView: view8, secondaryView: anchorView, padding: 10, width: 100) view10.alignBetweenHorizontal(align: .ToTheRightMatchingTop, primaryView: view9, secondaryView: view7, padding: 10, height: view9.height()) view14.anchorInCorner(.BottomLeft, xPad: 10, yPad: 10, width: 100, height: 100) view15.alignBetweenVertical(align: .UnderMatchingLeft, primaryView: view9, secondaryView: view14, padding: 10, width: 50) view16.alignBetweenHorizontal(align: .ToTheRightMatchingBottom, primaryView: view14, secondaryView: view6, padding: 10, height: 40) view17.alignBetweenHorizontal(align: .ToTheRightMatchingTop, primaryView: view15, secondaryView: anchorView, padding: 10, height: 100) view18.alignBetweenVertical(align: .UnderMatchingLeft, primaryView: anchorView, secondaryView: view16, padding: 10, width: anchorView.width()) view19.alignBetweenHorizontal(align: .ToTheRightMatchingTop, primaryView: view14, secondaryView: view18, padding: 10, height: 50) view20.alignBetweenVertical(align: .UnderCentered, primaryView: view17, secondaryView: view19, padding: 10, width: view17.width())

(* Ŏ∀Ŏ)･;ﾞ.:’;、

妈呀，什么鬼，完全看不懂？其实我也是···我们先来看点基础的···

居中

设定 view 在 superview 的中心，只要调用 anchorInCenter

view1.anchorInCenter(width: size, height: size)

swiftcn-Neon-anchorincenter

填充

有时候如果想 view 填充父类，可以调用 fillSuperview

view.fillSuperview() or view1.fillSuperview(left: padding, right: padding, top: padding, bottom: padding)

swiftcn-Neon-fillsuperview

角对齐

如果想 view 相对于 superview 固定于某个角，例如右上角，可以尝试用anchorInCorner,并传入要对齐哪个角的参数

view1.anchorInCorner(.TopLeft, xPad: padding, yPad: padding, width: size, height: size) view2.anchorInCorner(.TopRight, xPad: padding, yPad: padding, width: size, height: size) view3.anchorInCorner(.BottomLeft, xPad: padding, yPad: padding, width: size, height: size) view4.anchorInCorner(.BottomRight, xPad: padding, yPad: padding, width: size, height: size)

swiftcn-Neon-anchorInCorner

边对齐

如果想让 view 相对于 superview 的某一边依靠对齐，可以用anchorToEdge,例如：

view1.anchorToEdge(.Top, padding: padding, width: size, height: size) view2.anchorToEdge(.Left, padding: padding, width: size, height: size) view3.anchorToEdge(.Bottom, padding: padding, width: size, height: size) view4.anchorToEdge(.Right, padding: padding, width: size, height: size)

swiftcn-Neon-anchorToEdge

边填充

如果想让 view 相对于 superview 的某一边对齐并填拉伸充，可以用anchorAndFillEdge,对应代码

view1.anchorAndFillEdge(.Top, xPad: padding, yPad: padding, otherSize: size) view2.anchorAndFillEdge(.Bottom, xPad: padding, yPad: padding, otherSize: size) view3.anchorAndFillEdge(.Left, xPad: padding, yPad: padding, otherSize: size) view4.anchorAndFillEdge(.Right, xPad: padding, yPad: padding, otherSize: size)

swiftcn-Neon-anchorAndFillEdge

相对对齐

设定 view 相对于目标 anchorView 对齐（不再是superview），可以用align

view1.align(.AboveMatchingLeft, relativeTo: anchorView, padding: padding, width: size, height: size) view2.align(.AboveCentered, relativeTo: anchorView, padding: padding, width: size, height: size) view3.align(.AboveMatchingRight, relativeTo: anchorView, padding: padding, width: size, height: size) view4.align(.ToTheRightMatchingTop, relativeTo: anchorView, padding: padding, width: size, height: size) view5.align(.ToTheRightCentered, relativeTo: anchorView, padding: padding, width: size, height: size) view6.align(.ToTheRightMatchingBottom, relativeTo: anchorView, padding: padding, width: size, height: size) view7.align(.UnderMatchingRight, relativeTo: anchorView, padding: padding, width: size, height: size) view8.align(.UnderCentered, relativeTo: anchorView, padding: padding, width: size, height: size) view9.align(.UnderMatchingLeft, relativeTo: anchorView, padding: padding, width: size, height: size) view10.align(.ToTheLeftMatchingBottom, relativeTo: anchorView, padding: padding, width: size, height: size) view11.align(.ToTheLeftCentered, relativeTo: anchorView, padding: padding, width: size, height: size) view12.align(.ToTheLeftMatchingTop, relativeTo: anchorView, padding: padding, width: size, height: size) swiftcn-Neon-align

对齐并填充

你不知道或者没法指定一个相对视图的大小，但又要兼顾填充和对齐，并且还依赖与相邻的 view。结合所有前面讨论的不同对齐类型，我们可以定义更加复杂的依赖：

view2.alignAndFillWidth(align: .ToTheRightMatchingTop, relativeTo: view1, padding: padding, height: size / 2.0) view4.alignAndFillHeight(align: .AboveCentered, relativeTo: view3, padding: padding, width: size / 2.0) view6.alignAndFill(align: .ToTheLeftMatchingTop, relativeTo: view5, padding: padding) swiftcn-Neon-alignAndFillWidth

挤压对齐

如果两个 view 夹着中间一个 view 的需求，可以看看这两方法alignBetweenHorizontal和alignBetweenVertical

view1.alignBetweenHorizontal(align: .ToTheRightMatchingTop, primaryView: anchorViewA, secondaryView: anchorViewB, padding: padding, height: size) view2.alignBetweenVertical(align: .UnderCentered, primaryView: anchorViewB, secondaryView: anchorViewD, padding: padding, width: size) view3.alignBetweenHorizontal(align: .ToTheLeftMatchingBottom, primaryView: anchorViewD, secondaryView: anchorViewC, padding: padding, height: size) view4.alignBetweenVertical(align: .AboveMatchingRight, primaryView: anchorViewC, secondaryView: anchorViewA, padding: padding, width: size)

swiftcn-Neon-align_between_fill

组合

组合的 api 有点类似上面地用法，不过是组成一个组后做的相对依赖，不废话，直接贴代码

居中对齐组合

``` ///groupInCenter

anchorViewA.groupInCenter(group: .Horizontal, views: [view1, view2, view3], padding: padding, width: size, height: size) anchorViewB.groupInCenter(group: .Vertical, views: [view4, view5, view6], padding: padding, width: size, height: size) ```

swiftcn-Neon-group_in_center

角对齐组合

``` //groupInCorner

anchorViewA.groupInCorner(group: .Horizontal, views: [view1, view2, view3], inCorner: .TopLeft, padding: padding, width: size, height: size) anchorViewB.groupInCorner(group: .Vertical, views: [view4, view5, view6], inCorner: .BottomRight, padding: padding, width: size, height: size)

```

swiftcn-Neon-group_in_corner

边对齐组合

``` //groupAgainstEdge

anchorViewA.groupAgainstEdge(group: .Horizontal, views: [view1, view2, view3], againstEdge: .Left, padding: padding, width: size, height: size) anchorViewB.groupAgainstEdge(group: .Vertical, views: [view4, view5, view6], againstEdge: .Bottom, padding: padding, width: size, height: size) ```

swiftcn-Neon-group_in_center

说了这么多，再回到作者 Demo 的代码，无非就是设定这个和那个对齐，那个和那那个对齐并拉伸，那那个和那那那个咋样咋样···唉哈哈··我是不会告诉你我也没看懂的···・(￣∀￣)・:*:

====

想及时了解 Swift 相关问题、文章、新鲜事，可关注微博 @Swift-CN

file

本帖已被设为精华帖！

本帖已被设为社区 Wiki！

一个有意思的 Swift 动态布局框架 Neon

前奏