ios - 如何正确地水平和垂直对齐两个按钮

Question

我是第一次使用视觉格式语言，我正在努力以编程方式水平对齐两个按钮，然后垂直对齐这两个按钮。

我目前的方法是将两个按钮放入某个容器 View 中，在该容器中水平对齐它们，然后在主视图中垂直对齐该容器 View ，但这具有将我的按钮水平对齐在一个位置的效果，并且然后在别处垂直对齐我的容器 View 。

这是我目前的做法:

var views = new NSMutableDictionary();

viewDidLoad():

views.Add(new NSString("questionTextView"), QuestionTextView);

...
UIButton button1 = new UIButton();
UIButton button2 = new UIButton();
UIView containerView = new UIView(new CGRect(0, 0, 500, 100));

views.Add(new NSString("containerView"), containerView);
containerView.TranslatesAutoresizingMaskIntoConstraints = false;
View.AddSubview(containerView);

var textViewCenter = NSLayoutConstraint.FromVisualFormat(
    format: "|-[containerView]-|",
    formatOptions: NSLayoutFormatOptions.AlignAllCenterX,
    metrics: null,
    views: views
);
NSLayoutConstraint.ActivateConstraints(textViewCenter);

addButton(button1, new NSString("button1"), containerView);
addButton(button2, new NSString("button2"), containerView);
addQuestionViewContraints();
addTwoButtonConstraints();
adjustQuestionView();

相关函数:

public void addButton(UIButton button, NSString buttonIdentifier, UIView containerView){
        button = new UIButton(new CGRect(0, 0, 200, 100));

        button.TranslatesAutoresizingMaskIntoConstraints = false;
        button.SetTitle(buttonText, UIControlState.Normal);

        containerView.AddSubview(button);
        views.Add(buttonIdentifier, button);
}
public void addTwoButtonConstraints()
{
        var twoButtonHorizontalConstraints = NSLayoutConstraint.FromVisualFormat(
            format: "|-[button1]-[button2]-|",
            formatOptions: NSLayoutFormatOptions.AlignAllTop,
            metrics: null,
            views: views
        );
        NSLayoutConstraint.ActivateConstraints(twoButtonHorizontalConstraints);

        var verticalAlignment = NSLayoutConstraint.FromVisualFormat(
            format: "V:|-[questionTextView]-(>=100)-[containerView(>=100)]-(>=50)-|",
            formatOptions: NSLayoutFormatOptions.AlignAllCenterX,
            metrics: null,
            views: views
        );
        NSLayoutConstraint.ActivateConstraints(verticalAlignment);

}
public void addQuestionViewContraints(){
        QuestionTextView.TranslatesAutoresizingMaskIntoConstraints = false;
        var textViewCenter = NSLayoutConstraint.FromVisualFormat(
            format: "|-[questionTextView]-|",
            formatOptions: NSLayoutFormatOptions.AlignAllCenterX,
            metrics: null,
            views: views
        );
        NSLayoutConstraint.ActivateConstraints(textViewCenter);
}

我的猜测是，由于容器 View 最终正确对齐，并且按钮正确水平对齐，所以我的问题在于我的按钮没有正确成为 containerView 的一部分。感谢您的任何见解。

Answer 1

你必须为此使用堆栈 View :

//Button first View
let buttonFirst = UIButton()
buttonFirst.backgroundColor = UIColor.blue
buttonFirst.heightAnchor.constraint(equalToConstant: 120.0).isActive = true
imageView.widthAnchor.constraint(equalToConstant: 120.0).isActive = true

//Button second View
let buttonSecond = UIButton()
buttonSecond.backgroundColor = UIColor.red
buttonSecond.heightAnchor.constraint(equalToConstant: 120.0).isActive = true
buttonSecond.widthAnchor.constraint(equalToConstant: 120.0).isActive = true


//Stack View
let stackView   = UIStackView()
stackView.axis  = UILayoutConstraintAxis.vertical
stackView.distribution  = UIStackViewDistribution.equalSpacing
stackView.alignment = UIStackViewAlignment.center
stackView.spacing   = 16.0

stackView.addArrangedSubview(buttonFirst)
stackView.addArrangedSubview(buttonSecond)
stackView.translatesAutoresizingMaskIntoConstraints = false

self.view.addSubview(stackView)