Xamarin.iOS
Disposición automática en Xamarin.iOS
Buscar..
Agregar restricciones con iOS 9+ Anclajes de diseño
// Since the anchor system simply returns constraints, you still need to add them somewhere.
View.AddConstraints(
new[] {
someLabel.TopAnchor.ConstraintEqualTo(TopLayoutGuide.GetBottomAnchor()),
anotherLabel.TopAnchor.ConstraintEqualTo(someLabel.BottomAnchor, 6),
oneMoreLabel.TopAnchor.ConstraintEqualTo(anotherLabel.BottomAnchor, 6),
oneMoreLabel.BottomAnchor.ConstraintGreaterThanOrEqualTo(BottomLayoutGuide.GetTopAnchor(), -10),
}
);
Agregar restricciones usando el lenguaje de formato visual (VFL)
// Using Visual Format Language requires a special look-up dictionary of names<->views.
var views = new NSDictionary(
nameof(someLabel), someLabel,
nameof(anotherLabel), anotherLabel,
nameof(oneMoreLabel), oneMoreLabel
);
// It can also take a look-up dictionary for metrics (such as size values).
// Since we are hard-coding those values in this example, we can give it a `null` or empty dictionary.
var metrics = (NSDictionary)null;
// Add the vertical constraints to stack everything together.
// `V:` = vertical
// `|…|` = constrain to super view (`View` for this example)
// `-10-` = connection with a gap of 10 pixels (could also be a named parameter from the metrics dictionary)
// `-[viewName]-` = connection with a control by name looked up in views dictionary (using C# 6 `nameof` for refactoring support)
var verticalConstraints = NSLayoutConstraint.FromVisualFormat(
$"V:|-20-[{nameof(someLabel)}]-6-[{nameof(anotherLabel)}]-6-[{nameof(oneMoreLabel)}]->=10-|",
NSLayoutFormatOptions.AlignAllCenterX,
metrics,
views
);
View.AddConstraints(verticalConstraints);
Es posible que algunos tipos de restricciones, como las relaciones de aspecto , no se puedan transmitir en la sintaxis de Visual Format Language (VFL) y deben llamarse directamente a los métodos apropiados.
Utilizando Cirrious.FluentLayout
Usando NuGet
Install-Package Cirrious.FluentLayout
Un ejemplo expandido basado en el ejemplo de inicio en la página de GitHub , un nombre simple, etiquetas de apellido y campos todos apilados uno encima del otro:
public override void ViewDidLoad()
{
//create our labels and fields
var firstNameLabel = new UILabel();
var lastNameLabel = new UILabel();
var firstNameField = new UITextField();
var lastNameField = new UITextField();
//add them to the View
View.AddSubviews(firstNameLabel, lastNameLabel, firstNameField, lastNameField);
//create constants that we can tweak if we do not like the final layout
const int vSmallMargin = 5;
const int vMargin = 20;
const int hMargin = 10;
//add our constraints
View.SubviewsDoNotTranslateAutoresizingMaskIntoConstraints();
View.AddConstraints(
firstNameLabel.WithSameTop(View).Plus(vMargin),
firstNameLabel.AtLeftOf(View).Plus(hMargin),
firstNameLabel.WithSameWidthOf(View),
firstNameField.WithSameWidth(firstNameLabel),
firstNameField.WithSameLeft(firstNameLabel),
firstNameField.Below(firstNameLabel).Plus(vSmallMargin),
lastNameLabel.Below(firstNameField).Plus(vMargin),
lastNameLabel.WithSameLeft(firstNameField),
lastNameLabel.WithSameWidth(firstNameField),
lastNameField.Below(lastNameLabel).Plus(vSmallMargin),
lastNameField.WithSameWidth(lastNameLabel),
lastNameField.WithSameLeft(lastNameLabel));
}
Agregando restricciones con mampostería
Masonry es una biblioteca para objetivo-c, pero xamarin ha creado un enlace para él y lo creó como un paquete nuget https://www.nuget.org/packages/Masonry/ .
Instalación de nuget
Install-Package Masonry
Esto centra un botón a 100 puntos debajo del punto central de la vista contenedora y establece un ancho entre 200 y 400 puntos
this.loginBtn.MakeConstraints(make =>
{
make.Width.GreaterThanOrEqualTo(new NSNumber(200));
make.Width.LessThanOrEqualTo(new NSNumber(400));
make.Center.EqualTo(this.View).CenterOffset(new CGPoint(0, 100));
});
Esto establece una imagen escalada de 100 puntos sobre el punto central de la vista que contiene y luego establece el ancho al ancho de la vista que contiene con un multiplicador de 0,5 que significa 50% del ancho. Luego establece la altura al ancho multiplicado por la relación de aspecto que hace que la imagen se amplíe pero mantiene su relación de aspecto correcta.
this.logo.MakeConstraints(make =>
{
make.Center.EqualTo(this.View).CenterOffset(new CGPoint(0, -100));
make.Width.EqualTo(this.View).MultipliedBy(0.5f);
make.Height.EqualTo(this.logo.Width()).MultipliedBy(0.71f);
});