UI自动布局

当内部或外部条件发生变化的时候,自动重新计算视图的位置和大小。


对于ios应用,可以触发自动布局的变化可以分为外部变化和内部变化:
外部的变化可以是设备的方向改变,ipad的分屏,不同尺寸的屏幕等。
内部的变化可以是内容的变化(加载不同的图片等),应用支持动态类型(允许用户修改视图),国际化(添加对多国使用者的支持)等。

ios的自动布局与基于frame布局的关系,就像安卓的相对布局与绝对布局的关系。基于frame的布局,也就是通过子视图相对于父视图坐标的绝对位置和绝对大小,这种布局的好处在于坐标位置确定,但是在面对多种尺寸屏幕,动态内容等问题时显得非常的麻烦。而自动布局不同,它描述的是视图与视图之间的位置关系,无论屏幕大小或者内容如何改变,视图之间的相对位置不变,视图排版就不会乱掉。

自动布局需要通过约束constraint来实现。下面,先说明使用约束来实现自动布局的原理,后说明如何创建、修改、查看约束。

一、使用约束Constraint的自动布局(自动布局的原理)

布局,实际上是关于视图位置的一系列方程。每个方程就是一个约束,一个约束通常描述的就是两个属性之间的数值关系,比如长是宽的多少倍、view2的起始位置是view1的计数位置加10等。
这里写图片描述
图中的方程就是一个典型的约束。要约束的对象就是RedView(item1)的leading属性(Attribute1),约束的具体内容就是BlueView(item2)的trailing属性(Attribute2)乘上1.0再加上8.0。这个1.0叫做乘积因子multiplier,8.0是个常量constant。这几个量的意义要明确,因为之后在创建约束的时候离不开这几个量。

1.自动布局的常用属性(还有几个常用的在第8点)

视图的四个边界:leading(左边界)、trailing(右边界)、top(上边界)、bottom(下边界)
视图的大小:height(高)、width(宽)
视图的中心:center(中心坐标)

2.使用自动布局的原则

首先,分清自动布局的属性可以分为位置相关属性和大小相关属性。这两个属性之间不应该有任何关联,具体要遵守以下原则:
不要用位置属性去约束大小属性。
不要给位置属性赋常量值。
位置属性的约束中乘积因子只能是1.0。
不要用水平方向的位置属性去约束垂直方向的位置属性。
不要用leading或trailing属性来约束left或right属性。

3.自动布局的约束的确是方程,不是赋值语句

对于以方程形式存在的约束,并不是把等号右边的值赋给等号左边的值,而是通过解方程,使得等号两边相等。
因此,当方程有多个解,也就是说可能有多种布局方案可以满足这些约束,这时候,就要从中确定一种方案,并且一直运用下去。比如说:整数的乘积因子比小数乘积因子优先,正数乘积因子比负数优先,views的排列按照从上至下,从左至右排列等等。这些规则需要自己去定,并且在一个项目中一直遵守。

4.创建一个确定的布局

使用自动布局的目标是可以产生一套确定的布局,也就是说同时满足所有约束的布局方案尽可能地少。就像两点确定一条直线一样,要创建一个确定的布局,也有它的规则:两个属性确定一个view的一个维度的位置。
如果确定一个view在水平方向上的位置(三种方法,对应下图左、中、右)
方法一:同时约束左边界相对于父视图的距离,以及视图的宽
方法二:同时约束左右边界相对于父视图的距离
方法三:同时约束左边界相对于父视图的距离,以及视图的中心位置
这里写图片描述
对以上三种方法的分析:
方法一:缺点是视图的宽不可以随父视图的大小变化而变化
方法二:左右边界相对于父视图的距离固定(两个距离可以不相等)
方法三:在

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值