Xamarin.iOS
Automatische lay-out in Xamarin.iOS

Beperkingen toevoegen met iOS 9+ lay-outankers

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

Beperkingen toevoegen met behulp van 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);

Het kan zijn dat sommige soorten beperkingen, zoals beeldverhoudingen , niet kunnen worden overgebracht in de syntaxis van Visual Format Language (VFL) en dat u de juiste methoden rechtstreeks moet aanroepen.

Cirrious.FluentLayout gebruiken

NuGet gebruiken

Install-Package Cirrious.FluentLayout

Een uitgebreid voorbeeld op basis van het startervoorbeeld op de GitHub- pagina, een eenvoudige voornaam, achternaamlabels en velden die allemaal op elkaar zijn gestapeld:

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

Beperkingen toevoegen met metselwerk

Metselwerk is een bibliotheek voor doelstelling-c, maar xamarin heeft er een binding voor gemaakt en gemaakt als een nuget-pakket https://www.nuget.org/packages/Masonry/ .

Nuget installeren

Install-Package Masonry

Dit centreert een knop 100 punten onder het middelpunt van het bevattende aanzicht en stelt een breedte in tussen 200 en 400 punten

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

Dit stelt een geschaalde afbeelding in op 100 punten boven het middelpunt van het bevattende aanzicht en stelt vervolgens de breedte in op de breedte van het bevattende aanzicht met een muliplier van 0,5 wat 50% van de breedte betekent. Vervolgens wordt de hoogte ingesteld op de breedte vermenigvuldigd met de beeldverhouding, waardoor het beeld wordt geschaald maar de juiste beeldverhouding behouden blijft

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