Shrnutí kapitoly 21. Transformace
Poznámka:
Tato kniha byla publikována na jaře roku 2016 a od té doby nebyla aktualizována. Existuje mnoho v knize, která zůstává cenná, ale některé materiály jsou zastaralé a některá témata už nejsou zcela správná nebo úplná.
Zobrazení Xamarin.Forms se zobrazí na obrazovce v umístění a velikosti určené jeho nadřazeným objektem, což je obecně Layout odvozené nebo Layout<View> nebo odvozené. Transformace je Xamarin.Forms funkce, která může změnit toto umístění, velikost nebo dokonce orientaci.
Xamarin.Forms podporuje tři základní typy transformací:
- Překlad – posun prvku vodorovně nebo svisle
- Měřítko – změna velikosti elementu
- Otočení – otočení prvku kolem bodu nebo osy
V Xamarin.Forms, měřítko je isotropní; ovlivňuje šířku a výšku jednotně. Otočení je podporováno jak na dvourozměrném povrchu obrazovky, tak v prostorovém prostoru. Neexistuje žádná nerovnoměrná transformace (nebo bez ní) a žádná zobecněná maticová transformace.
Transformace jsou podporovány s osmi vlastnostmi typu double definovaného VisualElement třídou:
Všechny tyto vlastnosti jsou zajištěny vlastnostmi s možností vazby. Můžou to být cíle datové vazby a stylu. Kapitola 22. Animace ukazuje, jak tyto vlastnosti mohou být animované, ale některé ukázky v této kapitole ukazují, jak je můžete animovat pomocí časovačeXamarin.Forms.
Vlastnosti transformace ovlivňují pouze způsob vykreslení elementu a nemají vliv na to, jak je prvek v rozložení vnímaný.
Transformace překladu
Nenulové hodnoty TranslationX a TranslationY vlastnosti posunou prvek vodorovně nebo svisle.
Program TranslationDemo umožňuje experimentovat s těmito vlastnostmi se dvěma Slider prvky, které řídí TranslationX a TranslationY vlastnosti objektu Frame. Transformace má vliv také na všechny podřízené položky Frame.
Textové efekty
Jedním z běžných použití vlastností překladu je odsazení mírně vykreslení textu. To je znázorněno v ukázce TextOffsets :
Dalším efektem je vykreslení více kopií bloku Label podobného 3D bloku, jako je ukázka BlockTextu .
Přeskakování a animace
Ukázka ButtonJump používá překlad k přesunutí Button pokaždé, když na něj klepnete, ale primárním záměrem je ukázat, že Button přijímá uživatelský vstup v umístění, kde se tlačítko vykresluje.
Ukázka ButtonGlide je podobná, ale používá časovač k animaci Button z jednoho bodu do druhého.
Transformace škálování
Transformace Scale může zvětšit nebo zmenšit vykreslenou velikost prvku. Výchozí hodnota je 1. Hodnota 0 způsobí, že prvek bude neviditelný. Záporné hodnoty způsobí, že prvek bude otočen o 180 stupňů. Vlastnost Scale nemá vliv na Width vlastnosti prvku Height . Tyto hodnoty zůstanou stejné.
S vlastností můžete experimentovat Scale pomocí ukázky SimpleScaleDemo .
Ukázka ButtonScaler ukazuje rozdíl mezi animací Scale vlastnosti Button a animací FontSize vlastnosti. Vlastnost FontSize má vliv na Button to, jak je v rozložení vnímaná, vlastnost Scale ne.
Ukázka ScaleToSize vypočítá Scale vlastnost, která se použije na Label prvek, aby byla co největší a zároveň se stále zapadá na stránku.
Ukotvení měřítka
Prvky škálované v předchozích třech vzorcích se zvětšily nebo zmenšily vzhledem ke středu prvku. Jinými slovy, prvek se zvětší nebo zmenší ve stejné velikosti ve všech směrech. Během škálování zůstane ve stejném umístění pouze bod ve středu prvku.
Střed měřítka můžete změnit nastavením AnchorX a AnchorY vlastností. Tyto vlastnosti jsou relativní vzhledem k samotnému prvku. Hodnota AnchorX0 odkazuje na levou stranu prvku a 1 odkazuje na pravou stranu. Podobně pro AnchorY, 0 je horní a 1 je dole. Obě vlastnosti mají výchozí hodnoty 0,5, což je střed.
Ukázka AnchoredScaleDemo umožňuje experimentovat s vlastnostmi AnchorX a AnchorY vlastnostmi Scale .
V iOSu je použití jiných než výchozích AnchorX hodnot a AnchorY vlastností obecně nekompatibilní se změnami orientace telefonu.
Transformace otočení
Vlastnost Rotation je zadána ve stupních a označuje otočení po směru hodinových ručiček kolem bodu prvku definovaného AnchorX a AnchorY. PlaneRotationDemo umožňuje experimentovat s těmito třemi vlastnostmi.
Otočené textové efekty
Ukázka BoxViewCircle demonstruje matematiku potřebnou k vykreslení kruhu pomocí 64 malých otočných BoxView prvků.
Ukázka RotatedText zobrazí více Label prvků se stejným textovým řetězcem otočeným tak, aby vypadaly jako paprsky.
V ukázce CircularText se zobrazí textový řetězec, který se zobrazí zalomení v kruhu.
Analogové hodiny
Xamarin.FormsKnihovna Book.Toolkit obsahuje AnalogClockViewModel třídu, která počítá úhly pro ruce hodin. Aby se zabránilo závislostem platformy v modelu ViewModel, třída používá Task.Delay místo časovače k vyhledání nové DateTime hodnoty.
Součástí Xamarin.Formsbook.Toolkit je SecondTickConverter také třída, která implementuje IValueConverter a slouží k zaokrouhlení druhého úhlu na nejbližší sekundu.
MinimalBoxViewClock používá tři rotující BoxView prvky k vykreslení analogových hodin.
BoxViewClock používá BoxView pro rozsáhlejší grafiku, včetně značek kolem tváře hodin a rukou, které otáčejí o něco od jejich konce:
Kromě SecondBackEaseConverter třídy v Xamarin.FormsBook.Toolkit způsobí, že se druhá ruka objeví trochu zpátky, než skočí dopředu, a pak se přesunout zpět do správné pozice.
Svislé posuvníky?
Ukázka VerticalSliders ukazuje, že Slider prvky lze otočit o 90 stupňů a stále fungovat. Je ale obtížné umístit tyto otočené Slider prvky, protože v rozložení se stále zobrazují vodorovně.
Otočení 3D-ish
Vlastnost RotationX se zdá otočit prvek kolem osy 3D X tak, aby se horní a dolní část prvku zdánlivě přesunula směrem k prohlížeči nebo od něho. Podobně se zdá, že otočí prvek kolem osy Y, RotationY aby se levé a pravé strany prvku zdály pohybovat směrem k prohlížeči nebo od něho.
Vlastnost AnchorX ovlivňuje RotationY , ale ne RotationX. Vlastnost AnchorY ovlivňuje RotationX , ale ne RotationY. Můžete experimentovat s ukázkou ThreeDeeRotationDemo a prozkoumat interakce těchto vlastností.
3D souřadnicový systém odvozený Xamarin.Forms z levé strany. Pokud nasměrujete forefinger levé ruky směrem ke zvýšení souřadnic X (vpravo) a prostředního prstu směrem ke zvýšení souřadnic Y (dolů), pak palec ukazuje směrem ke zvýšení souřadnic Z (mimo obrazovku).
Pokud také u kterékoli ze tří os nasměrujete palec doleva směrem ke zvýšení hodnot, pak křivka prstů označuje směr otáčení pro kladné otočné úhly.