Sdílet prostřednictvím

Možnosti rozložení v Xamarin.iOS

  • Článek

Při změně velikosti nebo otočení zobrazení existují dva různé mechanismy pro řízení rozložení:

  • Automatické nastavení – Inspektor automatické změny velikosti v návrháři poskytuje způsob, jak nastavit AutoresizingMask vlastnosti. To umožní ukotvení ovládacího prvku na hranách jejich kontejneru a/nebo opravit jejich velikost. Automatická velikost funguje ve všech verzích iOSu. Toto je podrobněji popsáno níže.
  • Automatické rozložení – funkce představená v iOSu 6, která umožňuje jemně odstupňovanou kontrolu nad relacemi ovládacích prvků uživatelského rozhraní. Umožní řízení pozic prvků vzhledem k ostatním prvkům na návrhové ploše. Toto téma je podrobněji popsáno v automatickém rozložení pomocí průvodce Xamarin iOS Designer .

Automatická velikost

Když uživatel změní velikost okna, například když se zařízení otočí a orientace se změní, systém automaticky změní velikost zobrazení uvnitř tohoto okna podle pravidel automatické velikosti. Tato pravidla je možné v jazyce C# nastavit pomocí AutoresizingMask vlastnosti nebo UIView v oblasti vlastností v iOS Designeru, jak je znázorněno níže:

Snímek obrazovky znázorňující panel vlastností návrháře I O S

Při výběru ovládacího prvku můžete ručně zadat umístění a rozměry ovládacího prvku a také zvolit chování automatické velikosti . Jak je znázorněno na následujícím snímku obrazovky, můžeme použít pružiny a vystružky v ovládacím prvku automatické velikosti k definování vztahu vybraného zobrazení k nadřazené:

Snímek obrazovky znázorňuje ovládací prvek Automatické nastavení v oblasti vlastností návrháře I O S.

Úprava pružiny způsobí, že zobrazení změní velikost na základě šířky nebo výšky nadřazeného zobrazení. Když upravíte vstrut , bude zobrazení udržovat konstantní vzdálenost mezi sebou a jeho nadřazeným zobrazením na daném okraji.

Tato nastavení lze také nastavit v kódu:

textfield1.Frame = new RectangleF(15, 277, 79, 27);
textfield1.AutoresizingMask = UIViewAutoresizing.FlexibleRightMargin | UIViewAutoresizing.FlexibleBottomMargin;

Pokud chcete otestovat nastavení automatické velikosti, povolte v možnostech projektu různé podporované orientace zařízení:

Automatická velikost Nastavení

V kódu za sebou můžeme použít následující kód, který způsobí, že dva textové ovládací prvky změní velikost vodorovně:

textview1.AutoresizingMask = UIViewAutoresizing.FlexibleWidth;
textfield1.AutoresizingMask = UIViewAutoresizing.FlexibleWidth;
imageview1.AutoresizingMask = UIViewAutoresizing.FlexibleTopMargin | UIViewAutoresizing.FlexibleLeftMargin;

Ovládací prvky můžeme také upravit pomocí Návrháře. Když vyberete vystružky, jak je znázorněno níže, obrázek zůstane zarovnaný doprava, aniž by byl oříznut v dolní části zobrazení:

Snímek obrazovky znázorňuje ovládací prvek Automatické nastavení s vybraným levým a dolním okrajem.

Tyto snímky obrazovky ukazují, jak se ovládací prvky při otočení obrazovky změní nebo změní jejich umístění:

Snímek obrazovky znázorňující zobrazení mobilního zařízení na výšku a na šířku s upraveným textem a grafikou

Všimněte si, že textové zobrazení i textové pole jsou roztaženy FlexibleWidth , aby se kvůli nastavení zachovaly stejné levé i pravé okraje. Obrázek má flexibilní horní a levý okraj, což znamená, že zachovává dolní a pravé okraje – při otáčení obrazovky zůstane obrázek v zobrazení. Složitá rozložení obvykle vyžadují kombinaci těchto nastavení na všech viditelných ovládacích prvcích, aby uživatelské rozhraní bylo konzistentní a aby se ovládací prvky při změně hranic zobrazení nepřekrývaly (kvůli obměně nebo jiné události změny velikosti).