]>
Commit | Line | Data |
---|---|---|
575722f4 RBR |
1 | # Patterns |
2 | ||
1418fe49 RBR |
3 | SwiftUI tiling black and white patterns. |
4 | ||
5 | This project contains `Patterns`, which are 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] | |
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 `Pattern` view will tile the selected design in its frame. It has the | |
35 | following properties: | |
36 | ||
37 | * `design: TileDesign`: **required, @Binding**, which design to tile the frame with. | |
38 | * `pixelSize: CGFloat`: **defaults to 2.0**, the size of a pixel in the tile. | |
39 | * `foregroundColor: Color`: **defaults to `Color.black`**, the foreground color. | |
40 | * `backgroundColor: Color`: **defaults to `Color.white`**, the background color. | |
41 | ||
42 | ``` | |
43 | // Pattern using default settings | |
44 | Pattern(design: .constant(TileDesign.shadowGrid)) | |
45 | ||
46 | // Pattern using overrides | |
47 | Pattern(design: $tileDesign, pixelSize: 4.0, foregroundColor: .pink, backgroundColor: .cyan) | |
48 | ``` | |
49 | ||
50 | ## Using the PatternPicker | |
51 | ||
52 | The pattern picker view is intended to be used when you want to allow users to | |
53 | change the design of the pattern. | |
54 | ||
55 | * `selectedDesign: TileDesign`: **required, @Binding**, the current selected | |
56 | tile design. | |
57 | * `selectedColor: Color`: **defaults to `Color.accentColor`**, the color of the | |
58 | border around the selected tile design. | |
59 | ||
60 | It also has `pixelSize`, `foregroundColor`, and `backgroundColor` with the | |
61 | same effect as `Pattern` mentioned above | |
62 | ||
63 | ||
64 | ``` | |
65 | @State var design: TileDesign = .brick | |
66 | @State var shouldShowPatternPicker = false | |
67 | ||
68 | ... | |
69 | ||
70 | Pattern(design: $pattern) | |
71 | .frame(width: 32.0).border(.black) | |
72 | .onTapGesture { | |
73 | shouldShowPatternPicker = !shouldShowPatternPicker; | |
74 | } | |
75 | .popover(isPresented: $shouldShowPatternPicker) { | |
76 | PatternPicker(selectedDesign: $design) | |
77 | } | |
78 | .onChange(of: pattern) { _ in | |
79 | shouldShowPatternPicker = false; | |
80 | } | |
81 | ``` | |
68ce4355 RBR |
82 | |
83 | ## Supported Platforms | |
84 | ||
85 | * macOS 12+ | |
86 | * iOS 15+ | |
87 | * tvOS ?+ | |
88 | * watchOS 8+ | |
89 | * catalyst 15+ |