Layout v Xamarin.Forms Polohovací prvky Ing. Petr Voborník, Ph.D.

Layout - rozmístění prvků na stránce/obrazovce/okně Vzhled a zarovnání Logické a intuitivní rozmístění Využití plochy Přehlednost Ovládání Responzivnost Dostupnost Barevné sladění https://color.adobe.com/cs/explore/

Polohovací prvky https://developer.xamarin.com/guides/xamarin-forms/user-interface/layouts/ https://developer.xamarin.com/guides/xamarin-forms/user-interface/controls/layouts/ Xamarin.Forms Succinctly – Chapter 4 – Organizing the UI with Layouts

StackLayout Childrens (více pod-prvků) Řadí prvky pod/vedle sebe Orientation: Vertical / Horizontal Spacing – mezera mezi prvky Možno nastavit horizontální (u orientace Vertical) nebo vertikální (u orientace Horizontal) zarovnání Margin

Grid Mřížka (tabulka) Řádky, sloupce, buňky RowDefinitions, ColumnDefinitions Width/Height: *, Auto, pixely Grid. + Row, Column, ColumnSpan, RowSpan Poloha v rámci buňky: HorizontalOptions, VerticalOptions Fill, Start, Center, End (+FillAndExpand) Margin Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="2"

AbsoluteLayout Poloha pod-prvků je dána souřadnicemi Buď v pixelech, nebo % (0-1) na ploše této plochy AbsoluteLayout. + LayoutFlags – které z hodnot jsou zadány % (0-1) LayoutBounds – X, Y, W, H AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0.5,1,0.5,.1"

RelativeLayout Poloha a velikost je vztažena k poloze a velikosti jiného prvku RelativeLayout. + X/Y/Width/Height + Constraint ConstraintExpression Type – k čemu je rozměr vztažen RelativeToParent RelativeToView (ElementName) Property – k jaké vlastnosti Factor – faktor násobení Constant – offset RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=redBox,Property=X,Factor=1,Constant=20}"

ScrollView Přesahuje-li obsah mimo, umožňuje posun plochy Content - pouze jeden pod-prvek (ten ale může mít Childrens) ScrollX, ScrollY

Frame Rámeček Stín (někde) Pozadí Content

ContentView Pouze plocha pro další obsah (seskupení pod-prvků) Content Barva pozadí Vhodný předek pro vlastní komponenty

Polohovací prvky StackLayout – řazení pod-prvků pod/za sebe Grid – rozdělení plochy do mřížky AbsoluteLayout – absolutní pozice a rozměry prvků (v pixelech nebo % plochy) RelativeLayout – pozice a rozměry vztažené k jiným prvkům ScrollView – umožňuje plochu posunout za její okraj Frame – rámeček okolo ContentView –plocha pro další obsah

Odsazení Margin – vnější odsazení Padding – vnitřní odsazení Thickness (Left, Top, Right, Bottom) Spacing – mezery mezi prvky (jen u StackLayout)

Responzivní layout