使用"自动布局"在调整大小时平均更改空格

Question

如果我的应用中有3个子视图(作为示例),它们之间有以下间距:

TOP - 40分 - SUBVIEW 1 - 60分 - SUBVIEW 2 - 80分 - SUBVIEW 3 - 80分 - BOTTOM

我理解如何使用自动布局来确保每个子视图保持其高度和宽度,并且我可以在3.5或4英寸iPhone屏幕上对齐所有内容.

但我无法弄清楚我需要做出什么样的限制,以便如果它对齐3.5英寸屏幕,然后进入4英寸屏幕,每个间距将按比例增加(例如40点将达到47 ,60至71,80至95 - 或其左右).

这可能吗？或者我是否需要使元素之间的所有间距相等？(如果是这样,我怎么能让它同样调整大小？)

我是Auto Layout的新手,所以如果我遗漏了任何东西,或者还没弄清楚我的意思,请告诉我,谢谢.

Answer 1

诀窍是在视图之间添加一个而不是两个约束.一个" 大于或等于 ",一个" 少于或等于 ".最小尺寸(大于等于或等于)应为3.5"显示屏上的间距.最大尺寸(Less Then或Equal"应为4"显示屏上的间距.

例:

TOP - 40分 - SUBVIEW 1 - 60分 - SUBVIEW 2 - 80分 - SUBVIEW 3 - 80分 - BOTTOM

TOP - SUBVIEW1:在Interface Builder中选择两者.添加约束"垂直间距" 两次. 将1设置为Greater Then或Equal 40.将另一个设置为Lesser Then或Equal 47.

所有Greater Then值和视图的所有高度之和应为480像素(3.5")所有Lesser Then值的总和+所有视图的高度应为568像素(4")

Answer 2

我不知道有什么简单的方法可以做到这一点。我做了一个所有空格都相等的，但要做到这一点，我必须用不可见的标签填充空格（只是没有标题的标签）。因此，我将 4 个可见对象和 5 个“间隔标签”放在一起。我使 4 个可见对象都具有明确的高度，并且间隔物没有固定高度，但设置为全部相同：

-(void)viewDidLoad {
    [super viewDidLoad];

    NSMutableDictionary *viewsDict = [NSMutableDictionary dictionary];
    for (int i=1; i<5; i++) { // Labels with titles
        UILabel *b = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 150, 44)];
         b.text = @"This is my label";
        [b setTranslatesAutoresizingMaskIntoConstraints:NO];
        [viewsDict setObject:b forKey:[NSString stringWithFormat:@"b%d",i]];
    }

    for (int i=1; i<6; i++) { // Spacer labels
        UILabel *l = [[UILabel alloc ]init];
        [l setTranslatesAutoresizingMaskIntoConstraints:NO];
        [viewsDict setObject:l forKey:[NSString stringWithFormat:@"l%d",i]];
    }

    for (id obj in viewsDict.allKeys) 
        [self.view addSubview:viewsDict[obj]];

    NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|[l1][b1][l2(==l1)][b2][l3(==l1)][b3][l4(==l1)][b4][l5(==l1)]|"
                                                                   options:NSLayoutFormatAlignAllLeading
                                                                   metrics:nil
                                                                     views:viewsDict];


    NSArray *constraints2 = [NSLayoutConstraint constraintsWithVisualFormat:@"|-[b1]"
                                                                   options:0
                                                                   metrics:nil
                                                                     views:viewsDict];


    [self.view addConstraints:constraints];
    [self.view addConstraints:constraints2];
} 

为了让空间变得不同，我认为你必须使用更长的形式来表达约束，而不是视觉格式。下面的代码似乎对我有用。我使用与上面相同的视图定义，只是我将标题标签的数量减少到 3 个，将间隔符减少到 4 个以匹配您的问题。相对间距应如您的示例所示，2:3:4:4。

NSLayoutConstraint *con1 = [NSLayoutConstraint constraintWithItem:self.view attribute:NSLayoutAttributeTop relatedBy:0 toItem:viewsDict[@"l1"] attribute:NSLayoutAttributeTop multiplier:1 constant:0];
    NSLayoutConstraint *con2 = [NSLayoutConstraint constraintWithItem:viewsDict[@"l1"] attribute:NSLayoutAttributeBottom relatedBy:0 toItem:viewsDict[@"b1"] attribute:NSLayoutAttributeTop multiplier:1 constant:0];
    NSLayoutConstraint *con3 = [NSLayoutConstraint constraintWithItem:viewsDict[@"b1"] attribute:NSLayoutAttributeBottom relatedBy:0 toItem:viewsDict[@"l2"] attribute:NSLayoutAttributeTop multiplier:1 constant:0];
    NSLayoutConstraint *con4 = [NSLayoutConstraint constraintWithItem:viewsDict[@"l2"] attribute:NSLayoutAttributeBottom relatedBy:0 toItem:viewsDict[@"b2"] attribute:NSLayoutAttributeTop multiplier:1 constant:0];
    NSLayoutConstraint *con5 = [NSLayoutConstraint constraintWithItem:viewsDict[@"b2"] attribute:NSLayoutAttributeBottom relatedBy:0 toItem:viewsDict[@"l3"] attribute:NSLayoutAttributeTop multiplier:1 constant:0];
    NSLayoutConstraint *con6 = [NSLayoutConstraint constraintWithItem:viewsDict[@"l3"] attribute:NSLayoutAttributeBottom relatedBy:0 toItem:viewsDict[@"b3"] attribute:NSLayoutAttributeTop multiplier:1 constant:0];
    NSLayoutConstraint *con7 = [NSLayoutConstraint constraintWithItem:viewsDict[@"b3"] attribute:NSLayoutAttributeBottom relatedBy:0 toItem:viewsDict[@"l4"] attribute:NSLayoutAttributeTop multiplier:1 constant:0];
    NSLayoutConstraint *con8 = [NSLayoutConstraint constraintWithItem:viewsDict[@"l4"] attribute:NSLayoutAttributeBottom relatedBy:0 toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1 constant:0];
    NSLayoutConstraint *con9 = [NSLayoutConstraint constraintWithItem:viewsDict[@"l1"] attribute:NSLayoutAttributeHeight relatedBy:0 toItem:viewsDict[@"l2"] attribute:NSLayoutAttributeHeight multiplier:.66 constant:0];
    NSLayoutConstraint *con10 = [NSLayoutConstraint constraintWithItem:viewsDict[@"l1"] attribute:NSLayoutAttributeHeight relatedBy:0 toItem:viewsDict[@"l3"] attribute:NSLayoutAttributeHeight multiplier:.5 constant:0];
    NSLayoutConstraint *con11 = [NSLayoutConstraint constraintWithItem:viewsDict[@"l1"] attribute:NSLayoutAttributeHeight relatedBy:0 toItem:viewsDict[@"l4"] attribute:NSLayoutAttributeHeight multiplier:.5 constant:0];
    NSLayoutConstraint *con12 = [NSLayoutConstraint constraintWithItem:viewsDict[@"b1"] attribute:NSLayoutAttributeLeading relatedBy:0 toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1 constant:100];
    NSLayoutConstraint *con13 = [NSLayoutConstraint constraintWithItem:viewsDict[@"b2"] attribute:NSLayoutAttributeLeading relatedBy:0 toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1 constant:100];
    NSLayoutConstraint *con14 = [NSLayoutConstraint constraintWithItem:viewsDict[@"b3"] attribute:NSLayoutAttributeLeading relatedBy:0 toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1 constant:100];

    NSArray *constraints = @[con1,con2,con3,con4,con5,con6,con7,con8,con9,con10,con11,con12,con13,con14];
    [self.view addConstraints:constraints];