ios - 使用自动布局分配中心

Question

将问题缩小到 X 轴以简化。

给定具有共同祖先的 2 个或更多 View 的数组，我们如何使用自动布局来均匀分布它们的 X 中心，以便:

• 第一个 View 与共同祖先左对齐。
• 最后一个 View 与共同祖先右对齐。
• View 的 X 中心均匀分布。

数组按顺序包含 View 。不能对 View 及其共同祖先进行任何假设。特别是:

• View 可以有不同的大小。
• 共同祖先的起源可能与 (0,0) 不同。
• 共同祖先或任何 View 的宽度可能随时发生变化。

在代码中(使用 UIView，但同样适用于 NSView):

- (NSArray*)constraintsByDistributingCenterXOfViews:(NSArray*)views
{
    const NSInteger count = views.count;
    NSAssert(count >= 2, @"Array must contain at least 2 views");

    NSMutableArray *constraints = [NSMutableArray array];

    UIView *sharedAncestor = [views sharedAncestor]; // Util method

    UIView *firstView = [views firstObject];
    [constraints addObject:[firstView constraintByAligningLeftToView:sharedAncestor]]; // Util method

    UIView *previousView = [self firstObject];
    for (NSInteger i = 1; i < count - 1; i++)
    {
        UIView *currentView = views[i];
        NSLayoutConstraint *constraint = ? // What would go here?
        [constraints addObject:constraint];
        previousView = currentView;
    }

    UIView *lastView = [views lastObject];
    [constraints addObject:[lastView constraintByAligningRightToView:sharedAncestor]]; // Util method

    return constraints;
}

Answer 1

我认为这应该可行。它创建间隔器并在两侧的 View 中心和间隔器的左右边缘之间添加约束。该方法的设置假设您已经创建了所有 View ，但尚未将它们添加到它们的 super View 中。可以这样称呼，

[self equallySpaceCentersOfViews:@[l1,l2,l3,l4] inView:someView];
// add a constraint here to vertically place one of the views in someView (all the views have their centerY's equal)

这是方法，

-(void)equallySpaceCentersOfViews:(NSArray *) views inView:(UIView *) superview {

    //create and add all the spacers to the superview
    NSMutableArray *spacers = [NSMutableArray new];
    for (int i =0; i<views.count - 1; i++) {
        UIView *spacer = [UIView new];
        spacer.translatesAutoresizingMaskIntoConstraints = NO;
        [superview addSubview:spacer];
        [spacers addObject:spacer];
    }

    //Add all the views to the superview.
    for (UIView *obj in views) {
        [obj setTranslatesAutoresizingMaskIntoConstraints:NO];
        [superview addSubview:obj];
    }

    // Create the constraints to the two edges
    [superview addConstraint:[NSLayoutConstraint constraintWithItem:views[0] attribute:NSLayoutAttributeLeft relatedBy:0 toItem:superview attribute:NSLayoutAttributeLeft multiplier:1 constant:0]];
    [superview addConstraint:[NSLayoutConstraint constraintWithItem:views.lastObject attribute:NSLayoutAttributeRight relatedBy:0 toItem:superview attribute:NSLayoutAttributeRight multiplier:1 constant:0]];

    //Create the constraints between the views and spacers
    [views enumerateObjectsUsingBlock:^(UIView *obj, NSUInteger idx, BOOL *stop) {
        [superview addConstraint:[NSLayoutConstraint constraintWithItem:obj attribute:NSLayoutAttributeCenterX relatedBy:0 toItem:spacers[idx] attribute:NSLayoutAttributeLeft multiplier:1 constant:0]];
        [superview addConstraint:[NSLayoutConstraint constraintWithItem:obj attribute:NSLayoutAttributeCenterY relatedBy:0 toItem:spacers[idx] attribute:NSLayoutAttributeCenterY multiplier:1 constant:0]];
        [superview addConstraint:[NSLayoutConstraint constraintWithItem:views[idx+1] attribute:NSLayoutAttributeCenterX relatedBy:0 toItem:spacers[idx] attribute:NSLayoutAttributeRight multiplier:1 constant:0]];
        [superview addConstraint:[NSLayoutConstraint constraintWithItem:views[idx+1] attribute:NSLayoutAttributeCenterY relatedBy:0 toItem:spacers[idx] attribute:NSLayoutAttributeCenterY multiplier:1 constant:0]];
        if (idx+1 == views.count-1) *stop = YES;
    }];

    //Make all the spacers have the same width
    [spacers enumerateObjectsUsingBlock:^(UIView *spacer, NSUInteger idx, BOOL *stop) {
        [superview addConstraint:[NSLayoutConstraint constraintWithItem:spacer attribute:NSLayoutAttributeWidth relatedBy:0 toItem:spacers[idx+1] attribute:NSLayoutAttributeWidth multiplier:1 constant:0]];
        if (idx+1 == spacers.count-1) *stop = YES;
    }];
}

这给出了以下带有四个不同宽度标签的结果，