Autolayouts in UIScrollView using Cirrious.FluentL

Question

I've to do a ViewController with autolayouts in scrollView, but here is few problems:

public SomeVC() : UIViewController
    {
        _mainScrollView = new UIScrollView {
            ShowsHorizontalScrollIndicator = false,
            ShowsVerticalScrollIndicator = true,
            BackgroundColor = UIColor.Clear,
            ScrollEnabled = true,
            AutoresizingMask = UIViewAutoresizing.FlexibleHeight,
            TranslatesAutoresizingMaskIntoConstraints = true
        };

        _userDataTableView = new UITableView(CGRect.Empty, UITableViewStyle.Grouped);
        _userDataTableView.LayoutIfNeeded();

        _saveButton = new UIButton();

        _menuTableView = new UITableView(CGRect.Empty, UITableViewStyle.Grouped);
        _menuTableView.LayoutIfNeeded();

        _logoutButton = new UIButton();
    }

    public override void LoadView()
    {
        base.LoadView();
        View = _mainScrollView;
    }

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

        Add(_userDataTableView);
        Add(_saveButton);
        Add(_menuTableView);
        Add(_logoutButton);

        _mainScrollView.AddConstraints(
            _userDataTableView.AtTopOf(View),
            _userDataTableView.AtLeftOf(View),
            _userDataTableView.AtRightOf(View),
            _userDataTableView.Height().EqualTo(_userDataTableView.ContentSize.Height),

            _saveButton.Below(_userDataTableView, 20),
            _saveButton.AtLeftOf(_mainScrollView, 10),
            _saveButton.AtRightOf(_mainScrollView, 10),
            _saveButton.Height().EqualTo(44),

            _menuTableView.Below(_saveButton, 20),
            _menuTableView.AtLeftOf(_mainScrollView),
            _menuTableView.AtRightOf(_mainScrollView),
            _menuTableView.Height().EqualTo(_menuTableView.ContentSize.Height),

            _logoutButton.Below(_menuTableView, 20),
            _logoutButton.AtLeftOf(_mainScrollView, 10),
            _logoutButton.AtRightOf(_mainScrollView, 10),
            _logoutButton.Height().EqualTo(44)
        );
        _mainScrollView.SubviewsDoNotTranslateAutoresizingMaskIntoConstraints();
    }

In fact, it works, but contents width is about half of screen width, and scrolling not working. How to get it works?

As far as I understand, the problem is - _mainScrollView.ContentSize, but how and where should I set it, when using autolayouts?

Answer 1

Solution found: Firstly:

        _userDataTableView.AtLeftOf(View),
        _userDataTableView.AtRightOf(View),

is not valid, instead of this, we should use:

        _userDataTableView.AtLeftOf(View),
        _userDataTableView.WithSameWidth(View),

if we want margin, we just add

        _userDataTableView.WithSameWidth(View).Minus(MARGIN)

And the last thing we have to do:

        _logoutButton.Height().EqualTo(44), 
        _logoutButton.Bottom().EqualTo().BottomOf(_mainScrollView).Plus(10)

last line is very important. It says to scrollView right content size.

Answer 2

If your views doesn't exceed the screen you will not be able to do scroll. if you only have something like this :

// Create containers
            contentView = new UIView();
            scrollView = new UIScrollView { contentView };
            Add(scrollView);


            contentView.AddSubviews(logo, user, password, loginButton);


            // Auto layout
            View.SubviewsDoNotTranslateAutoresizingMaskIntoConstraints();
            View.AddConstraints(scrollView.FullWidthOf(View));
            View.AddConstraints(scrollView.FullHeightOf(View));
            View.AddConstraints(
                contentView.WithSameWidth(View),
                contentView.WithSameHeight(View).SetPriority(UILayoutPriority.DefaultLow)
            );

            scrollView.SubviewsDoNotTranslateAutoresizingMaskIntoConstraints();
            scrollView.AddConstraints(contentView.FullWidthOf(scrollView));
            scrollView.AddConstraints(contentView.FullHeightOf(scrollView));

            // very important to make scrolling work
            var bottomViewConstraint = contentView.Subviews.Last()
                .AtBottomOf(contentView).Minus(20);

            contentView.SubviewsDoNotTranslateAutoresizingMaskIntoConstraints();

            contentView.AddConstraints(
                  logo.AtTopOf(contentView),
                   logo.WithRelativeWidth(contentView, 0.8f),

                   logo.WithSameCenterX(contentView),
                   logo.WithRelativeHeight(contentView, 0.3f),

                   user.Below(logo, 50),
                   user.WithRelativeWidth(logo, 0.8f),
                   user.WithSameCenterX(logo),

                   password.Below(user),
                   password.WithSameWidth(user),
                   password.WithSameCenterX(user),

                   loginButton.Below(password, 50),
                   loginButton.WithRelativeWidth(password, 0.9f),
                   loginButton.Height().EqualTo(50),
                   loginButton.WithSameCenterX(password)
               );

            contentView.AddConstraints(bottomViewConstraint);

        }

I'm using this package and it works perfectly like if I was using a stackLayout inside a scrollview in xamarin.forms I think is the perfect behaviour.

Xamarin.IQKeyboardManager from Nuget

Also, if you want to center your content view inside the scrollview you will need to add this:

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

            var scrollViewBounds = scrollView.Bounds;
            var containerViewBounds = contentView.Bounds;

            var scrollViewInsets = UIEdgeInsets.Zero;
            scrollViewInsets.Top = scrollViewBounds.Size.Height / 2.0f;
            scrollViewInsets.Top -= contentView.Bounds.Size.Height / 2.0f;

            scrollViewInsets.Bottom = scrollViewBounds.Size.Height / 2.0f;
            scrollViewInsets.Bottom -= contentView.Bounds.Size.Height / 2.0f;
            scrollViewInsets.Bottom += 1;

            scrollView.ContentInset = scrollViewInsets;
        }

And thats all, doesn't matter how your contentView is . You will have a centered contetnview inside a scrollview and a manager to capture the keyboard events and adapt your view to this event .