分享

Xib、AutoLayout等使用心得

 最初九月雪 2018-01-24

在新项目中使用Xib有一段时间了,遇到了不少的问题,也收获了很多的奇迹,最让我惊叹的就是使用熟练之后的界面开发速度,完胜Android那种XML方式的半吊子可视化界面开发工具。这里把使用心得汇总一下,希望能帮到大家。

一、Xib的使用深度

StoryBoard不是我的菜,毕竟VC之间的逻辑关系和跳转都比较复杂,甚至有时还得实现自己的栈管理,我更喜欢只是纯页面开发的时候使用可视化工具,就像Android的XML一样。感谢苹果,XCode的可视化工具比Android那个半吊子强太多了。

Xib中页面元素与VC中的事件关联我通常自己来通过addTarget的方式手动做,一方面是因为Android中这么做习惯了,另一方面事件注册的可变性太大,VC下面有时候还会分成更小单元粒度的Controller,就像Android中的Fragment一样。

二、Xib的基本原则

1、怎么样唯一确定一个View的布局?

只要直接或者间接确定x,y,width,height这四个值就可以了。这就是Xib的中心思想。

确定x和y的方式有很多种,这里举几个常见的例子:指定View在Parent中横向居中就是确定x的值,竖向居中则是确定y的值。指定相对于上方或下方View的距离就是确定View的y值,相对于左方或右方View的距离,就是确定View的x值。同时指定View距离其左方和右方View的距离,就可以同时确定x和width,而同时指定View距离其上方和下方的View的距离,就可以同时确定y和height。

2、支持定制

对于Xib中的一个View,可以指定其Custome类,这样就把具体实现交给继承了UIView的那个类了。这样,就可以对系统提供的任何View进行扩展,再通过Xib布局在页面上。

3、代码与Xib混排

Xib中可以包含定制的View,而代码生成的View中也可以添加通过Xib而Load进内存的View。

4、Xib中View的确切布局时机

在Xib中做页面布局时,只是指定了一系列的Constraints,并由IB对这些Contraints进行预览。那这些页面中的View到底是在什么时间点布局呢?准确地说,是viewWillAppear之后和viewDidAppear之前。在这之前,Xib文件的根View默认是600*600的,并没有根据Constraints在不同的Size Class下的表现进行layout计算。也就是说,想得到布局完成的View树并进行查看或操作,至少要到viewDidAppear中。

补充于2015.10.12

在一个使用AutoLayout布局的ALView中,使用代码增加了一些计算好frame的subView,等效果出来后,subView的frame可能会被ALView改变,因此,有必要把ALView的AutoResizesSubViews设置为NO。

对于通过loadNamedXib加载到内存中的View,必须手动指定其frame中的width和height,然后再通过addSubView的方式添加到现有的View树中,使用Xib表示的View在布局时,是以600*600的默认宽高进行的。

5、根View宽高不确定

我们在使用xib要时刻牢记。对于做过Android的同学来说,可以简单地把xib的根View理解成一个RelativeLayout。xib的根View的宽高是在真正程序运行到布局时才会参考当前的Size Class确定下来。所以,除非特别必要,不要使用绝对值来确定x,y,width,height的值。

6、Size Class

根据当前设备横屏、竖屏,还是手机、Pad,Xib把它们归为不同的Size Class,我们可以通过切换Size Class,让View在不同Size Class下展现不同的特性。比如,手机横屏和竖屏下,用户头像的位置分别位于屏幕上方和屏幕左方。

三、工具

可以看看这篇文章“如何使用View Debugging”,通过这个调试工具可以看到View的层级关系、边界等很详细的信息。

四、动态位置调整

这方面有一个很经典的场景,就是在经典的登录界面中,页面中主要的View从上往下依次是用户名输入框、密码输入框、校验码输入框、登录按钮。默认情况是没有校验码输入框的,这个时候登录按钮要紧挨密码输入框,一旦用户的登录触发安全策略,导致校验码输入框弹出来之后,登录按钮就要下移,给校验码输入框腾出位置来。

这在Android中可以使用Vertical的LinearLayout很轻松地布局出来,但在IOS中是没有现成的View可以做到动态调整子View位置的。只能使用稍微笨一点儿的方式,在代码中找到对应的Constraints,修改其Constant值。

这个时候需要注意,如果明确指定一个View的width和height等Constraints,那这个Constraints是属于这个View的。决定View的x、y,或间接决定width、height的其它Constraints都是在View的superView中的。不要找错了地方。

五、动态宽高

有的时候,我们可能需要根据View中的内容来动态调用一个View的宽高,如文章的Title,字数越多,Label越宽。这种情况就需要使用content hugging和content compression resistance这两个属性了。其详细的解释可以看看官方文档。

六、多练

这个是最高原则。我在新项目中除了少数几个很特殊的控件自己实现之外,99%的布局都使用Xib来完成,一开始不太熟悉稍微有些慢,等熟悉了之后,开发速度非常快。如今屏幕尺寸这么多,这AutoLayout比手工通过代码获取屏幕宽高计算View布局的方式快了岂止一个数量级。多练习,会出现奇迹的。

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多