以編程方式使用自動佈局實現子視圖的uiview子類

Question

我的需求是非常通用的，我必須實現一個UIView子類，它將UIImageView，以屏幕x爲中心，遠離頂部20個點和具有描述的UILabel 。
我在使用接口構建器時沒有任何問題，但是由於我需要以編程方式進行編程，所以我負責管理技術和最佳實踐。 到目前爲止，我想出了這個代碼，開始形象化圖像。儘管這是非常基本的，但我無法理解爲什麼視圖不會從屏幕截圖中得出（從屏幕截圖中可以看出）適當的框架，它應該在圖像視圖的所有邊上「抵消」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]; 
} 

我期待從uiimageview的所有邊緣看到20點偏移量的子視圖，但結果是完全不同的，我沒有調試器日誌或任何不一致的地方，顯然我必須缺少一些非常基本的東西，但到目前爲止，我不明白是什麼。

Answer 1

常數描述的X和Y偏移量。你4個約束說：

• 將低於ImageView的20點上方（+ Y 20）紅色查看
• 將低於ImageView的20點的底部（+ Y 20）紅色查看
• 放置ImageView的20點與所述紅色視圖的右側（+ X 20）的前緣
• 放置ImageView的20點與所述紅色視圖的右側（+ X 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的底部20分以上（-Y 20）紅色視圖
• 放置ImageView的20點與所述紅色視圖的左側（-X 20）的後緣

或

• 放置紅色視圖低於20點的底部（+ Y 20）的ImageView的
• 放置紅色觀20點到的ImageView的右側（+ X 20）的後緣