iOS Subviews all lumped together at top of content view (using Cirrious FluentLayouts)

问题

I'm not at all familiar with UIScrollView and content so please bear with me, I originally had an issue where things were not displayed at all and now they are all displayed at 0,0, except for lblPassword which is in the correct location below lblUsername. I assumed that there was an contentView size issue, so I coded it with size parameters, etc, but nothing seems to work. My code is:

public partial class createAccount : UIViewController
{
    public User MyUser;
    public createAccount (IntPtr handle) : base (handle)
    {
    }

    public override void ViewDidLoad()
    {

        base.ViewDidLoad();
        viewCreateAccount.SubviewsDoNotTranslateAutoresizingMaskIntoConstraints();
        var height = this.NavigationController.NavigationBar.Bounds.Height;

        nfloat bannerHeight = banner.Frame.Height;
        nfloat lblTitleHeight = lblTitle.Frame.Height;

        UIView contentView = new UIView();

        UILabel lblUsername = new UILabel();
        UITextField txtUsername = new UITextField();
        txtUsername.BackgroundColor = UIColor.LightGray;
        lblUsername.Text = "Enter Username: ";
        txtUsername.Placeholder = "Enter Username";

        UILabel lblPassword = new UILabel();
        lblPassword.Text = "Enter Password:";

        UITextField txtPassword = new UITextField();
        txtPassword.Placeholder = "Enter Password";
        txtPassword.BackgroundColor = UIColor.LightGray;

        UILabel lblConfirmPassword = new UILabel();
        UITextField txtConfirmPassword = new UITextField();
        txtConfirmPassword.Placeholder = "Confirm Password";
        txtConfirmPassword.BackgroundColor = UIColor.LightGray;

        UILabel lblEmailAddress = new UILabel();
        UITextField txtEmailAddress = new UITextField();
        txtEmailAddress.Placeholder = "Enter Email Address";
        txtEmailAddress.BackgroundColor = UIColor.LightGray;

        UILabel lblConfirmEmailAddress = new UILabel();
        UITextField txtConfirmEmailAddress = new UITextField();
        txtConfirmEmailAddress.Placeholder = "Confirm Email Address";
        txtConfirmEmailAddress.BackgroundColor = UIColor.LightGray;


        contentView.Add(lblUsername);
        contentView.Add(txtUsername);

        contentView.Add(lblPassword);
        contentView.Add(txtPassword);
        contentView.Add(lblConfirmPassword);
        contentView.Add(txtConfirmPassword);
        contentView.Add(lblEmailAddress);
        contentView.Add(txtEmailAddress);
        contentView.Add(lblConfirmEmailAddress);
        contentView.Add(txtConfirmEmailAddress);


        contentView.SubviewsDoNotTranslateAutoresizingMaskIntoConstraints();
        contentView.AddConstraints(
            lblUsername.AtTopOf(contentView, 0),
            lblUsername.AtLeftOf(contentView, 0),

            txtUsername.WithSameWidth(lblUsername),
            txtUsername.ToRightOf(lblUsername, 2),

            lblPassword.Below(txtUsername, 0),
            txtPassword.ToRightOf(lblPassword, 2),

            lblConfirmPassword.Below(lblPassword, 0),
            txtConfirmPassword.ToRightOf(lblConfirmPassword, 2),

            lblEmailAddress.Below(lblConfirmPassword, 0),
            txtEmailAddress.ToRightOf(lblEmailAddress, 2),

            lblConfirmEmailAddress.Below(lblEmailAddress, 0),
            txtConfirmEmailAddress.ToRightOf(lblConfirmEmailAddress, 2),

            txtEmailAddress.WithSameWidth(txtConfirmEmailAddress)
        );



        UIScrollView scrollView = new UIScrollView(new CoreGraphics.CGRect(0, bannerHeight + lblTitleHeight + 75f, UIScreen.MainScreen.Bounds.Width, UIScreen.MainScreen.Bounds.Height));
        scrollView.Add(contentView);
        viewCreateAccount.Add(scrollView);


        scrollView.SubviewsDoNotTranslateAutoresizingMaskIntoConstraints();
        viewCreateAccount.AddConstraints
        (

            banner.AtTopOf(View, height),
            banner.AtRightOf(View, 0),
            banner.AtLeftOf(View, 0),

            lblTitle.Below(banner, 0),
            lblTitle.WithSameWidth(banner)

            ,scrollView.Below(lblTitle,0)
            ,contentView.WithSameWidth(scrollView)
            ,contentView.WithSameHeight(scrollView)
        );
     }
}

Nothing I do corrects the problem, what am I missing?

回答1:

From shared code , there are two things missing .

• One is forget to set Text for UILabel or UITextField , this will make part of them invisible .

• The another one is need to set Below margin for UITextField . If only setting ToRightOf , all the UITextField will override in the first row .

Therefore , code can be modified as follow :

...
        UIView contentView = new UIView();

        UILabel lblUsername = new UILabel();
        UITextField txtUsername = new UITextField();
        txtUsername.BackgroundColor = UIColor.LightGray;
        lblUsername.Text = "Enter Username: ";
        txtUsername.Placeholder = "Enter Username";
        txtUsername.BackgroundColor = UIColor.Green;

        UILabel lblPassword = new UILabel();
        lblPassword.Text = "Enter Password:";

        UITextField txtPassword = new UITextField();
        txtPassword.Placeholder = "Enter Password";
        txtPassword.BackgroundColor = UIColor.LightGray;

        UILabel lblConfirmPassword = new UILabel();
        lblConfirmPassword.Text = "Confirm Password";
        UITextField txtConfirmPassword = new UITextField();
        txtConfirmPassword.Placeholder = "Confirm Password";
        txtConfirmPassword.BackgroundColor = UIColor.LightGray;

        UILabel lblEmailAddress = new UILabel();
        lblEmailAddress.Text = "Enter Email Address";
        UITextField txtEmailAddress = new UITextField();
        txtEmailAddress.Placeholder = "Enter Email Address";
        txtEmailAddress.BackgroundColor = UIColor.LightGray;

        UILabel lblConfirmEmailAddress = new UILabel();
        lblConfirmEmailAddress.Text = "Confirm Email Address";
        UITextField txtConfirmEmailAddress = new UITextField();
        txtConfirmEmailAddress.Placeholder = "Confirm Email Address";
        txtConfirmEmailAddress.BackgroundColor = UIColor.LightGray;


        contentView.Add(lblUsername);
        contentView.Add(txtUsername);

        contentView.Add(lblPassword);
        contentView.Add(txtPassword);
        contentView.Add(lblConfirmPassword);
        contentView.Add(txtConfirmPassword);
        contentView.Add(lblEmailAddress);
        contentView.Add(txtEmailAddress);
        contentView.Add(lblConfirmEmailAddress);
        contentView.Add(txtConfirmEmailAddress);


        contentView.SubviewsDoNotTranslateAutoresizingMaskIntoConstraints();
        contentView.AddConstraints(
            lblUsername.AtTopOf(contentView, 0),
            lblUsername.AtLeftOf(contentView, 0),

            txtUsername.WithSameWidth(lblUsername),
            txtUsername.Below(contentView, 0), // add below margin
            txtUsername.ToRightOf(lblUsername, 2),

            lblPassword.Below(txtUsername, 5),
            txtPassword.Below(txtUsername, 0).Plus(5), // add below margin
            txtPassword.ToRightOf(lblPassword, 2),

            lblConfirmPassword.Below(lblPassword, 5),
            txtConfirmPassword.Below(lblPassword, 0).Plus(5), // add below margin
            txtConfirmPassword.ToRightOf(lblConfirmPassword, 2),

            lblEmailAddress.Below(lblConfirmPassword, 5),
            txtEmailAddress.Below(lblConfirmPassword, 0).Plus(5), // add below margin
            txtEmailAddress.ToRightOf(lblEmailAddress, 2),

            lblConfirmEmailAddress.Below(lblEmailAddress, 5),
            txtConfirmEmailAddress.Below(lblEmailAddress, 0).Plus(5), // add below margin
            txtConfirmEmailAddress.ToRightOf(lblConfirmEmailAddress, 2),

            txtEmailAddress.WithSameWidth(txtConfirmEmailAddress)
        );
...

The effect :

In addition , the UITextField can not interactive with finger touch event , you need to custom a UIView and make its Touch Responder Event can deliver to its subviews .

For example , custom a MyUIView class :

public class MyUIView : UIView
{
    public override bool PointInside(CGPoint point, UIEvent uievent)
    {
        return true;
    }
}

Used in shared code :

...
UIView contentView = new MyUIView();
...

来源：https://stackoverflow.com/questions/62763327/ios-subviews-all-lumped-together-at-top-of-content-view-using-cirrious-fluentla