Framezilla 2.9.1

Framezilla 2.9.1

×

测试已测试✓
语言语言 SwiftSwift
许可证 MIT
发行最近发布2018年2月
SwiftSwift 版本3.0
SPM支持 SPM✓

由 Nikita Ermolenko 维护。

Framezilla 2.9.1

  • 由
  • Nikita Ermolenko

Framezilla

Build Status
Version
Carthage Compatible
Platform
Swift 4.0
License

每个人都希望看到流畅的滚动，黑的 tableview 或 collectionview 滚动没有任何延迟，这是一个正确的选择。但是约束并没有给我们这个。因此，我们必须选择手动计算帧，但有时，当 cell 有一个复杂结构时，代码没有优雅、美丽的结构。

所以，这是一个库，对于那些想看到带有优雅代码的流畅滚动的人！

享受阅读！ 🎉

Framezilla 是 Framer 的子类（一个伟大的布局框架，它用漂亮的语法包裹了手动计算的框架），但仅限于 Swift。

安装🔥

CocoaPods

CocoaPods 是 Swift 和 Objective-C Cocoa 项目的依赖管理器。它拥有超过一万八千个库，可以帮助您优雅地扩展项目。您可以使用以下命令进行安装：

$ sudo gem install cocoapods

要集成 Framezilla，只需将以下行添加到您的 Podfile 中

pod "Framezilla"

然后，运行以下命令

$ pod install

Carthage

Carthage 是一个去中心化的依赖管理器，它会构建您的依赖项并为您提供二进制框架。

您可以使用以下命令通过 Homebrew 安装 Carthage

$ brew update
$ brew install carthage

要使用 Carthage 将 Framezilla 集成到您的 Xcode 项目中，请在您的 Cartfile 中指定它

github "Otbivnoe/Framezilla"

运行 carthage update 命令来构建框架，然后将构建的 Framezilla.framework 拖动到您的 Xcode 项目中。

功能💥

  • 相对于父视图的边距
  • 宽度 / 高度
  • 顶部 / 左边 / 底部 / 右边
  • 居中 X / 居中 Y / 居中（视图之间）
  • SizeToFit / SizeThatFits / WidthToFit / HeightToFit
  • 容器
  • 堆接
  • 可选语义 - and
  • 侧面关系：nui_left、nui_bottom、nui_width、nui_centerX 等。
  • 状态
  • 安全区域支持😱

用法🚀

大小（宽度，高度）

有一些方法可以处理视图的大小。

您可以为 width 和 height 分别配置

  view.configureFrame { maker in
      maker.width(200).and.height(200)
  }

或者一起设置，得到相同的结果

  view.configureFrame { maker in
      maker.size(width: 200, height: 200)
  }

为了简化配置，请使用 << 和 >> 运算符

  view<<.size(width: 200, height: 200)>>

在某些情况下，您希望使用乘数将两个视图的边等长。

例如

  view.configureFrame { maker in
      maker.width(to: view1.nui_height, multiplier: 0.5)
      maker.height(to: view1.nui_width) // x1 multiplier - default
  }

边缘

Framezilla 有两种创建边关系的方法。

您可以通过以下方式创建边关系

  view.configureFrame { maker in
      maker.edges(insets: UIEdgeInsetsMake(5, 5, 5, 5))
  }

或者

  view.configureFrame { maker in
      maker.edges(top: 5, left: 5, bottom: 5, right: 5)
  }

第二种方法有可选参数，所以 maker.edges(top: 5, left: 5, bottom: 5) 也可以正常工作，但是不会创建 right 关系，在某些情况下非常有用。

侧关系（顶部、左边、底部、右边）

你可以像上面那样创建边关系，但只能使用侧关系。

  view.configureFrame { maker in
      maker.top(inset: 5).and.bottom(inset: 5)
      maker.left(inset: 5).and.right(inset: 5)
  }

还可以创建与另一个视图的关系，而不是与其父视图的关系。

  // Red view
  view.configureFrame { maker in
      maker.size(width: 30, height: 30)
      maker.left(to: self.view1.nui_right, inset: 5)
      maker.bottom(to: self.view1.nui_centerY)
  }

在iOS 11中，Apple引入了安全区域，类似于 topLayoutGuide 和 bottomLayoutGuide。Framezilla也支持这个新的API。

content.configureFrame { maker in
    maker.top(to: nui_safeArea)
    maker.bottom(to: nui_safeArea)
    maker.right(to: nui_safeArea, inset: 10)
    maker.left(to: nui_safeArea, inset: 10)
}

注意：在iOS 11之前版本的操作系统，这些方法会创建与父视图的关系，而不是安全区域。

中心关系

如果你只想将子视图相对于父视图居中，并且宽度和高程是常量，那么这个方法特别适合你。

  view.configureFrame { maker in
      maker.centerY().and.centerX()
      maker.size(width: 100, height: 100)
  }

还可以手动设置中心X和Y坐标。只需调用 setCenterX 和 setCenterY。

如果你想让视图的中心点与另一个视图的右上角对齐呢？

PFF, 好的。

  view.configureFrame { maker in
      maker.centerX(to: self.view1.nui_right, offset: 0)
      maker.centerY(to: self.view1.nui_top) //Zero offset - default
      maker.size(width: 50, height: 50)
  }

SizeToFit 和 SizeThatFits

非常经常需要配置标签，因此有一些方法可以方便地使用它们。

SizeToFit

  label.configureFrame { maker in
      maker.sizeToFit() // Configure width and height by text length no limits
      maker.centerX().and.centerY()
  }

SizeThatFits

但是，如果你需要指定标签的边距呢？

  label.configureFrame { maker in
      maker.sizeThatFits(size: CGSize(width: 200, height: 100))
      maker.centerX().and.centerY()
  }

容器

当你想通过包装所有子视图来设置宽度和高度时，使用该方法。

NOTE

首先，你应该配置所有子视图，然后为 容器视图 调用此方法。

还重要的是要理解，以子视图的形式同时调用 'left' 和 'right' 关系是不正确的，因为 container 是相对于子视图的宽度设置宽度的，这里有一些歧义。

  label1.configureFrame { maker in
      maker.sizeToFit()
      maker.top()
      maker.left(inset: 5)
  }

  label2.configureFrame { maker in
      maker.sizeToFit()
      maker.top(to: label1.nui_bottom, inset: 5)
      maker.left(inset: 5)
  }

  view1.configureFrame { maker in
      maker.centerY().centerX()
      maker.container()
  }

酷炫的功能

有时你可能想要配置几个具有相同大小的视图，例如。有一个方便的方法

  [view1, view2].configureFrames { maker in
      maker.size(width: 200, height: 100)
  }

堆接

Framezilla 允许你像堆叠行为一样配置视图。要点是要指出正确的视图顺序。

  [view3, view2, view1].stack(axis: .horizontal, spacing: 3)

状态

对于动画来说非常有方便使用多个状态，因为你可以在一个地方配置所有状态，当需要时改变视图的框架 - 只需应用所需状态即可！太棒了，不是吗？

demo

override func viewDidLayoutSubviews() {

    super.viewDidLayoutSubviews()

    // state `DEFAULT_STATE`
    view1.configureFrame { maker in
        maker.centerX().and.centerY()
        maker.width(50).and.height(50)
    }

    view1.configureFrame(state: 1) { maker in
        maker.centerX().and.centerY()
        maker.width(100).and.height(100)
    }
}

创建新状态并动画化它

/* Next time when viewDidLayoutSubviews will be called, `view1` will configure frame for state 1. */
  view1.nx_state = 1 // Any hashable value
  view.setNeedsLayout()
  UIView.animate(withDuration: 1.0) {
      self.view.layoutIfNeeded()
  }

还可以连续应用多个状态

  view1.configureFrame(states: [3, "state"]) { maker in
      maker.size(width: 200, height: 100)
  }

作者💪

尼基塔·叶尔莫连科，[email protected]

谢谢👍

感谢 Artem Novichkov 提供库名字！

感谢 Evgeny Mikhaylov 实现 '状态' 功能！

感谢 Anton Kovalev 优化库！

贡献🙏

我希望你为 Framezilla 贡献，请查阅 CONTRIBUTING 文件以获取更多信息。

许可证❗️

Framezilla 在MIT许可下可用。有关更多信息，请参阅LICENSE文件。