{"id":13525564,"url":"https://github.com/kennic/FrameLayoutKit","last_synced_at":"2025-04-01T05:31:50.089Z","repository":{"id":43211769,"uuid":"140690213","full_name":"kennic/FrameLayoutKit","owner":"kennic","description":"A super fast and easy-to-use layout library for iOS. FrameLayoutKit supports complex layouts, including chaining and nesting layout with simple and intuitive operand syntax.","archived":false,"fork":false,"pushed_at":"2024-01-10T09:17:31.000Z","size":13496,"stargazers_count":65,"open_issues_count":2,"forks_count":7,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-04-24T08:24:43.754Z","etag":null,"topics":["autolayout","autolayout-framework","flow-layout","grid-layout","hstack","ios","layout","layout-engine","layoutkit","stack-layout","swift","swift-framework","swift-package-manager","vstack","zstack"],"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/kennic.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,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2018-07-12T09:15:55.000Z","updated_at":"2024-04-10T20:33:52.000Z","dependencies_parsed_at":"2023-02-18T07:50:41.712Z","dependency_job_id":"2d70adf0-ea5f-4cec-9720-dbebc4b46c9b","html_url":"https://github.com/kennic/FrameLayoutKit","commit_stats":{"total_commits":358,"total_committers":2,"mean_commits":179.0,"dds":0.05865921787709494,"last_synced_commit":"dfe73e3163ab6dd0471d9065403e1e1ae80ddd0c"},"previous_names":[],"tags_count":109,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kennic%2FFrameLayoutKit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kennic%2FFrameLayoutKit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kennic%2FFrameLayoutKit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kennic%2FFrameLayoutKit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kennic","download_url":"https://codeload.github.com/kennic/FrameLayoutKit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246591316,"owners_count":20801982,"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":["autolayout","autolayout-framework","flow-layout","grid-layout","hstack","ios","layout","layout-engine","layoutkit","stack-layout","swift","swift-framework","swift-package-manager","vstack","zstack"],"created_at":"2024-08-01T06:01:19.986Z","updated_at":"2025-04-01T05:31:50.075Z","avatar_url":"https://github.com/kennic.png","language":"Swift","readme":"# FrameLayoutKit\n\n[![Platform](https://img.shields.io/cocoapods/p/FrameLayoutKit.svg?style=flat)](http://cocoapods.org/pods/FrameLayoutKit)\n[![Language](http://img.shields.io/badge/language-Swift-brightgreen.svg?style=flat)](https://developer.apple.com/swift)\n[![Version](https://img.shields.io/cocoapods/v/FrameLayoutKit.svg?style=flat-square)](http://cocoapods.org/pods/FrameLayoutKit)\n[![SwiftPM Compatible](https://img.shields.io/badge/Swift%20Package%20Manager-compatible-brightgreen.svg)](https://github.com/apple/swift-package-manager)\n[![License](https://img.shields.io/cocoapods/l/FrameLayoutKit.svg?style=flat-square)](http://cocoapods.org/pods/FrameLayoutKit)\n\n![image](images/banner.jpg)\n\nA super fast and easy-to-use layout library for iOS. FrameLayoutKit supports complex layouts, including chaining and nesting layout with simple and intuitive operand syntax.\n\nIt simplifies the UI creation process, resulting in cleaner and more maintainable code.\n\n## Why Use FrameLayoutKit?\n\nSay NO to autolayout constraint nightmare:\n\n\u003ctable\u003e\n\u003ctr\u003e\u003ctd\u003e Autolayout \u003c/td\u003e \u003ctd\u003e FrameLayoutKit \u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\u003cimg alt=\"No\" src=\"images/no_constraint.png\"\u003e\n\u003c/td\u003e\n\u003ctd\u003e\n\u003cimg alt=\"Yes!!!\" src=\"images/frameLayoutSyntax.png\"\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n## Table of Contents\n\n-   [Installation](#installation)\n-   [Core Components](#core-components)\n-   [Basic Usage](#basic-usage)\n-   [DSL Syntax](#dsl-syntax)\n-   [Examples](#examples)\n-   [Performance](#performance)\n-   [Requirements](#requirements)\n-   [Author](#author)\n-   [License](#license)\n\n## Installation\n\nFrameLayoutKit is available through `Swift Package Manager` (Recommended) and [CocoaPods](http://cocoapods.org):\n\nRegardless of the method, make sure to import the framework into your project:\n\n```swift\nimport FrameLayoutKit\n```\n\n### Swift Package Manager (Recommended)\n\n[Swift Package Manager](https://swift.org/package-manager/) is recommended to install FrameLayoutKit.\n\n1.  Click `File`\n2.  `Add Packages...`\n3.  Enter the git URL for FrameLayoutKit:\n\n```swift\nhttps://github.com/kennic/FrameLayoutKit.git\n```\n\n### CocoaPods\n\nFrameLayoutKit can also be installed as a [CocoaPod](https://cocoapods.org/). To install, add the following line to your Podfile:\n\n```ruby\npod \"FrameLayoutKit\"\n```\n\n## Core Components\n\n![image](images/FrameLayoutKit.png)\n\nFrameLayoutKit includes the following core components:\n\n### FrameLayout\n\nThe most basic class, manages a single view and adjusts its size and position based on configured properties.\n\n### StackFrameLayout\n\nManages multiple views in rows (horizontal) or columns (vertical), similar to `UIStackView` but with higher performance and more options.\n\n-   **HStackLayout**: Horizontal layout\n-   **VStackLayout**: Vertical layout\n-   **ZStackLayout**: Stacked layout (z-index)\n\n### GridFrameLayout\n\nArranges views in a grid, with customizable number of columns and rows.\n\n### FlowFrameLayout\n\nArranges views in a flow, automatically wrapping to the next line when there's not enough space.\n\n### DoubleFrameLayout\n\nManages two views with various layout options.\n\n### ScrollStackView\n\nCombines `UIScrollView` with `StackFrameLayout` to create a scrollview that can automatically layout its child views.\n\n## Basic Usage\n\n### Creating and Configuring Layouts\n\n```swift\n// Create a vertical layout\nlet vStackLayout = VStackLayout()\nvStackLayout.spacing = 10\nvStackLayout.distribution = .center\nvStackLayout.padding(top: 20, left: 20, bottom: 20, right: 20)\n\n// Add views to the layout\nvStackLayout.add(view1)\nvStackLayout.add(view2)\nvStackLayout.add(view3)\n\n// Add the layout to a parent view\nparentView.addSubview(vStackLayout)\n\n// Update the layout's frame\nvStackLayout.frame = parentView.bounds\n```\n\n### Using Operator Syntax (Recommended)\n\nFrameLayoutKit provides the `+` operator syntax to easily add views to layouts:\n\n```swift\n// Add a single view\nvStackLayout + view1\n\n// Add an array of views\nvStackLayout + [view1, view2, view3]\n\n// Add spacing\nvStackLayout + 10 // Add 10pt spacing\n\n// Add a child layout\nvStackLayout + hStackLayout\n```\n\n### Configuring View Properties\n\n```swift\n// Configure alignment\n(vStackLayout + view1).alignment = (.center, .fill)\n\n// Configure fixed size\n(vStackLayout + view2).fixedSize = CGSize(width: 100, height: 50)\n\n// Add a flexible view (can expand)\n(vStackLayout + view3).flexible()\n```\n\n### Chained Syntax (Recommended)\n\n```swift\nvStackLayout\n    .distribution(.center)\n    .spacing(16)\n    .flexible()\n    .fixedHeight(50)\n    .aligns(.top, .center)\n    .padding(top: 20, left: 20, bottom: 20, right: 20)\n```\n\n## DSL Syntax\n\nFrameLayoutKit provides a DSL (Domain Specific Language) syntax similar to SwiftUI, making layout creation more intuitive and readable:\n\n```swift\n// Create VStackLayout with DSL syntax\nlet vStackLayout = VStackView {\n    titleLabel\n    descriptionLabel\n    SpaceItem(20) // Add a 20pt space\n    Item(actionButton).minWidth(120) // Customize the button's minimum width\n}\n\n// Create HStackLayout with DSL syntax\nlet hStackLayout = HStackView {\n    StackItem(imageView).fixedSize(width: 50, height: 50)\n    VStackView {\n        titleLabel\n        subtitleLabel\n    }.spacing(5)\n    FlexibleSpace() // Add flexible space\n    StackItem(button).align(vertical: .center, horizontal: .right)\n}\n```\n\n### Main DSL Components\n\n-   **StackItem**: Wraps a view to add to a stack with additional options\n-   **SpaceItem**: Adds fixed spacing\n-   **FlexibleSpace**: Adds flexible spacing (can expand)\n-   **Item**: Similar to StackItem but with more options\n\n## Examples\n\nHere are some examples of how FrameLayoutKit works:\n\n\u003ctable\u003e\n\u003ctr\u003e\u003ctd\u003e Source \u003c/td\u003e \u003ctd\u003e Result \u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\t\n```swift\nlet frameLayout = HStackLayout()\nframeLayout + VStackLayout {\n   ($0 + earthImageView).alignment = (.top, .center)\n   ($0 + 0).flexible() // add a flexible space\n   ($0 + rocketImageView).alignment = (.center, .center)\n}\nframeLayout + VStackLayout {\n   $0 + [nameLabel, dateLabel] // add an array of views\n   $0 + 10 // add a space with a minimum of 10 pixels\n   $0 + messageLabel // add a single view\n}.spacing(5.0)\n\nframeLayout\n.spacing(15)\n.padding(top: 15, left: 15, bottom: 15, right: 15)\n.debug(true) // show dashed lines to visualize the layout\n\n````\n\u003c/td\u003e\n\u003ctd\u003e\n\u003cimg alt=\"result 1\" src=\"images/helloWorld.png\"\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n\u003ctable\u003e\n\u003ctr\u003e\u003ctd\u003e Source \u003c/td\u003e \u003ctd\u003e Result \u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\n```swift\nlet frameLayout = VStackLayout {\n  ($0 + imageView).flexible()\n  $0 + VStackLayout {\n     $0 + titleLabel\n     $0 + ratingLabel\n  }\n}.padding(top: 12, left: 12, bottom: 12, right: 12)\n .distribution(.bottom)\n .spacing(5)\n````\n\n\u003c/td\u003e\n\u003ctd\u003e\n\u003cimg alt=\"result 1\" src=\"images/example_1.png\"\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n\u003ctable\u003e\n\u003ctr\u003e\u003ctd\u003e Source \u003c/td\u003e \u003ctd\u003e Result \u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\n```swift\nlet posterSize = CGSize(width: 100, height: 150)\nlet frameLayout = ZStackLayout()\nframeLayout + backdropImageView\nframeLayout + VStackLayout {\n $0 + HStackLayout {\n  ($0 + posterImageView).fixedSize(posterSize)\n    $0 + VStackLayout {\n      $0 + titleLabel\n      $0 + subtitleLabel\n    }.padding(bottom: 5).flexible().distribution(.bottom)\n  }.spacing(12).padding(top: 0, left: 12, bottom: 12, right: 12)\n}.distribution(.bottom)\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\u003cimg alt=\"result 2\" src=\"images/example_2.png\"\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n\u003ctable\u003e\n\u003ctr\u003e\u003ctd\u003e Source \u003c/td\u003e \u003ctd\u003e Result \u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\n```swift\nlet buttonSize = CGSize(width: 45, height: 45)\nlet cardView = VStackLayout()\n  .spacing(10)\n  .padding(top: 24, left: 24, bottom: 24, right: 24)\n\ncardView + titleLabel\n(cardView + emailField).minHeight = 50\n(cardView + passwordField).minHeight = 50\n(cardView + nextButton).fixedHeight = 45\n(cardView + separateLine)\n  .fixedContentHeight(1)\n  .padding(top: 4, left: 0, bottom: 4, right: 40)\ncardView + HStackLayout {\n ($0 + [facebookButton, googleButton, appleButton])\n  .forEach { $0.fixedContentSize(buttonSize) }\n}.distribution(.center).spacing(10)\n```\n\n\u003c/td\u003e\n\u003ctd\u003e\n\u003cimg alt=\"result 2\" src=\"images/example_3.png\"\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n## Key Properties\n\n### FrameLayout\n\n-   **targetView**: The view managed by this layout\n-   **edgeInsets**: Padding around the view\n-   **minSize/maxSize**: Minimum/maximum size of the layout\n-   **minContentSize/maxContentSize**: Minimum/maximum size of the child view\n-   **fixedSize/fixedContentSize**: Fixed size of the layout/child view\n-   **contentAlignment**: Content alignment (top, center, bottom, left, right, fill, fit)\n-   **isFlexible**: Allows the layout to expand to fill available space\n\n### StackFrameLayout\n\n-   **axis**: Direction of the stack (vertical, horizontal)\n-   **distribution**: How child views are distributed (top, center, bottom, left, right, fill, fit, justified)\n-   **spacing**: Space between child views\n-   **isJustified**: Evenly distributes child views\n-   **isOverlapped**: Allows child views to overlap\n\n## Performance\n\nFrameLayoutKit is one of the fastest layout libraries.\n![Benchmark Results](images/bechmark.png \"Benchmark results\")\n\nSee: [Layout libraries benchmark's project](https://github.com/layoutBox/LayoutFrameworkBenchmark)\n\n## Requirements\n\n-   iOS 11.0+\n-   Swift 5.0+\n\n## Author\n\nNam Kennic, namkennic@me.com\n\n## License\n\nFrameLayoutKit is available under the MIT license. See the LICENSE file for more info.\n","funding_links":[],"categories":["Libs"],"sub_categories":["Layout"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkennic%2FFrameLayoutKit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkennic%2FFrameLayoutKit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkennic%2FFrameLayoutKit/lists"}