1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
# Patterns
SwiftUI tiling black and white patterns.
This project contains `Patterns`, which are 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 `Pattern` view will tile the selected design in its frame. It has the
following properties:
* `design: TileDesign`: **required, @Binding**, which design to tile the frame with.
* `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.
```
// Pattern using default settings
Pattern(design: .constant(TileDesign.shadowGrid))
// Pattern using overrides
Pattern(design: $tileDesign, pixelSize: 4.0, foregroundColor: .pink, backgroundColor: .cyan)
```
## 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: TileDesign`: **required, @Binding**, 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
...
Pattern(design: $pattern)
.frame(width: 32.0).border(.black)
.onTapGesture {
shouldShowPatternPicker = !shouldShowPatternPicker;
}
.popover(isPresented: $shouldShowPatternPicker) {
PatternPicker(selectedDesign: $design)
}
.onChange(of: pattern) { _ in
shouldShowPatternPicker = false;
}
```
|
