Určení velikosti zobrazení

Dokončeno

Návrh uživatelského rozhraní, které je konzistentní napříč více zařízeními, je obtížné, protože zařízení můžou mít různé velikosti a mají různé hustoty pixelů. Zamyslete se nad různými dostupnými zařízeními: mobilní zařízení, tablet, stolní počítač atd. Jak vytvoříme uživatelské rozhraní, které na každém z nich vypadá podobně?

.NET Multi-platform App UI (MAUI) poskytuje panely rozložení, které vám pomůžou vytvářet konzistentní uživatelská rozhraní. Panel rozložení zodpovídá za změnu velikosti a umístění zobrazení podřízených položek. V této lekci se dozvíte, jak systém rozložení funguje v .NET MAUI. Zejména se podíváme na to, jak mají zobrazení ve výchozím nastavení velikost a jak požádat o konkrétní velikost a pozici zobrazení za běhu.

Co je panel rozložení?

Panel rozložení je kontejner .NET MAUI, který obsahuje kolekci podřízených zobrazení a určuje jejich velikost a umístění. Panely rozložení se automaticky přepočítají při změně velikosti aplikace; Například když uživatel otočí zařízení.

Poznámka:

Zobrazení termínů nebo podřízené zobrazení odkazuje na ovládací prvek umístěný na panelu rozložení. Zobrazení může být popisek, tlačítko, vstupní pole nebo jakýkoli jiný typ vizuálního prvku podporovaného rozhraním .NET MAUI.

.NET MAUI má několik panelů rozložení, ze které si můžete vybrat. Každý panel spravuje svá podřízená zobrazení odlišně. Následující obrázek znázorňuje koncepční přehled některých nejběžnějších možností.

• StackLayout: Uspořádá podřízená zobrazení do jednoho řádku nebo sloupce. Kromě StackLayouttoho je také optimalizovaný VerticalStackLayout a HorizontalStackLayout když nemusíte měnit orientaci.
• AbsoluteLayout: Uspořádá podřízená zobrazení pomocí souřadnic x a y.
• Grid: Uspořádá podřízená zobrazení v buňkách vytvořených z průsečíku řádků a sloupců.
• FlexLayout: Uspořádá podřízená zobrazení jako jedno StackLayout , s výjimkou toho, že je můžete zabalit, pokud se nevejdou do jednoho řádku nebo sloupce.

Poznámka:

Existuje také pátý typ panelu rozložení označovaného jako , RelativeLayoutkterý umožňuje určit, jak uspořádat podřízená zobrazení vzhledem k sobě navzájem. Ovládací prvek byste měli použít FlexLayout místo RelativeLayout toho, aby fungoval lépe. RelativeLayout je součástí rozhraní .NET MAUI pro zpětnou kompatibilitu se staršími aplikacemi Xamarin.

Typickým postupem vytvoření stránky .NET MAUI je vytvoření panelu rozložení a následné přidání podřízených zobrazení. Když do rozložení přidáte zobrazení, můžete ovlivnit jeho velikost a umístění. Na panelu je ale konečné vyjádření založené na jeho interních algoritmech rozložení.

Než se podíváme na to, jak požádat o konkrétní velikost zobrazení, podívejme se, jak ve výchozím nastavení zobrazení velikostí systému rozložení.

Výchozí velikost zobrazení

Pokud nezadáte velikost zobrazení, automaticky se rozrůstá tak, aby byla dostatečně velká, aby se vešla kolem jejího obsahu. Představte si například tento jazyk XAML (Extensible Application Markup Language):

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

Tento příklad definuje popisek pro zobrazení slova Hello na stříbrném pozadí. Vzhledem k tomu, že nezadáte velikost, popisek se automaticky přizpůsobí slovu Hello. Na následujícím obrázku je popisek vykreslený na zařízení s Androidem:

Poznámka:

Můžete nastavit barvu pozadí popisku, která vám pomůže určit, jak velká je za běhu. Toto je dobrá technika ladění, která je potřeba mít na paměti při vytváření uživatelského rozhraní.

Určení velikosti zobrazení

Když vytváříte uživatelské rozhraní, je běžné, že chcete řídit velikost zobrazení. Představte si například, že vytváříte přihlašovací stránku a chcete, aby bylo tlačítko pro přihlášení přesně poloviční šířkou obrazovky. Pokud jste pro zobrazení použili výchozí velikost, tlačítko bude jenom velikost textu Přihlásit se. Tato velikost není dostatečně velká, takže musíte určit velikost sami.

Základní View třída definuje dvě vlastnosti, které ovlivňují velikost zobrazení: WidthRequest a HeightRequest. WidthRequest umožňuje zadat šířku a HeightRequest umožňuje zadat výšku. Obě vlastnosti jsou typu double.

Tady je příklad, který ukazuje, jak v XAML zadat šířku a výšku popisku:

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

Výsledek vypadá takto:

Poznámka:

Popisek je stále zacentrovaný, i když text popisku není uprostřed popisku.

Jedna věc, která stojí za zmínku, je názvy těchto vlastností. Obě vlastnosti obsahují požadavek na slovo. Toto slovo znamená, že panel rozložení je nemusí respektovat za běhu. Panel rozložení tyto hodnoty přečte při výpočtech velikosti a pokusí se pojmout požadavky, pokud je to možné. Pokud není dostatek místa, panel rozložení může hodnoty ignorovat.

Jednotky velikosti

Při nastavování WidthRequest a HeightRequestpoužití hodnot literálů, jako je 100. Na úrovni .NET MAUI tyto hodnoty nemají jednotky. Nejsou to body ani pixely. Jsou to jen hodnoty typu double. .NET MAUI předává tyto hodnoty do základního operačního systému za běhu. Jedná se o operační systém, který poskytuje kontext potřebný k určení, co znamenají čísla:

• V iOSu se hodnoty nazývají body.
• V Androidu jsou pixely nezávislé na hustotě.

Vykreslená velikost zobrazení

Vzhledem k tomu, že je na panelu rozložení k určení velikosti zobrazení, nemůžete použít WidthRequest a HeightRequest zjistit skutečnou velikost za běhu. Představte si například, že jste pro popisek nastavili WidthRequest 100 , ale panel nemá dostatek místa pro splnění požadavku. Místo toho panel poskytuje popisek šířku 80. Pokud v tomto okamžiku zkontrolujete hodnotu WidthRequest vlastnosti, říká 100 se, i když je vykreslená hodnota 80.

Chcete-li tento problém vyřešit, View základní třída definuje dvě další vlastnosti volal Width a Height. Tyto vlastnosti jsou typu double a představují vykreslenou šířku a výšku zobrazení. Width Vlastnosti a Height vlastnosti použijte při každém načtení velikosti zobrazení.

Určení pozice zobrazení

Musíte také nastavit pozici zobrazení. Vzpomeňte si například, že v příkladu přihlašovací stránky chcete zmenšit tlačítko pro přihlášení tak, aby bylo poloviční šířky obrazovky. Vzhledem k tomu, že tlačítko pro přihlášení není plnou šířkou obrazovky, je k dispozici nějaké místo, kde ho můžete přesouvat. Můžete ho umístit na levou stranu, na pravou stranu nebo do středu obrazovky.

Základní View třída má dvě vlastnosti, které slouží k nastavení pozice zobrazení: VerticalOptions a HorizontalOptions. Tato nastavení ovlivňují umístění zobrazení v obdélníku přiděleném panelem rozložení. Můžete určit, že má zobrazení zarovnat k jednomu ze čtyř okrajů obdélníku. Nebo chcete, aby zabírala celý obdélník.

Určení hodnoty pro VerticalOptions nebo HorizontalOptions je náročnější než nastavení velikosti, protože jsou typu LayoutOptions.

Co je typ LayoutOptions?

LayoutOptions je typ jazyka C#, který zapouzdřuje dvě předvolby Alignment rozložení a Expands. Obě vlastnosti souvisejí s umístěním, ale nesouvisejí s ostatními. Definice typu vypadá takto:

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

Dále se podrobněji podíváme, Alignment protože se jedná o nejběžnější a intuitivní možnost rozložení.

Co je výčet LayoutAlignment?

LayoutAlignment je výčet, který obsahuje čtyři hodnoty: Start, Center, Enda Fill. Pomocí těchto hodnot můžete určit, jak je podřízené zobrazení umístěné v obdélníku zadaném jeho panelem rozložení. Představte si například následující kód a snímek obrazovky s Androidem:

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

V příkladu se používá svisle StackLayout , takže každé podřízené zobrazení má řádek. HorizontalOptions určuje pozici zobrazení v jeho řádku.

Co je rozbalení?

Druhá vlastnost LayoutOptions struktury je Expands. Vlastnost Expands je, bool že v Xamarin.Forms povolil zobrazení v požadavku na nadbytečné StackLayout místo, pokud je k dispozici. Tato vlastnost je nyní zastaralá a už se nepoužívá v rozhraní .NET MAUI. Později prozkoumáme, jak dosáhnout stejného typu rozšíření v jednotce Grid v rozložení.

Kontrola znalostí

1.

Co dělá LayoutPanel ?

Obsahuje kolekci podřízených zobrazení a určuje jejich velikost a pozici.

Uspořádá podřízená zobrazení do jednoho řádku nebo sloupce.

Zapouzdřuje možnosti rozložení, například LayoutAlignment a Expands.

Před kontrolou vaší práce musíte odpovědět na všechny dotazy.