自动布局基础篇
关于自动布局的基本使用，参考网上的文章即可，如：
iOS开发-自动布局篇：史上最牛的自动布局教学！
自动布局进阶篇
抗拉伸与抗压缩
相信许多比较少使用自动布局的同学对下面的参数都感觉比较头疼：
其实不难，请往下看：
Content Hugging Priority : 抗拉伸优先级
最常见的情况是两个label并排放置，并设置水平间距：
报错了？莫慌，当两个label的文字长度加上水平间距不足以填满父视图时，需要设置抗拉伸优先级。
解决办法：假设我们不希望Label1被拉伸，则将其Hugging Priority值调大（默认为251）
调整后，修改label1的文字，其长度随之变化：
然后我们在调整的过程中会发现：
又报错了？ 接着往下看：
Content Compression Resistance Priority : 抗压缩优先级
当两个label的文字长度加上水平间距超出了父视图宽度时，需要设置抗压缩优先级。
解决办法：假设我们希望Label1的内容尽可能地展示完全，则将其Resistance Priority值调大（默认为750）
调整后：
可以看到，Label2直接被压没了。
我们把Label2的Resistance Priority值调大：
调整后：
经过上面的过程后，对于如何使用自动布局做出下图的效果，是不是就心里有数了呢：
PS: 抗压缩、抗拉伸优先级同样适用于与父视图的约束优先级(默认值1000)
熟悉了xib中的优先级设置后，在Masonry中对应优先级的思路相同，使用方法- (void)setContentCompressionResistancePriority:(UILayoutPriority)priority forAxis:(UILayoutConstraintAxis)axis;进行对应设置（系统自带方法，不是Masonry加的）。
内容尺寸(Intrinsic Content Size)
某些用来展现内容的用户控件，例如文本控件UILabel、按钮UIButton、图片视图UIImageView等，它们具有自身内容尺寸（对于UIImageView，其自身内容尺寸就是图片（1倍图）的尺寸）。
如何设置自定义控件的内容尺寸？
我们可以通过重写- (CGSize)intrinsicContentSize方法来指定内容尺寸。
先来看看UIView默认的返回值：
- (CGSize)intrinsicContentSize{
return CGSizeMake(UIViewNoIntrinsicMetric, UIViewNoIntrinsicMetric);
}
这个方法的作用是当使用已有约束不能够计算出内容宽度/高度时，自动为视图添加宽度/高度约束，其值为返回值中对应的宽/高。
因此我们可以在这个方法中返回计算好的内容大小。
我们在xib中也可以看到下面的参数(需要注意的是，在这里设置的size仅仅只用于xib中展示效果，实际运行时并没有什么卵用)：
知道了intrinsicContentSize的用法后，我们考虑一下下面的需求：
写一个自定义的View，满足下面的功能：
- 如果未使用约束，直接显示frame的大小即可；
- 如果添加了能够定位左上角点坐标的约束，则使用默认的内容大小。
- 如果添加了能够定位左上角点坐标以及能够计算出宽/高其中一个数值时，使用宽/高的另一个默认值。
- 如果添加了能够计算出全部frame值的约束，则不使用默认内容大小。
整体效果类似UILabel，但是这里简化成固定的默认尺寸。
这里给出一个简单的demo仅供参考：
@interface DemoView()
@property (nonatomic,assign) CGSize defaultSize;
@end
@implementation DemoView {
BOOL _widthConstraintAdded;
BOOL _heightConstraintAdded;
float _widthConstrant;
float _heightConstrant;
}
- (instancetype)initWithCoder:(NSCoder *)aDecoder{
self = [super initWithCoder:aDecoder];
if (self) {
_widthConstraintAdded = _heightConstraintAdded = NO;
_widthConstrant = self.defaultSize.width;
_heightConstrant = self.defaultSize.height;
}
return self;
}
- (void)layoutSubviews{
[super layoutSubviews];
// 是否使用了自动布局
if (self.constraints.count > 0) {
// 判断是否添加了可以计算出宽度/高度的约束
if (self.frame.size.width != _widthConstrant) {
_widthConstraintAdded = YES;
}
if (self.frame.size.height != _heightConstrant) {
_heightConstraintAdded = YES;
}
// 计算缺少的宽/高
// 计算时可以使用self.frame.size，这个size是自动布局调整后的size了
if (!_widthConstraintAdded) {
// 计算宽度的代码...
_widthConstrant = 10;
}
if (!_heightConstraintAdded) {
// 计算高度的代码...
_heightConstrant = 10;
}
// 添加约束
if (!CGSizeEqualToSize(self.frame.size, [self intrinsicContentSize])) {
[self invalidateIntrinsicContentSize];
}
}
}
- (CGSize)intrinsicContentSize{
return CGSizeMake(_widthConstrant, _heightConstrant);
}
- (CGSize)defaultSize{
if (CGSizeEqualToSize(_defaultSize, CGSizeZero)) {
// 计算默认内容宽高的代码
float width = 100;
float height = 20;
_defaultSize = CGSizeMake(width, height);
}
return _defaultSize;
}
@end
ScrollView的自动内容大小
我们看下面的布局：
当我们需要Label2可以显示多行数据时，仅仅设置右边距是不够的：
我们可以让Label2的宽度等于Scrollview的宽度减去左右边距之和:
看看效果：
效果出来了，但是仅仅这样我们发现不能上下滚动，因为没有设置底部间距，scrollview无法计算出内容高度，需要给最下面的view（Label2）添加底部间距：
看看效果：
下面考虑更进一步的需求：Label1也要可以显示多行时的情况。
我们把Label1右边与Label2对齐，然后改一下内容文字：
OK大功告成。
PS:如果使用Tablview时用到Cell的自动高度(不管是用系统自带还是UITableView+FDTemplateLayoutCell)，也都需要设置好约束，让它能够计算出竖直方向的内容高度(水平方向tableview不需要,collectionView需要)，具体过程和上面类似。
自定义View与自动布局
我们看一个样式：
要实现这一样式的方式有很多种，这里我们考虑用UILabel的子类直接实现的情况(尽可能少的View)：
UIView中有这一个类方法：+ (Class)layerClass;，该方法返回的就是view.layer的类型，因此我们可以使用自定义的Layer替换掉默认的Layer，然后裁剪出对应的形状(原理比较简单，直接上代码了):
@interface DemoLabelLayer : CAShapeLayer
@end
@implementation DemoLabelLayer
- (void)layoutSublayers{
[super layoutSublayers];
[self setBackgroundPath];
}
- (void)setBackgroundPath{
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.fillColor = [UIColor whiteColor].CGColor;
shapeLayer.fillRule = kCAFillRuleEvenOdd;
shapeLayer.path = [self backgroundPathFrame:self.bounds].CGPath;
self.mask = shapeLayer;
}
- (UIBezierPath *)backgroundPathFrame:(CGRect)frame{
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:frame byRoundingCorners:UIRectCornerTopRight|UIRectCornerBottomRight cornerRadii:CGSizeMake(self.cornerRadius, self.cornerRadius)];
return path;
}
@end
@interface DemoView()
@end
@implementation DemoView
- (void)awakeFromNib{
[super awakeFromNib];
}
- (void)layoutSubviews{
[super layoutSubviews];
DemoLabelLayer *layer = (DemoLabelLayer *)self.layer;
layer.backgroundColor = self.backgroundColor.CGColor;
layer.cornerRadius = self.frame.size.height/2.f;
}
+ (Class)layerClass{
return [DemoLabelLayer class];
}
@end
自动布局的动画
对于需要进行frame动态调整的界面，许多小伙伴都不知道该如何使用自动布局进行动画而放弃，其实不难：
如果使用xib或者代码创建，最简单的方式就是将约束设置成对应属性，直接修改约束的constant即可。
如果使用Masonry创建布局，那么只需要使用下面的代码就可以使用动画效果了:
// 如果其约束还没有生成的时候需要动画的话，就请先强制刷新后才写动画，否则所有没生成的约束会直接跑动画
[view.superview layoutIfNeeded];
[UIView animateWithDuration:3 animations:^{
[view mas_updateConstraints:^(MASConstraintMaker *make) {
make.height.mas_equalTo(123);
}];
}];
// 强制绘制
[view.superview layoutIfNeeded];
记得动画前后需要刷新。
