Auswählen eines Xamarin.Forms Layouts

  • Artikel

Beispiel herunterladen Das Beispiel herunterladen

Xamarin.Forms mit Layoutklassen können Sie Ui-Steuerelemente in Ihrer Anwendung anordnen und gruppieren. Die Auswahl einer Layoutklasse erfordert Kenntnisse darüber, wie das Layout seine untergeordneten Elemente positioniert und wie das Layout seine untergeordneten Elemente größen. Darüber hinaus kann es erforderlich sein, Layouts zu verschachteln, um ihr gewünschtes Layout zu erstellen.

Die folgende Abbildung zeigt typische Layouts, die mit den Standard Xamarin.Forms Layoutklassen erreicht werden können:

Die Standard Layoutklassen in Xamarin.Forms

StackLayout

Ein StackLayout organisiert Elemente in einem eindimensionalen Stapel, entweder horizontal oder vertikal. Die Orientation -Eigenschaft gibt die Richtung der Elemente an, und die Standardausrichtung ist Vertical. StackLayout wird in der Regel verwendet, um einen Unterabschnitt der Benutzeroberfläche auf einer Seite anzuordnen.

Der folgende XAML-Code zeigt, wie eine Vertikale erstellt wird StackLayout , die drei Label Objekte enthält:

<StackLayout Margin="20,35,20,25">
    <Label Text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout." />
    <Label Text="The Padding property can be set to specify the distance between the StackLayout and its children." />
    <Label Text="The Spacing property can be set to specify the distance between views in the StackLayout." />
</StackLayout>

StackLayoutWenn die Größe eines Elements nicht explizit festgelegt ist, wird es erweitert, um die verfügbare Breite oder Höhe auszufüllen, wenn die Orientation -Eigenschaft auf Horizontalfestgelegt ist.

Ein StackLayout wird häufig als übergeordnetes Layout verwendet, das andere untergeordnete Layouts enthält. Ein sollte jedoch nicht verwendet werden, StackLayout um ein Grid Layout mithilfe einer Kombination von StackLayout Objekten zu reproduzieren. Der folgende Code zeigt ein Beispiel für diese schlechte Vorgehensweise:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Details.HomePage"
             Padding="0,20,0,0">
    <StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Name:" />
            <Entry Placeholder="Enter your name" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Age:" />
            <Entry Placeholder="Enter your age" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Occupation:" />
            <Entry Placeholder="Enter your occupation" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Address:" />
            <Entry Placeholder="Enter your address" />
        </StackLayout>
    </StackLayout>
</ContentPage>

Dies ist Vergeudung, da unnötige Layoutberechnungen durchgeführt werden. Stattdessen kann das gewünschte Layout besser erreicht werden, indem ein Gridverwendet wird.

Tipp

Stellen Sie bei Verwendung von sicher StackLayout, dass nur ein untergeordnetes Element auf LayoutOptions.Expandsfestgelegt ist. Mit dieser Eigenschaft wird sichergestellt, dass das angegebene untergeordnete Element den größten Bereich belegt, der im StackLayout verfügbar ist. Zudem ist es Vergeudung, diese Berechnungen mehrmals durchzuführen.

Weitere Informationen finden Sie unter Xamarin.Forms StackLayout.

Raster

Ein Grid wird zum Anzeigen von Elementen in Zeilen und Spalten verwendet, die proportionale oder absolute Größen aufweisen können. Die Zeilen und Spalten eines Rasters werden mit den RowDefinitions Eigenschaften und ColumnDefinitions angegeben.

Verwenden Sie die Grid.Column angefügten Eigenschaften undGrid.Row, um Elemente in bestimmten Grid Zellen zu positionieren. Verwenden Sie die Grid.RowSpan angefügten Eigenschaften und Grid.ColumnSpan , damit Sich Elemente über mehrere Zeilen und Spalten erstrecken.

Hinweis

Ein Grid Layout sollte nicht mit Tabellen verwechselt werden und ist nicht für tabellarische Daten vorgesehen. Im Gegensatz zu HTML-Tabellen dient ein Grid zum Anordnen von Inhalten. Zum Anzeigen tabellarischer Daten sollten Sie eine ListView, CollectionView oder TableView verwenden.

Im folgenden XAML-Code wird gezeigt, wie sie mit Grid zwei Zeilen und zwei Spalten erstellt werden:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>    
    <Label Text="Column 0, Row 0"
           WidthRequest="200" />
    <Label Grid.Column="1"
           Text="Column 1, Row 0" />
    <Label Grid.Row="1"
           Text="Column 0, Row 1" />
    <Label Grid.Column="1"
           Grid.Row="1"
           Text="Column 1, Row 1" />
</Grid>

In diesem Beispiel funktioniert die Größenanpassung wie folgt:

  • Jede Zeile hat eine explizite Höhe von 50 geräteunabhängigen Einheiten.
  • Die Breite der ersten Spalte ist auf Autofestgelegt und daher so breit wie für die untergeordneten Elemente erforderlich. In diesem Fall sind es 200 geräteunabhängige Einheiten breit, um die Breite des ersten Labelaufzunehmen.

Der Leerraum kann innerhalb einer Spalte oder Zeile mithilfe der automatischen Größenanpassung verteilt werden, wodurch Spalten und Zeilen an ihren Inhalt angepasst werden können. Dies wird erreicht, indem die Höhe eines RowDefinitionoder die Breite eines ColumnDefinitionauf Autofestgelegt wird. Die proportionale Größenanpassung kann auch verwendet werden, um den verfügbaren Platz auf die Zeilen und Spalten des Rasters nach gewichteten Proportionen zu verteilen. Dies wird erreicht, indem die Höhe eines RowDefinitionoder die Breite eines ColumnDefinitionauf einen Wert festgelegt wird, der den * -Operator verwendet.

Achtung

Stellen Sie sicher, dass so wenige Zeilen und Spalten wie möglich auf die Auto Größe festgelegt sind. Durch jede Zeile oder Spalte, deren Größe automatisch angepasst wird, wird verursacht, dass die Layout-Engine zusätzliche Layoutberechnungen durchführt. Verwenden Sie stattdessen wenn möglich Zeilen und Spalten mit festen Größen. Alternativ können Sie Zeilen und Spalten so festlegen, dass sie einen proportionalen Speicherplatz mit dem GridUnitType.Star Enumerationswert belegen.

Weitere Informationen finden Sie unter Xamarin.Forms Raster.

FlexLayout

Ein FlexLayout ähnelt einem StackLayout , da untergeordnete Elemente entweder horizontal oder vertikal in einem Stapel angezeigt werden. Ein FlexLayout kann jedoch auch seine untergeordneten Elemente umschließen, wenn es zu viele gibt, um in eine einzelne Zeile oder Spalte zu passen, und ermöglicht außerdem eine präzisere Kontrolle der Größe, Ausrichtung und Ausrichtung seiner untergeordneten Elemente.

Der folgende XAML-Code zeigt, wie Sie eine FlexLayout erstellen, die ihre Ansichten in einer einzelnen Spalte anzeigt:

<FlexLayout Direction="Column"
            AlignItems="Center"
            JustifyContent="SpaceEvenly">
    <Label Text="FlexLayout in Action" />
    <Button Text="Button" />
    <Label Text="Another Label" />
</FlexLayout>

In diesem Beispiel funktioniert das Layout wie folgt:

  • Die Direction -Eigenschaft ist auf Columnfestgelegt, wodurch die untergeordneten Elemente von FlexLayout in einer einzelnen Spalte von Elementen angeordnet werden.
  • Die AlignItems -Eigenschaft ist auf Centerfestgelegt, wodurch jedes Element horizontal zentriert wird.
  • Die JustifyContent -Eigenschaft ist auf SpaceEvenlyfestgelegt, wodurch alle übrig gebliebenen vertikalen Abstände gleichmäßig zwischen allen Elementen und oberhalb des ersten Elements und unterhalb des letzten Elements zugeordnet werden.

Weitere Informationen finden Sie unter Xamarin.Forms FlexLayout.

RelativeLayout

Ein RelativeLayout wird verwendet, um Elemente relativ zu den Eigenschaften des Layouts oder gleichgeordneter Elemente zu positionieren und zu vergrößern. Standardmäßig wird ein Element in der oberen linken Ecke des Layouts positioniert. Ein RelativeLayout kann verwendet werden, um Benutzeroberflächen zu erstellen, die proportional über Gerätegrößen hinweg skaliert werden.

Innerhalb von RelativeLayoutwerden Positionen und Größen als Einschränkungen angegeben. Einschränkungen verfügen Factor über Eigenschaften und Constant , die verwendet werden können, um Positionen und Größen als Vielfache (oder Bruchteile) von Eigenschaften anderer Objekte sowie eine Konstante zu definieren. Darüber hinaus können Konstanten negativ sein.

Hinweis

Ein RelativeLayout unterstützt das Positionieren von Elementen außerhalb seiner eigenen Grenzen.

Der folgende XAML-Code zeigt, wie Elemente in einem RelativeLayoutanordnen:

<RelativeLayout>
    <BoxView Color="Blue"
             HeightRequest="50"
             WidthRequest="50"
             RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0}"
             RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0}" />
    <BoxView Color="Red"
             HeightRequest="50"
             WidthRequest="50"
             RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=.85}"
             RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0}" />
    <BoxView x:Name="pole"
             Color="Gray"
             WidthRequest="15"
             RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=.75}"
             RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=.45}"
             RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=.25}" />
    <BoxView Color="Green"
             RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=.10, Constant=10}"
             RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=.2, Constant=20}"
             RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=pole, Property=X, Constant=15}"
             RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=pole, Property=Y, Constant=0}" />
</RelativeLayout>

In diesem Beispiel funktioniert das Layout wie folgt:

  • Das Blau BoxView erhält eine explizite Größe von 50 x 50 geräteunabhängigen Einheiten. Es wird in der oberen linken Ecke des Layouts platziert, was die Standardposition ist.
  • Das Rote BoxView erhält eine explizite Größe von 50 x 50 geräteunabhängigen Einheiten. Sie wird in der oberen rechten Ecke des Layouts platziert.
  • Das Grau BoxView erhält eine explizite Breite von 15 geräteunabhängigen Einheiten, und seine Höhe ist auf 75 % der Höhe des übergeordneten Elements festgelegt.
  • BoxView Grün erhält keine explizite Größe. Seine Position wird relativ zum BoxView benannten polefestgelegt.

Warnung

Vermeiden Sie möglichst die Verwendung eines RelativeLayout. Dies führt dazu, dass die CPU erheblich mehr Arbeit übernehmen muss.

Weitere Informationen finden Sie unter Xamarin.Forms RelativeLayout.

AbsoluteLayout

Ein AbsoluteLayout wird verwendet, um Elemente mit expliziten Werten oder Werten relativ zur Größe des Layouts zu positionieren und zu vergrößern. Die Position wird durch die linke obere Ecke des untergeordneten Elements relativ zur oberen linken Ecke des AbsoluteLayoutangegeben.

Ein AbsoluteLayout sollte als spezielles Layout angesehen werden, das nur verwendet werden kann, wenn Sie untergeordnete Elemente eine Größe festlegen können oder wenn sich die Größe des Elements nicht auf die Positionierung anderer untergeordneter Elemente auswirkt. Standardmäßig wird dieses Layout verwendet, um eine Überlagerung zu erstellen, die die Seite mit anderen Steuerelementen abdeckt, um den Benutzer vor der Interaktion mit den normalen Steuerelementen auf der Seite zu schützen.

Wichtig

Die Eigenschaften HorizontalOptions und VerticalOptions haben keinen Effekt auf untergeordnete Elemente eines AbsoluteLayout.

Innerhalb eines AbsoluteLayoutwird die AbsoluteLayout.LayoutBounds angefügte Eigenschaft verwendet, um die horizontale Position, vertikale Position, Breite und Höhe eines Elements anzugeben. Darüber hinaus gibt die AbsoluteLayout.LayoutFlags angefügte Eigenschaft an, wie die Layoutgrenzen interpretiert werden.

Der folgende XAML-Code zeigt, wie Elemente in einem AbsoluteLayoutanordnen:

<AbsoluteLayout Margin="40">
    <BoxView Color="Red"
             AbsoluteLayout.LayoutFlags="PositionProportional"
             AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100"
             Rotation="30" />
    <BoxView Color="Green"
             AbsoluteLayout.LayoutFlags="PositionProportional"
             AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100"
             Rotation="60" />
    <BoxView Color="Blue"
             AbsoluteLayout.LayoutFlags="PositionProportional"
             AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100" />
</AbsoluteLayout>

In diesem Beispiel funktioniert das Layout wie folgt:

  • Jede BoxView erhält eine explizite Größe von 100 x 100 und wird an derselben Position horizontal zentriert angezeigt.
  • Das Rot BoxView wird um 30 Grad gedreht, und das Grüne BoxView wird um 60 Grad gedreht.
  • In jedem BoxViewwird die AbsoluteLayout.LayoutFlags angefügte Eigenschaft auf PositionProportionalfestgelegt, was angibt, dass die Position proportional zum verbleibenden Platz ist, nachdem Breite und Höhe berücksichtigt wurden.

Achtung

Vermeiden Sie nach Möglichkeit die Verwendung der AbsoluteLayout.AutoSize -Eigenschaft, da dies dazu führt, dass die Layout-Engine zusätzliche Layoutberechnungen ausführt.

Weitere Informationen finden Sie unter Xamarin.Forms AbsoluteLayout.

Eingabetransparenz

Jedes visuelle Element verfügt über eine InputTransparent -Eigenschaft, mit der definiert wird, ob das Element Eingaben empfängt. Der Standardwert ist false, um sicherzustellen, dass das Element Eingaben empfängt.

Wenn diese Eigenschaft für eine Layoutklasse festgelegt ist, wird ihr Wert an untergeordnete Elemente übertragen. Daher führt das Festlegen der InputTransparent -Eigenschaft auf true für eine Layoutklasse dazu, dass alle Elemente innerhalb des Layouts keine Eingaben empfangen.

Layoutleistung

Befolgen Sie die Richtlinien unter Optimieren der Layoutleistung, um die bestmögliche Layoutleistung zu erzielen.

Darüber hinaus kann die Seitenrenderingleistung auch mithilfe der Layoutkomprimierung verbessert werden, wodurch angegebene Layouts aus der visuellen Struktur entfernt werden. Weitere Informationen finden Sie unter Layoutkomprimierung.