7. díl - Android programování - Welcome screen animace kalkulačky

Java Android Android programování - Welcome screen animace kalkulačky

V minulém tutoriálu jsme dokončili jednoduchou kalkulačku pro Android V Javě. Následující bonusová kapitola bude o přidání activity s úvodní animací, která bude reprezentovat školu. Touto bonusovou kapitolkou trochu předbíhám, protože v aplikaci, kterou si v dalších kapitolách vytvoříme, se budou objevovat animace a před tím než se tak stane, si detailně probereme možnosti ohledně animací. Pokud se tedy necítíte na tuto kapitolku a přeskočíte ji, nic se neděje.

5.1 Vytvoření XML návrhu

Do složky layout přidáme nový soubor Welcome.xml.

Welcome screen
<ImageView
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:id="@+id/imageView"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/spsoa_logo" />

<ImageView
        android:layout_width="141dp"
        android:layout_height="54dp"
        android:id="@+id/imageView2"
        android:layout_below="@+id/imageView"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="54dp"
        android:background="@drawable/b9calc_text"/>

5.2 Vytvoření welcome_sr.xml

Ve složce res si vytvoříme složku anim. V ní pak soubor welcome_sr.xml a vložíme kód (vysvětlení je uvnitř v komentářích):

<?xml version="1.0" encoding="UTF-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">
        <!--
                Transformace je aplikována po tom, co animace skončí.
                To znamená, že logo které animujeme zůstane tam,
                kam dopadne a neposkočí zpátky.
        -->
    <!--
                Nastavení první části animace, tj. zviditelnění loga
                školy z 0 na 100% za použití interpolatoru, což je
                přednastavený modifikátor animace. My jsme použili
                android:anim/accelerate_interpolator, který začne
                pomalu a ke konci se zrychlí.
        -->
        <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:duration="1250"
        android:repeatCount="0"
        />
        <!--
                android:duration určuje dobu trvání animace v ms
                android:repeatCount udává počet opakování animace
        -->
    <translate
        android:fromYDelta="-30%p"
        android:toYDelta="5%p"
        android:duration="1750"
        android:startOffset="1250"
        android:repeatCount="0"/>
        <!--
                android:toYDelta je pohyb v ose Y
                android:duration je délka animace
                android:startOffset je zpoždění animace
        -->
</set>

Pokud bychom chtěli animovat více objektů imageView (klidně zároveň), musíme vytvořit více těchto souborů.

5.3 Vytvoření Welcome.java

Do složky, kde máte .java kódy, přidáme Welcome.java soubor. (cesta app->src->main->java->xxx.jmeno.jme­no2.jménoapp)

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_welcome);

        getSupportActionBar().hide();

        // Nastavíme a spustíme animaci pro logo školy
        ImageView Imgvw_spsoa= (ImageView)findViewById(R.id.imageView);
        Animation Anim_spsoalogo = AnimationUtils.loadAnimation(this, R.anim.welcome_sc);
        /* Animace se „aplikuje“ na imageView, což je ID našeho loga školy.
          Veškeré potřebné nastavení pro samotnou animaci je v souboru welcome_sc */
        Imgvw_spsoa.startAnimation(Anim_spsoalogo); // spuštění samotné animace

        // Vytvoření druhého vlákna s časovačem, po uplynutí limitu je spuštěna další aktivita
        Thread Thrd_wlcmscrndelay = new Thread() {
                public void run() {
                        try {
                                sleep(3500);
                                startActivity(new Intent(getApplicationContext(), calcActivity.class));
                        } catch (InterruptedException e) {
                                e.printStackTrace();
                        }
                        finally {
                                finish();
                        }
                }
        };
        Thrd_wlcmscrndelay.start();

}

5.4 AndroidManifest.xml

Nyní máme vše nastaveno, stačí zařídit, aby se jako první aktivita spustila Welcome. Toho docílíme tak, že přidáme aktivitu do AndroidManifestu s tím, že se bude jednat o main activitu.

<application
        android:allowBackup="true"
        android:icon="@drawable/b9calculator"
        android:label="B9 Calculator"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.informatika.spsoa.calc.calcActivity"
            android:label="B9 Calculator" >
        </activity>
        <activity
            android:name="com.informatika.spsoa.calc.Welcome"
            android:label="B9 Calculator" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
                                <!--
                                        K předání zprávy, že se má jako první zapnout aktivita Welcome nám poslouží nastavení action a category.
                                -->
            </intent-filter>
        </activity>
    </application>

5.5 Rekapitulace

Díky nastavení v AndroidManifestu se jako první spustí aktivita Welcome. Ta má svůj vzhled nastavený v activity_wel­come.xml.

V kódu pro tuto aktivitu Welcome.java je v onCreate() nastavena animace pro imageView, což je logo naší školy a vlákno s časovačem. Samotné nastavení pro animaci (to co má animace dělat, tj. zobrazení loga školy a jeho posun po ose Y) je v souboru welcome_sc.xml. Díky vláknu s časovačem v metodě onCreate() se za 3500 ms spustí naše aktivita s kalkulačkou (calcActivity­.class).


 

  Aktivity (1)

Článek pro vás napsal Jiří Hlavík
Avatar
Autor se věnuje programování v C# a vývoji aplikací pro platformu Android a dalším věcem spojeným s Android OS

Jak se ti líbí článek?
Celkem (1 hlasů) :
55555


 



 

 

Komentáře
Zobrazit starší komentáře (1)

Avatar
David Čápka
Tým ITnetwork
Avatar
David Čápka:

Číslování vychází z původní práce, je pravda, že tady asi valný smysl nemá, něco s tím provedeme.

Odpovědět  ±0 13.3.2015 16:19
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
IT Man
Redaktor
Avatar
Odpovídá na David Čápka
IT Man:

Podle mě se sem hodí a to kvůli hned úvodu v článku. :)

Cituji:
V minulém tutoriálu jsme dokončili jednoduchou kalkulačku pro Android V Javě. Následující bonusová kapitola bude o přidání activity s úvodní animací, která bude reprezentovat školu. Touto bonusovou kapitolkou trochu předbíhám, protože v aplikaci, kterou si v dalších kapitolách vytvoříme, se budou objevovat animace a před tím než se tak stane, si detailně probereme možnosti ohledně animací. Pokud se tedy necítíte na tuto kapitolku a přeskočíte ji, nic se neděje.

Odpovědět 13.3.2015 16:36
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na IT Man
David Čápka:

Ono právě jak se na webu příliš nepoužívá, tak z toho může být někdo zmatený, jako třeba Michal Žůrek (misaz) :) V knize to máš jako souvislý text, tady to oddělují samotné díly. Já mám k tomu asi neutrální postoj, necháme to na autorovi :)

Odpovědět  +2 13.3.2015 16:39
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Jiří Hlavík
Redaktor
Avatar
Jiří Hlavík:

Jak už David poznamenal, číslování vychází z původních textů. Pokusím se předělat číslování tak, aby u každého dílu začínalo od 1. :)

 
Odpovědět 13.3.2015 17:03
Avatar
DREAMDEV
Člen
Avatar
DREAMDEV:

Ako pridam obrazok v API 15? ked pouzijem:

android:backgrou­nd="@drawable/spso­a_logo"

vyhodi mi nejaku mega chybu... a ked pouzijem:

img1.setBackground( Drawable.crea­teFromPath("@dra­wable/cube1") );

vyhodi mi ze to mozem pouzit len v API 16 a vyššie...

Odpovědět 21.4.2015 19:31
"minulosť je na to aby si odhalil chyby ktoré sa stali a v prítomnosti ich opravil pre lepšiu budúcnosť" - Ja
Avatar
Jiří Hlavík
Redaktor
Avatar
Jiří Hlavík:

U API 15 není žádný problém s použitím:
"android:backgrou­nd="@drawable/spso­a_logo"

Je dost těžké poradit když jedinou indícii mám v podobě slovního spojení "mega chyba" :D

Kam vůbec dáváš ten android:backgrou­nd?... Pokud chceš vložit do aktivity obrázek, tak si v XML návrhu vytvoříš imageView (doporučuji použít grafický editor) a nastavíš mu background stejně jako to máš teď.. pro ilustraci přikládám jak to má vypadat:

<ImageView
android:layou­t_width="141dp"
android:layou­t_height="54dp"
android:id="@+id/­imageView2"
android:backgrou­nd="@drawable/si­benice_text"
android:layou­t_gravity="cen­ter"
android:layou­t_centerVerti­cal="true"
android:layou­t_centerHorizon­tal="true" />

Editováno 23.4.2015 18:42
 
Odpovědět 23.4.2015 18:40
Avatar
DREAMDEV
Člen
Avatar
Odpovídá na Jiří Hlavík
DREAMDEV:

zrazu to funguje ked som to zapol po dlhsom case o.O zaujimave anomalie sa deju v tychto pocitacovich technologiach nechapem :D

Editováno 27.4.2015 20:22
Odpovědět  +1 27.4.2015 20:22
"minulosť je na to aby si odhalil chyby ktoré sa stali a v prítomnosti ich opravil pre lepšiu budúcnosť" - Ja
Avatar
DREAMDEV
Člen
Avatar
Odpovídá na Jiří Hlavík
DREAMDEV:

no tak nic funguje to len cez xml ale ked sa pokusam potom zmenit pozadie pomocov setBackground() tak je zle ako to mam spravne napisat? prikladam teda aj hlasenie chyby a celi kod.

Odpovědět 27.4.2015 21:03
"minulosť je na to aby si odhalil chyby ktoré sa stali a v prítomnosti ich opravil pre lepšiu budúcnosť" - Ja
Avatar
Jiří Hlavík
Redaktor
Avatar
Jiří Hlavík:

V xml si najdi kde máš definovaný relativelayout (předpokládám že jsi ho neměnil za jiný layoutl) a nadefinuj background stejným způsobem jako u imageView :)
Můžeš použít obrázek nebo definování nějakého zajímavého pozadí v xml.

Ps: Na pc se v tuto chvíli nedostanu, takže doufám že bude stačit taková odpověď bez kódu :)

 
Odpovědět 27.4.2015 22:30
Avatar
DREAMDEV
Člen
Avatar
Odpovídá na Jiří Hlavík
DREAMDEV:

no ale ja chcem po stlaceni tlacidla ten background zmenit... to mam spravit ako?

Odpovědět 30.4.2015 19:55
"minulosť je na to aby si odhalil chyby ktoré sa stali a v prítomnosti ich opravil pre lepšiu budúcnosť" - Ja
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 11. Zobrazit vše