├── .swiftpm └── xcode │ └── package.xcworkspace │ ├── contents.xcworkspacedata │ └── xcshareddata │ └── IDEWorkspaceChecks.plist ├── Package.swift ├── SwiftUIFlowLayout.podspec ├── LICENSE ├── README.md ├── .gitignore └── Sources └── SwiftUIFlowLayout └── SwiftUIFlowLayout.swift /.swiftpm/xcode/package.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /.swiftpm/xcode/package.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IDEDidComputeMac32BitWarning 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Package.swift: -------------------------------------------------------------------------------- 1 | // swift-tools-version:5.3 2 | 3 | import PackageDescription 4 | 5 | let package = Package( 6 | name: "SwiftUIFlowLayout", 7 | platforms: [ 8 | .iOS(.v13), 9 | .macOS(.v10_15) 10 | ], 11 | products: [ 12 | .library( 13 | name: "SwiftUIFlowLayout", 14 | targets: ["SwiftUIFlowLayout"]), 15 | ], 16 | dependencies: [ 17 | ], 18 | targets: [ 19 | .target( 20 | name: "SwiftUIFlowLayout", 21 | dependencies: []), 22 | ] 23 | ) 24 | -------------------------------------------------------------------------------- /SwiftUIFlowLayout.podspec: -------------------------------------------------------------------------------- 1 | Pod::Spec.new do |s| 2 | s.name = 'SwiftUIFlowLayout' 3 | s.version = '1.0.5' 4 | s.summary = 'A Flow Layout is a container that orders its views sequentially, breaking into a new "line" according to the available width of the screen.' 5 | s.homepage = 'https://github.com/globulus/swiftui-flow-layout' 6 | s.license = { :type => 'MIT', :file => 'LICENSE' } 7 | s.author = { 'Gordan Glavaš' => 'gordan.glavas@gmail.com' } 8 | s.source = { :git => 'https://github.com/globulus/swiftui-flow-layout.git', :tag => s.version.to_s } 9 | s.ios.deployment_target = '13.0' 10 | s.swift_version = '4.0' 11 | s.source_files = 'Sources/SwiftUIFlowLayout/**/*' 12 | end 13 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Gordan Glavaš 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # SwiftUIFlowLayout 2 | 3 | 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. 4 | 5 | The end result looks like this: 6 | 7 | ![in action](https://swiftuirecipes.com/user/pages/01.blog/flow-layout-in-swiftui/Screenshot%202020-11-20%20at%2010.54.37.png) 8 | 9 | * 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**. 10 | 11 | ## Installation 12 | 13 | This component is distrubuted as a **Swift package**. Just add this URL to your package list: 14 | 15 | ```text 16 | https://github.com/globulus/swiftui-flow-layout 17 | ``` 18 | 19 | You can also use **CocoaPods**: 20 | 21 | ```ruby 22 | pod 'SwiftUIFlowLayout', '~> 1.0.4' 23 | ``` 24 | 25 | ## Sample usage 26 | 27 | ```swift 28 | import SwiftUIFlowLayout 29 | 30 | struct FlowLayout_Previews: PreviewProvider { 31 | static var previews: some View { 32 | FlowLayout(mode: .scrollable, 33 | items: ["Some long item here", "And then some longer one", 34 | "Short", "Items", "Here", "And", "A", "Few", "More", 35 | "And then a very very very long one"], 36 | itemSpacing: 4) { 37 | Text($0) 38 | .font(.system(size: 12)) 39 | .foregroundColor(.black) 40 | .padding() 41 | .background(RoundedRectangle(cornerRadius: 4) 42 | .border(Color.gray) 43 | .foregroundColor(Color.gray)) 44 | }.padding() 45 | } 46 | } 47 | ``` 48 | 49 | ## Recipe 50 | 51 | Check out [this recipe](https://swiftuirecipes.com/blog/flow-layout-in-swiftui) for in-depth description of the component and its code. Check out [SwiftUIRecipes.com](https://swiftuirecipes.com) for more **SwiftUI recipes**! 52 | 53 | ## Changelog 54 | 55 | * 1.0.5 - Using preferences key to read view height. 56 | * 1.0.4 - Fixed crash when changing item count. 57 | * 1.0.3 - Removed `Hashable` constraint on data. Added convenience initializer when refresh binding isn't used. 58 | * 1.0.2 - Fixed layout issues with multiline items. 59 | * 1.0.1 - Added `itemSpacing` parameter. 60 | * 1.0.0 - Initial release. 61 | 62 | 63 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Xcode 2 | # 3 | # gitignore contributors: remember to update Global/Xcode.gitignore, Objective-C.gitignore & Swift.gitignore 4 | 5 | ## User settings 6 | xcuserdata/ 7 | 8 | ## compatibility with Xcode 8 and earlier (ignoring not required starting Xcode 9) 9 | *.xcscmblueprint 10 | *.xccheckout 11 | 12 | ## compatibility with Xcode 3 and earlier (ignoring not required starting Xcode 4) 13 | build/ 14 | DerivedData/ 15 | *.moved-aside 16 | *.pbxuser 17 | !default.pbxuser 18 | *.mode1v3 19 | !default.mode1v3 20 | *.mode2v3 21 | !default.mode2v3 22 | *.perspectivev3 23 | !default.perspectivev3 24 | 25 | ## Obj-C/Swift specific 26 | *.hmap 27 | 28 | ## App packaging 29 | *.ipa 30 | *.dSYM.zip 31 | *.dSYM 32 | 33 | ## Playgrounds 34 | timeline.xctimeline 35 | playground.xcworkspace 36 | 37 | # Swift Package Manager 38 | # 39 | # Add this line if you want to avoid checking in source code from Swift Package Manager dependencies. 40 | # Packages/ 41 | # Package.pins 42 | # Package.resolved 43 | # *.xcodeproj 44 | # 45 | # Xcode automatically generates this directory with a .xcworkspacedata file and xcuserdata 46 | # hence it is not needed unless you have added a package configuration file to your project 47 | # .swiftpm 48 | 49 | .build/ 50 | 51 | # CocoaPods 52 | # 53 | # We recommend against adding the Pods directory to your .gitignore. However 54 | # you should judge for yourself, the pros and cons are mentioned at: 55 | # https://guides.cocoapods.org/using/using-cocoapods.html#should-i-check-the-pods-directory-into-source-control 56 | # 57 | # Pods/ 58 | # 59 | # Add this line if you want to avoid checking in source code from the Xcode workspace 60 | # *.xcworkspace 61 | 62 | # Carthage 63 | # 64 | # Add this line if you want to avoid checking in source code from Carthage dependencies. 65 | # Carthage/Checkouts 66 | 67 | Carthage/Build/ 68 | 69 | # Accio dependency management 70 | Dependencies/ 71 | .accio/ 72 | 73 | # fastlane 74 | # 75 | # It is recommended to not store the screenshots in the git repo. 76 | # Instead, use fastlane to re-generate the screenshots whenever they are needed. 77 | # For more information about the recommended setup visit: 78 | # https://docs.fastlane.tools/best-practices/source-control/#source-control 79 | 80 | fastlane/report.xml 81 | fastlane/Preview.html 82 | fastlane/screenshots/**/*.png 83 | fastlane/test_output 84 | 85 | # Code Injection 86 | # 87 | # After new code Injection tools there's a generated folder /iOSInjectionProject 88 | # https://github.com/johnno1962/injectionforxcode 89 | 90 | iOSInjectionProject/ 91 | -------------------------------------------------------------------------------- /Sources/SwiftUIFlowLayout/SwiftUIFlowLayout.swift: -------------------------------------------------------------------------------- 1 | import SwiftUI 2 | 3 | public let flowLayoutDefaultItemSpacing: CGFloat = 4 4 | 5 | public struct FlowLayout: View { 6 | let mode: Mode 7 | @Binding var binding: RefreshBinding 8 | let items: Data 9 | let itemSpacing: CGFloat 10 | @ViewBuilder let viewMapping: (Data.Element) -> ItemView 11 | 12 | @State private var totalHeight: CGFloat 13 | 14 | public init(mode: Mode, 15 | binding: Binding, 16 | items: Data, 17 | itemSpacing: CGFloat = flowLayoutDefaultItemSpacing, 18 | @ViewBuilder viewMapping: @escaping (Data.Element) -> ItemView) { 19 | self.mode = mode 20 | _binding = binding 21 | self.items = items 22 | self.itemSpacing = itemSpacing 23 | self.viewMapping = viewMapping 24 | _totalHeight = State(initialValue: (mode == .scrollable) ? .zero : .infinity) 25 | } 26 | 27 | public var body: some View { 28 | let stack = VStack { 29 | GeometryReader { geometry in 30 | self.content(in: geometry) 31 | } 32 | } 33 | return Group { 34 | if mode == .scrollable { 35 | stack.frame(height: totalHeight) 36 | } else { 37 | stack.frame(maxHeight: totalHeight) 38 | } 39 | } 40 | } 41 | 42 | private func content(in g: GeometryProxy) -> some View { 43 | var width = CGFloat.zero 44 | var height = CGFloat.zero 45 | var lastHeight = CGFloat.zero 46 | let itemCount = items.count 47 | return ZStack(alignment: .topLeading) { 48 | ForEach(Array(items.enumerated()), id: \.offset) { index, item in 49 | viewMapping(item) 50 | .padding([.horizontal, .vertical], itemSpacing) 51 | .alignmentGuide(.leading, computeValue: { d in 52 | if (abs(width - d.width) > g.size.width) { 53 | width = 0 54 | height -= lastHeight 55 | } 56 | lastHeight = d.height 57 | let result = width 58 | if index == itemCount - 1 { 59 | width = 0 60 | } else { 61 | width -= d.width 62 | } 63 | return result 64 | }) 65 | .alignmentGuide(.top, computeValue: { d in 66 | let result = height 67 | if index == itemCount - 1 { 68 | height = 0 69 | } 70 | return result 71 | }) 72 | } 73 | } 74 | .background(HeightReaderView(binding: $totalHeight)) 75 | } 76 | 77 | public enum Mode { 78 | case scrollable, vstack 79 | } 80 | } 81 | 82 | private struct HeightPreferenceKey: PreferenceKey { 83 | static func reduce(value _: inout CGFloat, nextValue _: () -> CGFloat) {} 84 | static var defaultValue: CGFloat = 0 85 | } 86 | 87 | private struct HeightReaderView: View { 88 | @Binding var binding: CGFloat 89 | var body: some View { 90 | GeometryReader { geo in 91 | Color.clear 92 | .preference(key: HeightPreferenceKey.self, value: geo.frame(in: .local).size.height) 93 | } 94 | .onPreferenceChange(HeightPreferenceKey.self) { h in 95 | binding = h 96 | } 97 | } 98 | } 99 | 100 | 101 | public extension FlowLayout where RefreshBinding == Never? { 102 | init(mode: Mode, 103 | items: Data, 104 | itemSpacing: CGFloat = flowLayoutDefaultItemSpacing, 105 | @ViewBuilder viewMapping: @escaping (Data.Element) -> ItemView) { 106 | self.init(mode: mode, 107 | binding: .constant(nil), 108 | items: items, 109 | itemSpacing: itemSpacing, 110 | viewMapping: viewMapping) 111 | } 112 | } 113 | 114 | struct FlowLayout_Previews: PreviewProvider { 115 | static var previews: some View { 116 | FlowLayout(mode: .scrollable, 117 | items: ["Some long item here", "And then some longer one", 118 | "Short", "Items", "Here", "And", "A", "Few", "More", 119 | "And then a very very very long long long long long long long long longlong long long long long long longlong long long long long long longlong long long long long long longlong long long long long long longlong long long long long long long long one", "and", "then", "some", "short short short ones"]) { 120 | Text($0) 121 | .font(.system(size: 12)) 122 | .foregroundColor(.black) 123 | .padding() 124 | .background(RoundedRectangle(cornerRadius: 4) 125 | .border(Color.gray) 126 | .foregroundColor(Color.gray)) 127 | }.padding() 128 | } 129 | } 130 | 131 | struct TestWithDeletion: View { 132 | @State private var items = ["Some long item here", "And then some longer one", 133 | "Short", "Items", "Here", "And", "A", "Few", "More", 134 | "And then a very very very long long long long long long long long longlong long long long long long longlong long long long long long longlong long long long long long longlong long long long long long longlong long long long long long long long one", "and", "then", "some", "short short short ones"] 135 | 136 | var body: some View { 137 | VStack { 138 | Button("Delete all") { 139 | items.removeAll() 140 | } 141 | Button("Restore") { 142 | items = ["Some long item here", "And then some longer one", 143 | "Short", "Items", "Here", "And", "A", "Few", "More", 144 | "And then a very very very long long long long long long long long longlong long long long long long longlong long long long long long longlong long long long long long longlong long long long long long longlong long long long long long long long one", "and", "then", "some", "short short short ones"] 145 | } 146 | Button("Add one") { 147 | items.append("\(Date().timeIntervalSince1970)") 148 | } 149 | FlowLayout(mode: .vstack, 150 | items: items) { 151 | Text($0) 152 | .font(.system(size: 12)) 153 | .foregroundColor(.black) 154 | .padding() 155 | .background(RoundedRectangle(cornerRadius: 4) 156 | .border(Color.gray) 157 | .foregroundColor(Color.gray)) 158 | }.padding() 159 | } 160 | } 161 | } 162 | 163 | struct TestWithDeletion_Previews: PreviewProvider { 164 | static var previews: some View { 165 | TestWithDeletion() 166 | } 167 | } 168 | 169 | struct TestWithRange_Previews: PreviewProvider { 170 | static var previews: some View { 171 | FlowLayout(mode: .scrollable, 172 | items: 1..<100) { 173 | Text("\($0)") 174 | .font(.system(size: 12)) 175 | .foregroundColor(.black) 176 | .padding() 177 | .background(RoundedRectangle(cornerRadius: 4) 178 | .border(Color.gray) 179 | .foregroundColor(Color.gray)) 180 | }.padding() 181 | } 182 | } 183 | --------------------------------------------------------------------------------