自动布局 - 以编程方式垂直排列元素，中间有空格？

Posted 2023-03-15

【中文标题】自动布局 - 以编程方式垂直排列元素，中间有空格？

【英文标题】：Autolayout - arrange elements vertically with space in between programatically?

【发布时间】：2014-01-17 02:39:15

【问题描述】：

我目前正在手动定位我的 UI 元素，如果我更新文本或添加元素会很烦人，因为我每次都必须重新计算所有位置。

有没有办法使用自动布局来调整元素的大小和位置，例如如下，无论标签包含多少文本？

UILabel (multiline, variable height)
[20px gap]
UILabel (multiline, variable height)
[20px gap]
UIButton

【参考方案1】：

是的，它看起来像这样

@implementation MyClass 
    NSDictionary *_viewsDictionary;



- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier

    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) 
        // First create your controls - you can just use CGRectZero
        _label1 = [[UILabel alloc] initWithFrame:CGRectZero];
        _label1 setText:@"Some text";

        _label2 = [[UILabel alloc] initWithFrame:CGRectZero];
        _label2 setText:@"Some text 2";

        _button = [[UIButton alloc] initWithFrame:CGRectZero];

        // Then just add them to your as a sub view
        [self addSubview:self.currentBalanceLabel];
        [self addSubview:_nameLabel];
        [self addSubview:_button];

        // Put them in an NSDictionary - this is a macro and will be used when setting up the contraints below
        _viewsDictionary = NSDictionaryOfVariableBindings(_nameLabel, _currentBalanceLabel,_button);

        // This tells the view to run update contraints
        [self setNeedsUpdateConstraints];
        [self updateConstraintsIfNeeded];
    



- (void)updateConstraints

    [super updateConstraints];

    // Using the _viewsDictionary, we must tell always tell how all the controls will be setup both 
    // horizontally and vertically.  In this case wear are going to tell the label to take the entire width
    // The rest of the vies will be aligned on the left below
    NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[_label1]-|"
                                                                   options:0
                                                                   metrics:nil
                                                                     views:_viewsDictionary];

    //Add the contraints
    [self addConstraints:constraints];

    // Next setup the vertical contraints.  This is what you asked about spefically, label - 20 - label - 20 - button
    constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[_labelq]-20-[_label2]-20-[_button]"
                                                          options: NSLayoutFormatAlignAllLeft
                                                          metrics:nil
                                                            views:_viewsDictionary];


    [self addConstraints:constraints];




@end

【讨论】：

对此进行扩展一点：从概念上讲，正在发生的事情是，是的，您可以设置它。为此，您需要在程序运行时手动更新项目的约束（与仅使用在 Interface Builder 中添加的约束相比）。上面的代码是这样做的，取自在 TableView 中工作的应用程序。出于您的目的，重要的是在 updateConstraints 方法中创建约束。