globulus / swiftui-flow-layout Goto Github PK

Flow layout / tag cloud / collection view in SwiftUI.

License: MIT License

Swift 90.20% Ruby 9.80%

swiftui-flow-layout's Introduction

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.

Installation

This component is distrubuted as a Swift package. Just add this URL to your package list:

https://github.com/globulus/swiftui-flow-layout

You can also use CocoaPods:

pod 'SwiftUIFlowLayout', '~> 1.0.4'

Sample usage

import SwiftUIFlowLayout

struct FlowLayout_Previews: PreviewProvider {
  static var previews: some View {
    FlowLayout(mode: .scrollable,
               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"],
               itemSpacing: 4) {
      Text($0)
        .font(.system(size: 12))
        .foregroundColor(.black)
        .padding()
        .background(RoundedRectangle(cornerRadius: 4)
                               .border(Color.gray)
                               .foregroundColor(Color.gray))
    }.padding()
  }
}

Recipe

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

Changelog

1.0.5 - Using preferences key to read view height.
1.0.4 - Fixed crash when changing item count.
1.0.3 - Removed Hashable constraint on data. Added convenience initializer when refresh binding isn't used.
1.0.2 - Fixed layout issues with multiline items.
1.0.1 - Added itemSpacing parameter.
1.0.0 - Initial release.

swiftui-flow-layout's People

Contributors

Stargazers

Watchers

Forkers

swiftui-flow-layout's Issues

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

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.

Assuming the views I am passing to the FlowLayout has a binding I have the following problem:

@Binding var items: [SomeType]

FlowLayout(mode: .scrollable,
               binding: $items,
               items: items,
               itemSpacing: 4) {
      MyChip( ??? ) // How can I pass the binding here to have back the change of selected/unselected
    }.padding()

Am I misunderstanding something about how to use it?

Thanks for the help

The spacing is wrong for multiline items.

Please check the attached image showing the issue. Any idea how to fix it? Thanks

Issue when combining with button

When tying to display buttons instead of inactive view, get 'Contextual closure type '() -> Label' expects 0 arguments, but 1 was used in closure body' error.

Example code:

enum CloudType: String, CaseIterable, Codable {
    case Azure
    case Google
    case Amazon
}

struct ContentView: View {
    let cloudTypes: [CloudType] = [.Azure, .Google, .Amazon]
    var body: some View {
        FlowLayout(mode: .scrollable,
                   items: cloudTypes.map { $0.rawValue },
                      itemSpacing: 4) {
                Text($0)
                    .padding(.vertical, 8)
                    .padding(.horizontal, 24)
                    .background(RoundedRectangle(cornerRadius: 32).fill(.blue))
                    .foregroundColor(.white)
                    .font(.subheadline)
           }.padding()
    }
}