]>
Commit | Line | Data |
---|---|---|
575722f4 RBR |
1 | # Patterns |
2 | ||
1418fe49 RBR |
3 | SwiftUI tiling black and white patterns. |
4 | ||
90eb1b21 | 5 | This project contains `PatternView`, which is built out of `Tiles` with a given |
1418fe49 RBR |
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 | ||
5c40e23a | 16 | ![Image showing the included patterns](./doc/images/patterns.png) |
1418fe49 RBR |
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 | ||
90eb1b21 | 34 | The `PatternView` view will tile the selected design in its frame. It has the |
1418fe49 RBR |
35 | following properties: |
36 | ||
5c40e23a RBR |
37 | * `design: Binding<TileDesign>`: **required**, which design to use to tile the |
38 | frame. | |
1418fe49 RBR |
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 | ``` | |
90eb1b21 RBR |
44 | // PatternView using default settings |
45 | PatternView(design: .constant(TileDesign.shadowGrid)) | |
1418fe49 | 46 | |
90eb1b21 RBR |
47 | // PatternView using overrides |
48 | PatternView(design: $tileDesign, pixelSize: 4.0, foregroundColor: .pink, backgroundColor: .cyan) | |
1418fe49 RBR |
49 | ``` |
50 | ||
5c40e23a RBR |
51 | ### Screenshots of the Patterns |
52 | ||
53 | ![Screenshots of the patterns showing the different overrides](./doc/images/pattern_example.png) | |
54 | ||
1418fe49 RBR |
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 | ||
5c40e23a | 60 | * `selectedDesign: Binding<TileDesign>`: **required**, the current selected |
1418fe49 RBR |
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 | ||
90eb1b21 | 75 | PatternView(design: $pattern) |
1418fe49 RBR |
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 | ``` | |
68ce4355 | 87 | |
5c40e23a RBR |
88 | ### Screenshots of the Pattern Picker |
89 | ||
90 | ![Screenshots of the pattern picker showing the different overrides](./doc/images/pattern_picker_example.png) | |
91 | ||
68ce4355 RBR |
92 | ## Supported Platforms |
93 | ||
94 | * macOS 12+ | |
95 | * iOS 15+ | |
96 | * tvOS ?+ | |
97 | * watchOS 8+ | |
98 | * catalyst 15+ | |
5c40e23a RBR |
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 | ||
90eb1b21 | 105 | The tiles support the same properties as `PatternView` with the exception that |
5c40e23a RBR |
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) |