Možnosti rozložení v Xamarin.Forms

Stažení ukázky

Každé Xamarin.Forms zobrazení má vlastnosti HorizontalOptions a VerticalOptions typu RozloženíMožnosti. Tento článek vysvětluje, jak má každá hodnota LayoutOptions vliv na zarovnání a rozšíření zobrazení.

Přehled

Struktura LayoutOptions zapouzdřuje dvě předvolby rozložení:

• Zarovnání – upřednostňované zarovnání zobrazení, které určuje jeho umístění a velikost v rámci nadřazeného rozložení.
• Rozšíření – používá pouze , a udává, jestli má zobrazení používat další místo, pokud je k dispozici.

Tyto předvolby rozložení je možné použít na , vzhledem k nadřazenému objektu, nastavením vlastnosti View Xamarin_Forms View _View_HorizontalOptions" data-linktype="absolute-path">HorizontalOptions nebo Xamarin_Forms _View_VerticalOptions" data-linktype="absolute-path">VerticalOptionsViewLayoutOptions objektu na jedno z veřejných polí ze struktury. Veřejná pole jsou následující:

• Start
• Center
• End
• Fill
• StartAndExpand
• CenterAndExpand
• EndAndExpand
• FillAndExpand

Pole , , a slouží k definování zarovnání StartCenter zobrazení v rámci EndFill nadřazeného rozložení:

• U vodorovného zarovnání umístí objekt na levou stranu nadřazeného rozložení a pro svislé zarovnání umístí objekt na začátek StartViewView nadřazeného rozložení.
• Pro vodorovné a svislé zarovnání Center vodorovně nebo svisle zarovnáte na střed View .
• Pro vodorovné zarovnání umístí objekt na pravou stranu nadřazeného rozložení a pro svislé zarovnání umístí objekt do dolní části EndViewView nadřazeného rozložení.
• U vodorovného zarovnání zajistí, že objekt vyplní šířku nadřazeného rozložení a pro svislé zarovnání zajistí, že objekt vyplní výšku FillViewView nadřazeného rozložení.

Hodnoty , , a slouží k definování předvolby zarovnání a zda bude zobrazení zabírat více místa, pokud je k dispozici StartAndExpandCenterAndExpand v rámci EndAndExpandFillAndExpand nadřazeného objektu StackLayout .

Zarovnání

Zarovnání určuje, jak je zobrazení umístěno v rámci nadřazeného rozložení, pokud nadřazené rozložení obsahuje nepoužívané místo (nadřazené rozložení je větší než celková velikost všech podřízených prvků).

Objekt respektuje pouze pole , , a v podřízených zobrazeních, která jsou v StackLayoutStart opačném směru než CenterEndFillLayoutOptionsStackLayout orientace. Proto mohou podřízené zobrazení ve svisle orientovaném objektu nastavit své StackLayout vlastnosti Xamarin_Forms StackLayout _View_HorizontalOptions" data-linktype="absolute-path">HorizontalOptionsStartCenterEnd na Fill jedno z polí , , nebo . Podobně podřízené zobrazení v rámci vodorovně orientovaného objektu může nastavit své StackLayout vlastnosti Xamarin_Forms StackLayout _View_VerticalOptions" data-linktype="absolute-path">VerticalOptionsStartCenterEnd na Fill jedno z polí , , nebo .

Objekt respektuje pole , , a v podřízených zobrazeních, která jsou StackLayout ve stejném směru jako StartCenterEndFillLayoutOptionsStackLayout orientace. Proto svisle orientovaný objekt ignoruje pole , , nebo , pokud jsou nastavená na StackLayoutStart Xamarin_Forms CenterEndFillStackLayout _View_VerticalOptions" data-linktype="absolutní_cesta">VerticalOptions podřízených zobrazení. Podobně vodorovně orientovaný objekt ignoruje pole , , nebo , pokud jsou nastavená na StackLayoutStart Xamarin_Forms CenterEndFillStackLayout _View_HorizontalOptions" data-linktype="absolutní_cesta">HorizontalOptions podřízených zobrazení.

Následující příklad kódu XAML ukazuje svisle orientovaný objekt, kde každý podřízený objekt nastaví svou StackLayoutLabel vlastnost Xamarin_Forms StackLayout _View_HorizontalOptions" data-linktype="absolute-path">na jedno ze čtyř polí zarovnání ze HorizontalOptionsLayoutOptions struktury:

<StackLayout Margin="0,20,0,0">
  ...
  <Label Text="Start" BackgroundColor="Gray" HorizontalOptions="Start" />
  <Label Text="Center" BackgroundColor="Gray" HorizontalOptions="Center" />
  <Label Text="End" BackgroundColor="Gray" HorizontalOptions="End" />
  <Label Text="Fill" BackgroundColor="Gray" HorizontalOptions="Fill" />
</StackLayout>

Ekvivalentní kód jazyka C# je zobrazen níže:

Content = new StackLayout
{
  Margin = new Thickness(0, 20, 0, 0),
  Children = {
    ...
    new Label { Text = "Start", BackgroundColor = Color.Gray, HorizontalOptions = LayoutOptions.Start },
    new Label { Text = "Center", BackgroundColor = Color.Gray, HorizontalOptions = LayoutOptions.Center },
    new Label { Text = "End", BackgroundColor = Color.Gray, HorizontalOptions = LayoutOptions.End },
    new Label { Text = "Fill", BackgroundColor = Color.Gray, HorizontalOptions = LayoutOptions.Fill }
  }
};

Výsledkem kódu je rozložení znázorněné na následujících snímcích obrazovky:

Rozšíření

Rozšíření určuje, jestli zobrazení bude zabírat více místa v rámci , pokud je k StackLayout dispozici. Pokud objekt obsahuje nevyužité místo (to znamená, že je větší než kombinovaná velikost všech podřízených čar), sdílí nevyužité místo rovnoměrně všechna podřízené zobrazení, která žádají o rozšíření nastavením jejich StackLayoutStackLayout Xamarin_Forms StackLayout _View_HorizontalOptions" data-linktype="absolutní_cesta">nebo HorizontalOptions Xamarin_Forms StackLayout _View_VerticalOptions" data-linktype="absolutní_cesta">VerticalOptionsLayoutOptionsAndExpand vlastností na pole, které používá příponu. Všimněte si, že při použití veškerého prostoru v nemá StackLayout možnosti rozšíření žádný vliv.

Objekt StackLayout může rozšířit podřízená zobrazení jenom ve směru své orientace. Svisle orientovaný objekt proto může rozbalit podřízené zobrazení, které nastaví jejich StackLayout Xamarin_Forms StackLayout _View_VerticalOptions" data-linktype="absolute-path">vlastnosti na jedno z polí VerticalOptions , , nebo , StartAndExpandCenterAndExpandEndAndExpandFillAndExpand pokud StackLayout obsahuje nevyužité místo. Podobně může vodorovně orientovaný objekt rozbalit podřízené zobrazení, které nastaví jejich StackLayout Xamarin_Forms StackLayout _View_HorizontalOptions" data-linktype="absolute-path">vlastnosti na jedno z polí HorizontalOptions , , nebo , StartAndExpandCenterAndExpandEndAndExpandFillAndExpand pokud StackLayout obsahuje nevyužité místo.

Objekt StackLayout nemůže rozbalit podřízené zobrazení v opačném směru, než je jeho orientace. U svisle orientovaného zobrazení má nastavení vlastnosti StackLayout Xamarin_Forms StackLayout _View_HorizontalOptions" data-linktype="absolute-path">HorizontalOptionsStartAndExpand v Start podřízeném zobrazení stejný účinek jako nastavení vlastnosti na .

Následující příklad kódu XAML ukazuje svisle orientovaný objekt, kde každý podřízený objekt nastaví svou StackLayoutLabel vlastnost Xamarin_Forms StackLayout _View_VerticalOptions" data-linktype="absolute-path">na jedno ze čtyř rozšiřujících polí ze VerticalOptionsLayoutOptions struktury:

<StackLayout Margin="0,20,0,0">
  ...
  <BoxView BackgroundColor="Red" HeightRequest="1" />
  <Label Text="Start" BackgroundColor="Gray" VerticalOptions="StartAndExpand" />
  <BoxView BackgroundColor="Red" HeightRequest="1" />
  <Label Text="Center" BackgroundColor="Gray" VerticalOptions="CenterAndExpand" />
  <BoxView BackgroundColor="Red" HeightRequest="1" />
  <Label Text="End" BackgroundColor="Gray" VerticalOptions="EndAndExpand" />
  <BoxView BackgroundColor="Red" HeightRequest="1" />
  <Label Text="Fill" BackgroundColor="Gray" VerticalOptions="FillAndExpand" />
  <BoxView BackgroundColor="Red" HeightRequest="1" />
</StackLayout>

Ekvivalentní kód jazyka C# je zobrazen níže:

Content = new StackLayout
{
  Margin = new Thickness(0, 20, 0, 0),
  Children = {
    ...
    new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 },
    new Label { Text = "StartAndExpand", BackgroundColor = Color.Gray, VerticalOptions = LayoutOptions.StartAndExpand },
    new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 },
    new Label { Text = "CenterAndExpand", BackgroundColor = Color.Gray, VerticalOptions = LayoutOptions.CenterAndExpand },
    new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 },
    new Label { Text = "EndAndExpand", BackgroundColor = Color.Gray, VerticalOptions = LayoutOptions.EndAndExpand },
    new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 },
    new Label { Text = "FillAndExpand", BackgroundColor = Color.Gray, VerticalOptions = LayoutOptions.FillAndExpand },
    new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 }
  }
};

Výsledkem kódu je rozložení znázorněné na následujících snímcích obrazovky:

Každá Label z nich zabírá stejné množství místa v rámci StackLayout . Má ale jinou velikost pouze poslední Xamarin_Forms _View_VerticalOptions , která nastaví její vlastnost LabelLabel data-linktype="absolute-path">na VerticalOptionsFillAndExpand . Kromě toho jsou jednotlivé části oddělené malým červeným znakem , který umožňuje snadné zobrazení prostoru LabelBoxViewLabel zabíraného prostoru.

Souhrn

Tento článek vysvětlil, jak má každá hodnota struktury vliv na zarovnání a rozšíření zobrazení LayoutOptions vzhledem k jeho nadřazenému objektu. Pole , , a slouží k definování zarovnání zobrazení v rámci nadřazeného rozložení a pole , , a se používají k definování předvolby zarovnání a k určení, zda bude zobrazení zabírat více místa, pokud je k StartCenterEndFillStartAndExpandCenterAndExpandEndAndExpandFillAndExpand dispozici, StackLayout v rámci objektu .

Související odkazy

• LayoutOptions (ukázka)
• LayoutOptions