内容填充自定义视图与Cocoa自动布局

Question

我有一个自定义的NSView子类，它周围有一个边界。边界在这个视图中绘制。是否有可能尊重这个边界与自动布局?

例如，当我将子视图放置到自定义视图并像这样设置约束时:

@"H:|-(myViewSubView)-|" (not @"H:|-(myViewBorderWidth)-(myViewSubView)-(myViewBorderWidth)-|")
@"V:|-(myViewSubView)-|"

布局必须是:

Horizontal: |-(myViewBorderWidth)-|myViewSubview|-(myViewBorderWidth)-|
  Vertical: |-(myViewBorderWidth)-|myViewSubview|-(myViewBorderWidth)-| 

我试图在我的视图中重写-bounds方法以返回没有边界的边界矩形，但它没有帮助。

Answer 1

UPDATE

我刚刚注意到你的问题是谈论NSView (OS X)，而不是UIView (iOS)。好吧，这个想法应该仍然适用，但是您不能将我的代码原样放入您的项目中。对不起。

原来

考虑改变视图层次结构。假设您的自定义边框视图名为BorderView。现在你直接给BorderView添加子视图，并在BorderView和它的子视图之间创建约束。

相反，给BorderView一个单独的子视图，它在其contentView属性中公开。将子视图添加到contentView，而不是直接添加到BorderView。然后BorderView可以布置它的contentView，但它需要。这就是UITableViewCell的工作原理。

下面是一个例子:

@interface BorderView : UIView
@property (nonatomic, strong) IBOutlet UIView *contentView;
@property (nonatomic) UIEdgeInsets borderSize;
@end

如果我们使用xib，那么我们有IB不知道它应该将子视图添加到contentView而不是直接添加到BorderView的问题。(它确实知道UITableViewCell。)为了解决这个问题，我将contentView作为一个出口。这样，我们就可以创建一个单独的顶层视图作为内容视图，并将其连接到BorderView的contentView出口。

要以这种方式实现BorderView，我们需要为BorderView和contentView之间的四个约束中的每一个实例变量:

@implementation BorderView {
    NSLayoutConstraint *topConstraint;
    NSLayoutConstraint *leftConstraint;
    NSLayoutConstraint *bottomConstraint;
    NSLayoutConstraint *rightConstraint;
    UIView *_contentView;
}

contentView访问器可以根据需要创建内容视图:

#pragma mark - Public API
- (UIView *)contentView {
    if (!_contentView) {
        [self createContentView];
    }
    return _contentView;
}

并且setter可以替换现有的内容视图，如果有的话:

- (void)setContentView:(UIView *)contentView {
    if (_contentView) {
        [self destroyContentView];
    }
    _contentView = contentView;
    [self addSubview:contentView];
}

borderSize setter需要安排要更新的约束和重新绘制的边界:

- (void)setBorderSize:(UIEdgeInsets)borderSize {
    if (!UIEdgeInsetsEqualToEdgeInsets(borderSize, _borderSize)) {
        _borderSize = borderSize;
        [self setNeedsUpdateConstraints];
        [self setNeedsDisplay];
    }
}

我们需要在drawRect:中绘制边界。我用红色填充:

- (void)drawRect:(CGRect)rect {
    CGRect bounds = self.bounds;
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:bounds];
    [path appendPath:[UIBezierPath bezierPathWithRect:UIEdgeInsetsInsetRect(bounds, self.borderSize)]];
    path.usesEvenOddFillRule = YES;
    [path addClip];
    [[UIColor redColor] setFill];
    UIRectFill(bounds);
}

创建内容视图很简单:

-  (void)createContentView {
    _contentView = [[UIView alloc] init];
    [self addSubview:_contentView];
}

销毁它稍微复杂一点:

- (void)destroyContentView {
    [_contentView removeFromSuperview];
    _contentView = nil;
    [self removeConstraint:topConstraint];
    topConstraint = nil;
    [self removeConstraint:leftConstraint];
    leftConstraint = nil;
    [self removeConstraint:bottomConstraint];
    bottomConstraint = nil;
    [self removeConstraint:rightConstraint];
    rightConstraint = nil;
}

如果有人调用了setNeedsUpdateConstraints，系统会在布局和绘图之前自动调用updateConstraints，这是我们在setBorderSize:中做的。在updateConstraints中，如果有必要，我们将创建约束，并基于borderSize更新它们的常量。我们还告诉系统不要将自动调整大小的蒙版转换为约束，因为这往往会产生不令人满意的约束。

- (void)updateConstraints {
    self.translatesAutoresizingMaskIntoConstraints = NO;
    self.contentView.translatesAutoresizingMaskIntoConstraints = NO;
    [super updateConstraints];
    if (!topConstraint) {
        [self createContentViewConstraints];
    }
    topConstraint.constant = _borderSize.top;
    leftConstraint.constant = _borderSize.left;
    bottomConstraint.constant = -_borderSize.bottom;
    rightConstraint.constant = -_borderSize.right;
}

所有四个约束都以相同的方式创建，因此我们将使用helper方法:

- (void)createContentViewConstraints {
    topConstraint = [self constrainContentViewAttribute:NSLayoutAttributeTop];
    leftConstraint = [self constrainContentViewAttribute:NSLayoutAttributeLeft];
    bottomConstraint = [self constrainContentViewAttribute:NSLayoutAttributeBottom];
    rightConstraint = [self constrainContentViewAttribute:NSLayoutAttributeRight];
}
- (NSLayoutConstraint *)constrainContentViewAttribute:(NSLayoutAttribute)attribute {
    NSLayoutConstraint *constraint = [NSLayoutConstraint constraintWithItem:_contentView attribute:attribute relatedBy:NSLayoutRelationEqual toItem:self attribute:attribute multiplier:1 constant:0];
    [self addConstraint:constraint];
    return constraint;
}
@end

我已经把一个完整的工作示例放在这个git库中。

Answer 2

为将来参考，您可以覆盖NSView.alignmentRectInsets来影响布局参考线的位置:

在其内容周围绘制装饰的自定义视图可以重写元素的边缘对齐内容，不包括装饰。这允许基于约束的布局系统，以对齐基于其内容的视图，而不仅仅是他们的框架。

文档链接:

https://developer.apple.com/documentation/appkit/nsview/1526870-alignmentrectinsets

Answer 3

您是否尝试过将内部大小设置为包含边框大小?

- (NSSize)intrinsicContentSize
{
    return NSMakeSize(width+bordersize, height+bordersize);
}

那么您将在两个方向上设置所需的内容抗压缩优先级:

[self setContentCompressionResistancePriority:NSLayoutPriorityRequired forOrientation:NSLayoutConstraintHorizontal];
[self setContentCompressionResistancePriority:NSLayoutPriorityRequired forOrientation:NSLayoutConstraintVertical];

Answer 4

我发现的一个解决方案是重载addConstraint:方法并在添加约束之前修改约束:

- (void)addConstraint:(NSLayoutConstraint *)constraint
{
    if(constraint.firstItem == self || constraint.secondItem == self) {
        if(constraint.firstAttribute == NSLayoutAttributeLeading) {
            constraint.constant += self.leftBorderWidth;
        } else if (constraint.firstAttribute == NSLayoutAttributeTrailing) {
            constraint.constant += self.rightBorderWidth;
        } else if (constraint.firstAttribute == NSLayoutAttributeTop) {
            constraint.constant += self.topBorderWidth;
        } else if (constraint.firstAttribute == NSLayoutAttributeBottom) {
            constraint.constant += self.bottomBorderWidth;
        }
    }
    [super addConstraint:constraint];
}

然后在xxxBorderWidth setter中处理这些约束