如何正确地水平和垂直对齐两个按钮
How to properly align two buttons horizontally and vertically
我是第一次使用 Visual Format 语言,我正在努力以编程方式水平对齐两个按钮,然后垂直对齐这两个按钮。
我目前的做法是将两个按钮放入某个容器视图中,在该容器中将它们水平对齐,然后在主视图中垂直对齐该容器视图,但这具有将我的按钮水平对齐在一个位置的效果,然后在别处垂直对齐我的容器视图。
这是我目前的做法:
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 的一部分。感谢您的任何见解。
为此你必须使用 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)
我是第一次使用 Visual Format 语言,我正在努力以编程方式水平对齐两个按钮,然后垂直对齐这两个按钮。
我目前的做法是将两个按钮放入某个容器视图中,在该容器中将它们水平对齐,然后在主视图中垂直对齐该容器视图,但这具有将我的按钮水平对齐在一个位置的效果,然后在别处垂直对齐我的容器视图。
这是我目前的做法:
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 的一部分。感谢您的任何见解。
为此你必须使用 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)