{"id":20852608,"url":"https://github.com/eleev/constraints-kit","last_synced_at":"2025-05-12T05:30:47.484Z","repository":{"id":56931856,"uuid":"153276958","full_name":"eleev/constraints-kit","owner":"eleev","description":"🏗 Declarative, Chainable \u0026 Lightweight Auto Layout constraints framework for iOS.","archived":false,"fork":false,"pushed_at":"2020-01-02T08:24:10.000Z","size":171,"stargazers_count":23,"open_issues_count":0,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-08T17:02:24.664Z","etag":null,"topics":["anchor","autolayout","autolayout-constraints","autolayout-extension","autolayout-framework","constraints","domain-specific-language","dsl","ios","ios-swift","layout-constraints","spm","swift","swift-package","uikit"],"latest_commit_sha":null,"homepage":"","language":"Swift","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eleev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-10-16T11:50:38.000Z","updated_at":"2025-02-23T08:47:55.000Z","dependencies_parsed_at":"2022-08-21T00:01:16.066Z","dependency_job_id":null,"html_url":"https://github.com/eleev/constraints-kit","commit_stats":null,"previous_names":["jvirus/constraints-kit"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eleev%2Fconstraints-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eleev%2Fconstraints-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eleev%2Fconstraints-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eleev%2Fconstraints-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eleev","download_url":"https://codeload.github.com/eleev/constraints-kit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253681886,"owners_count":21946823,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["anchor","autolayout","autolayout-constraints","autolayout-extension","autolayout-framework","constraints","domain-specific-language","dsl","ios","ios-swift","layout-constraints","spm","swift","swift-package","uikit"],"created_at":"2024-11-18T03:18:12.237Z","updated_at":"2025-05-12T05:30:47.046Z","avatar_url":"https://github.com/eleev.png","language":"Swift","funding_links":[],"categories":[],"sub_categories":[],"readme":"# constraints-kit [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)\n\n[![Build](https://github.com/jvirus/constraints-kit/workflows/Build/badge.svg)]()\n[![Platform](https://img.shields.io/badge/Platform-iOS-yellow.svg)]()\n[![Language](https://img.shields.io/badge/Language-Swift_5.1-orange.svg)]()\n[![SPM](https://img.shields.io/badge/SPM-Supported-lightblue.svg)]()\n[![License](https://img.shields.io/badge/License-MIT-blue.svg)]()\n\n**Last Update: 02/January/2020.**\n\n![](logo-constraints_kit.png)\n\n### If you like the project, please give it a star ⭐ It will show the creator your appreciation and help others to discover the repo.\n\n# ✍️ About \n🏗 Declarative, Chainable \u0026 Lightweight Auto Layout constraints framework for iOS. The framework offers a rich set of methods for defining `Auto Layout` constraints (see `Contents`) without any other external dependencies. \n\n# 💡 Movitation\nThe purpose of this framework is to provide a very lightweight solution for `Auto Layout` and to make the development of programmatic `UI` much simpler, hiding the boilerplate code under the framework. Primary usage is for internal developments, however I decided to share the framework with the community, since it offers some uniqueness and I'm going to continue work on this development. \n\n# 📺 Demo\n\nIn order to create something like in the following screenshot:\n\n\u003cimg src=\"https://user-images.githubusercontent.com/5098753/48311283-8435f900-e5ae-11e8-9868-d0bd1bb2f16e.png\" width=\"300\"\u003e\n\nYou need to write just a few lines of code:\n\n```swift\n// 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. \n\n// 2. Then we assume that visually your views are fully configured. \n\n// 3. And finally, all we need to do is to specify the constraints:\n\ncardView.pinInside(view: self.view, offset: 16)\n\nimageView.pinInside(view: cardView, offset: 8)\n\nblurView.pinInside(view: cardView)\n    \ntitleLabel.pinTopToTopCenter(of: imageView, offset: 24)\n    \nbutton\n        .bottom(with:   imageView, anchor:  .bottom,    offset: -34)\n        .center(in:     imageView, axis:    .horizontal)\n        .set(height:    60)\n        .set(aspect:    2/1)\n            \nlabel\n        .center(in:     imageView)\n        .left(with:     imageView, anchor: .left,   offset:  16)\n        .right(with:    imageView, anchor: .right,  offset: -16)\n```\n\n# 🏗 Installation\n\n## Swift Package Manager\n\n### Xcode 11+\n\n1. Open `MenuBar` → `File` → `Swift Packages` → `Add Package Dependency...`\n2. Paste the package repository url `https://github.com/jVirus/constraints-kit` and hit `Next`.\n3. Select the installment rules.\n\nAfter specifying which version do you want to install, the package will be downloaded and attached to your project. \n\n### Package.swift\nIf you already have a `Package.swift` or you are building your own package simply add a new dependency:\n\n```swift\ndependencies: [\n    .package(url: \"`https://github.com/jVirus/constraints-kit\", from: \"1.0.0\")\n]\n```\n\n## Manual \nYou can always use copy-paste the sources method 😄. Or you can compile the framework and include it with your project.\n\n\n# ✈️ Usage\nThe framework is pretty easy to use, however I do recommend to learn the basics of `Auto Layout` before installing the framework - it will help you to understand what the minimum number of constraints a `UIView` needs to have and to avoid common pitfalls.\n\n#### Import \nAfter adding the framework to a project, simply add an import statemt:\n\n```swift\nimport ConstraintsKit\n```\n\n#### Setting size \n\n```swift\nview.set(size: CGSize(width: 300, height: 300))\n```\n\n```swift\nview.set(width: 400)\n```\n\n```swift\nview.set(height: 200)\n```\n\n```swift\nview\n    .set(width:  200)\n    .set(aspect: 2/1)\n```\n\n#### Constraining\n\nA `UIImageView` fills the parent `UIView` with offset, until the bottom anchor reaches the `top` anchor of the `UIButton`:\n\n```swift\nimageView\n    .constrain(using: .top,     to: .top,   of: view,   offset:  24)\n    .constrain(using: .right,   to: .right, of: view,   offset: -24)\n    .constrain(using: .left,    to: .left,  of: view,   offset:  24)\n    .constrain(using: .bottom,  to: .top,   of: button, offset: -24)\n```\n\nAlso you can remove the `of: view` part in cases when you want to anchor a `view` to its `superview`:\n```swift\nimageView\n    .constrain(using: .top,     to: .top, ,   offset:  24)\n    .constrain(using: .right,   to: .right,   offset: -24)\n    .constrain(using: .left,    to: .left,    offset:  24)\n    .constrain(using: .bottom,  to: .top,     offset: -24)\n```\n\nA `UIImageView` is anchored at the center of the parent view, it's stretched to the `horizontal` axis by anchoring `left` \u0026 `right` sides with the `aspect ratio` of `3 to 2`:\n\n```swift\nimageView\n    .center(in:   view, axis:   .vertical)\n    .left(with:   view, anchor: .left)\n    .right(with:  view, anchor: .right)\n    .set(aspect: 3/2)\n```\n\n#### Anchoring\n\nA custom `UIView` fills a `UICollectionViewCell` to the `top` system spacing, with custom `left` \u0026 `right` offsets and to the `top` anchor of the `UIButton`:\n\n```swift\npresenterView\n    .topToSystemSpacing(with: view,   anchor: .top)\n    .right(             with: view,   anchor: .right, offset: -16)\n    .left(              with: view,   anchor: .left,  offset:  16)\n    .bottom(            with: button, anchor: .top,   offset: -16)\n```\n\nA `UIButton` is placed at the `center` of the parent view, its `bottom` anchor is attached to the bottom of the parent view, `height` is set to `60` with `aspect ratio` of `2 to 1`:\n\n```swift\nbutton\n    .bottom(with: imageView, anchor:  .bottom,    offset: -34)\n    .center(in:   imageView, axis:    .horizontal)\n    .set(height: 60)\n    .set(aspect: 2/1)\n```\n\n#### Pinning \n\nA custom `ActivityIndicator` view is anchored to the top left corner of the specified view with some `offset` and `size` equals to `20 to 20`:\n\n```swift\nactivityIndicator\n    .pinInsideToTopLeftCorner(of: view, offset: 24)\n    .size(CGSize(width: 20, height: 20))\n```\n\nAdvanced case where top left anchor of a custom `ProgressView` is attached to the top leading corner of the parent view and  the bottom right anchor is attached to the top right anchor of the `LogIn` button:\n\n```swift\nprogressView\n    .pin(anchors: [.left,   .top],    toTargetView: view,   using: [.leading, .top])\n    .pin(anchors: [.bottom, .right],  toTargetView: button, using: [.right,   .top])\n```\n\n### Filling\n\nA `UITableView` is placed inside the parent `UIView` and fills the top half of it (using `left`, `top`, `right` and `centerX` anchors):\n\n```swift\ntableView.fillTopHalf(of: parentView)\n```\n\nA `UICollectionView` is placed inside the parent `UIView` and fills the left half of it with the specified offset (using `left`, `top`, `bottom` and `centerY` anchors):\n\n```swift \ncollectionView.fillLeftHalf(of: splitView, offset: 16)\n```\n\n\n# 📝 Contents \nThe kit contains several groups of methods, each with a specific purpose. All the groups can be chained together, however you should keep in mind that if you have conflicting constraints or you don't provide enough information for the `Auto Layout` engine, you will see no effect or some unexpected results. It's assumed that you already know the basics of `Auto Layout`.\n\n#### Common \n\n- `constrain` - constrains `self` using the specified `Attribute` to the specified `Attribute` with respect to the related `UIView`. You may set `Relation` (which is by default `.equal`), `offset` (default is `0.0`) and `multiplier` (default is `1.0`)\n- `fit` - places `self` inside the specified `UIView` with an optional `offset` (default is `0.0`)\n- `center` - centers `self` inside the specified `UIView` using a concrete `Axis` case, with an optional `multiplier` (default is `1.0`)\n- `width` - applies width equalization between `self` and the specified `UIView`. You may change the `Relation` (default is `equal`), `UILayoutPriority` (default is `required`), `multiplier` (default is `1.0`) and `constant` (default is `0.0`)\n- `height` - applies height equalization between `self` and the specified `UIView`. You may change the `Relation` (default is `equal`), `UILayoutPriority` (default is `required`), `multiplier` (default is `1.0`) and `constant` (default is `0.0`)\n\n#### Setters\n\n- `set(size:)` - sets a new `CGSize` for `self` by applying layout constaints for `width` \u0026 `height` anchors\n- `set(width:)` - sets a new `width` by applying layout constaint for `width` anchor\n- `set(height:)` - sets a new `height` by applying layout constraint for `height` anchor\n- `set(aspect:)` - sets a new `aspect ratio` by applying layout constaint for `aspect` anchor\n- `set(aspectOf:)` - sets a new `aspect ratio` by duplicating `aspect` of the specified `UIView`\n- `set(value: to:)` - sets a new offset `value` for the `Attribute`\n\n#### Anchoring\n\n- `top` - anchors top anchor to the specified `UIView` using `AxisY` anchor, `Relation` (defatul is `.equal`), NSLayoutPriority (default is `.required`) and `offset` (default is `0.0`)\n- `bottom` - anchors bottom anchor to the specified `UIView` using `AxisY` anchor, `Relation` (defatul is `.equal`), NSLayoutPriority (default is `.required`) and `offset` (default is `0.0`)\n- `left` - anchors left anchor to the specified `UIView` using `AxisY` anchor, `Relation` (defatul is `.equal`), NSLayoutPriority (default is `.required`) and `offset` (default is `0.0`) \n- `right` - anchors right anchor to the specified `UIView` using `AxisY` anchor, `Relation` (defatul is `.equal`), NSLayoutPriority (default is `.required`) and `offset` (default is `0.0`)\n\n#### Anchoring to System Spacing\n\n- `rightToSystemSpacing` - anchors right anchor to the specified `UIView` with respect to System Spacing using `AxisY` anchor, `Relation` (defatul is `.equal`), NSLayoutPriority (default is `.required`) and `offset` (default is `0.0`)\n- `leftToSystemSpacing` - anchors left anchor to the specified `UIView` with respect to System Spacing using `AxisY` anchor, `Relation` (defatul is `.equal`), NSLayoutPriority (default is `.required`) and `offset` (default is `0.0`)\n- `topToSystemSpacing` - anchors top anchor to the specified `UIView` with respect to System Spacing using `AxisY` anchor, `Relation` (defatul is `.equal`), NSLayoutPriority (default is `.required`) and `offset` (default is `0.0`)\n- `bottomToSystemSpacing` - anchors bottom anchor to the specified `UIView` with respect to System Spacing using `AxisY` anchor, `Relation` (defatul is `.equal`), NSLayoutPriority (default is `.required`) and `offset` (default is `0.0`)\n\n#### Pinning\n\n- `pinTopLeftToTopLeftCorner` - pins Top Left anchor to the Top Left corner of the specified `UIView` with a given `offset` (default is `0.0`)\n- `pinTopRightToTopRightCorner` - pins Top Right anchor to the Top Right corner of the specified `UIView` with a given `offset` (default is `0.0`)\n- `pinBottomRightToBottomRight` - pins Bottom Right anchor to the Bottom Right corner of the specified `UIView` with a given `offset` (default is `0.0`)\n- `pinBottomLeftToBottomLeft` - pins Bottom Left anchor to the Bottom Left corner of the specified `UIView` with a given `offset` (default is `0.0`)\n- `pinBottomRightToTopLeft` - pins Bottom Right anchor to the Top Left corner of the specified `UIView` with a given `offset` (default is `0.0`)\n- `pinBottomLeftToTopRight` - pins Bottom Left anchor to the Top Right corner of the specified `UIView` with a given `offset` (default is `0.0`)\n- `pinTopLeftToBottomRight` - pins Top Left anchor to the Bottom Right corner of the specified `UIView` with a given `offset` (default is `0.0`)\n- `pinBottomRightToTopLeft` - pins Bottom Right anchor to the Top Left corner of the specified `UIView` with a given `offset` (default is `0.0`)\n- `pinTopToTopCenter` - pins Top anchor to the Top Center anchor of the specified `UIView` with a given `offset` (default is `0.0`)\n- `pinBottomToBottomCenter` - pins Bottom anchor to the Bottom Center anchor of the specified `UIView` with a given `offset` (default is `0.0`)\n- `pinLeftToLeftCenter` - pins Left anchor to the Left Center anchor of the specified `UIView` with a given `offset` (default is `0.0`)\n- `pinRightToRightCenter` - pins Right anchor to the Right Center anchor of the specified `UIView` with a given `offset` (default is `0.0`)\n- `pinInside` - pins `self` inside the specified `UIView` with `Relation` (default is `.equal`), UILayoutPriority (default is `.required`) and `offset` (default is `0.0`)\n- `pinTo` - pins `self` to the specified `UIView` by using `Anchor` (which is an `OptionSet`)\n- `pin(anchors:, toTargetView: , using:)` - pins the specified `Anchors` of `self` to the `UIView` by using the related `Anchors`\n\n#### Filling\n\n- `fillBottomHalf` - fills the bottom half of the specified view by `self` with the given `offset` (default is `0.0`)\n- `fillTopHalf` - fills the top half of the specified view by `self` with the given `offset` (default is `0.0`)\n- `fillLeftHalf` - fills the left half of the specified view by `self` with the given `offset` (default is `0.0`)\n- `fillRightHalf` - fills the right half of the specified view by `self` with the given `offset` (default is `0.0`)\n\n# 👨‍💻 Author \n[Astemir Eleev](https://github.com/jVirus)\n\n# 🔖 Licence \nThe project is available under [MIT Licence](https://github.com/jVirus/collection-flow-layout-ios/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feleev%2Fconstraints-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feleev%2Fconstraints-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feleev%2Fconstraints-kit/lists"}