Layout v Xamarin.Forms Polohovací prvky

Prezentace na téma: "Layout v Xamarin.Forms Polohovací prvky"— Transkript prezentace:

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

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

3 Polohovací prvky Xamarin.Forms Succinctly – Chapter 4 – Organizing the UI with Layouts

4 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

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

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

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

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

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

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

11 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

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

13 Responzivní layout