使用 AutoLayout (>iOS 6) 自动和动态换行子视图

Question

我希望子视图在其父视图内水平对齐（具有固定宽度）并在到达父视图的后沿时自动“换行”。 我正在寻找一种解决方案，使自动布局能够为我完成全部工作 - 无需（重新）在子视图的大小动态变化时计算行结构（如文本字段随例如其内容）和添加或删除约束。

我已经有一个（工作的）解决方案，它根据预先（和重新）计算的子视图的行结构（重新）创建约束。

所以我的所有问题是：是否可以找到在这样的星座中使用约束的解决方案（具有灵活性、优先级等），使自动布局能够在子视图上自动进行换行，如果需要（首次加载和运行时）。

我创建了一个示例项目，其中UILabels 作为“子视图”。请尝试一下 - 或尝试说服我，我的想法只是有远见 - 但目前无法实现。

以下代码的实际截图：

这是测试动态换行自动布局的方法：

- (void) addConstraintsForLabels : (NSArray*) labels
                   superview : (UIView*) superview {

    for (int i = 0; i < labels.count; i++) {
        UILabel* precedingLabel = i == 0 ? nil : labels[i - 1];
        UILabel* label = labels[i];
        [label setTranslatesAutoresizingMaskIntoConstraints: NO];

        //// set all contentHuggingPriorities to no growing and no compression
        [label setContentHuggingPriority: UILayoutPriorityRequired forAxis: UILayoutConstraintAxisHorizontal];
        [label setContentHuggingPriority: UILayoutPriorityRequired forAxis: UILayoutConstraintAxisVertical];
        [label setContentCompressionResistancePriority: UILayoutPriorityRequired forAxis: UILayoutConstraintAxisHorizontal];
        [label setContentCompressionResistancePriority: UILayoutPriorityRequired forAxis: UILayoutConstraintAxisVertical];

        //// constraints affecting superview
        // top to superview
        NSLayoutConstraint* topToSup =  [NSLayoutConstraint alignEdge: NSLayoutAttributeTop                                                      ofViews: @[label, superview]                                                           relation: i == 0 ? NSLayoutRelationEqual : NSLayoutRelationGreaterThanOrEqual
                                                          spacing: 0];
        // leading to superview
        NSLayoutConstraint* leadingToSup = [NSLayoutConstraint alignEdge: NSLayoutAttributeLeading
                                                             ofViews: @[label, superview]
                                                            relation: i == 0 ? NSLayoutRelationEqual : NSLayoutRelationGreaterThanOrEqual
                                                             spacing: 0];
        // bottom to superview
        NSLayoutConstraint* bottomToSup = [NSLayoutConstraint alignEdge: NSLayoutAttributeBottom
                                                            ofViews: @[label, superview]
                                                           relation: i == labels.count - 1 ? NSLayoutRelationEqual : NSLayoutRelationLessThanOrEqual
                                                            spacing: 0];
        // trailing to superview
        NSLayoutConstraint* trailingToSup = [NSLayoutConstraint alignEdge: NSLayoutAttributeTrailing
                                                              ofViews: @[label, superview]
                                                             relation: NSLayoutRelationLessThanOrEqual
                                                              spacing: 0];

        //// example constraints affecting preceding label
        // leading to preceding label
        NSLayoutConstraint* leadingToPrec = precedingLabel == nil ? nil : [NSLayoutConstraint horizontalSpacing: 0
                                                                                               betweenViews: @[precedingLabel, label]
                                                                                                   flexible: NO
                                                                                                  inMaximum: NO];
        // y position to preceding label
        NSLayoutConstraint* centerYToPrec = precedingLabel == nil ? nil :  [NSLayoutConstraint alignEdge: NSLayoutAttributeCenterY
                                                                                             ofViews: @[label, precedingLabel]
                                                                                            relation: NSLayoutRelationEqual
                                                                                             spacing: 0];
        // top to preceding view
        NSLayoutConstraint* topToPrec = precedingLabel ==  nil ? nil : [NSLayoutConstraint verticalSpacing: 0
                                                                                               ofViews: @[precedingLabel, label]
                                                                                              flexible: NO
                                                                                             inMaximum: NO];

        //// priorities
        // affecting the superview
        topToSup.priority = UILayoutPriorityRequired; // is either flexible or non-flexible for the first
        leadingToSup.priority = UILayoutPriorityRequired; // is either flexible or non-flexible for the first
        bottomToSup.priority = UILayoutPriorityRequired; // is either flexible or non-flexible for the last
        trailingToSup.priority = UILayoutPriorityRequired; // it is required, that the view does not exceed the right edge of its superview
        [superview addConstraints: @[trailingToSup, topToSup, leadingToSup, bottomToSup]];

        // affecting the preceding view
        if (i > 0) {
            leadingToPrec.priority = UILayoutPriorityDefaultHigh;
            centerYToPrec.priority = UILayoutPriorityDefaultHigh;
            topToPrec.priority = UILayoutPriorityDefaultHigh;
            [superview addConstraints: @[leadingToPrec, centerYToPrec, topToPrec]];
        }
    }
}

扩展NSLayoutConstraint的导入类别：

@implementation NSLayoutConstraint (ConstructorAdditions)


// align edges of two views
// if one view is the superview, put it at the second position in the array
+ (NSLayoutConstraint*) alignEdge : (NSLayoutAttribute) edge
                      ofViews : (NSArray*) /*UIView*/ views
                     relation : (NSLayoutRelation) relation
                      spacing : (CGFloat) spacing {
    NSLayoutConstraint* constraint = nil;
    if (views.count == 2) {
        if (edge == NSLayoutAttributeBaseline || edge == NSLayoutAttributeTrailing || edge == NSLayoutAttributeBottom || edge == NSLayoutAttributeRight) {
            spacing = -spacing;
        }
        constraint = [NSLayoutConstraint constraintWithItem : [views objectAtIndex: 0]
                                              attribute : edge
                                              relatedBy : relation
                                                 toItem : [views objectAtIndex: 1]
                                              attribute : edge
                                             multiplier : 1.0
                                               constant : spacing];
    }
    return constraint;
}


// vertical spcacing between views
// the method assumes, that the first view in the array is above the second view
+ (NSLayoutConstraint*) verticalSpacing : (CGFloat) spacing
                            ofViews : (NSArray*) /*UIView*/ views
                           flexible : (BOOL) flexible
                           inMaximum: (BOOL) inMax {
    NSLayoutConstraint* constraint = nil;

    NSLayoutRelation relation = flexible ? (inMax ? NSLayoutRelationLessThanOrEqual : NSLayoutRelationGreaterThanOrEqual) : NSLayoutRelationEqual;

    if (views.count == 2) {
        constraint = [NSLayoutConstraint constraintWithItem : [views objectAtIndex: 0]
                                              attribute : NSLayoutAttributeBottom
                                              relatedBy : relation
                                                 toItem : [views objectAtIndex: 1]
                                              attribute : NSLayoutAttributeTop
                                             multiplier : 1.0
                                               constant : -spacing];
    }
    return constraint;
}


// horizontal spacing between views
// the method assumes, that the first view in the array is left of the second view
+ (NSLayoutConstraint*) horizontalSpacing : (CGFloat) spacing
                         betweenViews : (NSArray*) /*UIView*/ views
                             flexible : (BOOL) flexible
                             inMaximum: (BOOL) inMax {
    NSLayoutConstraint* constraint = nil;
    NSLayoutRelation relation = flexible ? (inMax ? NSLayoutRelationLessThanOrEqual : NSLayoutRelationGreaterThanOrEqual) : NSLayoutRelationEqual;
    if (views.count == 2) {
        constraint = [NSLayoutConstraint constraintWithItem : [views objectAtIndex: 0]
                                              attribute : NSLayoutAttributeTrailing
                                              relatedBy : relation
                                                 toItem : [views objectAtIndex: 1]
                                              attribute : NSLayoutAttributeLeading
                                             multiplier : 1.0
                                               constant : -spacing];
    }
    return constraint;
}



+ (NSArray*) equalWidthOfViews : (NSArray*) views
                    toView : (UIView*) view
                  distance : (CGFloat) distance
                  relation : (NSLayoutRelation) relation
                multiplier : (CGFloat) multiplier {
    NSMutableArray* constraints = [[NSMutableArray alloc] initWithCapacity: views.count];

    for (UIView* aView in views) {
        [constraints addObject: [NSLayoutConstraint  constraintWithItem : aView
                                                          attribute : NSLayoutAttributeWidth
                                                          relatedBy : relation
                                                             toItem : view
                                                          attribute : NSLayoutAttributeWidth
                                                         multiplier : multiplier
                                                           constant : distance]];
    }
    return constraints;
}

Answer 1

对于自动布局来说，这是一项相当艰巨的任务。随着您添加越来越多的约束，约束的求解时间呈指数增长。看起来 UICollectionView 可能更适合您的需求。它已经非常适合做这样的事情，特别是 UICollectionViewFlowLayout 布局。