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

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

因为我是搞设计的,所以对布局很看重,所以布局这一块我分几个部分来发,又因为第二个添加页面比较复杂,所以我选择先布局它 (难的都会了,简单的还怕?)

好!!我们来开启布局模式。Let's Go!


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

首先我们按照设计稿把整体的背景颜色设置一下 (#F5F5F5)


第一个Xcode项目(2) - Auto Layout - 布局①_第2张图片
设置整体的背景颜色
然后我们添加一个Scroll View,并为它添加布局约束 (类似网页布局里css样式)
第一个Xcode项目(2) - Auto Layout - 布局①_第3张图片
添加Scroll View并添加布局约束
最后的效果是这样的
第一个Xcode项目(2) - Auto Layout - 布局①_第4张图片
添加完约束后的效果

Scroll View的主要用处就是当屏幕高度不够显示内容的时候可以通过滑动看到被隐藏的内容 (PS:当屏幕高度足够的时候是不能滑动的)

接下来我们来继续添加内容,先往Scroll View里面添加一个View,然后添加布局约束,再把View的背景颜色设置成蓝色,这样方便我们查看


第一个Xcode项目(2) - Auto Layout - 布局①_第5张图片
在Scroll View里面添加View并添加布局约束

然后我们来运行下APP看下效果 (Command+R)


第一个Xcode项目(2) - Auto Layout - 布局①_第6张图片
运行效果,横屏快捷键时Command+→ (方向键右)
嗯......好像哪里不对。横屏的时候View的宽度没有变化,我只能说 -> 不科学!!!
那只好去看看问题在哪里了
第一个Xcode项目(2) - Auto Layout - 布局①_第7张图片
点击右上角红色箭头

第一个Xcode项目(2) - Auto Layout - 布局①_第8张图片
意思是说Scroll View需要宽度和高度的约束

上面这张图时xcode官方给出的解决方案,点了之后你可能不知道它做了什么,那我们可以不点,自己手动添加约束来解决问题,如下图


第一个Xcode项目(2) - Auto Layout - 布局①_第9张图片
为View添加一个高度约束
View有高度约束以后,加上之前View距离Scroll View的上下间距就可以计算出Scroll View的高度,这样其中一条错误就解决了
第一个Xcode项目(2) - Auto Layout - 布局①_第10张图片
选中Scroll View和View,添加水平居中对齐的约束
然后第二条错误也成功没有了,再运行APP看看效果,发现已解决问题。啊哈哈......

网上查了资料说,Scroll View需要确定宽度和高度,这样它才可以判断什么时候可以滑动,什么时候不可以滑动。

好了。先到这里吧。-> 完

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