-
Notifications
You must be signed in to change notification settings - Fork 149
/
3. Swift Programming Language.srt
executable file
·8139 lines (6512 loc) · 215 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
本字幕由志愿者义务贡献,采用许可协议
知识共享 署名-非商业性使用-相同方式共享 3.0 美国
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,
欢迎参加斯坦福 CS193P 课程
4
00:00:12,379 --> 00:00:16,447
fall of 2017 and 18 academic year.
2017 至 18 学年的第三节课
5
00:00:16,516 --> 00:00:19,885
Today mostly, we're gonna talk about some Swift stuff.
今天,大部分时间我们将要讨论 Swift
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
我要做个简单的,我管它叫做 Auto Layout 的预告示例
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
如何令我们的 UI 看起来很不错
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
教你 Auto Layout 的内容,虽然正是它才让我们
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
事实上我们会在三周后有完整的关于 Auto Layout
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
上面有各种各样的 Swift 内容。让我们以这个我当时谈论的
33
00:01:38,232 --> 00:01:41,232
was talking about, this Auto Layout demo.
Auto Layout 示例程序开始吧
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.
我们布局的 UI 看起来很不错
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
不过只是在 iPhone X
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
沿着侧边旋转这台 iPhone,我可以通过
46
00:02:20,841 --> 00:02:23,742
in a simulator by going, Hardware, rotate left or
Simulator 菜单栏里的 Hardware > Rotate Left 或
47
00:02:23,811 --> 00:02:28,579
right, you can see that my UI looks like this. My buttons
Right。你可以看到我的 UI 看起来是这样子。我的按钮
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
我们真正想要的是让 UI 能够伸展开来
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
你可以用 Command 键和方向键来旋转设备
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
我们该如何让我们的 UI 展开?让我们
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
我要将我的背景
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
是绘图的原点。在 iOS 里任何东西
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,
边缘把这 12 个一组的按钮拉开的时候
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.
我们将要用 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
我们要用 stack view(栈)来做。UIStackView 是
88
00:04:22,296 --> 00:04:26,231
is just another class in IOS like UI Button is a class and
iOS 中另一个类,就像 UIButton 是一个类
89
00:04:26,300 --> 00:04:29,734
UI label is just another view in fact. And
UILabel 实际上也是个视图一样
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
它不能直接将这 12 个按钮进行
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
我将把全部的 12 个按钮都堆叠在了一起
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?
我们该如何创建 stack view 呢?
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 selected 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 in stack?
你看到这个写着 Embed In 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
一是 stack view 会让你放进去的按钮尽量地小
110
00:05:27,460 --> 00:05:30,028
in the stack. It has 50 point font, remember, for
记得么按钮里那些 emoji 的字号是 50 点
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,
UIStackView 就像按钮一样是可以被检查的
116
00:05:47,213 --> 00:05:49,881
right? And you can see it made it horizontal,
你可以看到它自动是 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.
选择了 Horizontal。然后这是我设置间隙的地方
119
00:05:57,590 --> 00:06:00,492
I go down here. I'm gonna use a standard spacing.
我在下面选择标准间距,Use Standard Value
120
00:06:00,560 --> 00:06:03,027
There's a lot of places when you're doing UI design where
当你进行 UI 设计的时候,有很多地方
121
00:06:03,096 --> 00:06:05,463
you can pick an UI standard value and
你可以选择 UI 标准值
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
以这种方式,你的 UI 将像其他 UI 一样布局
126
00:06:14,074 --> 00:06:17,609
you will feel like we are all on the same page as
这样你就会发现,我们和其他程序的 UI 设计师
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
我选择均匀填满。Alignment Fill 意味着填满整个
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,
如果我只是拖拽,正常的拖拽而不是按住 Control 键来拖拽
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
你可以通过 Axis 这里来改变它
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
比如它是一台 iPhone 8 Plus 或者
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
我需要把它固定在这里。我们把 UI 里的视图
180
00:08:49,296 --> 00:08:52,764
views in 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
是通过按住 Control 键拖拽。和我们将 UI
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
所以,我将要从选中的这里按住 Control 键拖拽
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.
在最顶部的是 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
你看到它了么?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.
安全地绘制内容而不和其他 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
其他 UI 在上面,比如 tab bar 或者 title bar
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.
所以我们不会和标题或其他东西重叠。这是非常棒的