美文网首页
第一个Xcode项目(2) - Auto Layout - 布局

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

作者: Simon_song | 来源:发表于2017-05-08 12:56 被阅读0次

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

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

    看起来还不错的设计图

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

    设置整体的背景颜色

    然后我们添加一个Scroll View,并为它添加布局约束 (类似网页布局里css样式)

    添加Scroll View并添加布局约束

    最后的效果是这样的

    添加完约束后的效果

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

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

    在Scroll View里面添加View并添加布局约束

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

    运行效果,横屏快捷键时Command+→ (方向键右)

    嗯......好像哪里不对。横屏的时候View的宽度没有变化,我只能说 -> 不科学!!!

    那只好去看看问题在哪里了

    点击右上角红色箭头

    意思是说Scroll View需要宽度和高度的约束

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

    为View添加一个高度约束

    View有高度约束以后,加上之前View距离Scroll View的上下间距就可以计算出Scroll View的高度,这样其中一条错误就解决了

    选中Scroll View和View,添加水平居中对齐的约束

    然后第二条错误也成功没有了,再运行APP看看效果,发现已解决问题。啊哈哈......

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

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

    相关文章

      网友评论

          本文标题:第一个Xcode项目(2) - Auto Layout - 布局

          本文链接:https://www.haomeiwen.com/subject/peaftxtx.html