Question

我有四个按钮布局。在肖像中，它们应该一个在另一个之上。在横向上，它们应该是两列，每列有两个按钮。

我在代码中实现了按钮 - 非常简单：

UIButton *btn1 = [[UIButton alloc] init];
[self.view addSubview: btn1]; 

UIButton *btn2 = [[UIButton alloc] init];
[self.view addSubview: btn2]; 

UIButton *btn3 = [[UIButton alloc] init];
[self.view addSubview: btn3]; 

UIButton *btn4 = [[UIButton alloc] init];
[self.view addSubview: btn4]; 

NSDictionary *views = NSDictionaryOfVariableBindings(btn1, btn2, btn3, btn4);

[btn1 setTranslatesAutoresizingMaskIntoConstraints:NO];
[btn2 setTranslatesAutoresizingMaskIntoConstraints:NO];
[btn3 setTranslatesAutoresizingMaskIntoConstraints:NO];
[btn4 setTranslatesAutoresizingMaskIntoConstraints:NO];

// portrait constraints
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-(50)-[btn1]-(50)-|"
                                                                 options:0 metrics:nil views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-(50)-[btn2]-(50)-|"
                                                                 options:0 metrics:nil views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-(50)-[btn3]-(50)-|"
                                                                 options:0 metrics:nil views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-(50)-[btn4]-(50)-|"
                                                                 options:0 metrics:nil views:views]];

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[btn1]-[btn2]-[btn3]-[btn4]-(50)-|"
                                                                 options:0 metrics:nil views:views]];

这显然是纵向布局的设置。我以前已经确定了设备及其方向，以便在各自的方向上为iPad和iPhone制作特定的外壳。但现在我们应该使用大小类。如何确定大小类是否“紧凑”......从而设置适当的约束？

Answer 1

您可以检查视图的特征集合以确定其水平和垂直大小类。

if (self.view.traitCollection.horizontalSizeClass == UIUserInterfaceSizeClassCompact) {
    ...
}

实施traitCollectionDidChange:方法，以便在特征因自动旋转而发生变化时自动调用。

有关详细信息，请参阅UITraitCollection Class Reference和UITraitEnvironment Protocol Reference。

Answer 2

与此同时，我找到了一个很好的解决方案。由于这个问题有很多赞成，我想我会很快描述它。 WWDC会议让我对这个解决方案感到鼓舞。

我已经转移到Swift，所以请原谅代码将会很快 - 但是Obj-C的概念是相同的。

首先声明三个约束数组：

 // Constraints
 private var compactConstraints: [NSLayoutConstraint] = []
 private var regularConstraints: [NSLayoutConstraint] = []
 private var sharedConstraints: [NSLayoutConstraint] = []

然后你相应地填写约束。您可以在viewDidLoad拨打的单独功能中执行此操作，也可以直接在viewDidLoad中执行此功能。

sharedConstraints.append(contentsOf: [
     btnStackView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
    ...
])

compactConstraints.append(contentsOf: [
     btnStackView.widthAnchor.constraint(equalTo: self.view.widthAnchor, multiplier: 0.7),
    ...
])

regularConstraints.append(contentsOf: [
     btnStackView.widthAnchor.constraint(equalTo: self.view.widthAnchor, multiplier: 0.4),
    ...
])

重要的部分是在大小类之间切换以及激活/停用适当的约束。

override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {

    super.traitCollectionDidChange(previousTraitCollection)

    if (!sharedConstraints[0].isActive) {
       // activating shared constraints
       NSLayoutConstraint.activate(sharedConstraints)
    }


    if traitCollection.horizontalSizeClass == .compact && traitCollection.verticalSizeClass == .regular {
        if regularConstraints.count > 0 && regularConstraints[0].isActive {
            NSLayoutConstraint.deactivate(regularConstraints)
        }
        // activating compact constraints
        NSLayoutConstraint.activate(compactConstraints)
    } else {
        if compactConstraints.count > 0 && compactConstraints[0].isActive {
            NSLayoutConstraint.deactivate(compactConstraints)
        }
        // activating regular constraints
        NSLayoutConstraint.activate(regularConstraints)
    }
}

我知道约束不适合问题中的约束。但约束本身是无关紧要的。主要的是如何根据大小类在两组约束之间切换。

希望这有帮助。

Answer 3

接受答案的Swift 4代码：

status

Answer 4

traitCollection仅适用于iOS8。所以你的应用程序将在iOS7上崩溃。使用以下代码支持iOS7和iOS8

if ([self.view respondsToSelector:@selector(traitCollection)]){

    if (self.view.traitCollection.horizontalSizeClass == UIUserInterfaceSizeClassCompact) {
    ...
    }

}

使用大小类以编程方式实现两种不同的布局

4 个答案: