横竖屏布局
平时我们接触到的横竖屏布局,大多都是布局样式是统一的,只是按照横竖屏的宽高比例进行约束布局。最近接触的项目,要求的横屏布局与竖屏布局完全不一样,因此研究了一下xib在8.0之后出现的布局方式,在这里给大家简单介绍一下,接触时间尚短,有不对的地方欢迎大家指正。
横竖屏01
xib新出的功能可以直接进行横竖屏的布局,如上图所示,左边分别展示出了不同的型号,右边有竖屏和横屏两种选择方式,点击右边的Vary for Traits可以选择基于宽或者高进行适配。
横竖屏02.png
横竖屏03.png
当我们点击右侧的宽或者高的情况下,右侧会列举出适配该布局的型号,如横排列举不下的话,则为下图所示,点击上下箭头按钮,同样可查看都有哪些型号。
横竖屏04.png
对于该选择宽还是高这一点,目前我也没有弄得太明白,我的做法是竖屏选择了宽高之后,查看左侧型号(排除了iPad分屏),如果适配了全部的竖屏,且没有横屏就可以了。_
注意:只有点击了'Vary for Traits'按钮,并选择了宽或者高之后,出现如上图所示的颜色背景的情况下加的约束或者控件,才是只适配对应型号手机的约束及控件。如果没有选择横竖屏,如图1所示的白底的情况下加的约束,则横竖屏全都有。可能这段话不太好理解,我们下面来具体看下
横竖屏05.png
打开xib,我们什么都不选择,先拖进来3个view,如下图所示
横竖屏06.png
点击下方的竖屏,选择基于宽和高布局,按钮变成Done Varying后,对3个view进行约束,并在FirstView上再放上一个label,加好约束,如下图所示
横竖屏07.png
点击'Done Varying'后,竖屏约束就添加完成了。
此时,我们点击横屏,可以看到左侧First View内的Label呈现灰色,表示横屏的时候没有该label,且屏幕右边可以看到之前添加的约束都呈灰色,代表横屏的时候这些约束全是不可用状态。
横竖屏08.png
此时,按照竖屏的步骤,我们点击Vary for Traits,选择基于高度进行布局
横竖屏09.png
按照我们希望的,添加完约束和控件之后,点击Done Varying,效果如下图,此时的Switch按钮为我们横屏是添加的,故在竖屏的情况下是不显示的。
横竖屏10.png
我们可以点击竖屏,切回竖屏确认一下,switch为灰色状态,代表我们添加的是正确的。
横竖屏11.png
最后,我们运行一下,贴图看一下效果
横竖屏12.png
横竖屏13.png
此致,敬礼!作业完成啦~~~~可以继续看电视了~\(≧▽≦)/~啦啦啦
网友评论