constraints-kit 1.1.0

constraints-kit 1.1.0

Astemir Eleev 维护。



  • Astemir Eleev

constraints-kit Awesome

Platform Language Documentation Coverage CocoaPod License

最后更新:2019年1月2日。

如果您喜欢此项目,请给它加星⭐。这会向创作者展示您的赞赏,并帮助其他人发现此仓库。

✍️关于

🏗️适用于 iOS 的声明性、可链式和轻量级自动布局约束框架。此框架提供了一套丰富的定义 Auto Layout 约束的方法(请参阅 Contents),无需任何其他外部依赖。

💡动机

此框架的目的是提供一个非常轻量的解决方案来满足 Auto Layout 的需要,并使编程性 UI 的开发变得更加简单,在框架中隐藏样板代码。主要用于内部开发,但由于它提供了一些独特性,我决定与社区分享此框架,并且我将继续此开发工作。

📺演示

为了创建以下截图类似的内容

您只需编写几行代码

// 1. First you need to add all your views somewhere. That means your views must have a superview. Let's assume that you have done that. 

// 2. Then we assume that visually your views are fully configured. 

// 3. And finally, all we need to do is to specify the constraints:

cardView.pinInside(view: self.view, offset: 16)

imageView.pinInside(view: cardView, offset: 8)

blurView.pinInside(view: cardView)
    
titleLabel.pinTopToTopCenter(of: imageView, offset: 24)
    
button
        .bottom(with:   imageView, anchor:  .bottom,    offset: -34)
        .center(in:     imageView, axis:    .horizontal)
        .set(height:    60)
        .set(aspect:    2/1)
            
label
        .center(in:     imageView)
        .left(with:     imageView, anchor: .left,   offset:  16)
        .right(with:    imageView, anchor: .right,  offset: -16)

🏗️安装

CocoaPods

constraints-kit 可通过 CocoaPods 获取。

pod 'constraints-kit', '~> 1.1.0' 

手册

您始终可以手动将框架源添加到您的项目中。为此,只需复制粘贴以下文件

✈️用法

该框架使用起来非常简单,然而我建议在安装框架之前学习一下《自动布局》的基础知识——这将有助于您理解《UIView》需要的最小约束数,并避免常见的陷阱。

导入

将框架添加到项目后,只需添加一个导入语句

import constraints_kit

设置大小

view.set(size: CGSize(width: 300, height: 300))
view.set(width: 400)
view.set(height: 200)
view
    .set(width:  200)
    .set(aspect: 2/1)

约束

一个UIImageView使用偏移量填充父UIView,直到底部锚点达到UIButton的上锚点。

imageView
    .constrain(using: .top,     to: .top,   of: view,   offset:  24)
    .constrain(using: .right,   to: .right, of: view,   offset: -24)
    .constrain(using: .left,    to: .left,  of: view,   offset:  24)
    .constrain(using: .bottom,  to: .top,   of: button, offset: -24)

如果您想将view锚定到其superview,也可以省略of: view部分。

imageView
    .constrain(using: .top,     to: .top, ,   offset:  24)
    .constrain(using: .right,   to: .right,   offset: -24)
    .constrain(using: .left,    to: .left,    offset:  24)
    .constrain(using: .bottom,  to: .top,     offset: -24)

UIImageView锚定在父视图的中心,通过锚定左边和右边并将aspect ratio设置为3:2拉伸到水平轴。

imageView
    .center(in:   view, axis:   .vertical)
    .left(with:   view, anchor: .left)
    .right(with:  view, anchor: .right)
    .set(aspect: 3/2)

锚定

一个自定义的UIView填充到UICollectionViewCell的顶部系统间距,并通过自定义的左边、右边偏移量以及UIButton的顶部锚点。

presenterView
    .topToSystemSpacing(with: view,   anchor: .top)
    .right(             with: view,   anchor: .right, offset: -16)
    .left(              with: view,   anchor: .left,  offset:  16)
    .bottom(            with: button, anchor: .top,   offset: -16)

一个 UIButton 放置在父视图的 center,其 bottom 锚与父视图的底部对齐,高度设置为 60,宽高比为 2:1

button
    .bottom(with: imageView, anchor:  .bottom,    offset: -34)
    .center(in:   imageView, axis:    .horizontal)
    .set(height: 60)
    .set(aspect: 2/1)

固定

一个自定义的 ActivityIndicator 视图,与指定视图的左上角对齐,偏移量为 一些,大小为 20x20

activityIndicator
    .pinInsideToTopLeftCorner(of: view, offset: 24)
    .size(CGSize(width: 20, height: 20))

更复杂的案例,自定义 ProgressView 的左上锚点与父视图的顶部左侧对齐,底部右侧锚点与 LogIn 按钮的顶部右侧对齐。

progressView
    .pin(anchors: [.left,   .top],    toTargetView: view,   using: [.leading, .top])
    .pin(anchors: [.bottom, .right],  toTargetView: button, using: [.right,   .top])

填充

一个 UITableView 放置在父 UIView 内部,填充它的上半部分(使用 lefttoprightcenterX 锚)。

tableView.fillTopHalf(of: parentView)

一个 UICollectionView 放置在父 UIView 内部,使用指定的偏移量填充它的左半部分(使用 lefttopbottomcenterY 锚)。

collectionView.fillLeftHalf(of: splitView, offset: 16)

📝目录

该工具包包含几个方法组,每个组都有特定的用途。所有组可以串联使用,但请注意,如果存在冲突约束或未为 Auto Layout 引擎提供足够的信息,则可能没有效果或得到一些意外的结果。假设您已经熟悉 Auto Layout 的基础知识。

公共

  • constrain - 使用指定的 Attributeself 与相关的 UIView 中的 Attribute 进行约束。您可以设置 Relation(默认为 .equal),offset(默认为 0.0)和 multiplier(默认为 1.0)。
  • fit - 在指定的 UIView 内部放置 self,可选项 offset(默认为 0.0)。
  • center - 使用具体的 Axis 案例将 self 在指定的 UIView 内部居中,可选项 multiplier(默认为 1.0)。
  • width - 在 self 和指定的 UIView 之间应用宽度相等。您可以更改 Relation(默认为 equal),UILayoutPriority(默认为 required),multiplier(默认为 1.0)和 constant(默认为 0.0)。
  • height - 在self和指定的UIView之间应用高度均衡。您可以更改Relation(默认为equal),UILayoutPriority(默认为required),multiplier(默认为1.0)和constant(默认为0.0

设置器

  • set(size:) - 通过为widthheight锚点应用布局约束来设置self的新CGSize
  • set(width:) - 通过为width锚点应用布局约束来设置新的width
  • set(height:) - 通过为height锚点应用布局约束来设置新的height
  • set(aspect:) - 通过为aspect锚点应用布局约束来设置新的aspect ratio
  • set(aspectOf:) - 通过复制指定UIViewaspect来设置新的aspect ratio
  • set(value: to:) - 为Attribute设置新的value偏移量

锚定

  • top - 使用AxisY锚点将顶部锚点锚定到指定的UIView,使用Relation(默认为.equal),NSLayoutPriority(默认为.required)和offset(默认为0.0
  • bottom - 使用AxisY锚点将底部锚点锚定到指定的UIView,使用Relation(默认为.equal),NSLayoutPriority(默认为.required)和offset(默认为0.0
  • left - 使用AxisY锚点将左侧锚点锚定到指定的UIView,使用Relation(默认为.equal),NSLayoutPriority(默认为.required)和offset(默认为0.0
  • right - 使用AxisY锚点将右侧锚点锚定到指定的UIView,使用Relation(默认为.equal),NSLayoutPriority(默认为.required)和offset(默认为0.0

锚定到系统间距

  • rightToSystemSpacing - 使用AxisY锚点将右侧锚点锚定到指定的UIView,相对于系统间距,使用Relation(默认为.equal),NSLayoutPriority(默认为.required)和offset(默认为0.0
  • leftToSystemSpacing - 使用AxisY锚点将左侧锚点锚定到指定的UIView,相对于系统间距,使用Relation(默认为.equal),NSLayoutPriority(默认为.required)和offset(默认为0.0
  • topToSystemSpacing - 使用AxisY锚点将顶部锚点锚定到指定的UIView,相对于系统间距,使用Relation(默认为.equal),NSLayoutPriority(默认为.required)和offset(默认为0.0
  • bottomToSystemSpacing - 使用AxisY锚定、Relation(默认为.equal)、NSLayoutPriority(默认为.required)和offset(默认为0.0)将指定UIView的底部锚定到系统的分布

固定

  • pinTopLeftToTopLeftCorner - 将顶部左锚定为指定UIView的左上角,并给定offset(默认为0.0
  • pinTopRightToTopRightCorner - 将顶部右锚定为指定UIView的右上角,并给定offset(默认为0.0
  • pinBottomRightToBottomRight - 将右下角锚定为指定UIView的右下角,并给定offset(默认为0.0
  • pinBottomLeftToBottomLeft - 将左下角锚定为指定UIView的左下角,并给定offset(默认为0.0
  • pinBottomRightToTopLeft - 将右下角锚定为指定UIView的左上角,并给定offset(默认为0.0
  • pinBottomLeftToTopRight - 将左下角锚定为指定UIView的右上角,并给定offset(默认为0.0
  • pinTopLeftToBottomRight - 将左上角锚定为指定UIView的右下角,并给定offset(默认为0.0
  • pinBottomRightToTopLeft - 将右下角锚定为指定UIView的左上角,并给定offset(默认为0.0
  • pinTopToTopCenter - 使用给定offset(默认为0.0)将顶部锚定到指定UIView的顶部中心锚定
  • pinBottomToBottomCenter - 使用给定offset(默认为0.0)将底部锚定到指定UIView的底部中心锚定
  • pinLeftToLeftCenter - 使用给定offset(默认为0.0)将左侧锚定到指定UIView的左侧中心锚定
  • pinRightToRightCenter - 使用给定offset(默认为0.0)将右侧锚定到指定UIView的右侧中心锚定
  • pinInside - 使用给定Relation(默认为.equal)、UILayoutPriority(默认为.required)和offset(默认为0.0)将当前self固定在指定UIView内部
  • pinTo - 使用Anchor(这是一个OptionSet)将当前self固定到指定的UIView
  • pin(anchors:, toTargetView: , using:) - 使用相关Anchors将指定selfAnchors固定到UIView

填充

  • fillBottomHalf - 使用给定offset(默认为0.0)通过self填充指定视图的下半部分
  • fillTopHalf - 使用给定offset(默认为0.0)通过self填充指定视图的上半部分
  • fillLeftHalf - 使用给定offset(默认为0.0)通过self填充指定视图的左半部分
  • fillRightHalf - 用self填充指定视图的右半部分,使用给定的offset(默认为0.0

👨‍💻作者

Astemir Eleev

🔖许可协议

该项目遵循MIT 许可协议