自动布局:AutoLayout注意事项及autolayout动画

一、相关注意事项

1. 使用范围:AutoLayout 定义一个视图和另一个视图之间的位置关系,这两个视图可以完全没有关系。

2. AutoLayout自动布局作用原理:
自动布局的核心就是约束。约束是一个规则,最后还是根据约束计算frame,然后把自动计算的frame设置给控件。

3. 自动布局核心思想:通过设置约束,可以让系统自动计算Frame。

4. 核心公式:一个控件的位置可以参照其他控件位置通过约束定义出准确的位置。

核心公式:view1.attrA = view2.attrB * multiplier + constant

5. Constraint to margins:

▪ 勾上以后,表示约束是距离 view 的 margin 的距离
▪ 不是直接设置的距离view的边的距离
▪ 通过 view 的 layoutMargins 属性可以修改边距
▪ 边距默认是 8 points
▪ 控制器的根 view 的 layoutMargins 属性比较特殊
▪ top:0 / bottom:0 / side: 16 or 20
▪ 并且不能修改

二、自动布局动画

1. 尝试修改frame,动画完成后再切换横屏,发现位置修改还原了:使用AutoLayout自动布局后就不要再修改frame了。

原因:每次重新布局的时候,系统都会根据所设置的约束,重新计算控件的frame,切换横竖屏,就会触发屏幕的重新布局

所以在AutoLayout下要改变控件的位置,要通过修改约束

例如:首先添加两个约束对象

@property (weak, nonatomic) IBOutlet NSLayoutConstraint *topConstraint;
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *leftConstraint;

然后改变约束实现动画:

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    
    self.topConstraint.constant += 100;
    self.leftConstraint.constant += 100;
    
    [UIView animateWithDuration:3.0 animations:^{
        // [self.view layoutSubviews];
        [self.view layoutIfNeeded];
    }];
}
注意:

1,将修改约束的代码直接放到block动画中,是不会有动画效果的。修改约束不等于重新计算frame,所以只有将修改frame的代码放到Block动画中才会有动画效果

2,系统会在修改了约束后,在适当的时机,调用控制器根视图的layoutSubviews方法,自动计算根视图以及所有子视图、子控件的frame,然后将结果设置给各个控件。


3,在这里我们可以手动调用重新计算frame的方法:layoutSubviews【通过文档可见,系统不推荐我们调用这个方法】而是调用 layoutIfNeeded。(layoutIfNeeded自动调用layoutSubviews)。


2,动画实现原理总结;

• 修改约束数值并不会让视图的位置立即发生变化
• 自动布局系统会在一次用户交互活动中,收集所有控件的约束变化
• 如果有约束变化,会在收集完成之后,统一计算所有控件变化后的 frame 并且设置
• layoutIfNeeded 方法就是通知视图,如果当前存在变化的约束,先更新一下


阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页