c# - 水平 UIStackView 居中

Question

我正在尝试使用水平 UIStack View 实现以下目标:

将显示未知数量的复选框(最多 5 个)。我希望它们像下面这样居中和等距(2个单独的图像):





如果我必须只有一个复选框，它将居中。

这是我到目前为止得到的:





我现在很清楚，堆栈 View 的左侧和右侧固定了 2 个复选框，其余复选框根据请求进行分布和间隔。

我希望一切都从堆栈 View 的中心分布。

这是显示堆栈 View 配置的代码:

UIStackView firstFiveCheckboxesStackView = new UIStackView
{
     TranslatesAutoresizingMaskIntoConstraints = false,
     Axis = UILayoutConstraintAxis.Horizontal,
     Distribution = UIStackViewDistribution.EqualSpacing,
     Alignment = UIStackViewAlignment.Center,
     Spacing = 10
};

Answer 1

要获得您所描述的布局，您需要做的不仅仅是设置 Distribution 属性。

假设您的“复选框” View 具有固定宽度...

将堆栈 View 的分布设置为 .Fill

在每个“复选框” View 之间添加一个“间隔” View

在开头和结尾添加“间隔” View

将间隔 View 宽度设置为彼此相等

这是可见的“间隔” View (青色背景)的外观:



并且背景清晰:



以及带有 5、4、3、2 和 1 个复选框的示例:





这是我用来获得这些结果的代码:

using Foundation;
using System;
using UIKit;

namespace MyTest
{
    public class CheckBoxView : UIView
    {
        public CheckBoxView()
        {
            Initialize();
        }
        public CheckBoxView(IntPtr handle) : base(handle)
        {
            Initialize();
        }

        void Initialize()
        {
            this.Layer.BorderColor = UIColor.Black.CGColor;
            this.Layer.BorderWidth = 1;
        }

        public override void LayoutSubviews()
        {
            base.LayoutSubviews();
            this.Layer.CornerRadius = Bounds.Width * (float)0.5;
        }

    }

    public partial class ViewController : UIViewController
    {
        public ViewController(IntPtr handle) : base(handle)
        {
        }

        public override void ViewDidLoad()
        {
            base.ViewDidLoad();

            // change to .Cyan to see the spacers
            UIColor spacerColor = UIColor.Clear;

            UIStackView stacksView = new UIStackView
            {
                TranslatesAutoresizingMaskIntoConstraints = false,
                Axis = UILayoutConstraintAxis.Vertical,
                Distribution = UIStackViewDistribution.Fill,
                Alignment = UIStackViewAlignment.Fill,
                Spacing = 20
            };

            for (int j = 5; j > 0; j -= 3)
            {

                UIStackView stackView = new UIStackView
                {
                    TranslatesAutoresizingMaskIntoConstraints = false,
                    Axis = UILayoutConstraintAxis.Horizontal,
                    Distribution = UIStackViewDistribution.Fill,
                    Alignment = UIStackViewAlignment.Fill,
                    Spacing = 0
                };

                UIView spacerView;
                UIView prevSpacerView = null;
                for (int i = 0; i < j; i++)
                {
                    spacerView = new UIView();
                    spacerView.BackgroundColor = spacerColor;
                    var checkBox = new CheckBoxView();
                    stackView.AddArrangedSubview(spacerView);
                    stackView.AddArrangedSubview(checkBox);
                    checkBox.HeightAnchor.ConstraintEqualTo(40).Active = true;
                    checkBox.WidthAnchor.ConstraintEqualTo(checkBox.HeightAnchor).Active = true;
                    if (prevSpacerView != null)
                    {
                        spacerView.WidthAnchor.ConstraintEqualTo(prevSpacerView.WidthAnchor).Active = true;
                    }
                    prevSpacerView = spacerView;
                }
                spacerView = new UIView();
                spacerView.BackgroundColor = spacerColor;
                stackView.AddArrangedSubview(spacerView);
                spacerView.WidthAnchor.ConstraintEqualTo(prevSpacerView.WidthAnchor).Active = true;

                stacksView.AddArrangedSubview(stackView);
            }

            var sepView = new UIView();
            sepView.HeightAnchor.ConstraintEqualTo(60).Active = true;
            stacksView.AddArrangedSubview(sepView);

            for (int j = 5; j > 0; j--)
            {

                UIStackView stackView = new UIStackView
                {
                    TranslatesAutoresizingMaskIntoConstraints = false,
                    Axis = UILayoutConstraintAxis.Horizontal,
                    Distribution = UIStackViewDistribution.Fill,
                    Alignment = UIStackViewAlignment.Fill,
                    Spacing = 0
                };

                UIView spacerView;
                UIView prevSpacerView = null;
                for (int i = 0; i < j; i++)
                {
                    spacerView = new UIView();
                    spacerView.BackgroundColor = spacerColor;
                    var checkBox = new CheckBoxView();
                    stackView.AddArrangedSubview(spacerView);
                    stackView.AddArrangedSubview(checkBox);
                    checkBox.HeightAnchor.ConstraintEqualTo(40).Active = true;
                    checkBox.WidthAnchor.ConstraintEqualTo(checkBox.HeightAnchor).Active = true;
                    if (prevSpacerView != null)
                    {
                        spacerView.WidthAnchor.ConstraintEqualTo(prevSpacerView.WidthAnchor).Active = true;
                    }
                    prevSpacerView = spacerView;
                }
                spacerView = new UIView();
                spacerView.BackgroundColor = spacerColor;
                stackView.AddArrangedSubview(spacerView);
                spacerView.WidthAnchor.ConstraintEqualTo(prevSpacerView.WidthAnchor).Active = true;

                stacksView.AddArrangedSubview(stackView);
            }

            View.AddSubview(stacksView);
            var stackConstraints = new[]
            {
                stacksView.TopAnchor.ConstraintEqualTo(View.TopAnchor, constant: 100),
                stacksView.LeadingAnchor.ConstraintEqualTo(View.LeadingAnchor, constant: 40),
                stacksView.TrailingAnchor.ConstraintEqualTo(View.TrailingAnchor, constant: -40),
            };
            NSLayoutConstraint.ActivateConstraints(stackConstraints);

        }

        public override void DidReceiveMemoryWarning()
        {
            base.DidReceiveMemoryWarning();
        }
    }

}