Android umožňuje vývojárom vytvárať rôzne animácie, no ich použitie nie je také jednoduché ako na platforme iOS. Cieľom tohto tutoriálu je priblížiť vám ich tvorbu a ukázať spôsob ako ich prepojiť s inými komponentami.
Špeciálnym vlastným komponentom v návode je akýsi rozpínač, lepšie zvaný “expander”, ktorý sa líši od ostatných komponentov Android SDK. Jeho funkciou je animované zobrazovanie a schovávanie skupiny komponentov prostredníctvom prepínača. Táto funkcionalita je zabezpečená využitím vlastných definovaných animácií, volaných kliknutím na prepínač používateľom podľa jeho potreby.
Animácia pre vysunutie kontajnera s komponentami:
<set xmlns:android="http://schemas.android.com/apk/res/android" > <translate andoid:duration="500" android:fromYDelta="0%" android:interpolator="@android:anim/accelerate_interpolator" android:toYDelta="-100%" /> </set>
Pre zasunutie kontajnera späť na pôvodnú pozíciu je zadefinovaná rovnaká animácia s prevrátenými hodnotami atribútov fromYDelta
a toYDelta
.
Pre lepší efekt možno animácie rožšíriť o postupnú zmenu viditelnosti komponentov:
<alpha android:duration="500" android:fromAlpha="1.0" android:toAlpha="0.0" />
Opäť platí, že jedna animácia sa od tej druhej líši opačnými hodnotami fromAlpha
a toAlpha
.
Parametrom konštruktora triedy okrem kontextu sú View toggler
, View container
a Boolean isContainerVisible
. Toggler
je prvok, ktorý chcete nastaviť ako prepínač, ideálne nejaký Button, container
môže byť hociaký komponent, ktorý chcete schovávať a isContainerVisible
udáva, či má byť kontajner viditeľný po vytvorení objektu.
Obe animácie je v expanderi potrebné v konštruktore najprv zinicializovať:
animationShow = AnimationUtils.loadAnimation(context, R.anim.slide_in_top); animationHide = AnimationUtils.loadAnimation(context, R.anim.slide_out_top);
a následne spúšťať podľa potreby na požadovanom animovanom objekte:
public void showContainer() { container.startAnimation(animationShow); } public void hideContainer() { container.startAnimation(animationHide); }
Animovaný výsledok sa dá len ťažko znázorniť na statickom obrázku, bude vám musieť dopomôcť fantázia:
Celá funkcionalita novej triedy je zapúzdrená a okrem zavedenia novej inštancie sa nemusíte o nič starať. Ak by ste predsa len potrebovali z nejakých dôvodov prepínať viditeľnosť kontajnera iným spôsobom ako kliknutím na toggler, máte k dispozícii verejnú metódu toggler_onClick()
.
Súčasťou tutoriálu sú opäť zdrojové kódy projektu: TutorialExpander.zip