第一个Xcode项目(2) - Auto Layout - 布局④

[相关信息:Xcode7.2 ; Swift2.0]

先回顾一下效果图


第一个Xcode项目(2) - Auto Layout - 布局④_第1张图片
看起来还不错的设计图

之前我们已经把第一行的图标的圆角及其相关属性都设置好了。那第二行的色块也是同理,只是第二行的色块我们不加边框和边框颜色,来用另外一种方法设置选中 (为什么要用另外一种?因为我..喜..欢..折腾!!)


第一个Xcode项目(2) - Auto Layout - 布局④_第2张图片
设置色块的圆角
设置好以后我们需要添加一个选中的效果,那我选择的就是在他们的后面添加一个View
第一个Xcode项目(2) - Auto Layout - 布局④_第3张图片
拖入一个新的View,设置它的大小,位置和层级

然后我们为它添加圆角和边框 (跟第一行的图标是一样的设置)


第一个Xcode项目(2) - Auto Layout - 布局④_第4张图片
设置圆角和边框
接下来我们需要给这个用来选中的View添加约束,让它能够始终和色块处在合适的位置
第一个Xcode项目(2) - Auto Layout - 布局④_第5张图片
为新添加的View设置约束1
PS:如果你在右边部分选不中控件,可以在左侧树状栏那里找到相应的控件,然后双击,你就可以通过键盘的上下左右移动控件了
第一个Xcode项目(2) - Auto Layout - 布局④_第6张图片
为新添加的View设置约束2
添加完约束以后让我们来看看我们刚刚添加的约束,观察一下
第一个Xcode项目(2) - Auto Layout - 布局④_第7张图片
我们来观察一下刚刚添加的约束
然后我们运行一下APP,看下效果 (Command+R)
第一个Xcode项目(2) - Auto Layout - 布局④_第8张图片
运行APP的效果

嗯,很好,它可以跟着色块排好队伍。

那我们就继续下一步吧。


第一个Xcode项目(2) - Auto Layout - 布局④_第9张图片
新增三个View,并设置属性,宽高和位置

为三个View分别添加约束


第一个Xcode项目(2) - Auto Layout - 布局④_第10张图片
Content这个View的约束添加

第一个Xcode项目(2) - Auto Layout - 布局④_第11张图片
Date这个View的约束添加

第一个Xcode项目(2) - Auto Layout - 布局④_第12张图片
Photo这个View的约束添加

大致的框架已经搭完了,让我们最后来运行下APP看下效果 (Command+R)


第一个Xcode项目(2) - Auto Layout - 布局④_第13张图片
运行APP的效果
嗯,很好。收工~

你可能感兴趣的:(第一个Xcode项目(2) - Auto Layout - 布局④)