Swiftpack.co - scr037/SelectableFlowLayout as Swift Package

Swiftpack.co is a collection of thousands of indexed Swift packages. Search packages.
See all packages published by scr037.
scr037/SelectableFlowLayout 0.3.0
A flow layout where contained items can be toggled to indicate selection.
⭐️ 0
🕓 3 days ago
iOS
.package(url: "https://github.com/scr037/SelectableFlowLayout.git", from: "0.3.0")

SelectableFlowLayout

SelectableFlowLayout displays a collection of selectable SwiftUI items which are arranged in a directional flow, much like lines of text in a paragraph. It relies on a implementations of a basic FlowLayout. Any view inside the SelectableFlowLayout can be selected or deselected upon user's interaction.

Both FlowLayout and SelectableFlowLayout are available for use in this package

FlowLayout

A collection that can arrange custom components using a directional flow according to the available space. It takes an array of Hashable elements and a @ViewBuilder to provide the a custom component to display for each item in the array.

Example of use:

var westeros: [String] = [
  "The North",
  "The Iron Islands",
  "The Riverlands",
  "The Vale of Arryn",
  "The Westerlands",
  "The Reach",
  "The Stormlands",
  "The Crownlands"
]

ScrollView {
  FlowLayout(items: westeros, content: { element in
    GroupBox {
      Text(element)
    }
  })
}

Example

image

SelectableFlowLayout

Relies on the FlowLayout and takes in two bound arrays of String:

  • A Binding<[String]> (the elements) which represents of all the elements to display in the flow layout.
  • A second Binding<[String]> of the selected items (the selected elements) which is a subset of the first input.

The @ViewBuilder should provide for each item in elements with a "selectable" representation in form of a SwiftUI component, such as a Button or a Toggle. Each selected item will be added to the selected elements array and it will be removed from it upon deselection. The style of the selected and deselected components depends on the customization done in the @ViewBuilder.

In SelectableFlowLayout, selected items can be presented on top of collection by setting showsSelectionOnTop to true.

Example of use:

@State static var westeros: [String] = [
  "The North",
  "The Iron Islands",
  "The Riverlands",
  "The Vale of Arryn",
  "The Westerlands",
  "The Reach",
  "The Stormlands",
  "The Crownlands"
]

@State static var selected: [String] = ["The Iron Islands"]

ScrollView {
  SelectableFlowLayout(
    elements: $westeros, 
    selectedElements: $selected, 
    showsSelectionOnTop: true
  ) { element, isSelected in
    Toggle(element, isOn: .constant(isSelected))
      .environment(\.font, .body)
      .capsuleToggleStyle(
        backgroundColor: .color(normal: .gray, selected: .green),
        foregroundColor: .color(normal: .white, selected: .black),
        strokeColor: .color(normal: .white, selected: .black),
        action: .none
      )
  }
}

Example

image

Toggle Styles

Ideally, a selectable component can be represented with a SwiftUI Toggle. Each Swift Toggle view can be customized using ToggleStyle protocol. This package offers a CapsuleToggleStyle as an example of use.

Example

image

The point

A personal project requires a selectable collection of ingredients which inspired this component.

https://user-images.githubusercontent.com/20460404/190920930-9b9efb60-c5fb-4c9f-b02e-907e02d0460a.mov

GitHub

link
Stars: 0
Last commit: 3 days ago
jonrohan Something's broken? Yell at me @ptrpavlik. Praise and feedback (and money) is also welcome.

Release Notes

0.3.0
3 days ago

Swiftpack is being maintained by Petr Pavlik | @ptrpavlik | @swiftpackco | API | Analytics