1

I'm trying to achieve the following with a horizontal UIStack View:

An unknown number of checkboxes (up to 5) are to be displayed. I want them to be centered and equaly spaced like the following (2 separate images):

5 centered checkboxes

2 centered checkboxes

If I had to have only one checkbox, it would be centered.

This is what I got so far:

5 distributed checkboxes

2 distributed checkboxes

It is now clear to me that 2 checkboxes are pinned left and right of the stack view and that the remaining are distributed and spaced accordingly to what is requested.

I'd like that everything was distributed from the center of the stack view.

Here is the code that shows the stack view configuration:

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

2 Answers 2

1

To get the layout you're describing, you'll need to do more than just setting a Distribution property.

  • assuming your "checkbox" views have fixed widths...
  • set the Stack View's Distribution to .Fill
  • add a "spacer" view in-between each "checkbox" view
  • add a "spacer" view at the beginning and at the end
  • set the spacer views widths equal to each other

Here's how it looks with the "spacer" views visible (cyan backgrounds):

enter image description here

and with clear backgrounds:

enter image description here

and examples with 5, 4, 3, 2 and 1 checkboxes:

enter image description here

enter image description here

This is the code I used to get those results:

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

}
1
  • Thanks for that ;) Starting to embrace Xamarin?
    – anon
    May 10, 2020 at 15:20
0

Try to use UIStackViewAlignment.Fill and wrap all checkboxes in a UIView.

And for the second row you will need to add three empty views to align items with the top row.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.