:fa-crosshairs:注意:
:fa-bomb:如果使用autoLayout则意味着 View的frame为0
:fa-bomb:而且不能通过改变frame来实现动画效果,动画方案参照3
=================================
:fa-crosshairs:在使用AutoLayout时需要以下两个准备
:fa-hand-o-right:[view setTranslatesAutoresizingMaskIntoConstraints:NO]; //关闭自动伸缩
:fa-hand-o-right:适配位置选择
- UIViewController:**[- (void)updateViewConstraints]**
- UIView:**[- (void)updateConstraints]**
好处:可以集中将一个controller和view的约束适配在一个方法中
==================================
:fa-crosshairs:约束分为三类:
①设置Size
②位置间约束
③对齐约束
1.通过NSLayoutConstraint + VFL-Visual Format Language来设置
1.1 VFL-Visual Format Language语法简介
V: 表示垂直方向或者高度
H: 表示水平方向或者宽度
| 表示父视图
[view] 表示一个名字为view的视图
— 用来间隔视图
==、<=、>=、
@"H:|-10-[view]-10-|"
表示view在水平方向左边距离父视图10,右边距离父视图也是10
@"H:|-15-[buttonOne(80)]-5-[buttonTwo(90)]|"
表示buttonOne在水平方向左边距离父视图是15,本身宽度是80,
右边与buttonTwo的距离为5,buttonTwo的宽度为90
@"V:|-(>=15)-[buttonOne(20)]"
1.2 创建约束
NSArray *array = [NSLayoutConstraint constraintsWithVisualFormat:(NSString*)format
options:(NSLayoutFormatOptions)opts
metrics:(nullable NSDictionary<NSString,id> *)metrics
views:(NSDictionary<NSString*,id> *)views];
参数说明:
format :VFL语句
opts :约束类型
metrics :VFL语句中用到的具体数值
views :VFL语句中用到的控件,NSDictionaryOfVariableBindings(...)
例子:
NSDictionary *views = NSDictionaryOfVariableBindings(blueView, redView);
NSArray *conts2 = [NSLayoutConstraint
constraintsWithVisualFormat:@"V:[blueView(==blueHeight)]-margin-|"
options:0
metrics:@{@"blueHeight" : @40, @"margin" : @20}
views:views];
//设置高度、垂直约束
[NSLayoutConstraint constraintsWithVisualFormat:@"V:[imagevew(60)]"
options:0
metrics:nil
views:views];
//以下只适合view没有宽度和高度的场合,否则会报错
[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[prgrssView]-|"
options:NSLayoutFormatAlignAllCenterY
metrics:nil
views:views]];
1.3 例子(距离父View上下左右边距为0)
-(void)addSubviewAndFit:(UIView*)parentView child:(UIView*)childView
{
parentView.translatesAutoresizingMaskIntoConstraints = NO;
childView.translatesAutoresizingMaskIntoConstraints = NO;
[parentView addSubview:childView];
NSDictionary *views = NSDictionaryOfVariableBindings(childView);
NSArray *vConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-0-[childView]-0-|"
options:0
metrics:nil
views:views];
[parentView addConstraints:vConstraints];
NSArray *hConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-0-[childView]-0-|"
options:0
metrics:nil
views:views];
[parentView addConstraints:hConstraints];
[parentView layoutIfNeeded];
}
2. 通过NSLayoutConstraint类自带函数设置
NSLayoutConstraint *constant = [NSLayoutConstraint constraintWithItem:(id)item
attribute:(NSLayoutAttribute)attribute
relatedBy:(NSLayoutRelation)relation
toItem:(id)otherItem
attribute:(NSLayoutAttribute)otherAttribute
multiplier:(CGFloat)multiplier
constant:(CGFloat)constant]
参数说明:
Item:被约束对象
attribute:被约束对象的关系
relatedBy:约束描述
toItem:约束源
attribute:约束源对象的关系
multiplier:约束系数
constant:约束常数
对照公式:view1.attr1 <relation> view2.attr2 * multiplier + constant
例子:
[NSLayoutConstraint constraintWithItem:view1
attribute:NSLayoutAttributeLeft
relatedBy:NSLayoutRelationEqual
toItem:view2
attribute:NSLayoutAttributeRight
multiplier:1
constant:10]
等价于 : "H:[view2]-10-[view1]"
//垂直居中约束
[NSLayoutConstraint constraintWithItem:imagevew
attribute:NSLayoutAttributeCenterY
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeCenterY
multiplier:1
constant:0];
//水平居中约束
[NSLayoutConstraint constraintWithItem:imagevew
attribute:NSLayoutAttributeCenterX
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeCenterX
multiplier:1
constant:0];
[self.view addConstraint: constraint];
3.LayoutAnchors-IOS9新增API:
3.1 简介
比NSLayoutConstraint更加简介,方便的API
:fa-bomb:12种约束
@property(readonly, strong) NSLayoutXAxisAnchor *leadingAnchor;
@property(readonly, strong) NSLayoutXAxisAnchor *trailingAnchor;
@property(readonly, strong) NSLayoutXAxisAnchor *leftAnchor;
@property(readonly, strong) NSLayoutXAxisAnchor *rightAnchor;
@property(readonly, strong) NSLayoutYAxisAnchor *topAnchor;
@property(readonly, strong) NSLayoutYAxisAnchor *bottomAnchor;
@property(readonly, strong) NSLayoutDimension *widthAnchor;
@property(readonly, strong) NSLayoutDimension *heightAnchor;
@property(readonly, strong) NSLayoutXAxisAnchor *centerXAnchor;
@property(readonly, strong) NSLayoutYAxisAnchor *centerYAnchor;
@property(readonly, strong) NSLayoutYAxisAnchor *firstBaselineAnchor;
@property(readonly, strong) NSLayoutYAxisAnchor *lastBaselineAnchor;
:fa-bomb:NSLayoutAnchor方法
//等于
- (NSLayoutConstraint *)constraintEqualToAnchor:(NSLayoutAnchor<AnchorType> *)anchor constant:(CGFloat)c;
//大于等于
- (NSLayoutConstraint *)constraintGreaterThanOrEqualToAnchor:(NSLayoutAnchor<AnchorType> *)anchor constant:(CGFloat)c;
//小于等于
- (NSLayoutConstraint *)constraintLessThanOrEqualToAnchor:(NSLayoutAnchor<AnchorType> *)anchor constant:(CGFloat)c;
:fa-bomb: NSLayoutDimension方法(只适用于width,height)
//等于
- (NSLayoutConstraint *)constraintEqualToAnchor:(NSLayoutDimension *)anchor multiplier:(CGFloat)m constant:(CGFloat)c;
//大于等于
- (NSLayoutConstraint *)constraintGreaterThanOrEqualToAnchor:(NSLayoutDimension *)anchor multiplier:(CGFloat)m constant:(CGFloat)c;
//小于等于
- (NSLayoutConstraint *)constraintLessThanOrEqualToAnchor:(NSLayoutDimension *)anchor multiplier:(CGFloat)m constant:(CGFloat)c;
3.2使用方法Demo
[redView.leadingAnchor constraintEqualToAnchor:blueView.trailingAnchor constant:8];
4.AutoLayout模式实现动画
实现动画效果传统的做法是改变它的一些属性,在平移动画中主要是改变它的frame坐标。
但是在AutoLayout中frame都是0应该如何处理呢。这里笔者由难到易提供三种解决方案
:fa-bomb:1.使用[self.viewlayoutIfNeeded]方法动态刷新约束
:fa-bomb:2.改变view的bounds属性
:fa-bomb:3.改变view的transform属性 |-比如说网上平移10个距离:self.transform = CGAffineTransformMakeTranslation(0, -10);
5. UIView+AutoLayout的实现
UIView+AutoLayout是一个第三方的开源库: https://github.com/smileyborg/UIView-AutoLayout