前奏
自从 iOS 设备发展到多尺寸屏幕后,适配就一直占开发过程中很大的一部分工作量。这时候就得慢慢脱离传统的 setFrame 模式来设置大小,更多的转用 AutoLayout 来做适配,大幅减少工作~~不过凡事都未必,脑洞大开的人们总是能想出各种各样有意思的点子,今天就给大家介绍一款新动态布局的框架 - Neon
Neon
Neon 是一款非常优雅的 Swift 动态布局框架,它小巧到只有一个文件,好吧,OC怎么写也得两个文件,给跪了··哈哈·· XD
废话不多说,先看个效果图
是不是很帅?看下作者的介绍
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)
填充
有时候如果想 view 填充父类,可以调用 fillSuperview
view.fillSuperview()
or
view1.fillSuperview(left: padding, right: padding, top: padding, bottom: padding)
角对齐
如果想 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)
边对齐
如果想让 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)
边填充
如果想让 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)
相对对齐
设定 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)
对齐并填充
你不知道或者没法指定一个相对视图的大小,但又要兼顾填充和对齐,并且还依赖与相邻的 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)
挤压对齐
如果两个 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)
组合
组合的 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) ```
角对齐组合
``` //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)
```
边对齐组合
``` //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) ```
说了这么多,再回到作者 Demo 的代码,无非就是设定这个和那个对齐,那个和那那个对齐并拉伸,那那个和那那那个咋样咋样···唉哈哈··我是不会告诉你我也没看懂的···・( ̄∀ ̄)・:*:
====
想及时了解 Swift 相关问题、文章、新鲜事,可关注微博 @Swift-CN