0

My code is like this:

var nameTextField = new UITextField();
var passwordTextField = new UITextField();
var loginButton = new UIButton();

//Bindings with MvvmCross...

Add(nameTextField);
Add(passwordTextField);
Add(loginButton);

View.SubviewsDoNotTranslateAutoresizingMaskIntoConstraints();

View.AddConstraints(
    nameTextField.AtTopOf(View, 10),
    nameTextField.AtLeftOf(View, 10),
    nameTextField.AtRightOf(View, 10),
    passwordTextField.Below(nameTextField, 10),
    passwordTextField.WithSameLeft(nameTextField),
    passwordTextField.WithSameRight(nameTextField),
    loginButton.Below(passwordTextField, 30),
    loginButton.WithSameLeft(passwordTextField),
    loginButton.WithSameRight(passwordTextField)
);

With "nameTextField.AtTopOf(view, 10), the form is displayed on the top screen. But now, I need to align vertically all the controls (name, password and button) in the View.

How can I do this?

I already tried to sum the height with the margins of all controls and use .WithCenterY(View).Minus(value), but I think that's not the best way, especially when I have many controls.

Thanks.

xleon
  • 6,201
  • 3
  • 36
  • 52
Rafael de Andrade
  • 853
  • 1
  • 6
  • 11

1 Answers1

2

First, create a subview to add all the form controls:

var formView = new UIView();
formView.AddSubviews(nameTextField, passwordTextField, loginButton);

Create constraints for those elements within the formView view:

formView.SubviewsDoNotTranslateAutoresizingMaskIntoConstraints();

formView.AddConstraints(
    nameTextField.AtTopOf(formView, 10),
    nameTextField.AtLeftOf(formView, 10),
    nameTextField.AtRightOf(formView, 10),
    passwordTextField.Below(nameTextField, 10),
    passwordTextField.WithSameLeft(nameTextField),
    passwordTextField.WithSameRight(nameTextField),
    loginButton.Below(passwordTextField, 30),
    loginButton.WithSameLeft(passwordTextField),
    loginButton.WithSameRight(passwordTextField)
);

Create constraints to center formView on screen:

View.SubviewsDoNotTranslateAutoresizingMaskIntoConstraints();

View.AddConstraints(
    formView.WidthOf(View),
    formView.WithSameCenterY(View);
    ...
);

I didn´t test any of this code, so it´s probably wrong at some point, but you get the idea...

xleon
  • 6,201
  • 3
  • 36
  • 52
  • The problem is that the top of the formView was aligned to the CenterY of the View, so the subviews was rendered in the middle/bottom of the screen. I need to align the center of formView (with the subviews already added) with CenterY of View. – Rafael de Andrade Aug 10 '16 at 19:26
  • Try `formView.WithSameCenterY(View)` – xleon Aug 10 '16 at 20:39
  • I managed to make this work changing the constraints order. First View.AddConstraints... and them formView.AddConstraints... and the most important is define some height to the formView that is greater than or equal to the sum of all subviews heights and margins. A red background color in the formView is helpful to make some tests. Thanks! – Rafael de Andrade Aug 12 '16 at 03:36