开源UI界面布局框架MyLayout1.9发布

2020-04-17 01:44:44 蜻蜓队长

MyLayout是一套功能全面的iOS开源UI界面布局框架。它囊括了前端所有流行的界面布局技术和解决方案,同时具有如下七大特点:

  • 功能强大。它可以减少我们在开发UI界面时所花费的时间以及减少需要适配多种设备而所消耗的时间。实践表明使用MyLayout进行界面布局时可以减少几乎50%的工作量。

  • 性能优越。MyLayout内部实现是基于frame计算来完成布局的,所以同等界面下性能是AutoLayout的5倍左右,因此复杂界面选择MyLayout将是最佳实践。

  • 布局体系丰富。MyLayout提供了iOS、Android、HTML/CSS等前端中的所有流行布局实现。因此无论你之前工作在何种平台上都可以选择熟悉的布局类上手进行开发操作。MyLayout还支持从服务器进行动态布局下发的能力。

  • 系统结合紧密。MyLayout可以同时和AutoLayout技术进行结合使用,同时可以用在XIB和Storyboard中进行可视化布局,同时还支持SizeClass技术用于多设备适配处理。

  • 多语言实现。MyLayout提供了OC语言版本的实现,同时也提供了Swift语言版本的实现:TangramKit。二者的语法和使用方式相似,您可以任意选择一种语言进行代码布局。

  • 国际化支持。MyLayout支持LTR和RTL两种方向的布局,其中的RTL模式可以用来支持希伯来语系的布局方式。

  • 无版本限制。MyLayout并没有操作系统版本上的使用限制,理论上它最低甚至可以支持到iOS5.0。

下面的表格列出的是MyLayout所提供的九大布局类所实现的功能以及和其它系统的对标能力:

布局类名 功能介绍 对标功能
MyLinearLayout 线性布局
提供视图依次从上往下或者从左往右进行单行单列排列的能力
iOS:UIStackView
Android:LinearLayout
Flutter:Row、Column
SwiftUI:HStack、VStack
MyFloatLayout 浮动布局:
提供视图通过上下左右浮动停靠而进行排列布局的能力
CSS: float
MyFlowLayout 流式布局:
提供视图按垂直或者水平方向依次进行排列并且在满足特定条件(一行内的数量和尺寸值满足约定值)后会换行进行继续排列布局的能力
独有
MyFlexLayout 弹性布局:
提供一个盒内的子视图可以进行伸缩对齐和换行排列并且满足flex规约的布局能力
CSS:flexbox
MyGridLayout 栅格布局:
提供了一种基于单元格进行垂直和水平的无限拆分而进行布局的能力,栅格布局同时具有布局动态下发的能力
CSS:类似Bootstrap、Grid
MyTableLayout 表格布局:
提供基于行列控制的表格布局的能力
Android: TableLayout、GridLayout
HTML: table、tr、td
MyRelativeLayout 相对布局:
提供一种通过设置视图之间的尺寸和位置的相互依赖约束来实现布局的能力
iOS:AutoLayout
Android:RelativeLayout、PercentRelativeLayout、ConstraintLayout
MyFrameLayout 框架布局:
提供视图在父视图上某个方位进行停靠以及层叠摆放布局的能力
Android:FrameLayout
MyPathLayout 路径布局:
提供子视图的位置通过数学函数运算而进行定位排列的能力
独有
SizeClass 提供了根据屏幕尺寸和横竖屏而进行差异布局设置的能力。上述所有布局都支持SizeClass的功能 iOS:SizeClass
CSS: 类似Bootstrap

在这些众多布局类中有些布局类提供了子视图的有规律的布局排列,比如线性布局、流式布局、表格布局、浮动布局、路径布局、弹性布局、栅格布局。有些布局类则提供了通过子视图之间的约束限制来实现布局排列,比如浮动布局、相对布局、框架布局。有些布局类则需要通过多个层次嵌套来实现界面需求,比如线性布局、流式布局、表格布局、弹性布局。有些布局类则可以把界面需求拍平而只用单层排版就能实现所需功能,比如浮动布局、相对布局、栅格布局。有些布局类则可以实现一些特殊排列,比如路径布局可以根据提供的数学函数来实现视图根据特定路径曲线来进行排列展示。有些布局类则可以提供从服务器进行动态下发以及用JSON进行布局描述的能力,比如栅格布局。有些布局类则可以实现和HTML/CSS对标的能力,比如浮动布局和弹性布局。因此在实现界面需求时,我们可以灵活运用。在选择布局时我将使用布局类的优先级列出来,供大家参考:


浮动布局->流式布局->线性布局->弹性布局->栅格布局->相对布局->框架布局->表格布局->路径布局


您可以从如下地址下载这两个版本的工程DEMO:

以上内容来自于网络,如有侵权联系即删除
相关文章

上一篇: iOS进阶之路 (三)OC对象的原理 - isa 结构 & 走位

下一篇: 这2年的面试经验教会了我什么?

在线咨询
客户经理