【OC梳理】自动布局

自动布局基础篇

关于自动布局的基本使用，参考网上的文章便可，如： 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];
复制代码

记得动画先后须要刷新。