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

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

与此同时,我找到了一个很好的解决方案.由于这个问题有很多赞成,我想我会很快描述它.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 2

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

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

实现该traitCollectionDidChange:方法,以便在特征因自动旋转而发生变化时自动调用.

有关更多信息,请参阅UITraitCollection类参考和UITraitEnvironment协议参考.

Answer 3

接受答案的Swift 4代码:

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