A SwiftUI Views for wrapping HStack elements into multiple lines

Denis

Last update: Jan 6, 2023

Related tags

UI swiftui-wrapping-stack

Overview

SwiftUI WrappingStack

A SwiftUI Views for wrapping HStack elements into multiple lines.

List of supported views

WrappingHStack - provides HStack that supports line wrapping

How to use

Step 1

Add a dependency using Swift Package Manager to your project: https://github.com/diniska/swiftui-wrapping-stack

Step 2

Import the dependency

import WrappingStack

Step 3

Replace HStack with WrappingHStack in your view structure. It is compatible with ForEach.

struct MyView: View {

    let elements = ["Cat 🐱", "Dog 🐶", "Sun 🌞", "Moon 🌕", "Tree 🌳"]
    
    var body: some View {
        WrappingHStack(id: \.self) { // use the same id is in the `ForEach` below
            ForEach(elements, id: \.self) { element in
                Text(element)
                    .padding()
                    .background(Color.gray)
                    .cornerRadius(6)
            }
        }
        .frame(width: 300) // limiting the width for demo purpose. This line is not needed in real code
    }
    
}

The result of the code above:

Customization

Customize appearance using the next parameters. All the default SwiftUI modifiers can be applied as well.

`WrappingHStack` parameters

Parameter name	Description
`alignment`	horizontal and vertical alignment. `.center` is used by default. Vertical alignment is applied to every row
`horizontalSpacing`	horizontal spacing between elements
`verticalSpacing`	vertical spacing between the lines

Performance considerations

The code written in a way to cache the elements representing views sizes, it doesn't re-calculate the size for different views with the same id.

huge numbers of elements are not recommended, although the same applies to HStack where LazyHStack is a better alternative for the long rows. If you have a large number of elements - double-check the memory and performance on a real device
it is pretty good in terms of CPU consumption as every element calculates its size only once.

Comments

fix: break line logic

It more visible on cases with more then one line break. I'm sorry I can't show my use case, but those simple changes worked for me.

Nice job! Thanks a lot!

opened by iuriatan 4
Trailing alignment fixed

A fix for this issue: https://github.com/diniska/swiftui-wrapping-stack/issues/4

The issue caused by GeometryReader aligning to the leading edge by default

opened by diniska 2
Unable to archive project for any iOS device (arm64)
Xcode v13.4.1

The package fails to compile when trying to build for any iOS device. Steps to repro:

Create empty project

Add WrappingStack package

Select any iOS device (arm64)

Build project

Result: Unable to find type "___" in Scope errors, other Swift Compiler errors
opened by maxlee2006 1
Package platform versions

Why are the platform versions set so low in the Package.swift? SwiftUI isn't even supported below 13 and you have all your code behind availability checks for 14. Why not just set the package to v14 instead of v9?

I ask because I'm running into CI issues with Fastlane where building for localization export fails because it can't find any of the SwiftUI APIs.

opened by josh150 4
Strange behaviour after WrappingStack out of screen

See attached video.

https://user-images.githubusercontent.com/2090084/127798187-fb63ef7f-f967-47ff-8a00-394df584235e.mp4

By the way, I'm using the latest version on iOS 14 (Xcode 12.5)

opened by skywalkerlw 5

Releases(1.1.0)

1.1.0(Dec 8, 2022)

Line breaking logic fixed
Source code(tar.gz)
Source code(zip)
1.0.1(Jul 25, 2021)
Trailing alignment support improved

Source code(tar.gz)
Source code(zip)
1.0.0(May 25, 2021)
WrappingHStack view that automatically adds line breaks to HStack

Readme.md documentation

Source code(tar.gz)
Source code(zip)

Owner

Denis

iOS developer. Working in Sydney

GitHub

Easily use UIKit views in your SwiftUI applications. Create Xcode Previews for UIView elements

SwiftUIKitView Easily use UIKit views in SwiftUI. Convert UIView to SwiftUI View Create Xcode Previews from UIView elements SwiftUI functional updatin

682 Dec 29, 2022

Oovium's AetherView and other basic UI elements necessary for embedding Oovium in other apps

0 Aug 24, 2022

Protocol to handle initial Loadings, Empty Views and Error Handling in a ViewController & views

StatusProvider Protocol to handle initial Loadings, Empty Views and Error Handling in a ViewController & views CocoaPods Podfile pod 'StatusProvider'

887 Dec 22, 2022

📐 Declarative UIKit in 10 lines of code.

Withable ?? Declarative UIKit in 10 lines of code. See corresponding article at Declarative UIKit with 10 lines of code A simple extension instead of

14 Dec 20, 2022

SheetPresentation for SwiftUI. Multiple devices support: iOS, watchOS, tvOS, macOS, macCatalyst.

13 Nov 17, 2021

UISegmentedControl remake that supports selecting multiple segments, vertical stacking, combining text and images.

MultiSelectSegmentedControl UISegmentedControl remake that supports selecting multiple segments, vertical stacking, combining text and images. Feature

286 Dec 15, 2022

UISlider clone with multiple thumbs and values, range highlight, optional snap intervals, optional value labels, either vertical or horizontal.

MultiSlider UISlider clone with multiple thumbs and values, range highlight, optional snap intervals, optional value labels, either vertical or horizo

326 Dec 29, 2022

Pull up controller with multiple sticky points like in iOS Maps

PullUpController Create your own pull up controller with multiple sticky points like in iOS Maps Features Multiple sticky points Landscape support Scr

1.2k Dec 22, 2022

A minimalistic looking banner library for iOS. It supports multiple customizable kinds of Banner types

12 Oct 10, 2022

A custom UIControl which functions like UISlider where you can set multiple intervals with different step values for each interval.

MultiStepSlider A custom UIControl which functions like UISlider where you can set multiple intervals with different step values for each interval. Th

25 Apr 28, 2022

A SwiftUI Views for wrapping HStack elements into multiple lines

Related tags

Overview

SwiftUI WrappingStack

List of supported views

How to use

Step 1

Step 2

Step 3

Customization

WrappingHStack parameters

Performance considerations

Comments

fix: break line logic

Trailing alignment fixed

Unable to archive project for any iOS device (arm64)

Package platform versions

Strange behaviour after WrappingStack out of screen

Releases(1.1.0)

1.1.0(Dec 8, 2022)

1.0.1(Jul 25, 2021)

1.0.0(May 25, 2021)

Owner

Denis

Easily use UIKit views in your SwiftUI applications. Create Xcode Previews for UIView elements

Oovium's AetherView and other basic UI elements necessary for embedding Oovium in other apps

Protocol to handle initial Loadings, Empty Views and Error Handling in a ViewController & views

📐 Declarative UIKit in 10 lines of code.

SheetPresentation for SwiftUI. Multiple devices support: iOS, watchOS, tvOS, macOS, macCatalyst.

UISegmentedControl remake that supports selecting multiple segments, vertical stacking, combining text and images.

UISlider clone with multiple thumbs and values, range highlight, optional snap intervals, optional value labels, either vertical or horizontal.

Pull up controller with multiple sticky points like in iOS Maps

A minimalistic looking banner library for iOS. It supports multiple customizable kinds of Banner types

A custom UIControl which functions like UISlider where you can set multiple intervals with different step values for each interval.

Zeplin component preview for your SwiftUI views

Create SwiftUI Views with any data

Runtime introspection and unit testing of SwiftUI views

Placeholder views based on content, loading, error or empty states

Compose views using enums swiftly: `let label: UILabel = [.text("Hello"), .textColor(.red)]`

UI framework that allows developers to integrate an amazing selection interface into their applications

A paging scroll view for SwiftUI, using internal SwiftUI components

SwiftUI-Drawer - A bottom-up drawer in swiftUI

SwiftUI-Margin adds a margin() viewModifier to a SwiftUI view.

`WrappingHStack` parameters