以编程方式在UIStackView中添加视图

Question

我正在尝试以编程方式在UIStackView中添加视图。现在我的代码是：UIView *view1 = [[UIView alloc]init];view1.backgroundColor = [UIColor blackColor];[view1 setFrame:CGRectMake(0, 0, 100, 100)];UIView *view2 =  [[UIView alloc]init];view2.backgroundColor = [UIColor greenColor];[view2 setFrame:CGRectMake(0, 100, 100, 100)];[self.stack1 addArrangedSubview:view1];[self.stack1 addArrangedSubview:view2];当我部署应用程序时，只有一个视图并且它是黑色的。（view1也获得了view2的参数）

Answer 1

堆栈视图使用内部内容大小，因此使用布局约束来定义视图的尺寸。

有一种简单的方法可以快速添加约束（示例）：

[view1.heightAnchor constraintEqualToConstant:100].active = true;

完整的代码：

- (void) setup {

    //View 1

    UIView *view1 = [[UIView alloc] init];

    view1.backgroundColor = [UIColor blueColor];

    [view1.heightAnchor constraintEqualToConstant:100].active = true;

    [view1.widthAnchor constraintEqualToConstant:120].active = true;

    //View 2

    UIView *view2 = [[UIView alloc] init];

    view2.backgroundColor = [UIColor greenColor];

    [view2.heightAnchor constraintEqualToConstant:100].active = true;

    [view2.widthAnchor constraintEqualToConstant:70].active = true;

    //View 3

    UIView *view3 = [[UIView alloc] init];

    view3.backgroundColor = [UIColor magentaColor];

    [view3.heightAnchor constraintEqualToConstant:100].active = true;

    [view3.widthAnchor constraintEqualToConstant:180].active = true;

    //Stack View

    UIStackView *stackView = [[UIStackView alloc] init];

    stackView.axis = UILayoutConstraintAxisVertical;

    stackView.distribution = UIStackViewDistributionEqualSpacing;

    stackView.alignment = UIStackViewAlignmentCenter;

    stackView.spacing = 30;

    [stackView addArrangedSubview:view1];

    [stackView addArrangedSubview:view2];

    [stackView addArrangedSubview:view3];

    stackView.translatesAutoresizingMaskIntoConstraints = false;

    [self.view addSubview:stackView];

    //Layout for Stack View

    [stackView.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor].active = true;

    [stackView.centerYAnchor constraintEqualToAnchor:self.view.centerYAnchor].active = true;

}

注意：这已在iOS 9上进行了测试

Answer 2

UIStackView在内部使用约束来定位其排列的子视图。究竟创建什么约束取决于堆栈视图本身的配置方式。默认情况下，堆栈视图将创建约束，将其布置在水平线上的子视图约束，将前导视图和尾随视图固定到其自己的前边缘和后边缘。因此，您的代码将产生如下所示的布局：

|[view1][view2]|

分配给每个子视图的空间由许多因素决定，包括子视图的固有内容大小，其抗压缩性和内容拥抱优先级。默认情况下，UIView实例不定义内部内容大小。这通常是由子类提供的，例如UILabel或UIButton。

由于两个新UIView实例的内容压缩阻力和内容包含优先级相同，并且两个视图都不提供固有的内容大小，因此布局引擎必须就应该为每个视图分配什么大小做出最佳猜测。在您的情况下，它将为第一个视图分配100％的可用空间，而没有为第二个视图分配任何空间。

如果修改代码以使用UILabel实例代替，则将获得更好的结果：

UILabel *label1 = [UILabel new];

label1.text = @"Label 1";

label1.backgroundColor = [UIColor blueColor];

UILabel *label2 = [UILabel new];

label2.text = @"Label 2";

label2.backgroundColor = [UIColor greenColor];

[self.stack1 addArrangedSubview:label1];

[self.stack1 addArrangedSubview:label2];

请注意，您不必自己明确创建任何约束。这是使用的主要好处UIStackView-它向开发人员隐藏了约束管理的（通常是丑陋的）细节。