Xamarin.iOS
Automatisches Layout in Xamarin.iOS

Hinzufügen von Einschränkungen mit iOS 9+ Layout-Ankern

// 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),
    }
);

Hinzufügen von Einschränkungen mit der Visual Format Language (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);

Möglicherweise finden Sie einige Einschränkungstypen, z. B. Seitenverhältnisse , nicht in der VFL-Syntax (Visual Format Language) und müssen die entsprechenden Methoden direkt aufrufen.

Verwendung von Cirrious.FluentLayout

NuGet verwenden

Install-Package Cirrious.FluentLayout

Ein erweitertes Beispiel basierend auf dem Starter-Beispiel auf der GitHub- Seite, ein einfacher Vorname, Nachname-Beschriftungen und Felder, die alle aufeinander gestapelt sind:

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));
}

Hinzufügen von Einschränkungen mit Mauerwerk

Masonry ist eine Bibliothek für Objective-c, aber Xamarin hat dafür eine Bindung erstellt und als Nuget-Paket https://www.nuget.org/packages/Masonry/ erstellt .

Nuget installieren

Install-Package Masonry

Dies zentriert eine Schaltfläche 100 Punkte unter dem Mittelpunkt der enthaltenden Ansicht und legt eine Breite zwischen 200 und 400 Punkten fest

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));
});

Dadurch wird ein skaliertes Bild um 100 Punkte oberhalb des Mittelpunkts der enthaltenden Ansicht festgelegt. Dann wird die Breite mit einem Multiplikator von 0,5 auf die Breite der enthaltenden Ansicht festgelegt, dh 50% der Breite. Dann wird die Höhe auf die Breite multipliziert mit dem Seitenverhältnis gesetzt, wodurch das Bild skaliert wird, das korrekte Seitenverhältnis jedoch beibehalten wird

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);
});