-
Learn how to build custom views and controls in SwiftUI with advanced composition, layout, graphics, and animation. See a demo of a high performance, animatable control and watch it made step by step in code. Gain a deeper understanding of the layout system of SwiftUI.
Resources
Related Videos
WWDC22
WWDC20
WWDC19
-
0:00
0:20
0:31
0:47
1:15
1:21
1:36
2:01
2:18
2:25
2:40
3:02
3:20
3:30
3:35
3:44
3:54
4:08
4:11
4:50
5:17
5:26
5:35
5:47
5:52
6:06
6:17
6:26
6:39
7:11
7:14
7:23
7:29
7:42
8:11
8:36
8:47
8:53
9:01
9:10
9:21
9:51
10:00
10:04
10:16
10:26
10:33
10:45
10:52
11:00
11:08
11:17
11:47
11:50
11:54
12:13
12:42
12:54
13:32
13:37
13:52
14:11
14:36
14:47
14:54
15:08
15:22
15:42
15:46
15:54
16:00
16:07
16:23
16:46
16:50
16:54
17:09
17:52
18:11
18:24
18:30
18:31
18:57
19:12
19:37
20:15
20:55
21:05
21:14
21:38
21:49
22:03
22:24
22:35
22:48
23:00
23:13
23:20
24:20
And then we'd put something like this in there. And here we're saying if you give me a shape and the color we can fill it with-- fill those two things together and get, you know, a red circle on the screen. But there's something really interesting here which is that we didn't give it a positional size and that's because we're relying on the layout system, all that stuff Dave described, to kind of position our views for us even though we're in this drawing model. And so, you know, shapes will just kind of react to the layout system and produce views. And in fact, you know now that our draw views, if you think of them that way are really just views, then that really means that everything in SwiftUI applies to drawing because everything in SwiftUI is views. And so all the modifiers you've seen about layout and animation, filter effects-- you know, just everything-- it all applies to drawing in the same way it applies to views. But similarly we've added a lot of kind of new custom modifiers purely for graphics. Things like blurs and shadows. But because drawing is just views, they all apply to regular views as well as the graphics views. And so we think this unification of kind of normal control like views and graphics is going to be incredibly powerful as we go forwards. Okay but let's look at this a little more. So the basic pattern is that we have a shape and a style-- kind of a color or something-- and the combination of those two things produces a view. As we have a few shapes here and as we saw I can fill with red and get a red circle.
25:49
26:28
26:44
27:33
27:40
28:12
28:40
28:44
29:09
29:13
29:18
29:21
29:31
29:53
30:05
30:30
30:35
30:38
30:47
30:54
31:36
31:41
31:45
31:55
32:08
32:18
32:38
33:12
33:46
33:53
34:14
34:24
35:38
36:03
36:11
36:42
37:14
37:20
37:44
37:54
38:49
-