阅读 587

【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];
复制代码

记得动画前后需要刷新。

关注下面的标签,发现更多相似文章
评论