iOS Auto Layout

2019-10-10  本文已影响0人  风儿吹啊吹

Auto Layout 是苹果在iOS6发布的的界面布局技术,官方描述为:

Auto Layout 是一个系统,可以让你通过创建元素之间关系的数学描述来布局应用程序的用户界面,是一种基于约束的,描述性的布局系统

使用Auto Layout

代码方式使用 约束的注意点:
1. 添加约束之间需要将view的translatesAutoresizingMaskIntoConstraints属性设置为 NO,
2. 添加约束之前需要将view 添加到对应superView里,
3. 要把子类的约束添加到父类中,
4. 因为iOS中原点在左上角所以使用offset时注意right和bottom用负数。

方式一: 使用Interface Builder 方式布局

我们可以在xib、storyboard中通过给控件拖线来添加布局,约束会添加到相应的位置。

方式二:代码方式 NSLayoutConstraint

Auto Layout 中约束对应的类为 NSLayoutConstraint,一个NSLayoutConstraint 实例代表一条约束。Apple规定约束必须添加到 该约束相关的视图所在的视图树的第一个公共祖先(即第一个父类)。

NSLayoutConstraint 约束两种创建方式:
+(instancetype)constraintWithItem:(id)view1attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relationtoItem:(nullable id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;
参数
1.第一个参数view1:要设置约束的视图
2.第二个参数attr1:表示view1要设置的属性 (枚举类型)
3.第三个参数relation:表示视图view1和view2的指定属性attr2之间的关系(枚举类型)
4.第四个参数view2:参照的视图,可以为空
5.第五个参数attr2:表示view2的属性 (枚举类型)
6.第六个参数multipler:视图view1的指定属性是参照视图view2指定属性的多少倍
7.第七个参数c:视图view1的指定属性需要加的值(偏移值),以生成最终修改后的属性 (浮点型)
根据参数的讲解,得出计算公式如下
view1.attr1 [=,>=,<=] view2.attr2 * multipler + c;
参数详情:
1.view1、view2枚举类型对应的值
NSLayoutAttributeWidth、NSLayoutAttributeHeight 表示视图的尺寸:宽、高
NSLayoutAttributeLeft、NSLayoutAttributeRight 表示视图的X轴方向的位置:左、右
NSLayoutAttributeLeading、NSLayoutAttributeTrailing 表示视图的X轴方向的位置:前、后
NSLayoutAttributeTop、 NSLayoutAttributeBottom 表示视图Y轴方向的位置:顶、底
NSLayoutAttributeBaseline 表示视图Y轴方向的位置:底部基准线
NSLayoutAttributeCenterX、NSLayoutAttributeCenterY 表示视图的中心点:视图在X轴的中心点、视图在Y轴的中心点
NSLayoutAttributeNotAnAttribute,表示占位,无任何意义。(view1设置宽高属性的,view2所需设置的值)

NSLayoutAttributeBaseline NS_SWIFT_UNAVAILABLE("Use 'lastBaseline' instead") = NSLayoutAttributeLastBaseline,
这种对应关系 在swift不可用, 使用NSLayoutAttributeLastBaseline代替

iOS 8 以上的用法,跟上述类似
NSLayoutAttributeFirstBaseline NS_ENUM_AVAILABLE_IOS(8_0),
NSLayoutAttributeLeftMargin 
NSLayoutAttributeRightMargin
NSLayoutAttributeTopMargin
NSLayoutAttributeBottomMargin
NSLayoutAttributeLeadingMargin 
NSLayoutAttributeTrailingMargin 
NSLayoutAttributeCenterXWithinMargins 
NSLayoutAttributeCenterYWithinMargins 

2.relation枚举类型对于的值
NSLayoutRelationLessThanOrEqual:表示小于等于<=
NSLayoutRelationEqual:表示等于=
NSLayoutRelationGreaterThanOrEqual:表示大于等于>=
NSLayoutConstraint 约束添加方式:
1 单个约束:superView 调用 addConstraint: 方法;
2 多个约束:superView 调用 addConstraints: 方法;

注意:苹果告诉我们以上两种方式将会被废弃,建议使用以下方式:
1 单个约束:将约束对象的 active 属性设置为YES
2 多个约束:[NSLayoutConstraint activateConstraints:“约束数组”];
NSLayoutConstraint 约束移除方式:

一、系统移除约束的方式(需要自己实现通过指针记录约束对象来删除):
1 单个约束:superView 调用 removeConstraint: 方法;
2 多个约束:superView 调用 removeConstraints: 方法;

 注意:苹果告诉我们以上两种方式将会被废弃,建议使用以下方式:
1 多个约束:[NSLayoutConstraint deactivateConstraints:“约束数组”];


二、通过匹配找到对应的约束来删除:
该方法定义在UIView的分类中,从父view中移除跟当前view有约束关系的所有约束
- (void)removeConstraintFromSuperView:(UIView *)superView{
    
    NSArray *constraints = superView.constraints;
    NSMutableArray *mArray = [NSMutableArray array];
    
    for (NSLayoutConstraint *constraint in constraints) {
        if (constraint.firstItem == self || constraint.secondItem == self){
            [mArray addObject:constraint];
        }
    }
    [superView removeConstraints:mArray];
}

方式三:代码方式 NSLayoutAnchor

NSLayoutAnchor 布局锚点,提供一种比NSLayoutConstraint更方便、安全方案。NSLayoutAnchor作为UIView的属性,它与NSLayoutConstraint的布局属性的枚举类型NSLayoutAttribute一一对应,并细分为三个子类,分别是:

 类型          对应子类                    属性
X轴方向    NSLayoutXAxisAnchor  leadingAnchor、trailingAnchor、
                               leftAnchor、rightAnchor、centerXAnchor

Y轴方向    NSLayoutYAxisAnchor  topAnchor、bottomAnchor、centerYAnchor、
                               firstBaselineAnchor、lastBaselineAnchor

尺寸       NSLayoutDimension    widthAnchor、heightAnchor
简单使用:
 [myView.leftAnchor constraintEqualToAnchor:myView.superview.leftAnchor].active = YES;
 [myView.rightAnchor constraintEqualToAnchor:myView.superview.rightAnchor].active = YES;
 [myView.topAnchor constraintEqualToAnchor:myView.superview.topAnchor].active = YES;
 [myView.bottomAnchor constraintEqualToAnchor:myView.superview.bottomAnchor].active = YES;


参考:
https://my.oschina.net/daniels/blog/710886
https://www.jianshu.com/p/f8357beecebd
https://www.jianshu.com/p/3a872a0bfe11

上一篇 下一篇

猜你喜欢

热点阅读