使用自动布局视觉格式字符串平均分配间距

Posted 2023-02-23

【中文标题】使用自动布局视觉格式字符串平均分配间距

【英文标题】：Equally distribute spacing using Auto Layout visual format string

【发布时间】：2013-08-04 10:40:22

【问题描述】：

是否可以使用可视格式字符串在@"|-[a(5)]-[b(8)]-[c(5)]-|" 中平均分配b 的左右空间？

【问题讨论】：

与此问题相关的非常好的文章here

【参考方案1】：

Apple 的 Auto Layout Guide 建议使用“间隔视图”。以下是水平等间距布置三个视图的解决方案：

// create views dictionary
NSMutableDictionary *viewsDictionary = [NSMutableDictionary dictionary];
[viewsDictionary addEntriesFromDictionary:NSDictionaryOfVariableBindings(viewA, viewB, viewC)];

// create 4 spacer views
for (int i = 0; i < 4; i++) 
    UIView *spacerView = [[UIView alloc] init];
    spacerView.hidden = YES;
    [self addSubview:spacerView];
    [viewsDictionary setObject:spacerView
                        forKey:[NSString stringWithFormat:@"spacer%d", i + 1]];


// disable translatesAutoresizingMaskIntoConstraints in views for auto layout
[viewsDictionary enumerateKeysAndObjectsUsingBlock:^(id key, id obj, BOOL *stop) 

    [obj setTranslatesAutoresizingMaskIntoConstraints:NO];
];

// add constraints
[superview addConstraints:
 [NSLayoutConstraint constraintsWithVisualFormat:
  @"|[spacer1(>=0)][viewA][spacer2(==spacer1)][viewB][spacer3(==spacer1)][viewC][spacer4(==spacer1)]|"
                                         options:kNilOptions
                                         metrics:nil
                                           views:viewsDictionary]];

请注意，spacer1 的宽度设置为大于 0。随后的间隔视图设置为与 spacer1 具有相同的宽度。

【讨论】：

你有什么理由不简单地写NSDictionary *views = NSDictionaryOfVariableBindings(viewA, viewB, viewC);？

我已编辑我的答案以在 NSDictionaryOfVariableBindings 中使用多个参数。我正在使用一个可变字典，以便我可以动态地将我的间隔视图添加到它。

哦，对了。 ^___^ NSMutableDictionary *views = NSDictionaryOfVariableBindings(viewA, viewB, viewC).mutableCopy; 然后。

【参考方案2】：

没有。

但是，您可以使用视觉格式和手动创建约束来实现。将您的 VFL 字符串更改为：

@"|-[a(5)]->=0-[b(8)]->=0-[c(5)]-|"

这表示您不太关心 a 和 b 以及 b 和 c 之间的空间的实际大小。

现在，使用constraintWithItem:... 创建一个约束，将 b 的中心固定到超级视图的中心（我是在手机上输入的，请原谅我没有详细说明整个方法）。

这与您的灵活间距相结合，将在 b 的左侧和右侧提供均匀的空间。

【讨论】：

这听起来很棒。我会试一试。谢谢！

效果很好。很简单。谢谢！ :-)

您究竟是如何“将 b 的中心固定到超级视图的中心”的，@flohei？是不是也可以使用视觉格式，还是必须使用constraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant:？