SnapKitten —用于线性布局的Swift库

长期以来，我是一名Android开发人员。 我喜欢android XML布局编辑器，它很容易实现我想要的结果。 而且我可以在编辑器中轻松预览。

从android到iOS，都有一个等效的编辑器-XIB或情节提要及其布局系统-约束系统。 我个人不喜欢故事板，要在故事板上定义所有内容并不容易。 对于团队发展，有时会在编辑中产生冲突。 因此，我选择SnapKit作为我的布局创建工具。
SnapKit是最好的iOS库之一，我喜欢它的语法，但是，iOS约束系统本身仍然不容易完全理解。 我花了几周的时间研究约束系统，但其结果仍不总是我的期望。 这就是为什么我写了一个库来处理我通常会重复使用的某些情况的原因。

在snapKitten中，引用了Android的线性布局。 它完全基于SnapKit和Constraint系统。 目的是处理iOS布局设计的一些线性情况。

SnapKitten的目标
1.基于约束系统
2.解决线性布局，例如android中的LinearLayout
3.易于使用，如SnapKit

编码示例
考虑一下，我们需要一个用户配置文件布局，其中图像在左侧，用户名在右侧。

 让userProfile：UIView = 
  Kitten.horizo​​ntal（）。from（） 
  .add（imageView）.size（40） 
  .add（label）.itemOffset（10） 
  。建立（） 

这是怎么回事？
1.定义方向（水平/垂直）
2.在from（）方法中选择userProfile的父UIView
3.小猫添加一个UIImageView和UILabel
4.在每个添加视图操作之后，您将定义线性布局的一些属性。
5. build（）返回连接所有子视图的父UIView

小猫实际上是做什么的？
1.在调用build（）方法之前，它什么都不做。 它没有添加任何视图，并且您的视图没有属性更改。
2.当调用build方法时，它开始在子代及其父容器之间建立约束。
3.包括位置对齐，大小，内容压缩，内容拥抱属性。
4.位置和大小与任何帧原点/大小无关。 纯约束。

更复杂的例子

考虑一下，我们需要一个视图控制器，它的用户配置文件顶部对齐，菜单的三个图标底部对齐，其余中间部分是scrollview。

 让userProfile：UIView = Kitten.horizo​​ntal（）。from（）。defaultAlignment（.start） 
  .add（iv）.size（40） 
  .add（lblA）.itemOffset（10） 
  。建立（） 

  userProfile.backgroundColor = UIColor.orange 

 让bottomMenu = 
  Kitten.horizo​​ntal（）。from（） 
  .weightMode（true） 
  .add（ivA）.height（60） 
  .add（ivB）.height（60） 
  .add（ivC）.height（60） 
  。建立（） 

 让scrollView = UIScrollView（） 

  Kitten.create（.ver​​tical）.from（viewController）.isAlignDirectionEnd（true）.add（userProfile）.alignSideStart（） 
  .add（scrollView）.fillParent（） 
  .add（bottomMenu） 
  。建立（） 

结合使用小猫，只需几行代码即可实现复杂的布局。
SnapKitten在此示例中做了什么？
1.在底部菜单中，它创建一个线性视图，该视图通过weightMode（）方法将底部菜单分为三个等宽的部分。
2.在顶部菜单中，UILabel的高度大于UIImageView。 橙色背景是topMenu的最后一个区域。
3. isAlignDirectionEnd（true）使最后一个孩子与父母的末端对齐。
4. fillParent（）使该子级尽可能扩展。
5.小猫允许用户from（）一个将使用其视图的视图控制器。 默认情况下，它将topLayoutGuide和bottomLayoutGuide对齐

下一步是什么？
现在，您可以通过from（scrollView）向滚动视图添加一些子视图。 小猫将创建具有垂直/水平方向支持的容器视图。

如何安装SnapKitten？

通过cocoapods安装SnapKitten

 豆荚“ SnapKitten” 

如何尝试SnapKitten的结果？
测试小猫的行为很容易，在您的项目中创建一个运动场文件，并按照github中的运动场指示进行操作。

 导入UIKit 
 导入SnapKitten 
 导入PlaygroundSupport 

 让virtualView = UIView（frame：CGRect（x：0，y：0，width：320，height：100）） 
  virtualView.backgroundColor = UIColor.gray 
  PlaygroundPage.current.liveView = virtualView 

 让iv = UIImageView（） 
  iv.backgroundColor = UIColor.red 
 让lblA = UILabel（） 
  lblA.text =“世界你好” 
  lblA.backgroundColor = UIColor.blue 

 让simpleComponent = Kitten.horizo​​ntal（）。from（） 
  .add（iv）.size（40） 
  .add（lblA）.itemOffset（10） 
  。建立（） 
  simpleComponent.backgroundColor = UIColor.green 

  Kitten.create（.ver​​tical）.from（virtualView） 
  .add（simpleComponent）.align（.start） 
  。建立（） 

进一步阅读

https://github.com/springwong/SnapKitten
在Github中，将更多关于SnapKitten的方法描述。

讨论区
由于swift的编码风格和SnapKitten的概念都遵循LinearLayout，因此SnapKitten布局可以在Android方面高度重复使用。 我创建了另一个github库Kitten，它相当于SnapKitten库的android。 但是，Java版本仍处于测试阶段，因为许多需要为没有XML的android布局开发做准备的事情。

  //一些Java代码示例 
  Kitten.create（KittenOrientation.vertical）.from（mainView）.isAlignDirectionEnd（true）.add（temp）.align（KittenAlignment.parent）.add（imageView） 
  .add（textViewA）.build（）; 

感谢您的阅读！