如何通过 Autolayout 的视觉格式语言垂直堆叠两个 UI 元素答案

【问题标题】：How to vertically stack two UI elements via Autolayout's visual format language如何通过 Autolayout 的视觉格式语言垂直堆叠两个 UI 元素
【发布时间】：2014-12-27 02:30:06
【问题描述】：

我正在学习 AutoLayout 的视觉格式语言 (VFL) 并尝试构建一个包含两个元素的视图：

UITextView 距离顶部大约 20 点，应该填满大部分 iPhone 上可用的垂直空间
需要位于 UITextView 下方的 UIButton，没有任何两者之间的填充。按钮底部应为 20 点从父视图的底部。

我认为以下内容可以解决问题。

let verticalBindings = ["textView": self.textView, "button": self.button]

let verticalConstraints = NSLayoutConstraint.constraintsWithVisualFormat(
    "V:|-20-[textView][button]-20-|",
    options: NSLayoutFormatOptions.AlignAllLeft,
    metrics:nil,
    views:verticalBindings)

self.view.addConstraints(verticalConstraints)

但是，当我运行时，UITextView 是不可见的，并且我选择的元素布局方式中的某些东西会遮盖它。您如何布置元素以使它们垂直堆叠在一起？

我也不确定如何设置 textView 的大小，以便在从顶部和底部的填充以及按钮的高度中减去后，它应该是任何可用的垂直空间。

我更喜欢使用 VFL 来描述这种布局。

【问题讨论】：

标签： swift autolayout

【解决方案1】：

您是否忘记设置水平约束？上面的代码运行良好。

- (void)viewDidLoad
{
   NSString *const kViewVertical = @"V:|-20-[_textView][_button]-20-|";
   NSString *const kTextViewHorizontal = @"|-[_textView]-|";
   NSString *const kButtonHorizontal = @"|-[_button]-|";

   NSDictionary *dictionary = NSDictionaryOfVariableBindings(_textView, _button);

   NSArray *contraintOne = [NSLayoutConstraint constraintsWithVisualFormat:kViewVertical
                                                               options:NSLayoutFormatAlignAllLeft
                                                               metrics:nil
                                                                 views:dictionary];

   NSArray *constraintTwo = [NSLayoutConstraint constraintsWithVisualFormat:kTextViewHorizontal
                                                               options:NSLayoutFormatAlignAllLeft
                                                               metrics:nil
                                                                 views:dictionary];

   NSArray *constraintThree = [NSLayoutConstraint constraintsWithVisualFormat:kButtonHorizontal
                                                               options:NSLayoutFormatAlignAllLeft
                                                               metrics:nil
                                                                 views:dictionary];
  [self.view addConstraints:constraintOne];
  [self.view addConstraints:constraintTwo];
  [self.view addConstraints:constraintThree];
}

编辑：别忘了设置

[_button setTranslatesAutoresizingMaskIntoConstraints:NO];
[_textView setTranslatesAutoresizingMaskIntoConstraints:NO];

反正我不擅长 Swift，希望对你有所帮助。

【讨论】：