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

SwiftiBcker • 于 2015-09-27 00:46:19 +0800 • 最后由 lijy912015-10-11 07:06:31 +0800 8383 阅读

前奏

自从 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 的需求,可以看看这两方法alignBetweenHorizontalalignBetweenVertical

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!
回复: 10
  • gexiao 2015-09-27 01:59:29 +0800

    感觉这玩意在 iPad multitask 上会非常有用。

  • iBcker 2015-09-27 02:41:31 +0800

    @gexiao 手上的mini不支持,还没尝试

  • Deeer 2015-09-27 04:04:07 +0800

    @iBcker #尝试了下感觉还不错,但是可能他的层级关系还没处理好,demo中的不同部分回相互遮盖

  • MiYogurt 2015-10-01 03:44:31 +0800

    :+1: Swift 挺好玩的,不错。就是没那么多时间玩。

  • dugege 2015-10-01 03:54:44 +0800

    @MiYogurt 我最近也开始学,感觉有很多很有意思的地方,但概念好多,目前还有点烧脑子的感觉···估计是我智商不够·· :sweat_smile:

  • MiYogurt 2015-10-04 05:32:23 +0800

    @dugege 哈哈,慢慢来~playground很有意思。正好7天小长假,研究了下ansible,看累了,就换 swift 视频折腾xcode,真希望当初学的第一门是 swift 而不是C。

  • dugege 2015-10-04 05:39:35 +0800

    @MiYogurt C还是挺有用的,不接触指针结构体等基础部分,后面没法深入研究

  • ChenWenhong 2015-10-10 21:57:05 +0800 2

    这哥们写的另外几个库都挺好的。

  • mouseshi 2015-10-11 01:04:13 +0800

    目前还没遇到乱的布局,不过倒是可以试试

  • lijy91 2015-10-11 07:06:31 +0800

    @ChenWenhong 为什么你也在这里!!!

  • 请注意单词拼写,以及中英文排版,参考此页
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`, 更多语法请见这里 Markdown 语法
  • 支持表情,见 Emoji cheat sheet
  • @name 会链接到用户页面,并会通知他
  • 上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jpg, png, gif
Ctrl+Enter