-
Notifications
You must be signed in to change notification settings - Fork 149
/
3. Swift Programming Language.srt
8084 lines (6456 loc) · 167 KB
/
3. Swift Programming Language.srt
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
1
00:00:00,401 --> 00:00:03,568
[MUSIC]
2
00:00:03,637 --> 00:00:07,239
Stanford University. Okay,
3
00:00:07,307 --> 00:00:12,311
well welcome to lecture number
three of Stanford CS193P,
4
00:00:12,379 --> 00:00:16,447
fall of 2017 and
18 academic year.
5
00:00:16,516 --> 00:00:19,885
Today mostly, we're gonna
talk about some Swift stuff.
6
00:00:19,953 --> 00:00:23,321
Now, you've hopefully done
your homework for the reading,
7
00:00:23,390 --> 00:00:25,891
so some of the stuff will
be kinda summary, but
8
00:00:25,959 --> 00:00:28,560
some of this is really not
covered in the reading.
9
00:00:28,629 --> 00:00:32,197
So I'm trying to give you
the full picture of stuff,
10
00:00:32,266 --> 00:00:36,201
that reading is really great
but it is great concise.
11
00:00:36,270 --> 00:00:37,201
I know you probably
feel like well,
12
00:00:37,270 --> 00:00:39,171
that was a lot of reading for
something that's concise, but
13
00:00:39,240 --> 00:00:41,473
it is quite concise.
So I'm gonna try and
14
00:00:41,541 --> 00:00:43,909
cover some of the other stuff.
But before I do all that,
15
00:00:43,977 --> 00:00:46,912
I'm gonna do a little,
what I call a teaser demo of
16
00:00:46,981 --> 00:00:50,115
auto-layout where I'm gonna
show you how we can make
17
00:00:50,184 --> 00:00:53,919
our UI in concentration look
good when we rotate the phone,
18
00:00:53,987 --> 00:00:57,355
or when we a run on little bit
different sized iPhone, or
19
00:00:57,424 --> 00:01:01,226
whatever. I call it a teaser
because I don't intend to
20
00:01:01,295 --> 00:01:04,295
teach you auto layout which
is the feature that allows
21
00:01:04,364 --> 00:01:06,765
us to do that. It's just to
show you what's possible.
22
00:01:06,833 --> 00:01:09,034
We'll actually have
a whole lecture on auto
23
00:01:09,103 --> 00:01:13,204
layout in about three
weeks I think. But then,
24
00:01:13,273 --> 00:01:15,907
after I do that little demo,
I'll be back. I'm first gonna
25
00:01:15,976 --> 00:01:18,577
take just one minute to
review what you should have
26
00:01:18,645 --> 00:01:21,513
learned by what we did last
week and I'm literally just
27
00:01:21,582 --> 00:01:24,482
gonna read it off a list with
quick examples. And you can
28
00:01:24,551 --> 00:01:26,818
kind of say in your head,
oh yeah, yeah I got that,
29
00:01:26,887 --> 00:01:29,454
I got that or oh wait, I did
not really understand that and
30
00:01:29,523 --> 00:01:31,390
that's a prompt to go back and
look at it.
31
00:01:31,458 --> 00:01:34,626
Then we'll dive into this long
list that you see up here,
32
00:01:34,694 --> 00:01:38,163
of various Swift things. So
let's start with this demo I
33
00:01:38,232 --> 00:01:41,232
was talking about,
this auto-layout demo.
34
00:01:41,301 --> 00:01:45,770
What we're gonna do here, and
I apologize for any technical
35
00:01:45,839 --> 00:01:48,873
problems we have here because,
actually, my computer died,
36
00:01:48,942 --> 00:01:51,008
and I had to put it. This is
all brand new computer, so
37
00:01:51,077 --> 00:01:54,512
I hope everything's installed
properly. But here's the code,
38
00:01:54,581 --> 00:01:58,016
I think, that we had at
the end of the last lecture.
39
00:01:58,085 --> 00:02:01,986
And the UI looks pretty good.
We laid it out.
40
00:02:02,055 --> 00:02:04,156
But I just did this by
dragging these things and
41
00:02:04,224 --> 00:02:06,624
using the little dash
blue lines to put them
42
00:02:06,693 --> 00:02:11,763
in position. And when we run
this thing, it looks okay but
43
00:02:11,832 --> 00:02:13,464
only on an iPhone X and
44
00:02:13,533 --> 00:02:16,534
only in portrait mode like
this. If I were to for
45
00:02:16,603 --> 00:02:20,772
example, rotate this iPhone
to the side which I can do
46
00:02:20,841 --> 00:02:23,742
in a simulator by going,
Hardware, rotate left or
47
00:02:23,811 --> 00:02:28,579
right, you can see that my UI
looks like this. My buttons
48
00:02:28,648 --> 00:02:31,983
are kind of all jammed in the
corner here. I've lost flips,
49
00:02:32,052 --> 00:02:34,285
it's down here somewhere.
I can't even see it.
50
00:02:34,354 --> 00:02:37,756
Still works, but it's kind of
off in the middle of nowhere.
51
00:02:37,824 --> 00:02:40,826
What we really want is for
this UI to spread itself
52
00:02:40,894 --> 00:02:44,762
out and fill the whole space
that's involved. By the way,
53
00:02:44,831 --> 00:02:47,766
you can also rotate your
device with Command and
54
00:02:47,835 --> 00:02:51,102
the arrows. Kind of a cool
way to flip back and
55
00:02:51,171 --> 00:02:54,305
forth. All right, so
how are we gonna do that?
56
00:02:54,374 --> 00:02:57,209
How are we gonna make our UI
expand? Let's go ahead and
57
00:02:57,277 --> 00:02:59,444
open up here, give
ourselves some more space.
58
00:02:59,513 --> 00:03:00,846
And also I'm gonna
zoom in a little so
59
00:03:00,914 --> 00:03:03,949
you can see. Another thing I'm
gonna do is we're gonna be
60
00:03:04,018 --> 00:03:06,150
using these blue lines,
the dashed blue
61
00:03:06,219 --> 00:03:09,488
line that appears as you move
things around as part of this.
62
00:03:09,556 --> 00:03:12,256
So I'm gonna change my
background from black
63
00:03:12,325 --> 00:03:15,494
to back to white temporarily,
just so
64
00:03:15,563 --> 00:03:18,296
that we can see that
those blue lines and
65
00:03:18,364 --> 00:03:20,331
stuff a little bit better.
So I'm just gonna go to white.
66
00:03:20,400 --> 00:03:22,400
When we come to run,
I'll turn it back to black.
67
00:03:22,469 --> 00:03:27,104
So this is purely for dealing
development issues here. So
68
00:03:27,173 --> 00:03:31,009
it's really kinda two things I
need to do to make this work.
69
00:03:31,077 --> 00:03:35,246
One is, I need to kinda
take all those buttons and
70
00:03:35,315 --> 00:03:37,249
make them stick to the edges,
right?
71
00:03:37,318 --> 00:03:38,483
So that when they rotate and
72
00:03:38,552 --> 00:03:42,287
the edges get longer and
skinnier, they stick.
73
00:03:42,355 --> 00:03:45,390
Right now, everything's stuck
to the upper left corner.
74
00:03:45,458 --> 00:03:47,258
The upper left corner, you're
gonna find out next week,
75
00:03:47,327 --> 00:03:50,829
is the origin of drawing. In
IOS where everything is kinda
76
00:03:50,897 --> 00:03:52,998
stuck up to the upper left and
then just, so
77
00:03:53,066 --> 00:03:55,600
when we rotate it all,
it just goes off the bottom,
78
00:03:55,668 --> 00:03:58,536
we can't see it. So that's
really what we need to do, but
79
00:03:58,605 --> 00:03:59,904
to stick them to the edges,
80
00:03:59,973 --> 00:04:02,807
we also kind of need to group
them together. Because when
81
00:04:02,876 --> 00:04:05,544
the edges pull this group
of 12 buttons apart,
82
00:04:05,613 --> 00:04:07,812
they all need to kinda
share that space.
83
00:04:07,881 --> 00:04:09,581
So there's two things
we have to do.
84
00:04:09,650 --> 00:04:12,584
One is group them together,
one is pin them to the edges.
85
00:04:12,653 --> 00:04:17,756
So we're gonna do that with
two different features in IOS.
86
00:04:17,824 --> 00:04:19,257
One, the grouping
things together,
87
00:04:19,326 --> 00:04:22,227
we're gonna do with stack
view. Okay, so UI stack view
88
00:04:22,296 --> 00:04:26,231
is just another class in IOS
like UI Button is a class and
89
00:04:26,300 --> 00:04:29,734
UI label is just another
view in fact. And
90
00:04:29,803 --> 00:04:32,770
what it does is it will take
other views, like let's
91
00:04:32,839 --> 00:04:36,508
say these four buttons and
it will stack them together.
92
00:04:36,577 --> 00:04:39,244
Now, it only knows how
to stack horizontally or
93
00:04:39,313 --> 00:04:42,981
vertically. It can't stack
12 of these things in two
94
00:04:43,050 --> 00:04:45,950
dimensions like this. So
I'm gonna have to make three
95
00:04:46,019 --> 00:04:50,155
horizontal stacks out of this
group, out of this group, and
96
00:04:50,223 --> 00:04:53,024
out of this group. But then
I'll take those three stacks
97
00:04:53,092 --> 00:04:55,794
and stack them vertically.
Cuz it's perfectly fine to put
98
00:04:55,863 --> 00:04:59,230
stacks inside stacks,
all right? And once I do that,
99
00:04:59,299 --> 00:05:02,667
I'll have all 12 of these
kinda stocked together. And
100
00:05:02,736 --> 00:05:05,803
then I can pin it to the edges
and they'll stretch out. So
101
00:05:05,872 --> 00:05:07,405
how do we make this stack use?
102
00:05:07,473 --> 00:05:10,074
Super simple, you just select
it here. Let me zoom in so
103
00:05:10,143 --> 00:05:12,977
we can really see what's going
on here. We only need the top
104
00:05:13,046 --> 00:05:15,347
part for now. So I deselected
these four things.
105
00:05:15,416 --> 00:05:17,215
I'm going down to this
button right here.
106
00:05:17,284 --> 00:05:19,751
You see this button,
embed and stack?
107
00:05:19,820 --> 00:05:22,020
Well, that's what it does.
It embeds in stack.
108
00:05:22,089 --> 00:05:24,188
And it embedded it.
Now, couple of things.
109
00:05:24,257 --> 00:05:27,392
One is, it made the buttons as
small as it could when you put
110
00:05:27,460 --> 00:05:30,028
in the stack. It has 50
point font, remember, for
111
00:05:30,097 --> 00:05:32,730
those emojis. So that's just
as small as they'll go.
112
00:05:32,799 --> 00:05:36,434
It also has no spacing
between. But I can put spacing
113
00:05:36,503 --> 00:05:40,638
in-between by just selecting
it. It was left selected after
114
00:05:40,707 --> 00:05:43,809
I stacked. And going over here
to the inspector because this
115
00:05:43,877 --> 00:05:47,145
stack view, just like
a button, can be inspected,
116
00:05:47,213 --> 00:05:49,881
right? And you can see
it made it horizontal,
117
00:05:49,950 --> 00:05:52,617
it kinda noticed my buttons
were mostly horizontal. So
118
00:05:52,686 --> 00:05:57,522
it picked horizontal. And so
here's how I set the spacing.
119
00:05:57,590 --> 00:06:00,492
I go down here. I'm gonna
use a standard spacing.
120
00:06:00,560 --> 00:06:03,027
There's a lot of places when
you're doing UI design where
121
00:06:03,096 --> 00:06:05,463
you can pick an UI
standard value and
122
00:06:05,532 --> 00:06:07,498
it'll pick a standard spacing.
123
00:06:07,567 --> 00:06:09,167
This is a standard
spacing between buttons.
124
00:06:09,235 --> 00:06:11,336
And you wanna use that pretty
much as much as possible.
125
00:06:11,404 --> 00:06:14,005
That way, your UI will be
spaced like other UI and
126
00:06:14,074 --> 00:06:17,609
you will feel like rolling
on the same page as
127
00:06:17,678 --> 00:06:21,746
UI designers across all these
apps. Also I wanna make sure
128
00:06:21,814 --> 00:06:26,317
that these four buttons get
equal amount of space. Okay,
129
00:06:26,386 --> 00:06:29,421
whatever space I am given here
gets equally distributed and
130
00:06:29,489 --> 00:06:31,322
I do that with this
distribution thing here,
131
00:06:31,391 --> 00:06:36,228
I say fill equally. Alignment
just means I fill the whole
132
00:06:36,296 --> 00:06:38,563
space, I could have these
things being centered or
133
00:06:38,632 --> 00:06:40,431
kinda pushed up to
the top of the stack but
134
00:06:40,500 --> 00:06:42,801
I'm gonna have it fill
the whole space. So that's it.
135
00:06:42,869 --> 00:06:45,503
So I'm just gonna do the same
thing with these two rows.
136
00:06:45,572 --> 00:06:48,373
So this one go down here,
embed in stack,
137
00:06:48,441 --> 00:06:52,210
this group right here
embed in stack. Oops,
138
00:06:52,279 --> 00:06:56,080
I did it twice there. Now I'm
gonna select both of these.
139
00:06:56,149 --> 00:07:00,851
Make them fill equally and
standard value spacing. So
140
00:07:00,920 --> 00:07:04,756
now I've got three horizontal
stacks. I'm gonna stack these
141
00:07:04,824 --> 00:07:06,991
together, I'm gonna
select them. By the way,
142
00:07:07,060 --> 00:07:09,694
dragging to select is really
an awesome way to select.
143
00:07:09,763 --> 00:07:12,163
I highly recommend you do that
rather than trying to click on
144
00:07:12,231 --> 00:07:15,433
things. Because by the way,
let's say I try to click on
145
00:07:15,502 --> 00:07:19,370
here to select this row. Oops,
I selected the button inside.
146
00:07:19,439 --> 00:07:21,940
I didn't want that,
I wanted the whole row. But
147
00:07:22,008 --> 00:07:25,610
if I just drag, not control
drag but regular drag here,
148
00:07:25,679 --> 00:07:30,048
it selects the thing that I
intercepted with my drag.
149
00:07:30,117 --> 00:07:32,650
Anyway, so I'm gonna select
all three of these with drag.
150
00:07:32,719 --> 00:07:35,086
And I'm gonna go embed in
stack. You put them in
151
00:07:35,155 --> 00:07:37,622
a vertical stack. You notice
this time it's vertical,
152
00:07:37,691 --> 00:07:39,623
cuz it noticed those three
things are vertical.
153
00:07:39,692 --> 00:07:40,925
If your things are random,
154
00:07:40,994 --> 00:07:43,461
it'll pick the one that it
thinks is the most likely.
155
00:07:43,530 --> 00:07:44,863
You can always change
it by going here and
156
00:07:44,931 --> 00:07:47,932
changing it to the other one.
So we have vertical,
157
00:07:48,001 --> 00:07:51,135
we also wanna fill equally,
top to bottom here, and
158
00:07:51,204 --> 00:07:53,271
we also want standard spacing.
So
159
00:07:53,340 --> 00:07:56,607
it's great. We got our
buttons in this nice grid.
160
00:07:56,676 --> 00:08:02,046
They're all Perfectly laid
out in this rectangle. Now,
161
00:08:02,115 --> 00:08:05,483
we want to pin this rectangle
to the edges. Okay, so
162
00:08:05,552 --> 00:08:08,820
that when the device rotates,
or if the device was bigger,
163
00:08:08,888 --> 00:08:10,388
like if it was
an iPhone 8 Plus, or
164
00:08:10,457 --> 00:08:12,223
something like that and
it was wider, so
165
00:08:12,292 --> 00:08:15,026
that it would all just stretch
out. So, the way we do
166
00:08:15,095 --> 00:08:17,529
that is first I'm going to
use those dash blue lines.
167
00:08:17,598 --> 00:08:21,065
I picked up this thing.
Again, picking it up,
168
00:08:21,134 --> 00:08:23,601
you wanna select it first,
then pick it up.
169
00:08:23,669 --> 00:08:26,538
If you don't select it first
and try to pick it up, oops,
170
00:08:26,606 --> 00:08:28,706
you might try and pull one of
these things out of there.
171
00:08:28,775 --> 00:08:30,742
Okay? So, be careful
about that. All right.
172
00:08:30,810 --> 00:08:32,176
So, I'm gonna use
the blue lines. I'm gonna
173
00:08:32,245 --> 00:08:35,013
put this where it
kinda suggests for
174
00:08:35,082 --> 00:08:36,147
the upper left hand corner.
175
00:08:36,216 --> 00:08:39,484
You see that? That's pretty
much where the blue line,
176
00:08:39,552 --> 00:08:41,953
that would be the standard
spacing from the edges.
177
00:08:42,022 --> 00:08:43,387
That's what the blue
lines are telling you.
178
00:08:43,456 --> 00:08:45,857
This is a standard
place to put this. Now,
179
00:08:45,926 --> 00:08:49,227
I need to pin it and the way
we make relationships between
180
00:08:49,296 --> 00:08:52,764
views and the UI like pinning
them to each other and
181
00:08:52,832 --> 00:08:56,200
stuff is with control drag.
Exact same way that we made
182
00:08:56,269 --> 00:08:58,202
a relationship between
our UI and our code,
183
00:08:58,271 --> 00:09:01,239
by dragging the code, we do
the same thing between views.
184
00:09:01,308 --> 00:09:04,675
So, I'm gonna control drag
from this already selected
185
00:09:04,744 --> 00:09:09,047
box here to the top. Okay, so
I'm just dragging up towards
186
00:09:09,115 --> 00:09:11,750
the top, and when I let go
it's going to say, okay,
187
00:09:11,818 --> 00:09:14,619
what relationship do you
want between that view and
188
00:09:14,687 --> 00:09:17,588
the top. And there's various
relationships you can have,
189
00:09:17,657 --> 00:09:19,090
like I said, in three
weeks we're going to have
190
00:09:19,159 --> 00:09:21,159
a whole lecture on these
relationships, but
191
00:09:21,227 --> 00:09:24,962
at the very top is the one
Top Space to Safe Area.
192
00:09:25,031 --> 00:09:28,132
You see that Top Space to
Space Area? The safe area
193
00:09:28,201 --> 00:09:31,336
is a safe edge around
the screen where you can
194
00:09:31,405 --> 00:09:34,639
safely draw without
overlapping some other UI.
195
00:09:34,707 --> 00:09:37,241
So, here it's putting it right
under the place where all
196
00:09:37,310 --> 00:09:40,578
the cameras and face
recognition stuff is all in
197
00:09:40,647 --> 00:09:44,883
here. So, it's to keeping it
below that. Now, if I had
198
00:09:44,951 --> 00:09:47,752
other UI on this, like tab
bars, or title bars, or
199
00:09:47,820 --> 00:09:51,455
whatever, then the safety area
would be inside those. So,
200
00:09:51,524 --> 00:09:54,325
we wouldn't overlap our titles
and stuff. It's really cool.
201
00:09:54,394 --> 00:10:00,264
So, I'm gonna put this
top space little pin, so
202
00:10:00,333 --> 00:10:03,501
I'm kinda connected it and you
can see this blue line appears