Как правильно выровнять две кнопки по горизонтали и вертикали

Question

Я впервые работаю с языком визуального формата и пытаюсь программно выровнять две кнопки по горизонтали, а затем выровнять эти две кнопки по вертикали.

Мой текущий подход состоит в том, чтобы поместить две кнопки в некоторый вид контейнера, выровнять их по горизонтали в этом контейнере, а затем вертикально выровнять этот вид контейнера в главном виде, но это приводит к горизонтальному выравниванию моих кнопок в одном месте, а затем к вертикальному выравниванию мой контейнер вид в другом месте.

Вот мой текущий подход:

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);
}

Я предполагаю, что, поскольку представление контейнера в конечном итоге выровнено должным образом, а кнопки правильно выровнены по горизонтали, моя проблема заключается в том, что мои кнопки не становятся должным образом частью containerView. Спасибо за понимание.

Answer 1

Вы должны использовать stack 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)