Flow layout / tag cloud / collection view in SwiftUI.

Gordan Glavaš

Last update: Dec 28, 2022

Related tags

Layout swiftui-flow-layout

Overview

SwiftUIFlowLayout

A Flow Layout is a container that orders its views sequentially, breaking into a new "line" according to the available width of the screen. You can compare it to a left-aligned block of text, where every word is a View. A common use for this layout is to create a tag cloud.

The end result looks like this:

The layout algorithm behaves differently if your FlowLayout is nested in a VStack or a scrollable parent, such as ScrollView or a List. Therefore, there's the Mode enum and mode property.

Recipe

Check out this recipe for in-depth description of the component and its code. Check out SwiftUIRecipes.com for more SwiftUI recipes!

Sample usage

struct FlowLayout_Previews: PreviewProvider {
  static var previews: some View {
    FlowLayoutView(mode: .scrollable,
                               binding: .constant(5),
                               items: ["Some long item here", "And then some longer one",
                                          "Short", "Items", "Here", "And", "A", "Few", "More", 
                                          "And then a very very very long one"]) {
      Text($0)
        .font(.system(size: 12))
        .foregroundColor(.black)
        .padding()
        .background(RoundedRectangle(cornerRadius: 4)
                               .border(Color.gray)
                               .foregroundColor(Color.gray))
    }.padding()
  }
}

Installation

This component is distrubuted as a Swift package.

You might also like...

Auto Layout made easy with the Custom Layout.

Auto Layout made easy with the Custom Layout. Getting started CocoaPods CocoaPods is a dependency manager for Cocoa projects. You can install it with

1 Jan 16, 2022

AppStoreClone - Understanding the complex layout of app store using UICompositional layout in swift

AppStoreClone Understanding the complex layout of app store using UICompositiona

8 Dec 28, 2022

A collection of operators and utilities that simplify iOS layout code.

Anchorage A lightweight collection of intuitive operators and utilities that simplify Auto Layout code. Anchorage is built directly on top of the NSLa

620 Jan 3, 2023

This page contains an iOS Application that uses Modelplace.AI Cloud API

Modelplace iOS App This page contains an iOS Application that uses Modelplace.AI

7 Jan 21, 2022

A grid layout view for SwiftUI

Update July 2020 - latest SwiftUI now has built-in components to do this, which should be used instead. FlowStack FlowStack is a SwiftUI component for

147 Nov 10, 2022

Horizontal and Vertical collection view for infinite scrolling that was designed to be used in SwiftUI

InfiniteScroller Example struct ContentView: View { @State var selected: Int = 1 var body: some View { InfiniteScroller(direction: .ve

5 Apr 17, 2022

LayoutKit is a fast view layout library for iOS, macOS, and tvOS.

🚨 UNMAINTAINED 🚨 This project is no longer used by LinkedIn and is currently unmaintained. LayoutKit is a fast view layout library for iOS, macOS, a

3.2k Dec 27, 2022

Programmatic view layout for the rest of us.

Façade Important Facade is no longer under active development, and as such if you create any issues or submit pull requests, it's not very likely to b

696 Aug 3, 2022

LayoutKit is a fast view layout library for iOS, macOS, and tvOS.

🚨 UNMAINTAINED 🚨 This project is no longer used by LinkedIn and is currently unmaintained. LayoutKit is a fast view layout library for iOS, macOS, a

3.2k Jan 4, 2023

Comments

FlowLayout Error in iOS 13.7

then I used package of FlowLayout in my project and I run the app with iOS 13.7, the app crash. Could you please make changes for < iOS 14 Thank you

opened by AhmedAmineZribi 5
Button tag items trigger action click for all buttons instead of just the clicked one
What I have is something like this:

FlowLayout(mode: .scrollable, items: items, itemSpacing: 10) { item in Button(action: { print(item) }, label: { Text(item) } )

The problem is that when I tap on a button, it gets called once for each item in my list. Thus, in this example, clicking on one tag item will print all items in my list.
opened by andrei115 1