12. Autolayout.srt

1
00:00:00,401 --> 00:00:04,602
[MUSIC]
(音乐)

2
00:00:04,671 --> 00:00:07,338
Stanford University,
斯坦福大学,

3
00:00:07,407 --> 00:00:09,840
>> Welcome to Standford CS 193P,
> >欢迎来到斯坦福CS 193便士,

4
00:00:09,909 --> 00:00:13,977
Developing Applications for iOS, Winter of 2017,
iOS应用程序开发,2017年冬天,

5
00:00:14,046 --> 00:00:16,746
This is lecture number 12, and
这是12号的讲座,

6
00:00:16,815 --> 00:00:20,650
today our topic is going to be Autolayout,
今天我们的主题是自动布局,

7
00:00:20,718 --> 00:00:23,886
I'm going to review a little bit of what we already know
我将回顾一些我们已经知道的东西

8
00:00:23,955 --> 00:00:25,120
about Autolayout and
关于自动布局和

9
00:00:25,189 --> 00:00:28,057
then move onto a very important part of auto layout
然后移动到一个非常重要的部分自动布局

10
00:00:28,125 --> 00:00:31,727
called size classes then we'll demo everything as usual,
称为大小类然后我们将演示一切像往常一样,

11
00:00:33,330 --> 00:00:36,264
What have you seen in Autolayout already?
在自动布局已经你看过什么?

12
00:00:36,333 --> 00:00:38,565
Well, you know about the dash blue lines,
嗯,你知道dash蓝线,

13
00:00:38,634 --> 00:00:41,268
When you drag things out and move them around and
当你拖动和移动它们

14
00:00:41,337 --> 00:00:44,605
you make those dash blue lines appear you know that it helps
你让那些冲蓝线出现你知道它帮助

15
00:00:44,673 --> 00:00:47,874
Xcode when you wanna do Reset to Suggested Constraints,
Xcode重置为建议限制,当你想做的

16
00:00:47,943 --> 00:00:50,376
And you know that sometimes Reset to
你知道有时重置

17
00:00:50,445 --> 00:00:54,446
Suggested Constraints doesn't really do what you want,
建议限制并没有真正做你想做的事情,

18
00:00:54,515 --> 00:00:57,616
It really only works if those blue lines just unambiguously
真的只能如果这些蓝线明确

19
00:00:57,684 --> 00:00:58,483
obviously,
很明显,

20
00:00:58,552 --> 00:01:01,152
That's what you wanted,
这就是你想要的,

21
00:01:01,221 --> 00:01:04,055
But you also know that after you do something,
但是你也知道,在你做一些事情,

22
00:01:04,124 --> 00:01:06,490
especially after you do reset to suggest the constraints,
特别是在你重置为建议的约束,

23
00:01:06,559 --> 00:01:09,560
you can go over to the Size Inspector and
你可以去督察和大小

24
00:01:09,628 --> 00:01:14,565
click on any of the views in your UI and you
点击任何UI和你的意见

25
00:01:14,633 --> 00:01:17,433
can look at the constraints and it shows you them,
可以看看约束和它向您展示了他们,

26
00:01:17,502 --> 00:01:19,736
You can even kind of hover over them with the mouse and
你甚至可以用鼠标和上空盘旋

27
00:01:19,804 --> 00:01:21,970
they will show them on the screen,
他们将显示在屏幕上,

28
00:01:22,039 --> 00:01:23,038
Highlight them, etc,
强调他们,等,

29
00:01:23,107 --> 00:01:25,507
So that's a good tool to know what's going on,
所以这是一个很好的工具,知道发生了什么,

30
00:01:25,575 --> 00:01:27,408
You also know that you can click on the constraint
你也知道,你可以点击约束

31
00:01:27,477 --> 00:01:28,108
itself,
本身,

32
00:01:28,177 --> 00:01:29,877
The little I beams or whatever,
小我梁之类的,

33
00:01:29,945 --> 00:01:32,646
you can click on them and bring up inspector on them and
你可以点击,弹出检查员和

34
00:01:32,715 --> 00:01:37,651
you can see a lot of detail: what the constants are,
你可以看到很多细节:什么是常数,

35
00:01:37,719 --> 00:01:40,320
what's on either end of them, in other words what
在两端,换句话说什么

36
00:01:40,388 --> 00:01:42,188
the constraints, the two things being involved and
参与和约束,两件事

37
00:01:42,256 --> 00:01:44,724
constrained are, so you already know that as well,
限制,所以你已经知道,

38
00:01:46,127 --> 00:01:49,027
You also know about control dragging
你也知道控制拖

39
00:01:49,096 --> 00:01:52,097
to edges, we did a lot of control dragging to the edge
边,我们做了很多控制拖到边缘

40
00:01:52,165 --> 00:01:55,400
to make our UI kinda use up all the space but
使我们的UI但有点用完所有的空间

41
00:01:55,468 --> 00:01:58,502
you also saw a little bit of a hint in the smashtag demo
你也看到一点点的提示smashtag演示

42
00:01:58,571 --> 00:02:02,740
that you can actually control drag between any two views,
你可以控制阻力之间的任何两个观点,

43
00:02:02,809 --> 00:02:05,275
This is the key thing about Autolayout,
自动布局,这是关键的事情

44
00:02:05,344 --> 00:02:08,511
It sets constraints really between any two views,
真的集约束之间的任何两个观点,

45
00:02:08,580 --> 00:02:10,346
There's really almost no restriction
其实几乎没有限制

46
00:02:10,415 --> 00:02:12,748
between the things you can set constraints,
你可以设置约束之间的事情,

47
00:02:12,817 --> 00:02:15,651
Again so we'll see that in the demo a little bit today,
所以我们会看到,在今天的演示一下,

48
00:02:15,719 --> 00:02:19,387
Now in addition to control dragging to set up these
现在除了控制拖动设置

49
00:02:19,456 --> 00:02:22,724
constraints between things, you can also select them,
约束之间的事情,你也可以选择它们,

50
00:02:22,793 --> 00:02:24,992
I select one view or select a couple of views,
我选择一个视图或选择一些观点,

51
00:02:25,061 --> 00:02:27,495
And there's a couple little menus in the corner down
角落里,有几个小菜单

52
00:02:27,564 --> 00:02:30,230
there the pin menu or the align menu and
销菜单或菜单和对齐

53
00:02:30,299 --> 00:02:34,601
then this other kinda generic menu that has a lot of random
然后这其他通用的菜单,有很多随机的

54
00:02:34,669 --> 00:02:36,436
things you can set constraints for,
你可以设置约束,

55
00:02:36,505 --> 00:02:37,970
And we'll use that today as well, so
今天,我们将使用,所以

56
00:02:38,039 --> 00:02:40,673
you can see that different way of doing it,
你可以看到,不同的方法,

57
00:02:40,742 --> 00:02:42,508
Pretty much everything in there you can do with
几乎有你能做的一切

58
00:02:42,576 --> 00:02:45,410
Ctrl+drag, but sometimes it's hard to do Ctrl+drag,
Ctrl +拖,但有时很难做Ctrl +拖,

59
00:02:45,479 --> 00:02:47,245
Maybe the views are very close together, or
也许视图非常接近,或

60
00:02:47,314 --> 00:02:48,712
they're really near the edge,
他们真的在边缘附近,

61
00:02:48,781 --> 00:02:50,881
or they're overlapping some other view,
或者他们重叠的其他视图,

62
00:02:50,950 --> 00:02:53,884
And so when that starts to be a problem, you can
所以当开始成为一个问题,你可以

63
00:02:53,953 --> 00:02:56,786
click on them to select, either using the control shift
点击选择,要么使用控制转变

64
00:02:56,855 --> 00:02:59,255
click to drill down if things are overlapping, or
点击下钻如果重叠,或

65
00:02:59,324 --> 00:03:01,891
maybe use the document outline to select it, and then go to
也许使用文档大纲以选择它,然后去

66
00:03:01,959 --> 00:03:05,128
these menus to apply whatever constraints that you want,
这些菜单应用任何你想要的约束,

67
00:03:06,630 --> 00:03:09,564
Now the document outline, we've showed briefly and
现在文档大纲,我们显示简要和

68
00:03:09,633 --> 00:03:12,367
I'll show it again today, is really the go to place to
今天我将展示一遍,真的是去的地方

69
00:03:12,435 --> 00:03:14,368
resolve problems with constraints,
解决问题与约束,

70
00:03:14,437 --> 00:03:18,906
Both constraints that are insufficient, in other words
这两个约束不足,换句话说

71
00:03:18,975 --> 00:03:22,442
you, you haven't put enough constraints on a view for
你,你还没有把足够的限制一个视图

72
00:03:22,511 --> 00:03:25,945
the Xcode to or the IOS to know where the thing goes,
Xcode或IOS知道的事,

73
00:03:26,014 --> 00:03:27,781
Or constraints that conflict,
或约束冲突,

74
00:03:27,850 --> 00:03:30,216
Maybe you put two constraints on a views
也许你把两个限制的观点

75
00:03:30,284 --> 00:03:32,318
that is like they're pulling against each other and
就像他们对彼此和

76
00:03:32,387 --> 00:03:33,218
IOS doesn't know what to do,
IOS不知道要做什么,

77
00:03:33,287 --> 00:03:36,254
So the document outline is the place to go to resolve
所以文档大纲是去解决的地方

78
00:03:36,323 --> 00:03:39,624
all that stuff and we'll see that in the demo today,
所有这些,我们会看到,在今天的演示,

79
00:03:39,692 --> 00:03:42,793
Now one thing to understand about autolayout is it takes
现在有一件事要理解自动布局是需要的

80
00:03:42,862 --> 00:03:44,728
experience to master it,
经验来掌握它,

81
00:03:44,797 --> 00:03:47,364
There's a lot of degrees of freedom there with those
有很多与这些自由度

82
00:03:47,432 --> 00:03:49,733
constraints in terms of how you can
约束条件如何

83
00:03:49,802 --> 00:03:53,703
constrain views relative to each other and
相对于彼此,限制的观点

84
00:03:53,772 --> 00:03:55,905
there's just no substitute for experience,
只是不可替代的经验,

85
00:03:55,974 --> 00:03:57,540
You just have to do it,
你只需要这样做,

86
00:03:57,608 --> 00:04:01,243
So don't expect that after you see the demo today,
所以不要认为你今天看到的演示后,

87
00:04:01,312 --> 00:04:02,811
And after what you've seen earlier in the course,
之后,你见过的,

88
00:04:02,880 --> 00:04:05,213
Like, "now I am an auto layout master",
说,“现在我是一个自动布局大师”,

89
00:04:05,281 --> 00:04:08,182
You will have to be designing a lot of user interfaces,
你必须设计一个用户界面,

90
00:04:08,251 --> 00:04:09,617
Lining up a lot of edges,
排队的边缘,

91
00:04:09,686 --> 00:04:13,119
Making things the same widths, those kinds of things,
做相同的宽度,这样的事情,

92
00:04:13,188 --> 00:04:16,556
Until you learn kind of the tools enough to be a good
直到你学会一种足以是一个很好的工具

93
00:04:16,625 --> 00:04:17,423
auto layout master,
自动布局的主人,

94
00:04:17,492 --> 00:04:18,757
But once you master it,
但是一旦你掌握它,

95
00:04:18,826 --> 00:04:22,128
it can be really really super powerful as you can see,
它可以真的超级强大的正如你所看到的,

96
00:04:23,631 --> 00:04:26,331
Autolayout is also doable from code,
从代码自动布局也是可行的,

97
00:04:26,400 --> 00:04:27,832
In other words, there is a class and
换句话说,有一个类和

98
00:04:27,901 --> 00:04:29,968
it's layout constraint and
这是约束和布局

99
00:04:30,036 --> 00:04:34,205
it has all the functionality is in the story board,
它的所有功能在故事板,

100
00:04:34,273 --> 00:04:36,874
We rarely use it because we can do
我们很少使用它,因为我们可以做

101
00:04:36,943 --> 00:04:39,610
pretty much anything from a story board,
几乎任何一个故事板,

102
00:04:39,679 --> 00:04:42,111
But I'm not gonna have time to teach it,
但是我不会有时间教,

103
00:04:42,180 --> 00:04:44,180
Obviously I have to be selective about what
显然,我必须选择什么

104
00:04:44,249 --> 00:04:46,382
I can show you in this limited time available,
我可以带你在这有限的时间,

105
00:04:46,451 --> 00:04:49,151
But you can do some pretty tricky things in code that
但是你可以在代码做一些很棘手的事情

106
00:04:49,219 --> 00:04:53,354
you can't do in storyboard, but they're pretty, I don't
你不能在故事板,但是他们漂亮,我不喜欢

107
00:04:53,423 --> 00:04:56,925
want to say advanced, but they are, let's say fairly obscure,
想说先进,但是他们是,假设相当模糊,

108
00:04:56,993 --> 00:04:59,627
And so, if you're interested in pursuing that, maybe for
所以,如果你感兴趣,也许

109
00:04:59,695 --> 00:05:00,661
your final project, or
你最后的项目,或

110
00:05:00,730 --> 00:05:03,164
something, you can just start with NSLayout constraint in
一些东西,你可以从NSLayout约束

111
00:05:03,232 --> 00:05:10,504
the documentation, and kind of go from there,
文档,从那里开始,

112
00:05:13,274 --> 00:05:17,142
Let's talk a little about rotation, auto rotation,
让我们谈一下旋转,自动旋转,

113
00:05:17,211 --> 00:05:19,912
We know that when we rotate, that's one of the biggest
我们知道,当我们旋转,这是最大的一个

114
00:05:19,980 --> 00:05:22,515
times that autolayout has to kick in and figure out where
次自动布局和找出踢

115
00:05:22,583 --> 00:05:25,484
things go because things have dramatically changed,
去,因为事情已经发生了巨大的变化,

116
00:05:25,552 --> 00:05:28,953
They're much wider than they are tall now or vice versa,
他们是更广泛的比现在高,反之亦然,

117
00:05:29,022 --> 00:05:32,122
And sometimes unfortunately,
有时很不幸,

118
00:05:32,191 --> 00:05:37,661
that rotation causes such a dramatic change in your UI
旋转导致这样一个戏剧性的变化在你的UI

119
00:05:37,730 --> 00:05:41,265
that you want to actually move views around in a way that you
其实你想移动视图的方式

120
00:05:41,333 --> 00:05:45,669
just can't say by align these edges, make these the same
只是不能说通过对齐这些边缘,使这些相同的

121
00:05:45,737 --> 00:05:48,438
width, keep this separation, those kinds of things,
宽度,保持这种分离,这样的事情,

122
00:05:48,507 --> 00:05:51,140
You actually want to pick them up and move them,
你真的想拾起并移动它们,

123
00:05:51,208 --> 00:05:55,044
And actually, a great example of that is our calculator,
实际上,一个很好的例子,这是我们的计算器,

124
00:05:55,112 --> 00:05:58,880
Our calculator, at least, not your calculator but
我们的计算器,至少不是你的计算器

125
00:05:58,949 --> 00:06:02,183
the calculator we last saw in demo had 20 buttons, and
我们上次见到的计算器演示有20按钮、和

126
00:06:02,252 --> 00:06:06,287
we had it as four across and five down,
我们把它当作四,五,

127
00:06:06,356 --> 00:06:08,789
And that made a lot of sense because
做了很多有意义的,因为

128
00:06:08,858 --> 00:06:11,459
in portrait mode we had a lot of vertical space and
在竖屏模式,我们有很多的垂直空间

129
00:06:11,527 --> 00:06:14,327
not a lot of horizontal space, so we kinda went for the,
没有太多的水平空间,所以我们有点的,

130
00:06:14,396 --> 00:06:17,530
The five high, four wide,
五个高,宽四,

131
00:06:17,599 --> 00:06:20,033
But when we switch to landscape, now it's not so
但当我们切换到景观,现在不是这样的

132
00:06:20,102 --> 00:06:22,702
good, cuz all of the buttons are squished down,
好,因为所有的按钮都是扁平的,

133
00:06:22,771 --> 00:06:24,737
They're really wide and thin,
他们真的又宽又薄,

134
00:06:24,806 --> 00:06:27,105
It would be much better if when we get to landscape,
这将是更好的,如果当我们到达风景,

135
00:06:27,174 --> 00:06:28,740
we could go to five across and
5,我们可以去

136
00:06:28,809 --> 00:06:32,243
four down because we have a lot less space,
4因为我们有很多更少的空间,

137
00:06:32,312 --> 00:06:35,112
Now, can you imagine trying to do a control drag to
现在,你能想象试图控制阻力

138
00:06:35,181 --> 00:06:37,314
make that happen is basically impossible,
实现这个目标基本上是不可能的,

139
00:06:37,383 --> 00:06:38,515
It can't be done,
不能完成,

140
00:06:38,584 --> 00:06:41,985
But it's possible to do with a very important
但也有可能与一个非常重要的

141
00:06:42,054 --> 00:06:44,988
feature which I'm gonna talk about in a moment here,
功能,一会儿我要讲,

142
00:06:45,057 --> 00:06:49,425
Now, this kind of rotation stuff is,
现在,这种旋转的东西,

143
00:06:49,493 --> 00:06:52,328
the problem where your view changes from landscape
视图从景观变化的问题

144
00:06:52,397 --> 00:06:54,363
to portrait and you wanna move all the views around
肖像,你想移动的所有视图

145
00:06:54,432 --> 00:06:56,531
can happen in other situations too,
也可以发生在其他情况下,

146
00:06:56,600 --> 00:06:59,667
Imagine that you have an MVC that wants to look good in
假设您有一个MVC,想看起来不错

147
00:06:59,736 --> 00:07:02,570
Landscape, but also wants to look good when it's the master
景观,还想看起来不错的主

148
00:07:02,639 --> 00:07:04,572
of a Split View Controller,
分屏视图控制器,

149
00:07:04,640 --> 00:07:06,574
The master of a Split View Controller kind of looks likes
的主人看起来喜欢拆分视图控制器

150
00:07:06,642 --> 00:07:09,242
it's in portrait, so even though you're on an iPad,
肖像,所以即使你在iPad上,

151
00:07:09,311 --> 00:07:11,745
let's say, sometimes you have tall and
比方说,有时你高大

152
00:07:11,813 --> 00:07:14,180
skinny, just like what you have on an iPhone,
瘦,就像你在iPhone上,

153
00:07:14,249 --> 00:07:19,518
So it's not just iPhone issue only or rotation issue only,
所以这不仅仅是iPhone只或旋转问题问题,

154
00:07:19,587 --> 00:07:23,255
So, the solution to all this is called size classes,
因此,所有这叫做大小类的解决方案,

155
00:07:23,324 --> 00:07:25,791
Now, Apple has chosen to take an approach to dealing with
现在,苹果公司选择一个方法来处理

156
00:07:25,860 --> 00:07:27,692
this which is fairly simple,
这是相当简单的,

157
00:07:27,761 --> 00:07:30,895
Which is a pretty good idea because you could imagine
这是一个不错的主意,因为你可以想象吗

158
00:07:30,964 --> 00:07:34,632
a very complicated solution that tries to, basically, take
一个非常复杂的解决方案,试图,基本上,

159
00:07:34,700 --> 00:07:37,935
into effect every possible geometry and every size,
每一个可能的几何和每一个尺寸,

160
00:07:38,004 --> 00:07:40,570
You could end up writing a lot of code or a massive number
你可能会写很多代码或者一个巨大的数字

161
00:07:40,639 --> 00:07:43,139
of auto layout constraints to make it work,
自动布局的限制使它工作,

162
00:07:43,208 --> 00:07:46,709
So they've boiled it down to this very simple system
所以他们煮这个非常简单的系统

163
00:07:46,778 --> 00:07:50,012
where they talk about size classes and a view or
他们讨论类和视图或大小

164
00:07:50,081 --> 00:07:53,249
a view controller at any given time exists with
一个视图控制器存在在任何给定的时间

165
00:07:53,317 --> 00:07:54,716
a certain size class,
一定规模类,

166
00:07:54,785 --> 00:07:56,384
Both in the horizontal direction and
在水平方向上和

167
00:07:56,453 --> 00:07:57,551
the vertical direction,
垂直方向,

168
00:07:57,620 --> 00:08:00,988
And the only two values that the size class can have is
唯一的类可以有两个值的大小

169
00:08:01,057 --> 00:08:03,490
compact or regular,
或普通紧凑,

170
00:08:03,559 --> 00:08:06,026
So regular is regular sized, and
所以常规是常规尺寸,

171
00:08:06,094 --> 00:08:09,696
compact means that you're constrained in that direction,
简洁意味着你在这个方向约束,

172
00:08:11,933 --> 00:08:13,733
Let's look at all our devices and
让我们看看我们所有的设备和

173
00:08:13,802 --> 00:08:17,803
see when they're constrained in either compact
看到当他们限制在紧凑

174
00:08:17,871 --> 00:08:21,373
in either height or width, and when they're just regular,
在高度或宽度,当他们只是普通的,

175
00:08:21,442 --> 00:08:25,944
Let's talk about the iPhone first the iPhone in portraits
首先让我们来谈谈iPhone肖像的iPhone

176
00:08:26,012 --> 00:08:29,714
is regular in height, plenty of height, but
身高一般、足够的高度,但

177
00:08:29,782 --> 00:08:31,215
it's compact in width,
紧凑的宽度,

178
00:08:31,284 --> 00:08:34,118
It's kinda constrained in width in that circumstance,
在这种情况下,有点宽限制

179
00:08:34,186 --> 00:08:38,255
When you switch to landscape, maybe surprisingly,
当你切换到景观,也许令人惊讶的是,

180
00:08:38,324 --> 00:08:42,859
iPhones are compact in both directions because even though
iphone在两个方向,因为即使紧凑

181
00:08:42,928 --> 00:08:45,561
when you go to landscape, it gets quite a bit wider,
当你去风景,它变得相当宽,

182
00:08:45,630 --> 00:08:47,329
it's still not that wide,
它还不宽,

183
00:08:47,398 --> 00:08:48,764
Okay, it's not wide like an iPad,
好吧,这不是宽像iPad一样,

184
00:08:50,768 --> 00:08:52,033
It's still somewhat constrained, so
还是有些限制,所以

185
00:08:52,101 --> 00:08:54,969
they've decided to make landscape
他们已经决定格局

186
00:08:55,038 --> 00:08:57,037
iPhone be compact in both directions,
iPhone是在两个方向上紧凑,

187
00:08:57,106 --> 00:09:00,173
So in portrait it's regular in height and compact in width,
所以在肖像定期在宽度、高度和紧凑

188
00:09:00,242 --> 00:09:02,609
But in Landscape, it's compacted both directions,
但在景观,压实两个方向,

189
00:09:02,678 --> 00:09:04,043
We will encounter into it but
我们会遇到,但是

190
00:09:04,112 --> 00:09:06,278
just see it works out quite nicely,
看看它的工作原理很好地,

191
00:09:06,347 --> 00:09:08,313
Now, the iPhone +s, the 6+ and
现在,iPhone +年代,6 +和

192
00:09:08,382 --> 00:09:10,882
the 7+, those are a little different,
这是有点不同的,7 +

193
00:09:10,951 --> 00:09:13,918
They're still compact in width,
他们仍然紧凑的宽度,

194
00:09:13,987 --> 00:09:15,820
And regular in height in portrait but
和定期在肖像但高度

195
00:09:15,889 --> 00:09:17,288
when you go to landscape,
当你去风景,

196
00:09:17,357 --> 00:09:19,823
since those iPhone pluses are so
因为这些iPhone有利

197
00:09:19,892 --> 00:09:22,993
big, that they can actually start showing that kind of
大,他们可以开始出现的

198
00:09:23,062 --> 00:09:26,696
horizontal UI just like it was an iPad or something,
水平的UI就像iPad之类的,

199
00:09:26,765 --> 00:09:31,734
So they are regular in width in landscape mode,
所以他们定期在横向模式宽度,

200
00:09:31,803 --> 00:09:33,502
iPhone is compact in both,
iPhone是在紧凑,

201
00:09:33,571 --> 00:09:36,906
The iPhone Plus, still compact in height, in landscape, but
iPhone +,仍然高度紧凑,在景观,但

202
00:09:36,974 --> 00:09:38,040
it's regular in width,
常规的宽度,

203
00:09:41,111 --> 00:09:42,176
Then the iPad,
然后iPad,

204
00:09:42,245 --> 00:09:45,947
Since it's huge, is always regular in both dimensions,
因为它是巨大的,总是经常在这两个维度,

205
00:09:47,150 --> 00:09:49,550
Both width and height is always irregular, but
宽度和高度都是不规则的,但是

206
00:09:49,618 --> 00:09:50,383
that's only for
这只是对

207
00:09:50,452 --> 00:09:52,752
new controllers that are taking over the whole screen,
新控制器接管整个屏幕,

208
00:09:52,821 --> 00:09:53,919
If your view controller,
如果你的视图控制器,

209
00:09:53,988 --> 00:09:56,154
like I said in the master of a split view,
就像我说的在拆分视图的主人,

210
00:09:56,223 --> 00:09:58,924
you're compact width, regular height,
你习惯紧凑的宽度,高度,

211
00:10:00,494 --> 00:10:03,895
Or if your multi-tasking MVC that comes out from the right,
或者如果你多任务MVC从右边出来,

212
00:10:03,964 --> 00:10:05,129
you all know about multi-tasking
大家都知道多任务

213
00:10:05,197 --> 00:10:05,863
in the iPad hopefully,
iPad的希望

214
00:10:05,931 --> 00:10:08,532
You can drag anything out from the right and
你可以拖动任何权利和

215
00:10:08,600 --> 00:10:10,667
pick another app, and have two apps running side by side,
选择另一个应用程序,有两个并排运行的应用程序,

216
00:10:10,736 --> 00:10:11,868
Well, when you pull that thing out,
好吧,当你把那件事,

217
00:10:11,937 --> 00:10:14,204
that's also gonna be a compact width, regular height,
这也将是一个紧凑的宽度,常规的高度,

218
00:10:18,108 --> 00:10:21,076
Now this whole mechanism of Compact and Regular in
现在这整个机制的紧凑和常规

219
00:10:21,145 --> 00:10:24,913
size classes, of course, it's built-in for devices as I've
大小类,当然,正如我是内置的设备

220
00:10:24,982 --> 00:10:27,648
described above here, but it's also extensible,
上面描述的,但也是可扩展的,

221
00:10:27,717 --> 00:10:31,052
So if you were to write your own thing where an MVC was
所以如果你要写自己的事MVC在哪里

222
00:10:31,121 --> 00:10:33,488
embedded inside another MVC,
嵌入另一个MVC,

223
00:10:33,556 --> 00:10:34,922
You could set or
你可以设置或

224
00:10:34,990 --> 00:10:39,259
communicate whether that MVC is compact or regular,
MVC紧凑或是否定期交流,

225
00:10:39,328 --> 00:10:40,093
In each of width and
在每一个宽度和

226
00:10:40,162 --> 00:10:42,562
height and kind of send a message to the MVC,
高度和发送消息的MVC,

227
00:10:42,630 --> 00:10:44,830
Hey I've constrained your height so
嘿我约束你的身高

228
00:10:44,899 --> 00:10:46,031
make sure you deal with that,
确保你处理,

229
00:10:46,100 --> 00:10:47,333
Or I've constrained your width,
或者我约束你的宽度,

230
00:10:48,268 --> 00:10:50,234
And so, it can react to it,
因此,它可以反应,

231
00:10:50,303 --> 00:10:53,104
Now, again, I'm not gonna have time to talk about that
现在,再一次,我不会有时间去讨论

232
00:10:53,172 --> 00:10:57,975
in detail, but there is this bar called trait collection
详细,但这条叫做特征集合

233
00:10:58,043 --> 00:11:00,143
which you can look at in a view controller,
在一个视图控制器,你可以看看

234
00:11:00,212 --> 00:11:03,113
And it will tell you what your current size class is,
它会告诉你什么是你当前的大小类,

235
00:11:03,181 --> 00:11:06,282
both horizontally and vertically,
从水平和垂直方向上,

236
00:11:06,351 --> 00:11:07,984
And there's a mechanism for
的机制

237
00:11:08,052 --> 00:11:11,554
passing that along down to sub MVCs and views and things,
传递到子mvc和观点和事情,

238
00:11:13,690 --> 00:11:16,390
We have the size classes, compact width and
我们有大小类、宽度和紧凑

239
00:11:16,459 --> 00:11:19,327
regular width, compact height and regular height,
常规的宽度、高度和定期高度紧凑,

240
00:11:19,396 --> 00:11:22,563
which makes for four different combinations right here and
这使得这里的四种不同的组合和

241
00:11:22,632 --> 00:11:23,997
again, compact width and
再次,紧凑的宽度和

242
00:11:24,066 --> 00:11:27,200
height is iPhones in landscape but not plus ones,
高度是iphone在景观而不是加的,

243
00:11:27,269 --> 00:11:28,001
Compact height and
紧凑的高度和

244
00:11:28,070 --> 00:11:31,838
regular width is the iPhone plus only in landscape,
常规的宽度是iPhone加上只在景观,

245
00:11:31,906 --> 00:11:35,174
Regular height and compact width is iPhones in portrait,
常规的高度和宽度是iphone在肖像紧凑,

246
00:11:35,243 --> 00:11:38,477
both plusses and regular and also like a split view master,
分和定期和也喜欢拆分视图的主人,

247
00:11:38,545 --> 00:11:41,446
And then regular regular is an iPad in portrait or
然后定期定期在肖像或iPad

248
00:11:41,515 --> 00:11:42,547
landscape, the whole thing,
风景,整件事情,

249
00:11:44,317 --> 00:11:47,685
So if we had this normal grid and we wanted our calculator
如果我们有这个正常的网格和我们想要我们的计算器

250
00:11:47,754 --> 00:11:51,321
to look good in all of them conceivably we'd have to
看起来很好,他们可以想象我们必须

251
00:11:51,390 --> 00:11:57,026
write, do four different UIs for our calculator like this,
写,四个不同的ui为我们这样的计算器,

252
00:11:57,095 --> 00:12:01,130
When I Have some more vertical height,
当我有一些更多的垂直高度,

253
00:12:01,199 --> 00:12:02,265
I go five high but
我去五高但

254
00:12:02,334 --> 00:12:06,168
when I'm kind of compacted I'll go to only four high,
当我压实的我要去只有四个高,

255
00:12:06,237 --> 00:12:10,439
So this would be a bit of a pain in the neck to have to do
这是有点讨厌,必须要做的事情

256
00:12:10,507 --> 00:12:12,123
To make it a little easier, when we are designing,
使它更容易,当我们正在设计,

257
00:12:12,124 --> 00:12:13,740
this,
这一点,

258
00:12:13,810 --> 00:12:17,178
we also have the concept of any height or any width,
我们也有任何高度或宽度的概念,

259
00:12:18,781 --> 00:12:21,181
Now if we do that, now we're down to only having to do two
如果我们这样做,我们现在只需要做两个

260
00:12:21,250 --> 00:12:23,650
things with our calculator,
我们的计算器,

261
00:12:23,718 --> 00:12:26,453
So anytime we have compact height and we don't care
所以只要我们有紧凑的高度和我们不关心

262
00:12:26,522 --> 00:12:28,988
what the width is, we're going to go four high,
宽度是什么,我们要四高,

263
00:12:29,056 --> 00:12:30,523
Anytime we have regular height and
只要我们有规律的高度和

264
00:12:30,592 --> 00:12:33,225
we don't care what the width is, we'll go five high,
我们不关心宽度是什么,我们就去五高,

265
00:12:33,294 --> 00:12:36,894
So that's reduced the amount of work we have to do by half,
这就是我们要做的工作量减少了一半,

266
00:12:36,963 --> 00:12:39,598
And actually we can reduce it even more because we can also
实际上我们可以减少它更多,因为我们也可以

267
00:12:39,666 --> 00:12:42,233
design any any,
设计任何任何,

268
00:12:42,302 --> 00:12:44,268
This any by the way doesn't mean any like the Swift
这一切并不意味着任何迅速

269
00:12:44,337 --> 00:12:46,604
type "any", it just means any width, any height,
输入“任何”,它只是意味着任何宽度,高度,

270
00:12:46,672 --> 00:12:48,705
the English word any,
英文单词,

271
00:12:48,774 --> 00:12:52,142
And so we can do our designing and in fact our default design
所以我们可以做设计和事实上默认设计

272
00:12:52,210 --> 00:12:54,811
in storyboards is to be designing any width,
在故事板设计任何宽度,

273
00:12:54,880 --> 00:12:59,382
any height,
任何高度,

274
00:12:59,450 --> 00:13:03,085
that are the same for the five wide case or the four wide
相同的五宽情况下或四宽

275
00:13:03,154 --> 00:13:06,388
case, we can build all that in the any any mode,
情况下,我们可以构建所有,在任何模式下,

276
00:13:06,457 --> 00:13:10,625
And then only have to do the stuff that's specific to
然后只需要做具体的东西

277
00:13:10,693 --> 00:13:14,295
the size class being different in that case,
在这种情况下,类大小不同

278
00:13:14,364 --> 00:13:18,432
So, that reduces even more the design we have to do,
这减少了更多的设计我们要做的,

279
00:13:18,501 --> 00:13:20,133
Cuz we're doing most of our design any any,
因为我们正在做我们的大部分设计任何任何,

280
00:13:20,202 --> 00:13:23,570
and then a little bit to make the other two work,
然后一点点让另外两个工作,

281
00:13:23,639 --> 00:13:25,905
So, you can see it in the calculator here, the only
所以,你可以看到它在这里的计算器,唯一

282
00:13:25,974 --> 00:13:29,575
things I can do in any/any is the base keyboard there, not
我可以做的事情在任何/键盘底部,没有

283
00:13:29,644 --> 00:13:32,311
including the buttons that are either gonna be on the top or
包括按钮,会在顶部或

284
00:13:32,379 --> 00:13:34,663
because those depending on the vertical size class there,
因为这些大小取决于垂直类,

285
00:13:34,664 --> 00:13:36,948
on the side,
在方面,

286
00:13:37,018 --> 00:13:39,250
And also I can do my display at the top,
我还可以做我的显示在顶部,

287
00:13:39,319 --> 00:13:41,919
If that's all I can do,
如果这是我所能做的,

288
00:13:41,988 --> 00:13:44,405
But most of my UI we'll see in the demo I'll do exactly this,
但是我的大多数UI在演示中我们会看到我做的正是这一点,

289
00:13:44,406 --> 00:13:46,823
That's a lot,
这是很多,

290
00:13:46,892 --> 00:13:50,126
Let's jump into that,
让我们进入,

291
00:13:50,195 --> 00:13:55,599
To make the demo a little easier to understand what's
使演示更容易理解

292
00:13:55,667 --> 00:14:00,069
going on here the developer, here's our calculator,
这里的开发人员,这是我们的计算器,

293
00:14:00,138 --> 00:14:05,340
I actually added a little
我添加了一个小

294
00:14:05,409 --> 00:14:11,880
bit of code to my calculator and
我的计算器和一些代码

295
00:14:11,949 --> 00:14:16,618
I'll show it to you,
我会告诉你,

296
00:14:16,687 --> 00:14:18,754
This is the calculator that we've left off,
这是我们离开,计算器

297
00:14:18,822 --> 00:14:21,256
The last thing we did in this calculator was
计算器是我们做的最后一件事

298
00:14:21,324 --> 00:14:22,623
the green square root,
绿色的平方根,

299
00:14:22,692 --> 00:14:25,993
Remember so it was not changed since then except for this,
记住这并不改变之后,除了这,

300
00:14:26,062 --> 00:14:27,528
In the view controller for this guy,
视图控制器的这个家伙,

301
00:14:27,596 --> 00:14:30,496
I added this blue code right here,
我添加了这个蓝色的代码,

302
00:14:30,565 --> 00:14:32,931
I added this function showSizeClasses
我添加了这个函数showSizeClasses

303
00:14:33,000 --> 00:14:35,267
which hijacks the display,
劫持的显示,

304
00:14:35,336 --> 00:14:38,237
You know our blue display on the top, it hijacks it and
你知道我们的蓝色显示在顶部,它和劫持

305
00:14:38,305 --> 00:14:40,905
writes in there what the width and
在宽度和写道

306
00:14:40,974 --> 00:14:45,810
height size classes are of the calculator in the moment okay,
高度尺寸类是计算器的时刻,

307
00:14:45,879 --> 00:14:48,679
And then I just Implemented a couple of ViewController
然后我就实现几个ViewController

308
00:14:48,748 --> 00:14:51,449
life-cycle methods here, viewDidAppear calls it,
生命周期方法,viewDidAppear调用它,

309
00:14:51,518 --> 00:14:53,917
And then, view will transition to size,
然后,视图将过渡到大小,

310
00:14:53,986 --> 00:14:55,952
which is what happens when you rotate,
当你旋转时,就会发生这样的事

311
00:14:56,021 --> 00:14:58,522
And I just call this showSizeClasses there,
我就叫这个showSizeClasses那里,

312
00:14:59,657 --> 00:15:02,558
I also added a little extension to
我还添加了一个小扩展

313
00:15:03,927 --> 00:15:06,962
UI user interface size class to just have it
用户界面UI类就有大小

314
00:15:07,031 --> 00:15:08,663
implement custom string convertible,
实现自定义字符串转换,

315
00:15:08,732 --> 00:15:11,098
So it implements that method description,
它实现了这一方法的描述,

316
00:15:11,167 --> 00:15:13,367
And just returns compact and regular,
就返回紧凑和常规,

317
00:15:13,436 --> 00:15:15,603
That's so that I can do this line of code right here,
这样我可以做这行代码,

318
00:15:15,672 --> 00:15:19,006
where I'm printing out the size classes,
我打印大小类,

319
00:15:19,074 --> 00:15:21,474
So, it's not really important that you understand this,
所以,这不是很重要,你明白这一点,

320
00:15:21,543 --> 00:15:23,242
You'll just notice that when we run it,
您会注意到,当我们运行它,

321
00:15:23,311 --> 00:15:25,244
So I'll go ahead and run here,
所以我要继续运行,

322
00:15:25,312 --> 00:15:28,480
You're gonna see that that blue thing is gonna get
你会看到那个蓝色的东西

323
00:15:28,549 --> 00:15:31,850
taken over to show you the size class,
接管给你大小类,

324
00:15:31,918 --> 00:15:35,052
It's just cuz when you're running I want you to be clear
只是因为当你跑步我要你清楚

325
00:15:35,121 --> 00:15:38,256
on what size classes we're doing both horizontally and
在我们做的水平和规模类

326
00:15:38,325 --> 00:15:39,223
vertically,
垂直,

327
00:15:41,994 --> 00:15:46,095
When we are in, and this is iPhone 7, So we are in
当我们在,这是iPhone 7,所以我们都在

328
00:15:46,164 --> 00:15:50,267
portrait mode, so you can see that our width is compact and
竖屏模式,所以你可以看到,我们的宽度是紧凑,

329
00:15:50,335 --> 00:15:52,401
our height is regular,
我们的高度是常规,

330
00:15:52,470 --> 00:15:55,104
If I rotate, so I'm just gonna hit the Cmd key here,
如果我旋转,所以这里我要按Cmd键,

331
00:15:55,173 --> 00:15:58,674
rotate, you can see that now we are width compact and
旋转,你可以看到,现在我们宽度和紧凑

332
00:15:58,743 --> 00:16:02,144
height compact cuz we're on the iPhone 7,
高度紧凑的因为我们在iPhone上7,

333
00:16:03,747 --> 00:16:05,179
If we were on iPhone 7 Plus,
如果我们在iPhone上7 +,

334
00:16:05,248 --> 00:16:07,715
right now it would be width regular height compact,
现在它将宽度固定高度紧凑,

335
00:16:09,786 --> 00:16:11,517
So, in the interest of time I won't run there,
因此,由于时间关系我就不跑,

336
00:16:11,586 --> 00:16:14,587
but when we do come to running it we'll be able to always see
但当我们做来运行它,我们总能看到

337
00:16:14,656 --> 00:16:16,389
what size class we're in,
什么大小,我们班

338
00:16:17,992 --> 00:16:22,427
So, here is our UI right here,
所以,这是我们的UI,

339
00:16:22,496 --> 00:16:25,430
And there's a couple of things we can do with size classes
有几件事情我们可以做的尺寸类

340
00:16:25,499 --> 00:16:27,499
that are actually really, really simple,
真的,真的很简单,

341
00:16:27,567 --> 00:16:30,668
For example, you can click on certain UI elements,
例如,您可以点击特定的UI元素,

342
00:16:30,736 --> 00:16:33,671
like a label, and when you go to the attribute inspector
像一个标签,当你去属性检查器

343
00:16:33,739 --> 00:16:36,406
over here you'll notice that some of the attributes have
在这里你会注意到的一些属性

344
00:16:36,475 --> 00:16:37,640
these little pluses,
这些小的优点,

345
00:16:37,709 --> 00:16:39,242
See that? Plus, plus?
看到了吗?

346
00:16:39,311 --> 00:16:40,944
And down here, plus and plus?
在这里,+和+ ?

347
00:16:42,580 --> 00:16:44,880
And what these pluses let you do,
这些优点让你做什么,

348
00:16:44,949 --> 00:16:48,517
is change these fields in that size clause,
改变这些字段大小条款,

349
00:16:49,886 --> 00:16:50,885
We can do the any/any,
我们可以做任何/,

350
00:16:50,954 --> 00:16:54,922
We can do compact with compact height any,
我们能做的紧凑与紧凑的高度,

351
00:16:54,991 --> 00:16:55,889
any combination we want,
我们想要的,任意组合

352
00:16:55,958 --> 00:16:57,957
So for example here, let's go ahead and
举个例子,让我们继续

353
00:16:58,026 --> 00:17:02,028
have our background color of our display up here
我们显示的背景颜色了吗

354
00:17:02,097 --> 00:17:06,232
vary depending on our height size class,
取决于我们的高度尺寸类,

355
00:17:06,300 --> 00:17:08,901
If we're height compact, we'll do one thing,
如果我们高度紧凑,我们会做一件事,

356
00:17:08,970 --> 00:17:10,903
If we're height regular we'll do another,
如果我们高度定期做另一个,

357
00:17:10,971 --> 00:17:13,671
So, we do that by pressing this little plus,
所以,我们按这个小加,

358
00:17:13,740 --> 00:17:14,506
You see when you do that,
你看,当你这样做,

359
00:17:14,574 --> 00:17:17,542
And here we can pick the width that we want,
在这里,我们可以选择我们想要的宽度,

360
00:17:17,610 --> 00:17:20,244
And since we're varying on the height I'm just gonna say
因为我们在不同的高度我只是想说

361
00:17:20,312 --> 00:17:21,445
any width,
任何宽度,

362
00:17:21,514 --> 00:17:24,648
And I'm gonna say height compact, so this will,
我会说高度紧凑,这将

363
00:17:24,717 --> 00:17:27,049
means that this background that it's gonna,
意味着这样的背景之下,它会,

364
00:17:27,118 --> 00:17:28,851
this variation it's gonna create,
这种变化将创建,

365
00:17:28,920 --> 00:17:31,253
will only take effect when the height is compact,
只会生效时高度紧凑,

366
00:17:31,322 --> 00:17:33,923
if the height is regular, this is not going to take effect,
如果高度是常规,这是不会生效,

367
00:17:33,991 --> 00:17:36,725
So, I'm gonna add a variation, you see it added it here,
所以,我会添加一个变异,你看到它补充说,

368
00:17:36,793 --> 00:17:38,126
you see the little hC,
你看到小hC,

369
00:17:38,195 --> 00:17:42,230
that means height compact all right, the width is any, so
这意味着高度紧凑,宽度是任何,所以

370
00:17:42,299 --> 00:17:43,330
it doesn't say anything about width,
它没有说任何关于宽度,

371
00:17:43,399 --> 00:17:44,632
And now we can change it,
现在我们可以改变它,

372
00:17:44,701 --> 00:17:46,766
Let's pick, this is for high compact, so
让我们挑选,这是高紧凑,所以

373
00:17:46,835 --> 00:17:48,467
I'm going to pick cyan,
我要选择青色,

374
00:17:48,536 --> 00:17:50,302
C for cyan, C for compact,
青色C,C紧凑,

375
00:17:50,371 --> 00:17:52,538
hopefully you can remember that,
希望你能记住,

376
00:17:52,606 --> 00:17:53,705
So, I've changed that,
所以,我改变了这一切,

377
00:17:53,774 --> 00:17:56,274
Now, when I changed this, notice nothing changed here,
现在,当我改变了这个数字,注意这里并没有什么改变,

378
00:17:56,343 --> 00:17:57,709
Why did nothing change there?
为什么没有改变?

379
00:17:58,945 --> 00:18:02,280
Anyone know?
有人知道吗?

380
00:18:02,348 --> 00:18:07,952
It's because we are in portrait on an iPhone here,
这是因为我们在肖像在iPhone上,

381
00:18:08,020 --> 00:18:11,754
iPhone portrait, that is size class height regular, see,
iPhone的肖像,这是大小类高度固定,看,

382
00:18:11,823 --> 00:18:15,324
down here it will always tell you what your size class is or
这里它总是告诉你你的类或大小

383
00:18:15,393 --> 00:18:18,628
what you are looking at this is height regular,
你看这是高度常规,

384
00:18:18,697 --> 00:18:22,331
So, since height regular is not height compact,
所以,既然高度常规不是高度紧凑,

385
00:18:22,400 --> 00:18:23,866
we get the default,
默认的,

386
00:18:23,934 --> 00:18:28,703
But if I switch over to here, landscape, it turned cyan,
但是如果我切换到这里,风景,它变成了青色,

387
00:18:28,772 --> 00:18:30,805
Because now, I'm in landscape mode of an iPhone,
因为现在,我在iPhone的景观模式,

388
00:18:30,874 --> 00:18:34,642
which is height compact, width compact, as well,
这是高度紧凑,宽度紧凑,,

389
00:18:34,710 --> 00:18:37,512
And if I go to iPhone 7, is it gonna be cyan here?
如果我去iPhone 7,将青色吗?

390
00:18:40,483 --> 00:18:45,385
Yes, it is, because in iPhone 7 Plus, we're regular width,
是的,它是,因为在iPhone 7 +,我们常规的宽度,

391
00:18:45,454 --> 00:18:48,054
but we're still compact height,
但我们仍然高度紧凑,

392
00:18:48,123 --> 00:18:51,824
so we're still getting that cyan there,
所以我们还在那青色,

393
00:18:51,893 --> 00:18:53,626
Now, we could add another one, for example, right here,
现在,我们可以添加另一个,例如,在这里,

394
00:18:53,695 --> 00:18:57,663
we could go add this one and say, what about any width and
我们可以添加这个,说什么任何宽度和

395
00:18:57,732 --> 00:19:00,932
height is regular add a variation for that and
高度是定期添加一个变异和

396
00:19:01,001 --> 00:19:05,036
go up here maybe we'll pick red for regular, and so
走在这里也许我们会选择红色的定期,所以

397
00:19:05,105 --> 00:19:08,039
now any time the height is regular we're gonna see red,
现在任何时候高是正常我们会看到红色,

398
00:19:08,108 --> 00:19:12,943
So let's go look at potrait>iPhone 7 Plus
所以我们去看写作者> iPhone 7 +

399
00:19:13,012 --> 00:19:14,311
that's clearly regular,
这是明显规律,

400
00:19:14,379 --> 00:19:16,613
How about iPad?
iPad呢?

401
00:19:16,681 --> 00:19:18,582
Red, It's regular,
红色,它的常规,

402
00:19:18,650 --> 00:19:19,916
Let's go iPhone,
让我们去iPhone,

403
00:19:20,952 --> 00:19:22,417
Red, Regular height,
红色,常规的高度,

404
00:19:22,486 --> 00:19:24,786
Let's go landscape,
让我们去风景,

405
00:19:24,855 --> 00:19:26,888
Back to compact, so we get cyan,
回到紧凑,所以我们得到青色,

406
00:19:26,957 --> 00:19:29,724
So you see how I'm just adding these variations,
所以你看到我只是增加了这些变化,

407
00:19:29,792 --> 00:19:31,658
And you can do that for lots of different things,
你可以做很多不同的东西,

408
00:19:31,727 --> 00:19:36,429
For example, when we look at this UI on an iPad,
例如,当我们看这个UI在iPad上,

409
00:19:36,498 --> 00:19:38,065
it doesn't look that good,
它看起来不那么好,

410
00:19:38,134 --> 00:19:41,200
Because, look how tiny all the fonts are here,
因为,看小字体都在这里,

411
00:19:41,269 --> 00:19:44,103
Maybe we would want to go up here and add a variation when
也许我们会想去这里,当添加一个变化

412
00:19:44,172 --> 00:19:48,540
it's regular, regular, okay, iPad only,
定期,定期,iPad,

413
00:19:48,609 --> 00:19:51,777
where we increase the font on the buttons up to 80 or 90,
我们增加按钮上的字体到80年或90年,

414
00:19:51,846 --> 00:19:54,279
We could do that,
我们可以这样做,

415
00:19:54,347 --> 00:19:56,581
That's not always gonna be the best way to do things like
这并不是总是会做事情的最佳方式

416
00:19:56,650 --> 00:20:01,753
vary your font, but it's certainly possible to do that,
改变你的字体,但当然可以这样做,

417
00:20:02,755 --> 00:20:05,288
Understand all that business?
理解所有的业务吗?

418
00:20:05,357 --> 00:20:10,026
So, let's talk a little bit of how we are going to make this
让我们谈谈我们是如何让这个

419
00:20:10,095 --> 00:20:16,333
UI do the five by four or the four by five thing here,
UI做五个由四个或者四个五个的事情,

420
00:20:16,402 --> 00:20:19,035
And we know that we want to have as much
我们知道我们想要

421
00:20:19,104 --> 00:20:23,939
of the UI as we can that's common to both be shared,
常见的UI我们可以共享,

422
00:20:24,008 --> 00:20:27,309
So, what I'm gonna do is try to
所以,我要做的是试着什么

423
00:20:27,378 --> 00:20:30,645
work on that shared part of the UI here,
在这里共享UI的一部分工作,

424
00:20:30,714 --> 00:20:33,782
And it doesn't really matter what device I'm looking at
它并不重要设备我看什么

425
00:20:33,850 --> 00:20:34,715
while I'm doing this,
当我这样做,

426
00:20:34,784 --> 00:20:35,883
Could be a iPhone Plus,
可能是一个iPhone +,

427
00:20:35,952 --> 00:20:37,517
could be a regular iPhone, doesn't matter,
可能是一个常规的iPhone,无所谓,

428
00:20:37,586 --> 00:20:41,455
because I'm editing stuff that applies to all size classes,
因为我编辑尺寸适用于所有类的东西,

429
00:20:41,523 --> 00:20:43,122
And I'll show you in a moment how we're gonna edit stuff
一会儿,我将向您展示如何我们要编辑的东西

430
00:20:43,191 --> 00:20:45,924
that applies to a specific size class,
适用于一个特定的大小类,

431
00:20:45,993 --> 00:20:46,993
So how I'm gonna do this,
那么我要如何做到这一点,

432
00:20:47,061 --> 00:20:49,562
you saw in the slides that really only this
你看到的真的只有这个幻灯片

433
00:20:49,630 --> 00:20:53,898
part right here, these bottom 16 are common to all,
部分,这些底16是常见的,

434
00:20:53,967 --> 00:20:56,767
These four across the top are either across the top or
这四个在顶部或顶部

435
00:20:56,836 --> 00:21:00,972
they're off, off to the left in a horizontally compact
他们,在水平向左紧凑

436
00:21:01,040 --> 00:21:02,373
situation,
情况,

437
00:21:02,441 --> 00:21:06,176
I'm gonna kind of have to unbundle all these things, so
我将不得不将所有这些东西,所以

438
00:21:06,245 --> 00:21:10,280
let's start by just selecting this top level StackView and
让我们首先选择这个顶级StackView和

439
00:21:10,348 --> 00:21:13,983
unstackviewifying it,
unstackviewifying它,

440
00:21:14,052 --> 00:21:16,152
Take everything out of the StackView because clearly
把一切都StackView因为很明显

441
00:21:16,220 --> 00:21:18,754
these things can't be inside that StackView,
这些东西不能StackView里面,

442
00:21:18,823 --> 00:21:20,889
And one thing to understand when you're doing these
一件事理解当你在做这些

443
00:21:20,958 --> 00:21:23,592
size classes, you can have views come and
大小的类,你可以过来的看法

444
00:21:23,661 --> 00:21:26,161
go based on size classes, but you can't have them come and
基于大小类,但你不能来

445
00:21:26,229 --> 00:21:28,263
go inside StackViews,
进入StackViews,

446
00:21:28,331 --> 00:21:31,465
It doesn't know how to put a view in inside another view,
它不知道如何将一个视图在在另一个视图中,

447
00:21:31,534 --> 00:21:35,369
It has to be kind of a top level, coming and going, or
它必须是一种顶级,来来往往,或

448
00:21:35,438 --> 00:21:37,904
inclusion or not inclusion,
包含或不包含,

449
00:21:37,973 --> 00:21:39,606
So, how do we undo a stack view?
那么,我们如何撤销堆栈视图?

450
00:21:39,674 --> 00:21:41,507
Actually you can just go to editor up here,
其实你可以去编辑,

451
00:21:41,576 --> 00:21:43,943
the same place that we said embed in stack view,
相同的地方,我们说嵌入在堆栈视图中,

452
00:21:44,012 --> 00:21:47,279
you can actually do unembed and that will take everything
你可以做unembed,将一切

453
00:21:47,348 --> 00:21:50,816
out of stack view, back to where we were before,
堆栈视图,回到以前,

454
00:21:50,885 --> 00:21:52,617
The other thing I'm gonna do is I'm gonna get rid of
另一件我要做的就是我要摆脱

455
00:21:52,685 --> 00:21:54,953
all the constraints on here, cuz I had these constraints
这里所有的约束,因为我有这些约束

456
00:21:55,021 --> 00:21:56,821
that were holding this to the edge, but they just don't
拿着这个边缘,但他们只是不

457
00:21:56,890 --> 00:21:59,790
make any sense anymore cuz I've unbundled this,
任何意义了因为我分类定价,

458
00:21:59,858 --> 00:22:00,891
So, how can I do that?
所以,我怎么能这样做呢?

459
00:22:00,959 --> 00:22:03,292
Right down here in the lower corner where it says resolve
下在较低的角落它说的决心

460
00:22:03,361 --> 00:22:05,528
auto layout issues,
自动布局问题,

461
00:22:05,597 --> 00:22:06,428
You can go down here and
你可以在这里

462
00:22:06,497 --> 00:22:08,296
for all views in the view controller,
所有视图的视图控制器,

463
00:22:08,365 --> 00:22:10,031
you can say clear constraints,
你可以说明确的约束,

464
00:22:10,100 --> 00:22:10,998
So that's what I'm gonna go and
这就是我要去

465
00:22:11,067 --> 00:22:13,601
it's gonna wipe out all the constraints in this
它会消灭所有的约束

466
00:22:13,669 --> 00:22:15,135
view controller,
视图控制器,

467
00:22:15,204 --> 00:22:15,836
Clear them all out,
都清楚了,

468
00:22:17,172 --> 00:22:21,041
So now that I don't have the constraints in here,
所以现在我在这里,没有约束

469
00:22:21,109 --> 00:22:23,809
I can move this staff around and kind of put
我可以移动这个员工,把

470
00:22:23,878 --> 00:22:26,378
new constraints that I want on here and we can see that our
新的约束,我希望在这里我们可以看到

471
00:22:26,447 --> 00:22:28,881
constraints are cleared because if I select something
约束被清除,因为如果我选择的东西

472
00:22:28,949 --> 00:22:32,384
like this top label and I go to size inspector over here,
像上面的标签和我去尺寸检查器,

473
00:22:32,453 --> 00:22:34,819
there's no constraint at the bottom,
没有约束的底部,

474
00:22:34,888 --> 00:22:38,890
So let's go ahead and move this out of the way,
所以让我们继续和移动的方式,

475
00:22:38,959 --> 00:22:41,726
Let's put this back tied to the top and
我们把这个与顶部和回来

476
00:22:41,794 --> 00:22:44,595
left and right in exactly the same way as we did before,
左翼和右翼在我们之前做的完全一样,

477
00:22:44,663 --> 00:22:45,496
So to kind of review,
这样的评论,

478
00:22:45,564 --> 00:22:48,265
I'm just gonna control drag to the top notch,
我要控制拖动到顶尖,

479
00:22:48,333 --> 00:22:49,732
I'm gonna do something interesting,
我要做一些有趣的事情,

480
00:22:49,801 --> 00:22:52,602
I'm gonna Ctrl+Drag kinda up to the corner up here,
我要按Ctrl +有点拖到角落里,

481
00:22:52,670 --> 00:22:56,972
When I do that, I can actually do both leading and
当我这样做,我可以做领导和

482
00:22:57,040 --> 00:22:57,872
vertical space,
垂直空间,

483
00:22:57,941 --> 00:22:59,341
And what I'm doing here to make,
我在这里做的,

484
00:22:59,409 --> 00:23:02,843
to pick more than one constraint, is Shift,
选择多个约束,转变,

485
00:23:02,912 --> 00:23:05,279
So, if you do Shift, you can pick more than one thing,
所以,如果你做改变,你可以选择一个以上的东西,

486
00:23:05,348 --> 00:23:07,948
So here, I want both the leading edge on the left
这里,我想要两个左边的前缘

487
00:23:08,017 --> 00:23:09,282
there, and the top edge,
,顶部边缘,

488
00:23:09,351 --> 00:23:13,052
the vertical space to be tied, to be constrained,
相关的垂直空间,约束,

489
00:23:13,121 --> 00:23:15,588
So, I just pick all the ones I want and then I click
所以,我只选择我想要的,然后我点击

490
00:23:15,656 --> 00:23:18,690
add constraints right here, and it adds those two,
添加约束,它增加了这两个,

491
00:23:18,759 --> 00:23:20,926
And same thing, I can do this one over here then,
同样的事情,我可以做这个,

492
00:23:20,995 --> 00:23:22,694
That's the trailing one,
拖着一个,

493
00:23:22,763 --> 00:23:26,231
So now, when we look at our label up there,
现在,当我们看标签,

494
00:23:26,300 --> 00:23:27,331
it's got these constraints,
它有这些限制,

495
00:23:27,400 --> 00:23:30,000
That's good, that's what we want,
这很好,这就是我们想要的,

496
00:23:30,069 --> 00:23:32,435
Now, what about this bottom constraint?
现在,这个底部约束呢?

497
00:23:32,504 --> 00:23:34,971
Well, it use to be that the bottom of this was tied to
它使用,这是相关的底部

498
00:23:35,040 --> 00:23:35,872
the top of this, and
的这个,

499
00:23:35,940 --> 00:23:37,973
then the bottom of this was tied to the bottom of this,
然后与底部的底部,

500
00:23:38,042 --> 00:23:40,075
But we can't do that anymore,
但是我们不能这样做了,

501
00:23:40,144 --> 00:23:44,947
Because in five high by four wide, this is
因为在五高四宽,这是

502
00:23:45,016 --> 00:23:48,450
gonna be on the top, but in four high and five wide,
会在上面,但在四个高,宽五,

503
00:23:48,519 --> 00:23:51,953
these are gonna be over here and this is gonna be the top,
这些都是要在这里这是顶部,

504
00:23:52,022 --> 00:23:56,123
So that's something we can't do in the any/any mode,
这是我们不能做的事在任何/模式,

505
00:23:56,192 --> 00:23:57,591
We just can't do it,
我们不能这样做,

506
00:23:57,660 --> 00:23:59,826
But we can take this stack down view and
但我们可以把这个堆栈视图和

507
00:23:59,895 --> 00:24:02,395
put it down in this corner over here,
把它放在这里,这个角落

508
00:24:02,464 --> 00:24:07,467
And use our same control drags
使用相同的控制拖

509
00:24:07,535 --> 00:24:13,539
to do the trailing space there, and
那里的尾随空格,

510
00:24:13,608 --> 00:24:18,610
the control drag to the bottom
控制拖到底部

511
00:24:18,679 --> 00:24:24,115
to do the vertical space,
垂直空间,

512
00:24:24,184 --> 00:24:25,817
So I've tied this thing to the bottom,
所以我把这个东西,

513
00:24:25,885 --> 00:24:29,053
So this actually works, in quotes,
这确实有效,在报价,

514
00:24:29,122 --> 00:24:32,490
it works in both modes,
它能在两种模式下运行,

515
00:24:32,558 --> 00:24:35,192
Keeps them both on screen it's doing what I said keeping
让他们两个在屏幕上做我所说的保持

516
00:24:35,261 --> 00:24:36,726
the display at the top and
顶部的显示

517
00:24:36,795 --> 00:24:38,428
keeping this stuff in the lower right,
在右下角,

518
00:24:38,497 --> 00:24:42,431
But it's clearly insufficient to do what we want in the two
但它显然不足以做我们想做的事

519
00:24:42,500 --> 00:24:44,367
So, in the two cases, it's this stack view right here,
所以,在这两种情况下,这里的堆栈视图,

520
00:24:44,368 --> 00:24:46,235
different cases,
不同的情况下,

521
00:24:46,304 --> 00:24:48,170
let me zoom in a little,
让我放大一点,

522
00:24:48,239 --> 00:24:52,073
This stack view right here is the one that's at issue,
这个堆栈视图是一个问题,

523
00:24:52,142 --> 00:24:53,708
So I'm just gonna take this thing and
所以我要把这个东西

524
00:24:53,777 --> 00:24:56,444
lift it up out of the stack view, which you can do,
把它从堆栈视图中,你可以做,

525
00:24:56,513 --> 00:24:58,111
you can lift things up and out,
你能举起的东西,

526
00:24:58,180 --> 00:25:01,147
So I lift it out and drop it, and it's sitting there,
所以我把它放,坐在那里,

527
00:25:01,216 --> 00:25:05,853
Now it doesn't want to be in the any, any case at all,
现在不想要任何,任何情况下,

528
00:25:05,921 --> 00:25:08,554
It wants to only be in certain size classes,
它希望只有在特定的大小类,

529
00:25:08,623 --> 00:25:11,224
So, I'm going to take it and cut it, because I'm gonna
所以,我要把它切它,因为我要

530
00:25:11,292 --> 00:25:15,561
paste it back in when we get to other size classes,
粘贴在其他大小类别时,

531
00:25:15,629 --> 00:25:18,197
So this is our any/any right here,
这是我们这里的任何/,

532
00:25:18,265 --> 00:25:21,233
This is the best we can do in terms of common UI to both
这是最好的我们可以做的两种常见的UI

533
00:25:21,301 --> 00:25:25,504
the compact vertical case, and the regular vertical case,
紧凑的垂直情况下,常规的垂直情况下,

534
00:25:25,572 --> 00:25:31,142
Now let's go on and do the compact case let's say,
现在让我们继续和紧凑的情况下假设,

535
00:25:31,211 --> 00:25:33,344
Let's do the UI that's compact,
让我们做的UI紧凑,

536
00:25:33,413 --> 00:25:36,780
Now since all the work that we're going to be doing right
既然所有的工作,我们要做的是正确的

537
00:25:36,849 --> 00:25:40,784
now is only for the compact case we depress this super
现在是紧凑的情况下,我们只有这个超级压低

538
00:25:40,852 --> 00:25:44,054
important button right here, vary for traits,
重要的按钮,不同的特征,

539
00:25:44,122 --> 00:25:47,523
This, this is what it's all about when it comes to doing
这个,这是都是什么时候做的

540
00:25:47,592 --> 00:25:49,325
the size class variations,
类大小变化,

541
00:25:49,393 --> 00:25:53,395
So first you're gonna pick something that has the height
首先你要选择具有高度的东西

542
00:25:53,464 --> 00:25:56,631
or width class or both that you want to vary,
或宽类或你想要改变,

543
00:25:56,700 --> 00:25:58,633
So here I wanna do the horizontally or
这里我想做水平或

544
00:25:58,702 --> 00:26:02,103
the height compact, see height compact, I wanna do that one,
高度紧凑,看到高度紧凑的,我想做这个,

545
00:26:02,171 --> 00:26:04,105
So this is a pretty good one to work in, but
这是一个很好的工作,但是

546
00:26:04,173 --> 00:26:06,907
I can pick any of the ones that are height compact,
我可以选择任何的高度紧凑,

547
00:26:06,975 --> 00:26:09,076
And I'm gonna say vary for traits,
我会说不同的特征,

548
00:26:09,144 --> 00:26:13,145
And I'm gonna vary in the height direction,
我要在高度方向上不同,

549
00:26:13,214 --> 00:26:15,882
Notice that that bar at the bottom turned bright blue,
请注意,底部栏变成明亮的蓝色,

550
00:26:15,951 --> 00:26:18,351
That's to warn you, " watch out here
这是警告你,”看

551
00:26:18,419 --> 00:26:22,688
now because you are editing UI only for height compact",
现在只因为你正在编辑界面高度紧凑的”,

552
00:26:22,757 --> 00:26:25,223
And it's even showing you all devices that
甚至还显示你所有设备

553
00:26:25,292 --> 00:26:27,191
are height compact,
是高度紧凑,

554
00:26:27,260 --> 00:26:31,362
Which is all the iPhones, including the pluses,
这是所有的iphone,包括优点,

555
00:26:31,431 --> 00:26:33,330
They're all in landscape, they're all height compact,
他们都在景观,它们都是高度紧凑,

556
00:26:33,399 --> 00:26:34,465
and those are the only ones,
这些是唯一,

557
00:26:34,533 --> 00:26:37,166
So all the editing we're doing now is only going to have
所以我们现在正在做的所有编辑只会

558
00:26:37,235 --> 00:26:40,936
effect on these devices until we stop making this thing blue
影响这些设备,直到我们停止生产这个蓝色的

559
00:26:41,005 --> 00:26:42,872
by pressing done varying,
按不同,

560
00:26:44,776 --> 00:26:47,909
So, building this UI now we can, here's the two
这个UI现在我们可以建设,这是两个

561
00:26:47,978 --> 00:26:50,512
big things you can do when in the blue mode here,
大事情你可以在蓝色的模式,

562
00:26:50,581 --> 00:26:54,716
One is you can add views or remove views actually, and
一个是您可以添加视图或删除视图实际上,和

563
00:26:54,784 --> 00:26:57,518
the other you can add constraints,
您可以添加约束,

564
00:26:57,587 --> 00:26:59,420
So, that's exactly what I wanna do here,
所以,这就是我想做的,

565
00:26:59,489 --> 00:27:01,288
I wanna put those four buttons over here,
我想把这四个按钮,

566
00:27:01,357 --> 00:27:03,323
And then we wanna do some constraints to make those
然后我们要做一些让这些约束

567
00:27:03,392 --> 00:27:05,024
buttons be in the right place,
按钮是在正确的地方,

568
00:27:05,093 --> 00:27:08,595
So let's start by adding these back, remember I cut them so
让我们开始通过添加这些回来,记得我把它们

569
00:27:08,663 --> 00:27:10,229
I'm just gonna paste,
我要粘贴,

570
00:27:10,297 --> 00:27:12,130
Here it is, here's that stack view that had them,
这是,这是堆栈视图,让他们

571
00:27:12,199 --> 00:27:14,399
It used to be inside this stack view at the top,
以前在这个堆栈视图在顶部,

572
00:27:14,468 --> 00:27:17,502
Now we wanna kinda put it on this side,
现在我们想把它放在这方面,

573
00:27:17,571 --> 00:27:19,103
And when I put it on this side I want it to like
当我把它放在这方面我希望它喜欢

574
00:27:19,172 --> 00:27:21,072
seem like it's inside the stack view,
似乎是在堆栈视图,

575
00:27:21,140 --> 00:27:23,774
but I can't actually put it inside the stack view,
但是我不能把它内部堆栈视图,

576
00:27:23,842 --> 00:27:25,209
Cuz like I said, this variation for
因为就像我说的,这种变化

577
00:27:25,277 --> 00:27:28,511
traits cannot put things inside stock views,
不能把事情在股票的言论,

578
00:27:28,580 --> 00:27:30,145
But it's a great opportunity for
但这是一个伟大的机会

579
00:27:30,214 --> 00:27:32,781
me to show you other auto layout constraints that can
我告诉你其他自动布局约束

580
00:27:32,850 --> 00:27:35,650
make it seem like it's in that stack view,
使它看起来像在堆栈视图,

581
00:27:35,719 --> 00:27:37,919
And basically do the same thing that the stock view is
基本上股票的观点是做同样的事情

582
00:27:37,988 --> 00:27:41,789
doing internally which is just adding auto layout constraints
做内部就是添加自动布局约束

583
00:27:41,858 --> 00:27:43,457
to make things work,
使事情工作,

584
00:27:43,526 --> 00:27:45,860
Now the first thing we want is we want these buttons to be
现在我们想的第一件事是我们想要这些按钮

585
00:27:45,928 --> 00:27:47,060
vertical,
纵向

586
00:27:47,129 --> 00:27:49,162
We want them up and down and that's simple to do,
我们希望他们简单,上下

587
00:27:49,230 --> 00:27:50,096
We have this selected,
我们有一个选择,

588
00:27:50,165 --> 00:27:52,398
I'm just gonna go to the attributes inspector and
我要去属性检查器

589
00:27:52,467 --> 00:27:54,934
change the stack view to be vertical,
改变垂直堆栈视图,

590
00:27:55,003 --> 00:27:56,568
So it's switching over to vertical,
切换到垂直,

591
00:27:56,637 --> 00:27:58,069
that's a really good start,
这是一个很好的开始,

592
00:27:58,138 --> 00:28:02,707
I could drag this up next to it and use the blue lines,
我可以拖这旁边,用蓝线,

593
00:28:02,776 --> 00:28:05,109
That's nice, although the blue lines are probably not gonna
这很好,虽然蓝线可能不会

594
00:28:05,178 --> 00:28:06,710
get it right here,
在这里,

595
00:28:06,779 --> 00:28:09,379
If you notice when I drop that blue line down, look,
如果你注意到当我把蓝线,看,

596
00:28:09,448 --> 00:28:11,714
it's trying to do all kinds of things,
尝试各种各样的东西,

597
00:28:11,783 --> 00:28:15,185
Centering here, stuff like that along the bottom,
定心,诸如此类的底部,

598
00:28:15,253 --> 00:28:18,654
No, so I'm gonna do all my constraints here to make
没有,所以我要做我所有的约束条件

599
00:28:18,723 --> 00:28:22,858
this hook up, I'm gonna do them all manually,
这个钩子,我要做手工,

600
00:28:22,927 --> 00:28:25,628
Also it's a good chance to show you how to do them all,
也这是一个很好的机会向您展示如何做,

601
00:28:25,696 --> 00:28:28,897
So what, how are we gonna make this vertical piece right
那么,我们要如何使垂直这一块

602
00:28:28,966 --> 00:28:30,899
here, this vertical stack view,
在这里,这个垂直堆栈视图,

603
00:28:30,968 --> 00:28:34,569
look like it's a part of this other stack view?
看起来这是一个其他堆栈视图的一部分吗?

604
00:28:34,637 --> 00:28:37,104
One thing we want to do is we clearly want the height of
我们想要做的一件事就是我们显然想要的高度

605
00:28:37,173 --> 00:28:39,706
this stack view to always be tracking the height of
这个堆栈视图总是跟踪的高度

606
00:28:39,775 --> 00:28:41,074
the other one,
另一个,

607
00:28:41,143 --> 00:28:43,976
We want the top and bottom edges, basically, of this
我们想要的顶部和底部边缘,基本上,这一点

608
00:28:44,045 --> 00:28:47,213
stack view and of this stack view to always be pinned,
堆栈视图和堆栈视图总是固定的,

609
00:28:47,282 --> 00:28:50,015
Well that sounds, pinning, sounds like a constraint,
那声音,锁住,听起来像一个约束,

610
00:28:50,084 --> 00:28:52,818
We wanna constrain them, so, how can we do that?
我们想要约束他们,所以,我们该怎么做?

611
00:28:52,886 --> 00:28:55,620
Here's how we do it, we're gonna select them both,
这是我们如何做,我们会选择它们,

612
00:28:55,689 --> 00:28:58,489
A good way to select things, by the way, is dragging,
的一个好方法选择的事情,顺便说一下,拖着,

613
00:28:58,558 --> 00:29:00,625
Dragging is a great way to select things,
拖是一个伟大的选择方式,

614
00:29:00,693 --> 00:29:02,393
So I'm gonna select both of them right here,
所以我要选择他们两人在这里,

615
00:29:02,462 --> 00:29:05,529
And then I'm gonna use this menu down here,
然后我要用下面这个菜单,

616
00:29:05,597 --> 00:29:08,432
Which is called the align menu, and that's exactly what
叫做调整菜单,这是什么

617
00:29:08,501 --> 00:29:10,099
I wanna do, I wanna align these things,
我想做,我想使这些事情,

618
00:29:10,168 --> 00:29:12,869
I click on it, and you can see that I can align things like
我点击它,你可以看到,我可以对齐之类的东西

619
00:29:12,938 --> 00:29:16,339
the centers or even the text base lines,
甚至文本中心基地,

620
00:29:16,407 --> 00:29:18,540
But what I want here is that I wanna align the top
但是我想要的是我想让最高

621
00:29:18,609 --> 00:29:19,308
and bottom,
和底部,

622
00:29:19,376 --> 00:29:21,409
So I'm gonna click top and bottom,
所以我要点击顶部和底部,

623
00:29:21,477 --> 00:29:23,878
These numbers over here by the way are an offset,
这些数字在这里顺便提一下一个偏移量,

624
00:29:23,947 --> 00:29:25,613
So if you wanted it to align the tops but
如果你想要它顶部对齐

625
00:29:25,681 --> 00:29:28,148
you want one to be ten higher, you can put a ten in here,
十高,你想要一个你可以把一百一十年在这里,

626
00:29:28,217 --> 00:29:30,016
But I want them be right along the top,
但我希望他们是对的在顶部,

627
00:29:30,085 --> 00:29:31,952
I wanna have the constraint where this is
我想这是有约束

628
00:29:32,020 --> 00:29:34,954
exactly the same, this is exactly the same at all times,
完全相同的,这是完全相同的,

629
00:29:35,023 --> 00:29:36,222
So I pick whichevers I want and
所以我选择哪个我要和

630
00:29:36,290 --> 00:29:39,191
just say, add constraints and I added them,
只是说,添加约束和我说他们,

631
00:29:39,259 --> 00:29:40,325
Now, woah,
现在,哇,

632
00:29:40,394 --> 00:29:44,429
it turn red, why am I getting those red lines right there?
它变红了,为什么我得到那些红线?

633
00:29:44,498 --> 00:29:47,398
Now, you can always find out about your
现在,你总是可以找到你

634
00:29:47,467 --> 00:29:50,134
problems that you have with constraints by clicking on
通过点击问题与约束

635
00:29:50,203 --> 00:29:51,802
this little thing right up here,
这个小东西,

636
00:29:51,870 --> 00:29:54,604
You see this yellow guy, click on him and it says,
你看到这个黄色的家伙,点击他,它说,

637
00:29:54,673 --> 00:29:57,974
the horizontal position is ambiguous for stack view,
堆栈视图的水平位置不明确,

638
00:29:58,043 --> 00:30:00,242
Well, I've got multiple stack views, so
我有多个堆栈视图,所以

639
00:30:00,311 --> 00:30:02,177
which one's it talking about,
哪一个的谈论,

640
00:30:02,246 --> 00:30:03,412
This is kind of a bummer,
这是一种劣势,

641
00:30:03,481 --> 00:30:06,048
This is really just an overview of the errors,
这只是一个概述的错误,

642
00:30:06,117 --> 00:30:07,783
Usually we don't look here,
通常我们不看这里,

643
00:30:07,851 --> 00:30:11,152
The place we look is in the document outline okay,
文档大纲的地方我们是好的,

644
00:30:11,220 --> 00:30:15,389
The document outline here which I have shown,
这里的文档大纲我已经表明,

645
00:30:15,458 --> 00:30:17,191
I can hide it and show it,
我可以隐藏和显示它,

646
00:30:17,260 --> 00:30:18,358
This is the place where for
这是对的地方

647
00:30:18,426 --> 00:30:20,560
example we had to wire up to the refresh control,
例子我们必须刷新控制连接,

648
00:30:20,628 --> 00:30:22,628
This is the place we go when it's hard to click on
这是我们去的地方当很难点击

649
00:30:22,697 --> 00:30:24,597
something, cuz we can just click on a view here,
什么,因为我们可以在这里点击视图,

650
00:30:24,665 --> 00:30:27,566
This is also the place we go to deal with all auto
这也是我们去处理所有的汽车的地方

651
00:30:27,634 --> 00:30:29,000
layout problems,
布局问题,

652
00:30:29,069 --> 00:30:32,270
And the magic place to look is this upper corner right here,
神奇的地方是这里的上角,

653
00:30:32,339 --> 00:30:34,405
You see that red right there?
你看到那个红色的?

654
00:30:34,474 --> 00:30:37,274
This red is saying that there is either a lack
这个红色的是说要么是没有

655
00:30:37,343 --> 00:30:39,242
of constraints or conflicting constraints,
的约束或相互矛盾的约束,

656
00:30:39,311 --> 00:30:40,878
In other words, there are constraint problems that are
换句话说,有约束的问题

657
00:30:40,946 --> 00:30:44,780
so bad that your app is not going to work when you run,
如此糟糕,当你运行你的应用程序不会工作,

658
00:30:44,849 --> 00:30:48,518
So we can click on this red thing and it will show us
所以我们可以点击这个红色的东西,它会告诉我们

659
00:30:48,587 --> 00:30:51,487
all the details of all the constraint problems,
所有的约束的所有细节问题,

660
00:30:51,556 --> 00:30:53,422
So now when we mouse over this,
现在当我们鼠标,

661
00:30:53,491 --> 00:30:55,924
it still says need constraints for x position,
还是说需要约束x的位置,

662
00:30:55,992 --> 00:30:59,260
But we can find out which stack view it's talking about,
但我们可以找出哪些堆栈视图的谈论,

663
00:30:59,329 --> 00:31:01,495
And of course, it's talking about that one,
当然,这是谈论这个,

664
00:31:01,564 --> 00:31:02,964
This other stack view over here,
这里的其他堆栈视图,

665
00:31:03,032 --> 00:31:07,167
it has an x position, it's tied to the left edge,
它有一个x位置,与左边缘,

666
00:31:07,236 --> 00:31:09,636
But this one is not tied to anything,
但这个不是绑定到任何东西,

667
00:31:09,705 --> 00:31:11,504
It's top and bottom are tied but
顶部和底部是但挂钩

668
00:31:11,573 --> 00:31:14,574
it could be sliding horizontally any which way,
可以是任何水平滑动,

669
00:31:14,642 --> 00:31:15,874
So that's not tied, so
所以这不是挂钩,所以

670
00:31:15,943 --> 00:31:18,978
we don't know where it's exposition is supposed to be,
我们不知道它是博览会应该是,

671
00:31:20,280 --> 00:31:21,145
We need to fix that,
我们需要解决这个问题,

672
00:31:21,214 --> 00:31:22,880
How are we gonna fix that?
我们要如何解决这个问题?

673
00:31:22,949 --> 00:31:26,817
Well probably the best way to do that is to hook it up to
可能最好的办法,是连接到

674
00:31:26,886 --> 00:31:28,952
the edge of this stack view,
这个堆栈视图的边缘,

675
00:31:29,021 --> 00:31:33,256
Cuz if it, we tie this edge right here to this stack view,
因为如果它,我们把这个优势这个堆栈视图,

676
00:31:33,325 --> 00:31:35,958
then it'll, its horizontal position will be set because
然后它会,将因为它的水平位置

677
00:31:36,027 --> 00:31:38,460
it'll be tied to this guy's horizontal position,
它会与这个人的水平位置,

678
00:31:38,529 --> 00:31:40,896
So how do we hook this guy up to here?
那么我们如何这家伙了吗?

679
00:31:40,965 --> 00:31:43,932
Well we could of course control drag, all right, but
当然我们可以控制拖,好吧,但是

680
00:31:44,001 --> 00:31:48,036
I'm gonna use this opportunity to show you a different way to
我要利用这个机会向你展示一个不同的方式

681
00:31:48,105 --> 00:31:49,587
Which is I selected it and I'm going down to this other menu
这是我选择它,我要到另一个菜单吗

682
00:31:49,588 --> 00:31:51,070
hook it up,
钩,

683
00:31:51,140 --> 00:31:54,007
down here, this one that says add new constraints, and
这里,这个说增加新的约束,

684
00:31:54,076 --> 00:31:55,142
I'm clicking on it,
我点击它,

685
00:31:55,210 --> 00:31:58,778
And we've actually seen this one briefly, I think,
我们已经看到这个简单,我认为,

686
00:31:58,847 --> 00:32:01,547
But here you can do things like make things to be
但是在这里你可以让事情

687
00:32:01,616 --> 00:32:03,049
affixed with,
贴,

688
00:32:03,117 --> 00:32:06,886
Or you can set the distance from your nearest neighbor,
或者你可以设置你的最近邻距离,

689
00:32:06,954 --> 00:32:07,720
That's what these are,
这就是这些,

690
00:32:07,789 --> 00:32:09,287
These are the distance to the nearest neighbor,
这些都是距离最近的邻居,

691
00:32:09,356 --> 00:32:12,824
Now these little red I-beams are all grayed out right here
现在这些小红焊接都是灰色的

692
00:32:12,892 --> 00:32:14,792
or transparency'd out,
或者透明度会出来,

693
00:32:14,861 --> 00:32:15,960
So right now,
现在,

694
00:32:16,028 --> 00:32:19,729
this guy is not hooked up to his nearest neighbor at all,
这家伙不是连接到最近的邻居,

695
00:32:19,798 --> 00:32:22,366
But we clearly wanna hook him up to his nearest neighbor on
但我们显然想钩他最近的邻居

696
00:32:22,435 --> 00:32:23,933
the right, that's this one,
正确的,这是这一个,

697
00:32:24,002 --> 00:32:27,703
So, I'm gonna click this I-beam,it turns it on and now,
点击这个工字梁,它在现在,

698
00:32:27,772 --> 00:32:31,541
he's clamped to his nearest neighbor on the right and
他是他右边最近邻和夹紧

699
00:32:31,609 --> 00:32:34,542
he's eight pixels away because that's what the dash
他因为这就是dash 8像素

700
00:32:34,611 --> 00:32:36,845
blue lines put, but we dont want that,
蓝线,但是我们不希望这样,

701
00:32:36,914 --> 00:32:39,548
we want ten pixels away, so we're gonna put ten,
我们想要10个像素,所以我们要把十个,

702
00:32:41,384 --> 00:32:44,752
We have 10 pixels away clamped to the nearest neighbor,
我们有10个像素夹到最近的邻居,

703
00:32:44,820 --> 00:32:47,054
Let's add that constraint as well,
让我们添加约束,

704
00:32:47,123 --> 00:32:50,090
Our red went away but now we have yellow,
我们的红色走了但是现在我们有黄色,

705
00:32:50,159 --> 00:32:51,725
What does yellow mean in auto layout?
在自动布局黄色是什么意思?

706
00:32:51,793 --> 00:32:55,227
Yellow means, "your constraints are okay and
好吧,黄色的意思,“你的约束

707
00:32:55,296 --> 00:32:57,629
when you run it's probably gonna work, but
当您运行可能会工作,但

708
00:32:57,698 --> 00:33:01,066
what you're looking at in your storyboard is not
你看到在你的故事板不是

709
00:33:01,134 --> 00:33:03,502
what your constraints are saying",
你的约束在说什么”,

710
00:33:03,571 --> 00:33:07,572
Your constraints are not equal to what you see here,
你的约束不等于你在这里看到的,

711
00:33:07,641 --> 00:33:10,708
You can see right here, for example, it's expecting
你可以看到在这里,例如,它的期望

712
00:33:10,777 --> 00:33:13,378
the X position of this stack view that's highlighted right
高亮显示的这个堆栈视图的X位置正确

713
00:33:13,446 --> 00:33:16,547
here to be at 385, but it's actually at 387,
在385年,但它实际上是在387年,

714
00:33:16,615 --> 00:33:20,316
And if we zoom way in, in fact, with option,
如果我们放大方式,事实上,与选择,

715
00:33:20,385 --> 00:33:22,185
There's a option zooming here,
这里有一个选择缩放,

716
00:33:22,254 --> 00:33:24,387
You can see there's a dashed yellow line,
你可以看到有一个黄色虚线,

717
00:33:24,455 --> 00:33:25,321
I don't know if you can see that,
我不知道你是否能看到,

718
00:33:25,390 --> 00:33:26,955
Yeah, you can see that,
是的,你可以看到,

719
00:33:27,024 --> 00:33:29,358
This dashed yellow line, that's where the constraint
这个黄色虚线,这就是约束

720
00:33:29,427 --> 00:33:31,926
system thinks this Stack View should be,
系统认为这个堆栈视图应该,

721
00:33:31,995 --> 00:33:35,062
The solid yellow line is where it actually is,
固体黄线是实际的地方,

722
00:33:35,131 --> 00:33:39,399
And even the i-beam between the two has a little -2
甚至两者之间的工字梁有一个小2

723
00:33:39,468 --> 00:33:42,169
right there, saying yeah, I got this i-beam here, but
说,是的,我这里的工字梁,但是

724
00:33:42,238 --> 00:33:46,173
it seems like it should be 2 points over to the left,
它似乎应该是2点左边,

725
00:33:47,342 --> 00:33:48,208
How do we fix this,
我们如何解决这个问题,

726
00:33:48,276 --> 00:33:51,343
When we have these yellow problems how do we
当我们有这些黄色的问题我们如何

727
00:33:51,412 --> 00:33:54,713
get things to be put in the right place or something,
把事情放在正确的位置,

728
00:33:54,782 --> 00:33:56,715
And the answer is we're gonna go over to our document
答案是,我们要去我们的文档

729
00:33:56,784 --> 00:33:57,649
outline,
轮廓,

730
00:33:57,717 --> 00:33:59,783
By the way we can get here with the same way we got
顺便说一下我们可以在同样的方式

731
00:33:59,852 --> 00:34:02,620
to the red by clicking in this upper corner with the yellow,
点击在这上红色角落的黄色,

732
00:34:02,688 --> 00:34:05,990
And we're gonna click on this triangle cuz that's gonna,
我们要点击这个三角形因为会,

733
00:34:06,058 --> 00:34:07,924
the string will let you resolve the problem,
绳子会让你解决问题,

734
00:34:07,993 --> 00:34:10,627
So, I click on it and actually have some choices
所以,我点击它实际上有一些选择

735
00:34:10,696 --> 00:34:14,230
how to resolve that problem, one is I can update the frame,
如何解决这个问题,一个是我可以更新框架,

736
00:34:14,298 --> 00:34:17,800
that means move the views to match the constrains,
这意味着移动视图匹配约束,

737
00:34:17,868 --> 00:34:20,035
which is definitely what I want in this case,
在这种情况下,绝对是我想要的

738
00:34:20,104 --> 00:34:23,071
Because I do want it to be 10 pixels apart there not eight,
因为我想要10个像素没有八,

739
00:34:23,140 --> 00:34:24,639
But I could also do other things like
但是我也可以做其他的事情

740
00:34:24,708 --> 00:34:26,407
updating the constraints,
更新的限制,

741
00:34:26,475 --> 00:34:30,778
And that would go and
这就去

742
00:34:30,847 --> 00:34:34,181
Even thought I typed 10, this would clamp it back to 8, so
甚至以为我输入10,这将夹回8,所以

743
00:34:34,250 --> 00:34:36,517
that it would match what's going on here,
这是怎么回事,它将匹配,

744
00:34:36,585 --> 00:34:39,119
Or you can do the dreaded reset to suggested
或者你可以做可怕的重置

745
00:34:39,188 --> 00:34:40,220
constraints,
的限制,

746
00:34:40,288 --> 00:34:42,722
Which probably also would at least do that,
也可能至少会这样做,

747
00:34:42,790 --> 00:34:44,957
probably do some other things we don't want,
可能我们不希望做一些其他的事情,

748
00:34:45,025 --> 00:34:47,692
In other words it kinda try do what the blue line said,
换句话说,它有点尝试做蓝线表示,

749
00:34:47,761 --> 00:34:51,028
Reset to suggest the constraints we rarely use,
重置建议我们很少使用的约束,

750
00:34:51,097 --> 00:34:52,463
It's only good for when you're
只有当你

751
00:34:52,532 --> 00:34:54,365
like dragging something right into the middle or
像拖到中间或东西

752
00:34:54,433 --> 00:34:57,467
right out to the edges those kind of things,
对边缘的东西,

753
00:34:57,536 --> 00:35:00,069
It's not super good guessing what you want
这不是超级好猜你想要的

754
00:35:00,138 --> 00:35:00,937
in other scenarios,
在其他情况下,

755
00:35:02,240 --> 00:35:05,708
Now, this update frames, I can apply it just to
现在,这个更新框架,我可以将它应用到

756
00:35:05,776 --> 00:35:08,310
this view right here that's having the problem or
这个观点有问题或

757
00:35:08,378 --> 00:35:12,213
I can apply it to all the views in my entire controller,
我可以把它应用在我的整个控制器的所有视图,

758
00:35:12,282 --> 00:35:14,082
And whether you have this switched or not,
你是否有这个交换,

759
00:35:14,150 --> 00:35:17,018
it's about 50/50 when we switch this is whether you
当我们50/50开关这是你

760
00:35:17,086 --> 00:35:19,487
have other views that you're in the middle of working on,
有其他观点,你在工作,

761
00:35:19,555 --> 00:35:22,490
That you haven't quite fully specified their constraints,
你还没完全指定他们的约束,

762
00:35:22,558 --> 00:35:24,290
Then you'd probably don't want apply to all,
然后你可能不想要适用于所有,

763
00:35:24,359 --> 00:35:26,192
because it's going to try to move them and
因为这是要他们和移动

764
00:35:26,261 --> 00:35:28,528
you haven't finished specifying them,
你还没完成指定他们,

765
00:35:28,597 --> 00:35:30,595
But in this case,
但在这种情况下,

766
00:35:30,664 --> 00:35:33,899
this is the only view that has any misplaced views, you see,
这是唯一的观点有错误的观点,你看,

767
00:35:33,968 --> 00:35:35,967
So, I can go ahead and say all or not,
所以,我可以继续说,

768
00:35:36,036 --> 00:35:37,035
It's not going to make a difference,
它不会改变

769
00:35:37,103 --> 00:35:38,603
because this is the only one that is going to move,
因为这是唯一一个会移动,

770
00:35:38,671 --> 00:35:40,004
I'm just going to leave it at all,
我要离开,

771
00:35:40,072 --> 00:35:41,571
And I'm gonna say Fix,
我会说修复,

772
00:35:41,640 --> 00:35:43,973
And you're gonna see that it moved it,
你会看到它移动,

773
00:35:44,042 --> 00:35:45,441
Moved it two pixels over here,
这两个像素,

774
00:35:45,510 --> 00:35:47,643
If we zoom in again here,
如果我们在这里再次放大,

775
00:35:47,712 --> 00:35:52,414
we'll see now that this is tan, just like this is ten,
现在我们将会看到这是棕褐色的,就像这是10,

776
00:35:52,483 --> 00:35:54,066
And it also says No Autolayout issues over here,
还说没有自动布局问题,

777
00:35:54,067 --> 00:35:55,650
It moved it,
移动它,

778
00:35:55,719 --> 00:35:58,253
If we go back here, there's nothing in the corner,
如果我们回到这里,没有什么在角落里,

779
00:35:58,322 --> 00:35:59,720
All is well,
一切都好,

780
00:35:59,789 --> 00:36:01,822
We're in good shape right there,
我们的身体状况很好,

781
00:36:01,891 --> 00:36:04,758
Now, there's one other problem with this,
现在还有一个问题,

782
00:36:04,827 --> 00:36:09,062
look how narrow these buttons are compared to these buttons,
看这些按钮,这些按钮比较窄

783
00:36:09,130 --> 00:36:11,931
We want these buttons to be exactly the same width
我们希望这些按钮完全相同的宽度

784
00:36:12,000 --> 00:36:13,966
as all of these buttons,
所有的这些按钮,

785
00:36:14,035 --> 00:36:16,135
Now since it's not in the same stack view it's not getting
现在,因为它不是在相同的堆栈视图是没有得到

786
00:36:16,204 --> 00:36:19,038
the fill equally and so it's not getting that,
填充同样不是得到,

787
00:36:19,106 --> 00:36:21,807
So, how can I make these buttons inside this
所以,我怎么能让这些按钮在这个

788
00:36:21,876 --> 00:36:24,442
stack view right here be exactly the same width
堆栈视图在这里是完全相同的宽度

789
00:36:24,511 --> 00:36:25,610
as the buttons over here,
的按钮,

790
00:36:25,679 --> 00:36:30,981
Well, I'm going to just control drag,
好吧,我只是控制拖动,

791
00:36:31,050 --> 00:36:32,783
Actually, I'm gonna control drag from the entire
实际上,我要从整个控制拖动

792
00:36:32,852 --> 00:36:33,783
stack view,
堆栈视图,

793
00:36:33,852 --> 00:36:35,552
See I'm dragging from the stack view,
看到我从堆栈视图拖拽,

794
00:36:35,621 --> 00:36:38,520
To any button over here and just say
在这里只说任何按钮

795
00:36:38,589 --> 00:36:41,757
that I want it to be the same width as any button over here,
我想要任何按钮,宽度一样

796
00:36:41,826 --> 00:36:43,392
So, we'll just pick this one and
所以,我们就拿这一个

797
00:36:43,461 --> 00:36:45,160
here's all the things we can choose and
这是我们可以选择的一切

798
00:36:45,228 --> 00:36:46,594
then I'm gonna go down here to the bottom and
然后我要去下面和底部

799
00:36:46,663 --> 00:36:49,463
pick Equal Widths okay cuz I want those
选择相同宽度好因为我想要这些

800
00:36:49,532 --> 00:36:50,831
buttons to be the same width,
按钮是相同的宽度,

801
00:36:50,900 --> 00:36:52,766
And I'm gonna add that constraint and
我要添加约束和

802
00:36:52,835 --> 00:36:53,767
it applies the constraint,
它适用于约束,

803
00:36:53,835 --> 00:36:55,935
And you can even see this constraint right there,
你甚至可以看到这个约束,

804
00:36:56,004 --> 00:36:56,936
Again, I'll zoom in,
再次,我将放大,

805
00:36:58,306 --> 00:36:59,939
You can see the constraints right here,
你可以看到这里的约束,

806
00:37:00,007 --> 00:37:00,839
This equals and
这等于

807
00:37:00,907 --> 00:37:03,275
this equals are saying those two things are equal,
这等于说这两件事是相等的,

808
00:37:06,379 --> 00:37:07,712
So we're almost there,
所以我们几乎在那里,

809
00:37:07,780 --> 00:37:11,148
We've got these four buttons that we've added
我们有这四个按钮,我们补充道

810
00:37:11,217 --> 00:37:13,684
looking like they're in the stack view by putting our own
看起来像他们在堆栈视图通过将自己的

811
00:37:13,752 --> 00:37:14,817
constraints on there,
限制,

812
00:37:14,886 --> 00:37:16,519
The only thing that's left is,
唯一剩下的是,

813
00:37:16,588 --> 00:37:18,521
we're not using the whole space,
我们不使用整个空间,

814
00:37:18,590 --> 00:37:19,988
We're not connected to the whole space,
我们不是连接到整个空间,

815
00:37:20,057 --> 00:37:22,457
Now here, we can do exactly what we did before,
现在,我们能做什么,

816
00:37:22,526 --> 00:37:25,726
I'm just gonna select this StackView right here,
我要选择这个StackView,

817
00:37:25,795 --> 00:37:27,128
Not this one, but just this one,
不是这一个,只是这一个,

818
00:37:27,196 --> 00:37:29,663
I'm gonna Ctrl drag up to here and
我要Ctrl拖到这里

819
00:37:29,732 --> 00:37:32,098
I'm gonna set its vertical spacing,
我要设置它的垂直间距,

820
00:37:32,167 --> 00:37:34,501
Put's this I-beam in here to the top,
在这里把这是工字梁,

821
00:37:34,570 --> 00:37:36,035
Now when I double-click on it,
现在我双击它,

822
00:37:36,104 --> 00:37:38,871
Well also by the way, you know that we can click on these and
也顺便说一下,你知道我们可以点击这些

823
00:37:38,940 --> 00:37:41,640
inspect them, remember that, so it's showing that this
检查他们,记住,这是显示这个

824
00:37:41,709 --> 00:37:46,345
I-beam connects the stack views top to the displays
工字梁连接堆栈视图顶部显示

825
00:37:46,414 --> 00:37:51,416
button and it sets them to be equal with an offset of 57,
按钮,它集相等的抵消57岁

826
00:37:51,485 --> 00:37:53,084
That's what this constant is,
这就是这个常数,

827
00:37:53,152 --> 00:37:54,752
It's an offset of 57,
这是一个抵消57,

828
00:37:54,821 --> 00:37:57,721
So that's why we're getting this 57 high bar,
这就是为什么我们要这57高酒吧,

829
00:37:57,790 --> 00:37:58,556
And we don't want that,
我们不希望这样,

830
00:37:58,624 --> 00:38:01,392
We want to change that to be standard value,
我们想要改变这种标准的价值,

831
00:38:01,460 --> 00:38:02,925
Actually, we don't even want standard value,
实际上,我们甚至不需要标准的价值,

832
00:38:02,994 --> 00:38:06,496
we probably want 10 because we probably want this distance to
我们可能要10因为我们可能希望这个距离

833
00:38:06,564 --> 00:38:09,565
be the same as the distance between all of our buttons,
同我们所有的按钮之间的距离,

834
00:38:09,633 --> 00:38:10,833
I'm not sure which one we want but
我不确定哪一个我们想要的

835
00:38:10,902 --> 00:38:12,935
I think that one's probably pretty good,
我认为一个人的可能很好,

836
00:38:14,404 --> 00:38:17,571
So that's good now notice as soon as constrained the top of
这很好现在注意一旦受限的顶部

837
00:38:17,640 --> 00:38:21,141
this stack view to go up here it automatically dragged
这个堆栈视图上它自动拖

838
00:38:21,210 --> 00:38:22,576
this stack view's top up there,
这个堆栈视图的顶部,

839
00:38:22,645 --> 00:38:24,077
That's because we have a constrained
那是因为我们有一个限制

840
00:38:24,146 --> 00:38:26,713
that hooks the tops of these together,
钩子顶部的这些在一起,

841
00:38:26,781 --> 00:38:29,182
If I click on here, I look in the size inspector,
如果我点击这里,我看大小检查员,

842
00:38:29,251 --> 00:38:32,551
you can see that I've got a line top to this top and
你可以看到我有一条线从上到上面

843
00:38:32,620 --> 00:38:34,153
bottom to this other stack view,
这个其他堆栈视图,

844
00:38:34,221 --> 00:38:35,587
Do you see that?
你看到了吗?

845
00:38:35,655 --> 00:38:36,187
So that's good,
这很好,

846
00:38:36,255 --> 00:38:37,155
What about this edge?
这条边呢?

847
00:38:37,224 --> 00:38:40,091
Same thing here, we can just take this stack view and
这里也一样,我们可以把这个堆栈视图和

848
00:38:40,159 --> 00:38:42,726
hook it to edge, this leading space to contain a margin,
钩边,这导致空间包含一个保证金,

849
00:38:42,795 --> 00:38:44,861
just like we did before, and
就像我们之前做的,

850
00:38:44,929 --> 00:38:48,698
here we get this, obviously we can inspect it over here,
这里我们得到这个,很明显我们可以检查它,

851
00:38:48,766 --> 00:38:52,034
We can also double click on it to inspect it, which
我们也可以双击它检查它,

852
00:38:52,103 --> 00:38:54,870
we saw before, and here I've picked standard value, there's
我们之前看到的,在这里我选择了标准的价值,有

853
00:38:54,939 --> 00:38:57,639
no standard value available, so I'm just gonna do zero and
没有标准的价值,所以我要做零和

854
00:38:57,708 --> 00:38:58,941
it's gonna zoom that think over,
它会放大,仔细考虑,

855
00:39:01,544 --> 00:39:02,377
That's it,
就是这样,

856
00:39:02,445 --> 00:39:04,311
So we've done everything we need to do no for
所以我们需要做我们所做的一切没有了

857
00:39:04,380 --> 00:39:07,914
this height-compact situation,
这height-compact的情况,

858
00:39:07,983 --> 00:39:08,882
And so,
所以,

859
00:39:08,951 --> 00:39:10,983
this is a very important thing to remember to do,
这是一个非常重要的是要记住,

860
00:39:11,052 --> 00:39:14,653
When you're done, click Done varying down here,
当你完成,点击完成不同,

861
00:39:14,722 --> 00:39:15,721
Because a lot of times you'll do this,
因为很多时候你会这样做,

862
00:39:15,790 --> 00:39:17,055
and you're like all right it's working,
你喜欢好的工作,

863
00:39:17,124 --> 00:39:19,691
And then, you'll go on to work on some other sized class, and
然后,你会继续工作在其他的类,和

864
00:39:19,760 --> 00:39:21,526
you'll forgot to have clicked this off,
你会忘记了点击这个,

865
00:39:21,595 --> 00:39:25,063
And now, you'll be editing only in the height-compact,
现在,你只会编辑height-compact,

866
00:39:25,131 --> 00:39:26,497
So, we're gonna hit Done varying,
所以,我们要做不同的,

867
00:39:26,565 --> 00:39:28,098
Get's rid of our blue,
摆脱我们的蓝色,

868
00:39:28,167 --> 00:39:29,432
And we, so we know we're in good shape,
我们,所以我们知道我们的身体状况很好,

869
00:39:29,501 --> 00:39:31,735
Now what happens if I go back to portrait?
现在如果我回到画像吗?

870
00:39:31,804 --> 00:39:33,536
What's this gonna look like in portrait?
这是什么画像会怎么样?

871
00:39:33,605 --> 00:39:34,504
Anyone wanna volunteer?
有人想做志愿者吗?

872
00:39:35,706 --> 00:39:39,541
Yes, so all of this work that we did here
是的,所以我们在这里做所有这些工作

873
00:39:39,610 --> 00:39:42,177
has had no effect whatsoever on portrait,
对肖像没有任何效果,

874
00:39:42,245 --> 00:39:44,845
Because portrait is height regular,
因为肖像是高度固定,

875
00:39:44,914 --> 00:39:47,481
And all that work we did here, every single bit we did since
和我们在这里做的工作,我们做的每一位

876
00:39:47,550 --> 00:39:51,451
we clicked into the blue bar, only happens in high compact,
我们点击蓝色的酒吧,只发生在高紧凑,

877
00:39:51,520 --> 00:39:54,188
So when we click back to portrait it looks just like it
所以当我们点击回到肖像看起来就像它

878
00:39:54,256 --> 00:39:59,625
used to, unaffected by all that work we did,
习惯,影响工作,

879
00:39:59,694 --> 00:40:02,062
Make sense, understand why that happened?
意义,理解为什么,发生了什么?

880
00:40:04,832 --> 00:40:09,001
So now, we need to, in this case, the height regular case,
现在,我们需要,在这种情况下,常规情况下,高度

881
00:40:09,069 --> 00:40:11,903
we need to put those buttons in along the top here,
我们需要把这些按钮在顶部,

882
00:40:11,972 --> 00:40:13,872
So, I'm gonna do this pretty quickly, so
所以,我要做这个很快,所以

883
00:40:13,941 --> 00:40:16,441
you can kind of see a review of it,
你可以看到一个评论,

884
00:40:16,509 --> 00:40:18,008
Actually, before I do that review,
实际上,之前我做评论,

885
00:40:18,077 --> 00:40:19,243
let's let this soak in a little bit,
让我们让这个浸泡在一点,

886
00:40:19,312 --> 00:40:21,645
because I wanna show you the document outline,
因为我想向您展示文档大纲,

887
00:40:21,714 --> 00:40:23,446
So, I'm going over the document outline and
所以,我要在文档大纲和

888
00:40:23,515 --> 00:40:25,181
I'm just gonna make it wider,
我要让它更广泛,

889
00:40:25,250 --> 00:40:26,215
And why do you wanna make this wider?
为什么你想让这个更广泛?

890
00:40:26,283 --> 00:40:30,452
Well, the document outline shows not only all your views,
嗯,不仅文档大纲显示你所有的观点,

891
00:40:30,521 --> 00:40:33,989
but it also show all of your constraints,
但它也显示你所有的约束,

892
00:40:34,058 --> 00:40:36,825
You see all these constraints down here?
你在这里看到所有这些限制?

893
00:40:36,893 --> 00:40:38,893
And you notice that some of them are, like,
你注意到一些,,

894
00:40:38,961 --> 00:40:41,529
grayed out here,
灰色的,

895
00:40:41,598 --> 00:40:42,797
And why are they grayed out?
为什么他们是灰色的吗?

896
00:40:42,865 --> 00:40:46,332
Because they apply to a different size class
因为他们适用于不同大小的类

897
00:40:46,401 --> 00:40:47,968
than is being shown here,
比所示,

898
00:40:48,036 --> 00:40:51,971
We are looking at height regular, these grayed out
我们看着高度固定,这些灰色的

899
00:40:52,039 --> 00:40:56,075
constraints are only over here in height compact,
限制只有在高度紧凑,

900
00:40:56,143 --> 00:40:57,476
So, when we go to height compact,
所以,当我们去高度紧凑,

901
00:40:57,545 --> 00:41:00,678
all of them apply because we haven't done any
所有这些,因为我们还没有做任何申请

902
00:41:00,747 --> 00:41:03,415
constraints that are in height regular only yet,
还只在高度常规约束,

903
00:41:03,483 --> 00:41:06,851
So, all of these apply in that circumstance,
所以,所有这些应用在这种情况下,

904
00:41:06,920 --> 00:41:09,420
Now, looking at your constraints
现在,看你的约束

905
00:41:09,488 --> 00:41:12,489
right here is a really good kind of tool for
这里是一个很好的工具

906
00:41:12,558 --> 00:41:15,792
finding tiny little problems with your UI,
你的UI,发现小问题

907
00:41:15,861 --> 00:41:17,861
And that's when you have magic numbers,
当你有神奇的数字,

908
00:41:17,929 --> 00:41:20,029
You see this magic numbers in here?
你看到这个神奇的数字在这里吗?

909
00:41:20,098 --> 00:41:22,265
8 8 20 10 and 10,
8 8 20 10和10个,

910
00:41:22,333 --> 00:41:24,566
By the way, we never wanna look at the magic numbers for
顺便说一下,我们从来没有想看看神奇的数字

911
00:41:24,635 --> 00:41:25,601
things that are grade out,
年级的事情了,

912
00:41:25,669 --> 00:41:28,102
Like this 347 when I look at that because it
这样347当我看着,因为它

913
00:41:28,171 --> 00:41:30,671
doesn't apply here,
不适用,

914
00:41:30,740 --> 00:41:34,142
We only wanna look at the ones that are dark blue here,
我们只是想看看那些深蓝色,

915
00:41:34,210 --> 00:41:37,445
So we don't like to see these magic numbers here,
所以我们不喜欢看到这些神奇的数字,

916
00:41:37,513 --> 00:41:41,748
unless we intend for that magic number to be there,
除非我们打算让这神奇的数字,

917
00:41:41,817 --> 00:41:45,751
So, 8 8 20, we never typed those in,
8 8 20,我们从来没有类型的,

918
00:41:45,820 --> 00:41:46,652
Why are they there?
为什么他们那里?

919
00:41:46,721 --> 00:41:48,521
We don't want them there,
我们不希望他们在那里,

920
00:41:48,589 --> 00:41:50,656
10 and 10 however we do want those,
10和10然而我们想要这些,

921
00:41:50,724 --> 00:41:51,489
We wanted those,
我们想要这些,

922
00:41:51,558 --> 00:41:53,891
those are a magic number we want in our UI,
这是一个神奇的数字我们想要在我们的界面,

923
00:41:53,960 --> 00:41:56,794
That's our spacing in between that we decided we want,
这是我们之间的间距,我们决定我们想要的,

924
00:41:56,863 --> 00:41:59,864
So, how to we get rid of these magic numbers, like 8, 8, 20?
我们如何摆脱这些神奇的数字,像8日8日20吗?

925
00:41:59,933 --> 00:42:02,967
Well, you're gonna click on them to select it,
好吧,你要点击以选择它,

926
00:42:03,035 --> 00:42:05,202
This is just like if you had clicked on it in here,
这就像如果你点击它,

927
00:42:05,270 --> 00:42:07,003
cuz the document outline, you remember, you click there,
因为文档大纲,你记住,你点击那里,

928
00:42:07,072 --> 00:42:09,905
It's just like you're clicking in, in here, except for
就像你点击,在这里,除了

929
00:42:09,974 --> 00:42:13,041
sometimes it's even easier to click on the document outline,
有时是更容易点击文档大纲,

930
00:42:13,110 --> 00:42:16,612
We could also click on the thing that it's attached to
我们也可以点击它连着

931
00:42:16,681 --> 00:42:17,879
like the display,
像显示,

932
00:42:17,948 --> 00:42:20,582
So, this is the display's top equals top layout
所以,这是显示顶级=布局

933
00:42:20,651 --> 00:42:21,583
guide plus eight,
指导+ 8,

934
00:42:21,651 --> 00:42:23,817
And go to the size inspector here and see it,
去这里的尺寸检查器,看看它,

935
00:42:23,886 --> 00:42:25,986
And we'll see the magic numbers here also,
我们还会看到神奇的数字,

936
00:42:26,054 --> 00:42:27,154
not just in the document outline,
不仅在文档大纲,

937
00:42:27,222 --> 00:42:31,625
But, we're seeing them here in our size inspector,
但是,我们看到他们在我们尺寸检查器,

938
00:42:31,693 --> 00:42:34,193
So, any time we see these magic numbers we want to
所以,任何时候我们想看到这些神奇的数字

939
00:42:34,262 --> 00:42:34,960
inspect them,
检查他们,

940
00:42:35,029 --> 00:42:38,997
either here or by clicking on them and edit them,
在这里或通过单击它们和编辑它们,

941
00:42:39,066 --> 00:42:40,198
So, in the size inspector
所以,在尺寸检查器

942
00:42:40,267 --> 00:42:43,167
we've always gone in to check to make sure things are good,
我们一直在检查,以确保一切都不错,

943
00:42:43,236 --> 00:42:45,503
but we can also change them if they're not good,
但是我们也可以改变他们如果他们不是好,

944
00:42:45,572 --> 00:42:47,938
And so, here I'm clicking on it and editing it, and
所以,这里我点击它和编辑它,和

945
00:42:48,007 --> 00:42:49,840
this constant, I don't want it to be eight, so
这个常数,我不希望它是8

946
00:42:49,909 --> 00:42:52,176
let's see what my choices are,
让我们看看什么是我的选择,

947
00:42:52,244 --> 00:42:55,745
I don't have standard value, use canvas value means
我没有标准的价值,使用帆布值的含义

948
00:42:55,814 --> 00:42:58,547
use what's currently showing in the story board,
在故事板,使用目前的表现

949
00:42:58,616 --> 00:43:00,116
we rarely want that,
我们很少想要,

950
00:43:00,185 --> 00:43:01,217
It's almost never want that,
这几乎是从来没有希望,

951
00:43:01,285 --> 00:43:03,985
that would mean that we had to have dragged it right in
这意味着我们不得不拖着它的

952
00:43:04,054 --> 00:43:05,520
position they will use the blue lines,
他们将利用蓝线位置,

953
00:43:05,588 --> 00:43:06,854
It might be right but,
这或许是对的,但

954
00:43:06,923 --> 00:43:09,390
almost never do you want the canvas value,
几乎从来没有你想要帆布值,

955
00:43:09,459 --> 00:43:12,459
Instead, we're gonna do what we do here,
相反,我们要做我们所做的,

956
00:43:12,528 --> 00:43:16,897
to say what we want, so maybe, this one, actually I'm gonna
说我们想要的,所以,这一个,我要

957
00:43:16,966 --> 00:43:21,635
do this one down here first, let's look at this one,
先做这个下面,让我们来看看这个,

958
00:43:21,703 --> 00:43:24,170
So this top layout guide here, this one, we can use
这里上面的布局指导,这个,我们可以使用

959
00:43:24,238 --> 00:43:28,241
a standard value, to do it to the top layout guide,
一个标准的价值,它的布局指导,

960
00:43:28,309 --> 00:43:30,108
And look, I did standard value and
看,我的价值和标准

961
00:43:30,177 --> 00:43:31,409
it got rid of the plus eight,
它摆脱了+ 8,

962
00:43:31,478 --> 00:43:34,045
It's still eight pixel, eight points over there because that
它仍然是八个像素,因为8分

963
00:43:34,113 --> 00:43:37,147
is the standard value but it stopped showing it as that,
是标准的价值但它停止显示它,

964
00:43:37,216 --> 00:43:40,184
And same thing up here when we go up to this one and we look,
和上面一样,当我们去这一个,我们看,

965
00:43:40,253 --> 00:43:43,387
there's no standard value here so what do we put, 0,
这里没有标准的价值我们说,0,

966
00:43:43,455 --> 00:43:44,921
And we will have zero,
,我们将为零,

967
00:43:44,990 --> 00:43:47,623
That actually fixed a bug because it move this display
其实固定一个缺陷,因为它移动这个显示

968
00:43:47,692 --> 00:43:49,258
right up to the edge right there,
到边缘,

969
00:43:49,327 --> 00:43:52,761
And you can see that got rid of that one,
你可以看到,摆脱了这个,

970
00:43:52,830 --> 00:43:54,129
Same thing here, we can go to this one,
同样的事情,我们可以去,

971
00:43:54,198 --> 00:43:56,131
Let's do this one by inspecting it,
让我们做一个通过检查它,

972
00:43:56,199 --> 00:43:58,766
Here's the constant right here, 20, we don't want that,
这是常数,20岁,我们不希望这样,

973
00:43:58,835 --> 00:44:01,069
We go here and say, standard value,
我们去这里说,标准的价值,

974
00:44:01,138 --> 00:44:02,670
What's the standard value and the 20 is gone,
什么标准的价值和20,

975
00:44:02,738 --> 00:44:04,004
that also fixed a bug
固定一个bug

976
00:44:04,073 --> 00:44:05,872
cuz the thing was not all the way down at the bottom,
因为事就没有在底部,

977
00:44:05,941 --> 00:44:08,007
So, you see how we fixed bugs by going and
所以,你看我们如何去和修复bug

978
00:44:08,076 --> 00:44:12,211
chasing down all of our magic numbers in this view,
追踪所有的魔法数字在这个视图中,

979
00:44:12,280 --> 00:44:13,745
okay in the document outline,
好的文档大纲,

980
00:44:13,814 --> 00:44:16,848
So, you almost always want to be chasing those things down,
所以,你总是想要追逐那些东西,

981
00:44:16,917 --> 00:44:19,885
The only problem can happen here when you're chasing them
唯一的问题可能发生在这里当你追逐他们

982
00:44:19,954 --> 00:44:21,919
is when you have a magic number like 8 or
是当你有一个神奇的数字8或吗

983
00:44:21,988 --> 00:44:24,322
20 that you actually intend to be 8 or 20,
20,你真的打算是8到20,

984
00:44:24,390 --> 00:44:26,457
Cuz then you're like is that a magic wand or not?
因为你像一个魔杖吗?

985
00:44:26,525 --> 00:44:28,858
Because there's no way to down like a variable in
因为没有办法像一个变量

986
00:44:28,927 --> 00:44:30,160
there or something,
之类的,

987
00:44:30,229 --> 00:44:31,928
But these tens, we know those are right,
但这些数以千万计,我们知道那些是正确的,

988
00:44:34,065 --> 00:44:35,297
All right, so,
好吧,那么,

989
00:44:35,366 --> 00:44:38,033
just a little side track there to show you how to use that,
只是一个小旁轨向您展示如何使用,

990
00:44:38,102 --> 00:44:40,702
Let's go back to our height regular and
让我们回到我们的常规和高度

991
00:44:40,771 --> 00:44:43,171
make this look like what we want,
让这看起来像我们想要的,

992
00:44:43,240 --> 00:44:47,108
So, let's start by pasting back in these things,
那么,让我们先粘贴在这些事情,

993
00:44:47,177 --> 00:44:48,009
Actually, before we do that,
实际上,在我们这么做之前,

994
00:44:48,077 --> 00:44:50,110
And this is a common mistake you'll make to,
这是一个常见的错误你会赚,

995
00:44:50,179 --> 00:44:52,379
What mistake did I make right there?
我做了什么错误?

996
00:44:52,448 --> 00:44:53,813
I wanted to start doing height regular and
我想开始做定期和高度

997
00:44:53,882 --> 00:44:54,914
I didn't hit vary for traits, so
我没有达到不同的特征,因此

998
00:44:54,983 --> 00:44:56,482
I wasn't acctually editing height regular,
我没有编辑高度固定,实际上,

999
00:44:56,550 --> 00:44:57,349
I was editing any/any,
我是编辑任何/,

1000
00:44:57,418 --> 00:45:00,919
So, don't miss that, so I'm gonna vary for
所以,不要错过,所以我要改变

1001
00:45:00,987 --> 00:45:02,620
traits in heights and
特征的高度和

1002
00:45:02,689 --> 00:45:07,024
this gonna use this height were I'm looking at, height
这将使用这个高度是我在看,高度

1003
00:45:07,093 --> 00:45:11,729
regular this gonna show me all gonna show me all devices with
定期都要给我要给我的所有设备

1004
00:45:11,797 --> 00:45:15,866
height regular which is all the iPads, Split View,
高度一般都是ipad,拆分视图,

1005
00:45:15,935 --> 00:45:20,570
Masters, all the iPhone, they're all height regulars,
大师们,所有的iPhone,他们都高度常客,

1006
00:45:20,639 --> 00:45:21,438
So it's just showing me and
所以它只是显示我

1007
00:45:21,506 --> 00:45:24,040
I can actually do this editing in anyone of those,
我可以做这个编辑在任何人的,

1008
00:45:24,109 --> 00:45:24,973
Because they're all height regular,
因为它们都是高度固定,

1009
00:45:25,042 --> 00:45:28,077
All right, so now let's paste this in,
好了,现在让我们粘贴的,

1010
00:45:28,146 --> 00:45:29,577
Now, when I pasted this in,
现在,当我贴,

1011
00:45:29,646 --> 00:45:31,746
by the way an interesting thing happened,
顺便说一下,发生了一件有趣的事

1012
00:45:31,815 --> 00:45:34,315
If I go to my attributes inspector and
如果我去我的属性检查器

1013
00:45:34,384 --> 00:45:35,950
go all the way to the bottom,
一路走到底,

1014
00:45:36,018 --> 00:45:37,051
Look right here,
看这里,

1015
00:45:37,119 --> 00:45:40,654
Okay, I selected this stake view right here,
好吧,我选择这个股份视图,

1016
00:45:40,723 --> 00:45:43,657
And you see that it says installed not,
你看到它说没有安装,

1017
00:45:44,792 --> 00:45:47,492
But, in height regular it's installed,
但是,在高度正常安装,

1018
00:45:47,561 --> 00:45:50,362
That's saying this stack view only is installed in the view
说这个堆栈视图只是安装在视图

1019
00:45:50,430 --> 00:45:51,429
hierarchy,
层次结构,

1020
00:45:51,498 --> 00:45:52,564
When we're height regular,
当我们高度固定,

1021
00:45:52,632 --> 00:45:55,767
If I click on this one notice it's installed everywhere,
如果我点击这个通知安装无处不在,

1022
00:45:57,470 --> 00:45:59,703
Doesn't say not installed and height regular,
并不是说没有安装和高度,

1023
00:45:59,772 --> 00:46:01,771
It says installed everywhere,
它说安装无处不在,

1024
00:46:01,840 --> 00:46:03,172
So, you can always tell which user and
所以,你可以总是告诉用户和

1025
00:46:03,241 --> 00:46:04,741
you can of course click these on and off,
当然你可以点击这些了,

1026
00:46:04,809 --> 00:46:07,477
And you can even add a plus here to add variation
你甚至可以添加一个+添加变异

1027
00:46:07,545 --> 00:46:08,410
to remove them,
删除它们,

1028
00:46:08,479 --> 00:46:11,646
I find it easier just to Enter this varying mode and
我发现它更容易进入这个模式和不同

1029
00:46:11,715 --> 00:46:13,148
then drag these things in,
然后拖动这些东西,

1030
00:46:14,284 --> 00:46:15,349
Anyway, here we go,
不管怎样,好了,

1031
00:46:15,418 --> 00:46:17,885
Let's get this thing down here,
下面让我们这个东西,

1032
00:46:17,954 --> 00:46:21,788
Again, we want the both edges to be lined up,
再一次,我们想要两个边排队,

1033
00:46:21,856 --> 00:46:23,056
So, let's go ahead and
所以,让我们继续

1034
00:46:23,125 --> 00:46:26,993
do that remember we do that by selecting them both,
记得我们做选择,

1035
00:46:27,061 --> 00:46:28,827
And in going over here to a line,
在这里到一条线,

1036
00:46:28,896 --> 00:46:30,429
This time it's the leading and
这一次是领先的

1037
00:46:30,498 --> 00:46:33,031
trailing edges that we want to be the same,
我们想要同样的后缘,

1038
00:46:33,100 --> 00:46:35,033
And add those constraints,
并添加这些约束,

1039
00:46:35,102 --> 00:46:37,701
Again, as soon as I had those constraints now I have
再次,一旦我有现在这些约束我

1040
00:46:37,770 --> 00:46:41,606
a problem with a vertical position of this stack view,
一个问题这个堆栈视图的垂直位置,

1041
00:46:41,674 --> 00:46:43,540
is not defined,
没有定义,

1042
00:46:43,609 --> 00:46:45,308
You need constraints for the Y position,
你需要为Y位置约束,

1043
00:46:45,377 --> 00:46:48,411
Cuz, I've only constrained it horizontally right there,
因为,我只限制水平,

1044
00:46:48,480 --> 00:46:51,881
So, let's go ahead and constrain it for
所以,让我们去限制它

1045
00:46:51,949 --> 00:46:53,415
a vertical by pinning it to this,
一个垂直固定它,

1046
00:46:53,484 --> 00:46:55,518
So, I'm gonna use this other one over here this time,
所以,我要用这里的另一个,

1047
00:46:55,586 --> 00:46:57,986
And I'm gonna show you something interesting here,
这里我要告诉你一些有趣的事情,

1048
00:46:58,055 --> 00:47:01,923
So, here I'm gonna pin to its bottom nearest neighbor, and
这里我要销其最近的邻居,和

1049
00:47:01,991 --> 00:47:05,459
I'm gonna use ten, which is my magic number that I want,
我要用十个,这是我神奇的数字,我想要的,

1050
00:47:05,528 --> 00:47:08,830
And I'm gonna pick something in here cuz remember last time
我会选择在这里因为记得上次的东西

1051
00:47:08,898 --> 00:47:09,630
we did this and
我们这样做,

1052
00:47:09,699 --> 00:47:13,199
when I put this in here it turned from red to yellow,
当我在这里把这个结果从红色到黄色,

1053
00:47:13,268 --> 00:47:15,602
Because things weren't in the right position cuz I had added
因为事情没有在正确的位置因为我有补充道

1054
00:47:15,671 --> 00:47:17,336
constraints and it didn't move them,
约束和它没有移动它们,

1055
00:47:17,405 --> 00:47:21,106
Well, if you go down here and say update frames either to
好吧,如果你去这里,要么说更新帧

1056
00:47:21,175 --> 00:47:22,774
the items of the new constraints,
项目的新限制,

1057
00:47:22,843 --> 00:47:24,976
involved in the new constraints which would be,
参与新约束,

1058
00:47:25,045 --> 00:47:27,011
This nearest neighbor and us, or
或者,这最近邻和美国

1059
00:47:27,080 --> 00:47:28,813
you can do it all the frames in your container,
你能做到所有的帧在你的容器,

1060
00:47:28,881 --> 00:47:31,181
If you turn this on, then when you add this constraints,
如果你把这个,当你添加这个限制,

1061
00:47:31,250 --> 00:47:32,583
it will automatically move them,
它会自动移动,

1062
00:47:32,652 --> 00:47:34,918
And then, you won't get the yellow,
然后,你不会得到黄色,

1063
00:47:34,987 --> 00:47:36,453
You won't have to go over and
你没有去

1064
00:47:36,521 --> 00:47:38,621
click, update frames and all that,
点击,更新帧,

1065
00:47:38,689 --> 00:47:41,858
So watch this, when I add this constraint, it moved them,
所以看这个,当我添加这个约束,它感动他们,

1066
00:47:43,127 --> 00:47:43,959
You see that?
你看到了吗?

1067
00:47:44,027 --> 00:47:45,259
No yellow,
没有黄色的,

1068
00:47:45,328 --> 00:47:45,960
Right here, I am in
在这里,我在

1069
00:47:46,028 --> 00:47:48,162
my document outline nothing on in the upper corner
我的文档大纲上角落里什么也没有

1070
00:47:48,231 --> 00:47:50,964
like there was when we did the other one,
就像当我们做另一个,

1071
00:47:51,033 --> 00:47:52,433
Now, we still have one other things to do here,
现在,我们仍然有一个其他的事情要做,

1072
00:47:52,501 --> 00:47:56,670
It's not obvious that we need to do this but
这不是明显,我们需要这样做

1073
00:47:56,738 --> 00:47:59,338
the height of these just happens to to be the same
这些恰好的高度是一样的

1074
00:47:59,407 --> 00:48:01,006
height as all of these,
所有这些高度,

1075
00:48:01,075 --> 00:48:03,308
But that's just happy circumstance,
但这只是幸福的情况下,

1076
00:48:03,377 --> 00:48:05,243
And the other time it was obvious that they weren't,
和其他时间他们不很明显,

1077
00:48:05,312 --> 00:48:08,379
So I need to do the same thing here where I'm gonna control,
所以我需要做同样的事,我要控制,

1078
00:48:08,448 --> 00:48:09,814
drag from this stack view,
从这个堆栈视图拖拽,

1079
00:48:09,882 --> 00:48:12,683
And then again I could do either an individual button or
然后我可以做一个单独的按钮或

1080
00:48:12,752 --> 00:48:15,185
one of these sub stack views right here,
这些子堆栈视图之一,

1081
00:48:15,254 --> 00:48:17,520
And I'm gonna set them to be equal heights,
我要把它们相等的高度,

1082
00:48:17,589 --> 00:48:20,924
Other was, just so that no matter what
其他,这样不管什么

1083
00:48:20,993 --> 00:48:23,793
mathematical symbol I put in those buttons up there
数学符号我放在这些按钮

1084
00:48:23,861 --> 00:48:26,662
then it's never gonna squinch down and be smaller,
那就不会突角拱下来更小,

1085
00:48:26,730 --> 00:48:30,866
Or grow up and be bigger than the other ones,
或长大的,比其他的更大,

1086
00:48:30,935 --> 00:48:32,468
So I'm gonna say equal height right there,
所以我想说平等的高度,

1087
00:48:32,536 --> 00:48:36,571
See the two equals that got generated there?
看到两个等于一个生成的?

1088
00:48:37,974 --> 00:48:39,340
So same thing as before,
所以之前一样,

1089
00:48:39,408 --> 00:48:41,442
We've done a good job of adding this on and
我们已经添加这个,做了很好的工作

1090
00:48:41,510 --> 00:48:44,144
making it seem like this is part of the stack view,
使它看起来像这是堆栈视图的一部分,

1091
00:48:44,212 --> 00:48:48,648
So this time we're going to attach this stack view up to
所以这次我们要附上这个堆栈视图

1092
00:48:48,717 --> 00:48:49,815
here,
在这里,

1093
00:48:49,884 --> 00:48:52,551
So I'm just gonna control drag up to here,
所以我要控制拖到这里,

1094
00:48:52,620 --> 00:48:55,320
set the vertical spacing, and I'm gonna put the edge of this
设置垂直间距,我要把它的边缘

1095
00:48:55,389 --> 00:48:58,057
big stack view right here over to the edge,
大堆栈视图到边缘,

1096
00:48:59,926 --> 00:49:03,027
And same thing as always we want to double click here,
和一样总是我们想双击这里,

1097
00:49:03,096 --> 00:49:04,094
Standard if we can,
如果我们能标准,

1098
00:49:04,163 --> 00:49:06,663
We can't, we'll do zero,
我们不能,我们要做零,

1099
00:49:06,732 --> 00:49:09,199
Same thing with this one over here,
和这个一样,

1100
00:49:09,268 --> 00:49:10,233
Double click,
双击,

1101
00:49:10,302 --> 00:49:13,236
Here we want our magic number of ten,
在这里,我们希望我们的神奇数字10,

1102
00:49:13,304 --> 00:49:16,338
So now we've done all that we need to do for
现在我们已经做了所有我们需要做的

1103
00:49:16,407 --> 00:49:20,476
our height regulars so we can done varying right here,
我们的常客所以我们可以做不同的高度,

1104
00:49:20,545 --> 00:49:23,412
And did this effect height compact, no,
和这样做效果高度紧凑,不,

1105
00:49:23,481 --> 00:49:25,681
no effect on height compact,
不影响高度紧凑,

1106
00:49:26,983 --> 00:49:30,417
And if we run, we've got width is compact but
如果我们跑步,紧凑但我们有宽度

1107
00:49:30,486 --> 00:49:33,654
height is regular so we're getting five high and
高度是常规的所以我们要五高

1108
00:49:33,722 --> 00:49:36,990
four across, in a regular height we go five high,
四,在常规的高度我们五高,

1109
00:49:37,059 --> 00:49:39,492
And when we switch over here, we get width compact,
当我们这里的开关,我们得到宽度紧凑,

1110
00:49:39,561 --> 00:49:42,595
height compact and we're gonna to four high and five across,
高度紧凑,我们要到四和五高,

1111
00:49:45,700 --> 00:49:48,701
Hopefully that showed you pretty much all
你希望显示几乎所有

1112
00:49:48,770 --> 00:49:52,103
the things you need to know about auto layout,
你需要知道的事情自动布局,

1113
00:49:52,172 --> 00:49:56,407
Not just how we vary major UI differences between
不仅我们如何改变主要界面之间的差异

1114
00:49:56,476 --> 00:49:58,109
the size classes,
大小类,

1115
00:49:58,177 --> 00:50:02,280
But also how you are gonna use the document outline over
而且你会如何使用文档大纲

1116
00:50:02,349 --> 00:50:05,415
here to look at all of your constraints,
来看看你所有的约束,

1117
00:50:05,484 --> 00:50:09,152
And fix the dark blue ones that have magic numbers that
并修复深蓝色的有魔力的数字

1118
00:50:09,221 --> 00:50:11,320
you didn't intend,
你没有打算,

1119
00:50:11,389 --> 00:50:13,389
You can also use this to click on your constraints and
您还可以使用该约束和点击

1120
00:50:13,458 --> 00:50:14,056
look at them,
看看他们,

1121
00:50:14,125 --> 00:50:15,891
It's highlighting them here,
它强调了,

1122
00:50:15,960 --> 00:50:17,659
And inspect them over here,
并检查它们,

1123
00:50:17,728 --> 00:50:20,295
And we're still often using the size inspector,
和我们仍然经常使用尺寸检查器,

1124
00:50:20,364 --> 00:50:22,764
right here, to look at all of our constraints,
在这里,看看我们所有的约束,

1125
00:50:25,000 --> 00:50:27,434
In the hugging priority we briefly showed that's just if
在拥抱的优先级,我们短暂显示,只是如果

1126
00:50:27,503 --> 00:50:29,703
you have two things that are trying to share a space,
你有两件事要共享一个空间,

1127
00:50:29,771 --> 00:50:32,038
And you want one to hug and one to use the other space,
你想要一个拥抱和一个用另一个空间,

1128
00:50:32,107 --> 00:50:33,339
you can do the hugging,
你可以拥抱,

1129
00:50:33,407 --> 00:50:35,875
We also didn't really talk about the content compression
我们还没有真正谈论的内容压缩

1130
00:50:35,944 --> 00:50:38,009
resistance but that's the opposite thing,
阻力但相反的事情,

1131
00:50:38,078 --> 00:50:40,812
That's where it's trying to collapse things down,
这就是它的崩溃下来,

1132
00:50:40,881 --> 00:50:42,781
One of them wants to keep its height and
其中一个想保持高度和

1133
00:50:42,849 --> 00:50:45,417
the other one is happy to be collapsed down,
另一个是高兴倒塌下来,

1134
00:50:45,485 --> 00:50:47,418
So that's just kinda the opposite of hugging,
这只是有点相反的拥抱,

1135
00:50:47,486 --> 00:50:51,755
That compressing so we can set that as well,
压缩,所以我们可以设置,

1136
00:50:51,823 --> 00:50:54,358
Any questions about all that autolayout business?
所有的自动布局业务方面有问题吗?

1137
00:50:56,394 --> 00:51:02,165
Okay, so that is it for the demo,
好了,这是为了演示,

1138
00:51:02,234 --> 00:51:04,400
And just a little bit about what's coming up,
就一下接下来会发生什么,

1139
00:51:04,469 --> 00:51:08,370
So tomorrow your assignment five is due by midnight,
所以明天你的作业5将在午夜,

1140
00:51:08,439 --> 00:51:10,238
No section Friday this week,
本周星期五没课,

1141
00:51:10,307 --> 00:51:12,907
Next week the lectures are gonna be about animation,
下个星期的讲座是动画,

1142
00:51:12,976 --> 00:51:16,511
A really important part obviously of an iPhone device
很显然iPhone设备的重要组成部分

1143
00:51:16,579 --> 00:51:19,580
or iOS device is animating things on screen,
或iOS设备是动画的东西在屏幕上,

1144
00:51:19,649 --> 00:51:21,449
So we're gonna talk about that next week,
所以我们要讨论,下周,

1145
00:51:23,886 --> 00:51:34,494
>> For more, please visit us at stanford,edu,
> >更多内容,请访问我们的斯坦福大学edu,