git.r.bdr.sh - rbdr/patterns/blob - README.md

   1 # Patterns
   2
   3 SwiftUI tiling black and white patterns.
   4
   5 This project contains `PatternView`, which is built out of `Tiles` with a given
   6 `TileDesign`.
   7
   8 It also includes a `TilePicker` that can be used to control the selected
   9 design.
  10
  11 ## Available Tile Designs
  12
  13 The `TileDesign` enum contains the following patterns (shown in the image from
  14 top left to bottom right)
  15
  16 ![Image showing the included patterns](./doc/images/patterns.png)
  17
  18 * `.grid`
  19 * `.dottedGrid`
  20 * `.stitch`
  21 * `.curvedTile`
  22 * `.brick`
  23 * `.tile`
  24 * `.shadowGrid`
  25 * `.circles`
  26 * `.trees`
  27 * `.shingles`
  28 * `.wicker`
  29 * `.rhombus`
  30 * `.balls`
  31
  32 ## Usage
  33
  34 The `PatternView` view will tile the selected design in its frame. It has the
  35 following properties:
  36
  37 * `design: Binding<TileDesign>`: **required**, which design to use to tile the
  38   frame.
  39 * `pixelSize: CGFloat`: **defaults to 2.0**, the size of a pixel in the tile.
  40 * `foregroundColor: Color`: **defaults to `Color.black`**, the foreground color.
  41 * `backgroundColor: Color`: **defaults to `Color.white`**, the background color.
  42
  43 ```
  44 // PatternView using default settings
  45 PatternView(design: .constant(TileDesign.shadowGrid))
  46
  47 // PatternView using overrides
  48 PatternView(design: $tileDesign, pixelSize: 4.0, foregroundColor: .pink, backgroundColor: .cyan)
  49 ```
  50
  51 ### Screenshots of the Patterns
  52
  53 ![Screenshots of the patterns showing the different overrides](./doc/images/pattern_example.png)
  54
  55 ## Using the PatternPicker
  56
  57 The pattern picker view is intended to be used when you want to allow users to
  58 change the design of the pattern.
  59
  60 * `selectedDesign: Binding<TileDesign>`: **required**, the current selected
  61   tile design.
  62 * `selectedColor: Color`: **defaults to `Color.accentColor`**, the color of the
  63   border around the selected tile design.
  64
  65 It also has `pixelSize`, `foregroundColor`, and `backgroundColor` with the
  66 same effect as `Pattern` mentioned above
  67
  68
  69 ```
  70 @State var design: TileDesign = .brick
  71 @State var shouldShowPatternPicker = false
  72
  73 ...
  74
  75 PatternView(design: $pattern)
  76   .frame(width: 32.0).border(.black)
  77   .onTapGesture {
  78     shouldShowPatternPicker = !shouldShowPatternPicker;
  79   }
  80   .popover(isPresented: $shouldShowPatternPicker) {
  81     PatternPicker(selectedDesign: $design)
  82   }
  83   .onChange(of: pattern) { _ in
  84     shouldShowPatternPicker = false;
  85   }
  86 ```
  87
  88 ### Screenshots of the Pattern Picker
  89
  90 ![Screenshots of the pattern picker showing the different overrides](./doc/images/pattern_picker_example.png)
  91
  92 ## Supported Platforms
  93
  94 * macOS 12+
  95 * iOS 15+
  96 * tvOS ?+
  97 * watchOS 8+
  98 * catalyst 15+
  99
 100 ## The Tile view
 101
 102 If you'd like to do other things with the individual tiles, we also provide the
 103 Tile view, which is just a single tile.
 104
 105 The tiles support the same properties as `PatternView` with the exception that
 106 `design` is a `TileDesign` and not a `Binding<TileDesign>`
 107
 108 ![Screenshots of the tiles showing the different overrides](./doc/images/tile_example.png)