De grootte van een weergave opgeven

  • 7 minuten

Het ontwerpen van een gebruikersinterface die consistent is op meerdere apparaten is moeilijk omdat apparaten verschillende grootten kunnen hebben en verschillende pixeldichtheid hebben. Denk na over de verschillende apparaten die beschikbaar zijn: mobiel, tablet, desktop, enzovoort. Hoe maken we een gebruikersinterface die er op elk lijkt?

.NET Multi-Platform App UI (MAUI) biedt lay-outpanelen om u te helpen consistente gebruikersinterfaces te bouwen. Het indelingspaneel is verantwoordelijk voor het aanpassen en positioneren van de weergaven van de onderliggende elementen. In deze les leert u hoe het lay-outsysteem werkt in .NET MAUI. Met name kijken we hoe weergaven standaard worden aangepast en hoe we een specifieke grootte en positie voor een weergave tijdens runtime kunnen aanvragen.

Wat is een indelingspaneel?

Een indelingspaneel is een .NET MAUI-container met een verzameling onderliggende weergaven en bepaalt de grootte en positie ervan. De indelingsvensters worden automatisch opnieuw berekend wanneer de grootte van de app verandert; Bijvoorbeeld wanneer de gebruiker het apparaat draait.

Notitie

De termweergave of onderliggende weergave verwijst naar een besturingselement dat in een indelingsvenster wordt geplaatst. Een weergave kan een label, een knop, een invoerveld of een ander type visueel element zijn dat wordt ondersteund door .NET MAUI.

.NET MAUI heeft meerdere indelingspanelen waaruit u kunt kiezen. Elk deelvenster beheert de onderliggende weergaven anders. In de volgende afbeelding ziet u een conceptueel overzicht van enkele van de meest voorkomende opties.

Afbeelding met representatieve StackLayout-, AbsoluteLayout-, FlexLayout- en Grid-ontwerpen.

  • StackLayout: rangschikt de onderliggende weergaven in één rij of kolom. Naast StackLayout, er is ook een geoptimaliseerd VerticalStackLayout en HorizontalStackLayout wanneer u de afdrukstand niet hoeft te wijzigen.
  • AbsoluteLayout: rangschikt de onderliggende weergaven met behulp van x- en y-coördinaten.
  • Grid: rangschikt de onderliggende weergaven in cellen die zijn gemaakt op basis van het snijpunt van rijen en kolommen.
  • FlexLayout: rangschikt de onderliggende weergaven als een StackLayout , behalve dat u ze kunt verpakken als ze niet in één rij of kolom passen.

Notitie

Er is ook een vijfde type indelingspaneel genaamd, RelativeLayoutwaarmee u kunt opgeven hoe u onderliggende weergaven ten opzichte van elkaar kunt rangschikken. U moet het FlexLayout besturingselement gebruiken in plaats van RelativeLayout omdat het beter presteert. RelativeLayout is opgenomen in .NET MAUI voor achterwaartse compatibiliteit met oudere Xamarin-apps.

Het gebruikelijke proces voor het bouwen van een .NET MAUI-pagina is het maken van een indelingsvenster en vervolgens onderliggende weergaven eraan toevoegen. Wanneer u een weergave aan een indeling toevoegt, kunt u de grootte en positie ervan beïnvloeden. Het deelvenster heeft echter de definitieve uitspraak op basis van de interne indelingsalgoritmen.

Voordat u bekijkt hoe u een specifieke grootte voor een weergave aanvraagt, laten we eens kijken hoe de weergaven van het indelingssysteem standaard worden weergegeven.

Standaardgrootte van een weergave

Als u de grootte van een weergave niet opgeeft, wordt deze automatisch zo groot dat deze passend is om de inhoud te omzeilen. Denk bijvoorbeeld aan deze Extensible Application Markup Language (XAML):

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

In dit voorbeeld wordt een label gedefinieerd om het woord Hello op een zilveren achtergrond weer te geven. Omdat u de grootte niet opgeeft, wordt het label automatisch aangepast aan het woord Hello. In de volgende afbeelding ziet u het label dat op een Android-apparaat wordt weergegeven:

Schermopname van een label dat wordt weergegeven op een Android-apparaat dat het woord Hello in het midden weergeeft met een zilveren achtergrond.

Notitie

U kunt de achtergrondkleur van het label instellen om te bepalen hoe groot het is tijdens runtime. Dit is een goede foutopsporingstechniek om rekening mee te houden bij het bouwen van uw gebruikersinterface.

De grootte van een weergave opgeven

Wanneer u een gebruikersinterface maakt, is het gebruikelijk om de grootte van een weergave te bepalen. Stel dat u een aanmeldingspagina maakt en u wilt dat de aanmeldingsknop precies de helft van de breedte van het scherm is. Als u de standaardgrootte voor een weergave hebt gebruikt, is de knop alleen de grootte van de tekstaanmelding. Die grootte is niet groot genoeg, dus u moet zelf de grootte opgeven.

De View basisklasse definieert twee eigenschappen die van invloed zijn op de grootte van een weergave: WidthRequest en HeightRequest. WidthRequest hiermee kunt u de breedte opgeven en HeightRequest kunt u de hoogte opgeven. Beide eigenschappen zijn van het type double.

Hier volgt een voorbeeld van het opgeven van de breedte en hoogte van een label in XAML:

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

Het resultaat ziet er als volgt uit:

Schermopname van een label dat wordt weergegeven op een Android-apparaat dat het woord Hello in het midden weergeeft met een zilveren achtergrond. De grootte van het label is expliciet

Notitie

Het label is nog steeds gecentreerd, hoewel de tekst voor het label zich niet in het midden van het label bevindt.

Een ding dat de moeite waard is om te noteren, is de namen van deze eigenschappen. Beide eigenschappen bevatten de woordaanvraag. Dit woord betekent dat het lay-outpaneel deze tijdens runtime mogelijk niet respecteert. In het indelingsvenster worden deze waarden gelezen tijdens de berekeningen van de grootte en wordt geprobeerd om de aanvragen te verwerken, indien mogelijk. Als er onvoldoende ruimte is, mag het indelingsvenster de waarden negeren.

Grootte-eenheden

Wanneer u instelt WidthRequest en HeightRequest, gebruikt u letterlijke waarden zoals 100. Op .NET MAUI-niveau hebben deze waarden geen eenheden. Het zijn geen punten of pixels. Het zijn gewoon waarden van het type double. .NET MAUI geeft deze waarden tijdens runtime door aan het onderliggende besturingssysteem. Het is het besturingssysteem dat de context biedt die nodig is om te bepalen wat de getallen betekenen:

  • In iOS worden de waarden punten genoemd.
  • Op Android zijn ze dichtheidsonafhankelijke pixels.

Weergegeven grootte van een weergave

Omdat het aan het indelingsdeelvenster is om de grootte van een weergave te bepalen, kunt u de werkelijke grootte tijdens runtime niet gebruiken WidthRequest en HeightRequest vertellen. Stel dat u voor uw label hebt ingesteld WidthRequest100 , maar dat het deelvenster niet voldoende ruimte heeft om aan de aanvraag te voldoen. In plaats daarvan geeft het deelvenster uw label een breedte van 80. Als u op dit moment de waarde van de WidthRequest eigenschap controleert, wordt ondanks de weergegeven waarde 100opgegeven80.

Om dit probleem op te lossen, definieert de View basisklasse twee andere eigenschappen die worden aangeroepen Width en Height. Deze eigenschappen zijn van het type double en vertegenwoordigen de weergegeven breedte en hoogte van een weergave. Gebruik de Width en Height eigenschappen wanneer u de grootte van een weergave ophaalt.

De positie van een weergave opgeven

U moet ook de positie van een weergave instellen. Denk er bijvoorbeeld aan dat u in het voorbeeld van de aanmeldingspagina de grootte van de aanmeldingsknop wilt aanpassen aan de helft van de breedte van het scherm. Omdat de aanmeldingsknop niet de volledige breedte van het scherm is, is er ruimte beschikbaar om deze te verplaatsen. U kunt deze aan de linkerkant, aan de rechterkant of in het midden van het scherm plaatsen.

De View basisklasse heeft twee eigenschappen die u gebruikt om de positie van een weergave in te stellen: VerticalOptions en HorizontalOptions. Deze instellingen zijn van invloed op de positie van de weergave binnen de rechthoek die hiervoor is toegewezen door het indelingsvenster. U kunt opgeven dat de weergave moet worden uitgelijnd op een van de vier randen van de rechthoek. Of u wilt dat deze de hele rechthoek bezetten.

Het opgeven van een waarde voor VerticalOptions of HorizontalOptions is lastiger dan het instellen van de grootte omdat ze van het type LayoutOptionszijn.

Wat is het type LayoutOptions?

LayoutOptions is een C#-type dat twee indelingsvoorkeuren bevat, Alignment en Expands. Beide eigenschappen zijn gerelateerd aan plaatsing, maar ze zijn niet aan elkaar gerelateerd. De definitie van het type ziet er als volgt uit:

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

Vervolgens kijken we nader Alignment naar, omdat dit de meest voorkomende en intuïtieve indelingsoptie is.

Wat is de opsomming LayoutAlignment?

LayoutAlignment is een opsomming die vier waarden bevat: Start, Center, Enden Fill. U kunt deze waarden gebruiken om te bepalen hoe de onderliggende weergave wordt geplaatst in de rechthoek die eraan is gegeven via het indelingsvenster. Bekijk bijvoorbeeld de volgende code en Android-schermopname:

<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>

Schermopname van vier labels die op iOS worden weergegeven met verschillende HorizontalOptions: Begin aan de linkerkant, Gecentreerd, End to the right side en Fill over het volledige scherm.

In het voorbeeld wordt een verticale StackLayout weergave gebruikt, zodat elke onderliggende weergave een rij krijgt. HorizontalOptions bepaalt de positie van de weergave in de rij.

Wat is Expands?

De tweede eigenschap van de LayoutOptions struct is Expands. De Expands eigenschap is een bool eigenschap die in Xamarin.Forms een weergave toestaat in een StackLayout om extra ruimte aan te vragen indien beschikbaar. Deze eigenschap is nu verouderd en wordt niet meer gebruikt in .NET MAUI. Later verkennen we hoe we hetzelfde type uitbreiding in de eenheid Grid op de indeling kunnen bereiken.

Kenniscontrole

1.

Wat doet een LayoutPanel ?