我的需求非常通用，我必须实现一个 UIView 子类，该子类将 UIImageView 分组，以 x 为中心在屏幕上，距离顶部 20 pts，以及一个带有描述的 UILabel。
我在使用界面生成器时没有问题，但由于我需要以编程方式进行，所以我关注了技术和最佳实践。 到目前为止，我想出了这段代码，开始只可视化图像。尽管它非常基础，但我无法理解为什么 View 没有派生(正如您从屏幕截图中看到的那样)应该在 ImageView 的所有边缘上“偏移”20 点的正确框架。

这是我的子类:

标题

@interface ProgrammaticAutolayoutView : UIView

@property (nonatomic, strong) UIImageView *imageView;

@end

实现

#import "ProgrammaticAutolayoutView.h"

@implementation ProgrammaticAutolayoutView{

    BOOL _didUpdateConstraints;
}

- (instancetype)init
{
    return [self initWithFrame:CGRectZero];;
}

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {

        _didUpdateConstraints = NO;

        _imageView = [UIImageView new];
        [_imageView setTranslatesAutoresizingMaskIntoConstraints: NO];

        [self addSubview: _imageView];
    }
    return self;
}

- (void) updateConstraints{

    if(!_didUpdateConstraints){
        [self setupConstraints];
    }

    [super updateConstraints];
}

- (void) setupConstraints{

    [self.imageView addConstraint:[NSLayoutConstraint constraintWithItem:self.imageView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:50]];

    [self.imageView addConstraint:[NSLayoutConstraint constraintWithItem:self.imageView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:50]];

    [self addConstraint:[NSLayoutConstraint constraintWithItem: self.imageView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeTop multiplier:1.0 constant:20.0]];

    [self addConstraint:[NSLayoutConstraint constraintWithItem: self.imageView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeBottom multiplier:1.0 constant:20.0]];

    [self addConstraint:[NSLayoutConstraint constraintWithItem: self.imageView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeLeading multiplier:1.0 constant:20.0]];

    [self addConstraint:[NSLayoutConstraint constraintWithItem: self.imageView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeTrailing multiplier:1.0 constant:20.0]];

    _didUpdateConstraints = YES;
}

@end

这是我用来实例化和绘制此 uiview 子类的代码片段:

    - (void)viewDidLoad {
    [super viewDidLoad];

    ProgrammaticAutolayoutView *test = [[ProgrammaticAutolayoutView alloc] init];
    [test setTranslatesAutoresizingMaskIntoConstraints:NO];
    test.imageView.image = [UIImage imageNamed:@"dmy"];
    test.backgroundColor = [UIColor redColor];

    [self.view addSubview: test];

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem: test attribute:NSLayoutAttributeCenterX relatedBy: NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0]];

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem: test attribute:NSLayoutAttributeCenterY relatedBy: NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:0]];

    [test setNeedsLayout];
    [test layoutIfNeeded];
}

我期待看到 subview 从 uiimageview 的所有边缘偏移 20 点，但结果完全不同，我没有任何调试器日志或不一致，显然我一定是遗漏了一些非常基本的东西，但是到目前为止，我不明白什么。

最佳答案

常量描述 X 和 Y 偏移量。你的 4 个约束说:

• 将 imageView 的顶部放置在红色 View 下方 (+Y 20) 20 点处
• 将 imageView 的底部放在红色 View 下方 (+Y 20) 20 点处
• 将 imageView 的前沿放置在红色 View 的右侧 (+X 20) 20 点处
• 将 imageView 的后缘放在红色 View 的右侧 (+X 20) 20 点处

这就是你的图片显示的。

要使红色框框住图像，您可以将两个常量设置为负值:

[self addConstraint:[NSLayoutConstraint constraintWithItem: self.imageView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeTop multiplier:1.0 constant:20.0]];

[self addConstraint:[NSLayoutConstraint constraintWithItem: self.imageView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-20.0]];

[self addConstraint:[NSLayoutConstraint constraintWithItem: self.imageView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeLeading multiplier:1.0 constant:20.0]];

[self addConstraint:[NSLayoutConstraint constraintWithItem: self.imageView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeTrailing multiplier:1.0 constant:-20.0]];

或切换底部和尾部约束中的项目顺序:

[self addConstraint:[NSLayoutConstraint constraintWithItem: self.imageView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeTop multiplier:1.0 constant:20.0]];

[self addConstraint:[NSLayoutConstraint constraintWithItem: self attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.imageView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:20.0]];

[self addConstraint:[NSLayoutConstraint constraintWithItem: self.imageView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeLeading multiplier:1.0 constant:20.0]];

[self addConstraint:[NSLayoutConstraint constraintWithItem: self attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.imageView attribute:NSLayoutAttributeTrailing multiplier:1.0 constant:20.0]];

新的建议约束说:

• 将 imageView 的底部放在红色 View 上方 (-Y 20) 20 点处
• 将 imageView 的后缘放在红色 View 的左侧 (-X 20) 20 点处

或

• 将红色 View 的底部放在 imageView 下方 20 点 (+Y 20)
• 将红色 View 的后缘放在 imageView 的右侧 (+X 20) 20 点处

关于ios - 以编程方式使用自动布局实现带有 subview 的 uiview 子类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30437029/