{"id":2179,"url":"https://github.com/bridger/StackLayout","last_synced_at":"2025-08-02T23:32:07.923Z","repository":{"id":62455947,"uuid":"43099540","full_name":"bridger/StackLayout","owner":"bridger","description":"An alternative to UIStackView for common Auto Layout patterns.","archived":false,"fork":false,"pushed_at":"2020-05-12T01:07:10.000Z","size":138,"stargazers_count":76,"open_issues_count":1,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-29T16:40:37.866Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Objective-C","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/bridger.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":"2015-09-25T00:02:43.000Z","updated_at":"2022-06-29T00:29:06.000Z","dependencies_parsed_at":"2022-11-02T00:01:27.493Z","dependency_job_id":null,"html_url":"https://github.com/bridger/StackLayout","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bridger%2FStackLayout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bridger%2FStackLayout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bridger%2FStackLayout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bridger%2FStackLayout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bridger","download_url":"https://codeload.github.com/bridger/StackLayout/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228503135,"owners_count":17930518,"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":[],"created_at":"2024-01-05T20:16:06.763Z","updated_at":"2024-12-06T17:30:47.374Z","avatar_url":"https://github.com/bridger.png","language":"Objective-C","funding_links":[],"categories":["UI"],"sub_categories":["Other free courses","Font","Other Testing"],"readme":"# StackLayout\n\n[![Version](https://img.shields.io/cocoapods/v/StackLayout.svg?style=flat)](http://cocoapods.org/pods/StackLayout)\n[![License](https://img.shields.io/cocoapods/l/StackLayout.svg?style=flat)](http://cocoapods.org/pods/StackLayout)\n[![Platform](https://img.shields.io/cocoapods/p/StackLayout.svg?style=flat)](http://cocoapods.org/pods/StackLayout)\n\nStackLayout builds on Auto Layout to make some of the most common layouts easier to manage. It creates the constraints that you need and allows you to edit them with semantic method names, like `setTopMargin:` or `setHorizontalAlignment:`. It is similar to UIStackView, but unlike UIStackView it is not a subclass of UIView. It is a layout manager you can use with any view. This has a few advantages:\n\n- Multiple layouts in one view.\n- Less wrapper views in your layout.\n- Compatible with iOS 8+\n\n## Basics\n\nThree labels stacked vertically, hugging the top, with a space between them.\n\n```\nlet verticalLayout = container.addSubviewsWithVerticalLayout([headerLabel, subtitleLabel, bodyLabel]) { layout in\n    layout.verticalAlignment = .Top\n    layout.horizontalAlignment = .Fill\n}\n```\n \nThe above layout takes about 10 constraints usually, which can be a hassle to manage. The layout object manages them for you and allows you to easily change them later. You don't need to keep a reference to the layout object if you don't need it though.\n\n## More examples\n\n\n![WelcomeTipLayout](https://github.com/bridger/StackLayout/blob/master/Images/WelcomeTipLayout.png?raw=true)\n\n```\ntipView.addSubviewsWithVerticalLayout([titleLabel, bodyLabel, tipsButton, laterButton]) { layout in\n    layout.verticalAlignment = .Fill\n    layout.verticalMargins = 46\n    layout.topMargin = 34\n    layout.bottomMargin = 17\n    layout.spacing = 28\n\tlayout.setSpacing(10, between: titleLabel, and: bodyLabel)\n}\n\n// Constrain the width of the tip view so the text will wrap.\ntipView.widthAnchor.constraintEqualToConstant(290).active = true\n```\n\n------\n\n![ToolbarLayout](https://github.com/bridger/StackLayout/blob/master/Images/ToolbarLayout.png?raw=true)\n```\ntoolbar.addSubviewsWithHorizontalLayout([trashButton]) { layout in\n    layout.horizontalAlignment = .Leading\n    layout.verticalAlignment = .Center\n    layout.leadingMargin = 15\n}\n\ntoolbar.addSubviewsWithHorizontalLayout([resizeButton, spotlightButton]) { layout in\n    layout.verticalAlignment = .Center\n    layout.horizontalAlignment = .Center\n}\n```\n\n## Most used properties\n\n`spacing`\n\n`setSpacing:betweenView:andView:`\n\n`(vertical)(horizontal)Alignment`\n\n`(vertical)(horizontal)Margins`\n\n`(top)(bottom)(leading)(horizontal)Margin`\n\n\n## Alignment\n\nYou usually want to choose both a vertical and horizontal alignment.\n\n- **SLAlignmentFill**\n  - Use this when you want the subviews to completely fill the container (exluding space for margins). This can also make the container shrink until it is just big enough to hold the subviews. This is the most common alignment.\n- **SLAlignmentTop/Bottom/Leading/Trailing**\n  - Just as it sounds. The view(s) will be stuck to the margin of the container view.\n- **SLAlignmentCenter**\n  - This pulls the views to the middle. The layout might create invisible \"helper\" views to accomplish this. You can control the strength of the centering constraints using `centeringPriority`.\n- **SLAlignmentNone**\n  - This is the default. Without an alignment the views can be layed out anywhere within the margins of the container. This is only useful when you want to align the views relative to something else in the view hierarchy.\n\n\n## Spacing\n\nAll ajdacent subviews have a \"space\" constraint for the space between them. In the Auto Layout Visual Format Language, it looks like \"[first]-space-[second]\". By default, this space is set to 0 so all subviews are edge-to-edge. You can set the space between two adjacent subviews by calling `setSpacing:betweenView:andView:`. You can also adjust the spacing constraints at once by setting `spacing`, which will override any other previous `setSpacing:betweenView:andView:` calls.\n\nSpacing constraints are required by default, but can be weakened by setting `spacingPriority`.\n \n## Rules to Remember\n\nIf you are working with a layout where these rules are getting in the way, don't be afraid to just ditch Stack Layout and make the constraints yourself! [PureLayout](https://github.com/PureLayout/PureLayout) or NSLayoutAnchor (iOS 9+) make this easier.\n\n#### Set both vertical and horizontal alignments\n\nIf you don't set an aligment, there are many places a subview can end up. In this layout: `container.addSubviewsWithVerticalLayout([redButton, blueButton])`, the red and blue button stack can be in the top-left or bottom-right (or anywhere in between) of the container. This can be useful if you want views to be layed out relative to another view in the hierarchy. Generally though, you want to set both `verticalAligment` and `horizontalAlignment`.\n\n#### Subviews stay within margins\n\nSubviews usually stay entirely within the bounds of the containing view, even if there is no vertical or horizontal alignment set. This is done by the \"margin\" constraints. You can override this by setting the margins to a negative number or reducing the priority of the margin constraints by setting `marginsPriority`.\n\n#### Subviews need sizing constraints\n\nStackLayout doesn't govern how big subviews are relative to each other. For example, this layout is ambiguous:\n\n```\ncontainer.addSubviewsWithVerticalLayout([redView, blueView]) { layout in\n    layout.verticalAlignment = .Fill\n    layout.horizontalAlignment = .Fill\n}\n```\n\nTogether, redView and blueView fill the container but you need another constraint to say how big they are relative to each other. To make them each take up half of the container you'd need this supplemental constraint: `[redView.heightAnchor constraintEqualToAnchor:blueView.heightAnchor].active = YES;`\n\nOften subviews already have their own size, either from `intrinsicContentSize` or from their own subviews and contraints.\n\n## Example Project\n\nThe example project has not been built yet. If you'd like to contribute, you can build examples in the example project.\n\nClone the repo, and run `pod install` from the Example directory first.\n\n## Requirements\n\n## Installation\n\nStackLayout is available through [CocoaPods](http://cocoapods.org). To install\nit, simply add the following line to your Podfile:\n\n```ruby\npod \"StackLayout\"\n```\n\n## Author\n\nBridger Maxwell, bridger.maxwell@gmail.com\n\n## License\n\nStackLayout is available under the MIT license. See the LICENSE file for more info.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbridger%2FStackLayout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbridger%2FStackLayout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbridger%2FStackLayout/lists"}