~rbdr/patterns

Black and white Swift UI Patterns
ba4ee0ed — Ruben Beltran del Rio a month ago
Use CoreGraphics to draw instead of SwifTUI
42815337 — Ruben Beltran del Rio a month ago
Use design instead of pattern
90eb1b21 — Ruben Beltran del Rio a month ago
Update README

clone

read-only
https://git.sr.ht/~rbdr/patterns
read/write
git@git.sr.ht:~rbdr/patterns

You can also use your local clone with git send-email.

#Patterns

SwiftUI tiling black and white patterns.

This project contains PatternView, which is built out of Tiles with a given TileDesign.

It also includes a TilePicker that can be used to control the selected design.

#Available Tile Designs

The TileDesign enum contains the following patterns (shown in the image from top left to bottom right)

Image showing the included patterns

  • .grid
  • .dottedGrid
  • .stitch
  • .curvedTile
  • .brick
  • .tile
  • .shadowGrid
  • .circles
  • .trees
  • .shingles
  • .wicker
  • .rhombus
  • .balls

#Usage

The PatternView view will tile the selected design in its frame. It has the following properties:

  • design: Binding<TileDesign>: required, which design to use to tile the frame.
  • pixelSize: CGFloat: defaults to 2.0, the size of a pixel in the tile.
  • foregroundColor: Color: defaults to Color.black, the foreground color.
  • backgroundColor: Color: defaults to Color.white, the background color.
// PatternView using default settings
PatternView(design: .constant(TileDesign.shadowGrid))

// PatternView using overrides
PatternView(design: $tileDesign, pixelSize: 4.0, foregroundColor: .pink, backgroundColor: .cyan)

#Screenshots of the Patterns

Screenshots of the patterns showing the different overrides

#Using the PatternPicker

The pattern picker view is intended to be used when you want to allow users to change the design of the pattern.

  • selectedDesign: Binding<TileDesign>: required, the current selected tile design.
  • selectedColor: Color: defaults to Color.accentColor, the color of the border around the selected tile design.

It also has pixelSize, foregroundColor, and backgroundColor with the same effect as Pattern mentioned above

@State var design: TileDesign = .brick
@State var shouldShowPatternPicker = false

...

PatternView(design: $design)
  .frame(width: 32.0).border(.black)
  .onTapGesture {
    shouldShowPatternPicker = !shouldShowPatternPicker;
  }
  .popover(isPresented: $shouldShowPatternPicker) {
    PatternPicker(selectedDesign: $design)
  }
  .onChange(of: design) { _ in
    shouldShowPatternPicker = false;
  }

#Screenshots of the Pattern Picker

Screenshots of the pattern picker showing the different overrides

#Supported Platforms

  • macOS 12+
  • iOS 15+
  • tvOS ?+
  • watchOS 8+
  • catalyst 15+

#The TileImage struct

If you'd like to do other things with the individual tiles, we also provide the TileImage struct, which generates a CGImage.

The tiles support similar properties as PatternView with the exception that

  • design: TileDesign: required, which design to use to tile the frame.
  • pixelSize: CGFloat: defaults to 2.0, the size of a pixel in the tile.
  • foregroundColor: CGColor: defaults to black, the foreground color.
  • backgroundColor: CGColor: defaults to white, the background color.

Screenshots of the tiles showing the different overrides