0

I want to create list with two columns. Text in first column should be aligned to left and text in second column should be aligned to right. Space between columns should be constant. Different cases depends on texts length should be covered:

1.

Text      123
TextText   12
Tex       123
Text        1

Te  123456
T       12
Te    1234
Te       1 

Text                  123
TextText               12
TextTextTextTextText  123
Text                    1

Both columns should have flexible width depends on the longest text. They also should have some minimum width so it will not be completely invisible if text in other column will be too long. Whole list also should have flexible width, of course there is some max width and then text in first column should be divided into lines. I don't want to divide into lines text in second column as long as I don't have to.

How to create such list?

I try to use for it two stack views one next to the other. These two stack views I have in my custom control. My custom control is added to container view using xib and have constraints equals to 0 for top, leading and bottom and greater or equals 0 for trailing. To these stack views I add labels programatically and I also set content hugging priority for them (first label has lower priority than second one). One think stil doesn't work, first stack view is as width as first label in this stack view. It doesn't change his width when other labels with longer texts are added. Is it possible to have working solution without calculating stack views width manually?

    private void Initialize()
    {
        _firstStackView = new UIStackView
        {
            TranslatesAutoresizingMaskIntoConstraints = false,
            Axis = UILayoutConstraintAxis.Vertical,
            Spacing = 4
        };

        _secondStackView = new UIStackView
        {
            TranslatesAutoresizingMaskIntoConstraints = false,
            Axis = UILayoutConstraintAxis.Vertical,
            Spacing = 4,
            Alignment = UIStackViewAlignment.Trailing
        };

        Add(_firstStackView);
        Add(_secondStackView);
        AddConstraints();
    }

    private void AddConstraints()
    {
        NSLayoutConstraint.ActivateConstraints(
            new[]
            {
                _firstStackView.LeadingAnchor.ConstraintEqualTo(LeadingAnchor),
                _secondStackView.LeadingAnchor.ConstraintEqualTo(_firstStackView.TrailingAnchor, 20),
                TrailingAnchor.ConstraintEqualTo(_secondStackView.TrailingAnchor),
                _firstStackView.TopAnchor.ConstraintEqualTo(TopAnchor),
                _firstStackView.BottomAnchor.ConstraintEqualTo(BottomAnchor),
                _secondStackView.CenterYAnchor.ConstraintEqualTo(_firstStackView.CenterYAnchor),
                _secondStackView.WidthAnchor.ConstraintGreaterThanOrEqualTo(WidthAnchor, 0.25f),
                _firstStackView.WidthAnchor.ConstraintGreaterThanOrEqualTo(WidthAnchor, 0.25f),
            });
    }
matekome
  • 33
  • 6

1 Answers1

0

You can use UICollectionView to create list with two columns. Space between columns and grid size can be adjusted by changing UICollectionViewLayout.

Implement text adaptive width and height:

  1. Instantiate UILabel
  2. Set the UILabel property to get the text content and font
  3. Calculate the size according to text and font
  4. Use CGSize to set the maximum width you want
  5. Set the frame according to the size

You can see some useful info here

For more details, you can refer to the following doc: Collection Views in Xamarin.iOS | Microsoft Docs

Zack
  • 1,255
  • 1
  • 2
  • 5
  • Do I have to calculate width for columns manually? Is it not possible for this to works automatically? I have edited my question and propose my solution with two stack views but also have some problems with columns width. – matekome Sep 08 '22 at 12:40
  • The CGSize method requires you to provide the width and height according to the content. For more details, you can refer to the following issue: https://stackoverflow.com/questions/53899927/update-frame-of-uiview-with-label-in-it-after-changing-labels-contents/53900944#53900944 – Zack Sep 13 '22 at 02:06