Ange storleken på en vy

  • 7 minuter

Det är svårt att utforma ett användargränssnitt som är konsekvent på flera enheter eftersom enheterna kan vara olika storlekar och ha olika pixeltätheter. Tänk på de olika enheter som är tillgängliga: mobil, surfplatta, skrivbord och så vidare. Hur skapar vi ett användargränssnitt som ser likadant ut på var och en?

.NET Multi-Platform App UI (MAUI) innehåller layoutpaneler som hjälper dig att skapa konsekventa användargränssnitt. Layoutpanelen ansvarar för att storleksanpassa och placera vyerna för dess underordnade objekt. I den här lektionen får du lära dig hur layoutsystemet fungerar i .NET MAUI. Vi tittar särskilt på hur vyerna är storleksanpassade som standard och hur du begär en viss storlek och position för en vy vid körning.

Vad är en layoutpanel?

En layoutpanel är en .NET MAUI-container som innehåller en samling underordnade vyer och avgör deras storlek och position. Layoutpanelerna beräknas automatiskt om när appens storlek ändras. till exempel när användaren roterar enheten.

Kommentar

Termen vy eller underordnad vy refererar till en kontroll som placeras på en layoutpanel. En vy kan vara en etikett, en knapp, ett postfält eller någon annan typ av visuellt element som stöds av .NET MAUI.

.NET MAUI har flera layoutpaneler som du kan välja mellan. Varje panel hanterar sina underordnade vyer på olika sätt. Följande bild visar en konceptuell översikt över några av de vanligaste alternativen.

Bild som visar representativa StackLayout-, AbsoluteLayout-, FlexLayout- och Grid-designer.

  • StackLayout: ordnar sina underordnade vyer i en enda rad eller kolumn. Förutom StackLayoutfinns det även en optimerad VerticalStackLayout och HorizontalStackLayout när du inte behöver ändra orientering.
  • AbsoluteLayout: ordnar sina underordnade vyer med hjälp av x- och y-koordinater.
  • Grid: ordnar sina underordnade vyer i celler som skapas från skärningspunkten mellan rader och kolumner.
  • FlexLayout: ordnar dess underordnade vyer som en StackLayout förutom att du kan omsluta dem om de inte får plats i en enda rad eller kolumn.

Kommentar

Det finns också en femte typ av layoutpanel med namnet , RelativeLayoutsom gör att du kan ange hur underordnade vyer ska ordnas i förhållande till varandra. Du bör använda FlexLayout kontrollen i stället för RelativeLayout eftersom den presterar bättre. RelativeLayout ingår i .NET MAUI för bakåtkompatibilitet med äldre Xamarin-appar.

Den typiska processen för att skapa en .NET MAUI-sida är att skapa en layoutpanel och sedan lägga till underordnade vyer i den. När du lägger till en vy i en layout kan du påverka storleken och positionen för den. Panelen har dock det sista inflytandet baserat på dess interna layoutalgoritmer.

Innan du tittar på hur du begär en viss storlek för en vy ska vi se hur layoutsystemstorlekarna visas som standard.

Standardstorlek för en vy

Om du inte anger storleken på en vy blir den automatiskt tillräckligt stor för att passa runt innehållet. Tänk till exempel på det här XAML-språket (Extensible Application Markup Language):

<Label
    Text="Hello"
    BackgroundColor="Silver"
    VerticalOptions="Center"
    HorizontalOptions="Center" 
    FontSize="40"/>

I det här exemplet definieras en etikett för att visa ordet Hello i en silverbakgrund. Eftersom du inte anger storleken, storleksanpassas etiketten automatiskt för att passa runt ordet Hello. Följande bild visar etiketten som återges på en Android-enhet:

Skärmbild som visar en etikett som återges på en Android-enhet som visar ordet Hello i mitten med silverbakgrund.

Kommentar

Du kan ange bakgrundsfärgen för etiketten så att du kan avgöra hur stor den är vid körning. Det här är en bra felsökningsteknik att tänka på när du skapar användargränssnittet.

Ange storleken på en vy

När du skapar ett användargränssnitt är det vanligt att du vill styra storleken på en vy. Anta till exempel att du skapar en inloggningssida och vill att inloggningsknappen ska vara exakt hälften av skärmens bredd. Om du använde standardstorleken för en vy skulle knappen bara vara storleken på texten Logga in. Den storleken är inte tillräckligt stor, så du måste ange storleken själv.

Basklassen View definierar två egenskaper som påverkar storleken på en vy: WidthRequest och HeightRequest. WidthRequest låter dig ange bredden och HeightRequest låter dig ange höjden. Båda egenskaperna är av typen double.

Här är ett exempel som visar hur du anger en etiketts bredd och höjd i XAML:

<Label
    Text="Hello"
    BackgroundColor="Silver"
    VerticalOptions="Center"
    HorizontalOptions="Center"
    WidthRequest="100"
    HeightRequest="300"
    FontSize="40"/>

Resultatet ser ut så här:

Skärmbild som visar en etikett som återges på en Android-enhet som visar ordet Hello i mitten med silverbakgrund. Etiketten har en explicit storlek

Kommentar

Etiketten är fortfarande centrerad, även om texten för etiketten inte är i mitten av etiketten.

En sak som är värd att notera är namnen på dessa egenskaper. Båda egenskaperna innehåller ordbegäran. Det här ordet innebär att layoutpanelen kanske inte respekterar dem vid körning. Layoutpanelen läser dessa värden under storleksberäkningarna och försöker hantera begäranden om det kan. Om det inte finns tillräckligt med utrymme kan layoutpanelen ignorera värdena.

Storleksenheter

När du anger WidthRequest och HeightRequestanvänder du literalvärden som 100. På .NET MAUI-nivå har dessa värden inte enheter. De är inte punkter eller bildpunkter. Det är bara värden av typen double. .NET MAUI skickar dessa värden till det underliggande operativsystemet vid körning. Det är operativsystemet som ger den kontext som behövs för att avgöra vad siffrorna betyder:

  • I iOS kallas värdena punkter.
  • På Android är de densitetsoberoende pixlar.

Renderad storlek för en vy

Eftersom det är upp till layoutpanelen att fastställa storleken på en vy kan du inte använda WidthRequest och HeightRequest ange den faktiska storleken vid körning. Anta till exempel att du anger WidthRequest till 100 för etiketten, men panelen har inte tillräckligt med utrymme för att uppfylla begäran. I stället ger panelen etiketten en bredd på 80. Om du nu kontrollerar värdet för WidthRequest egenskapen står 100 det även om det renderade värdet är 80.

För att lösa det här problemet definierar basklassen View två andra egenskaper som heter Width och Height. Dessa egenskaper är av typen double och representerar den renderade bredden och höjden på en vy. Width Använd egenskaperna och Height när du hämtar storleken på en vy.

Ange positionen för en vy

Du måste också ange positionen för en vy. Kom till exempel ihåg att i inloggningssidans exempel ville du ändra storleken på inloggningsknappen så att den är hälften så bred som skärmen. Eftersom inloggningsknappen inte är hela skärmens bredd finns det utrymme att flytta runt den. Du kan placera den på vänster sida, på höger sida eller i mitten av skärmen.

Basklassen View har två egenskaper som du använder för att ange positionen för en vy: VerticalOptions och HorizontalOptions. De här inställningarna påverkar hur vyn placeras i den rektangel som tilldelats den av layoutpanelen. Du kan ange att du vill att vyn ska justeras till en av rektangelns fyra kanter. Eller att du vill att den ska uppta hela rektangeln.

Det är svårare att ange ett värde för VerticalOptions eller HorizontalOptions än att ange storleken eftersom de är av typen LayoutOptions.

Vad är typen LayoutAlternativ?

LayoutOptions är en C#-typ som kapslar in två layoutinställningar Alignment och Expands. Båda egenskaperna är relaterade till positionering, men de är inte relaterade till varandra. Så här ser definitionen av typen ut:

public struct LayoutOptions
{
    public LayoutAlignment Alignment { get; set; }
    public bool Expands { get; set; }
    ...
}

Sedan tittar vi närmare på Alignment eftersom det är det vanligaste och mest intuitiva layoutalternativet.

Vad är uppräkning av LayoutAlignment?

LayoutAlignment är en uppräkning som innehåller fyra värden: Start, Center, Endoch Fill. Du kan använda dessa värden för att styra hur den underordnade vyn placeras i den rektangel som den ges av layoutpanelen. Tänk till exempel på följande kod och Android-skärmbild:

<StackLayout>
    <Label Text="Start" HorizontalOptions="Start" BackgroundColor="Silver" FontSize="40" />
    <Label Text="Center" HorizontalOptions="Center" BackgroundColor="Silver"  FontSize="40" />
    <Label Text="End" HorizontalOptions="End" BackgroundColor="Silver"  FontSize="40"/>
    <Label Text="Fill" HorizontalOptions="Fill" BackgroundColor="Silver"  FontSize="40"/>
</StackLayout>

Skärmbild som visar fyra etiketter som återges på iOS med olika HorizontalOptions: Börja till vänster, Centrerat, Slut till höger och Fyllning som sträcker sig över hela skärmen.

I exemplet används en lodrät StackLayout så att varje underordnad vy får en rad. HorizontalOptions bestämmer vyns position inom dess rad.

Vad är Expanderar?

Den andra egenskapen för struct är LayoutOptionsExpands. Egenskapen Expands är en bool som i Xamarin.Forms tillät en vy i en StackLayout för att begära extra utrymme om det finns något tillgängligt. Den här egenskapen är nu föråldrad och används inte längre i .NET MAUI. Senare utforskar vi hur du uppnår samma typ av utökning i enheten Grid i layouten.