Slevový týden - Květen Office week
Pouze tento týden sleva až 80 % na e-learning týkající se MS Office
30 % bodů zdarma na online výuku díky naší Slevové akci!

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

V minulé lekci, Android programování - Dokončení implementace kalkulačky, jsme se věnovali ladění a generování .apk souboru.

Následující bonusová kapitola bude o přidání aktivity s úvodní animací, která bude reprezentovat mou š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.

Vytvoření XML návrhu

Do složky layout/ přidáme nový soubor activity_welcome.xml:

Welcome screen
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Welcome"
    android:background="#ffe1e1e1"
    android:keepScreenOn="true">

    <ImageView
        android:layout_width="141dp"
        android:layout_height="54dp"
        android:id="@+id/imageView"
        android:background="@drawable/b9calc_text"
        android:layout_gravity="center"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />

    <ImageView
        android:layout_width="300dp"
        android:layout_height="130dp"
        android:id="@+id/imageView2"
        android:background="@drawable/msk_logo"
        android:layout_gravity="center"
        android:layout_below="@+id/imageView"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp" />
</RelativeLayout>

Vytvoření welcome_sc.xml

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Ve složce res/ si vytvoříme složku anim/. V ní pak soubor welcome_sc.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ů.

Vytvoření Welcome.java

Do složky, kde máte .java kódy, přidáme soubor Welcome.java (cesta je app/src/main/java/xxx.jmeno.jmeno2.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 imgvwSpsoa = findViewById(R.id.imageView2);
    Animation animSpsoaLogo = 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
    */
    imgvwSpsoa.startAnimation(animSpsoaLogo); // spuštění samotné animace

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

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:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.informatika.spsoa.calc">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity" android:label="@string/app_name"></activity>
        <activity android:name=".Welcome" android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

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

V kódu pro tuto aktivitu Welcome.java je v metodě 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).

V příští lekci, Šibenice pro Android - Animace, Shared preferences a Intent, začneme s tvorbou nové, tentokrát již grafické Android aplikace :)


 

Stáhnout

Staženo 44x (909.87 kB)
Aplikace je včetně zdrojových kódů

 

 

Článek pro vás napsal Jiří Frank
Avatar
Jak se ti líbí článek?
1 hlasů
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
Předchozí článek
Android programování - Dokončení implementace kalkulačky
Všechny články v sekci
Základy vývoje Android aplikací v Javě
Miniatura
Následující článek
Šibenice pro Android - Animace, Shared preferences a Intent
Aktivity (6)

 

 

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

Avatar
DREAMDEV
Člen
Avatar
DREAMDEV:21.4.2015 19:31

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
Avatar
Jiří Frank
Redaktor
Avatar
Jiří Frank:23.4.2015 18:40

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ří Frank
DREAMDEV:27.4.2015 20:22

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
27.4.2015 20:22
Avatar
DREAMDEV
Člen
Avatar
Odpovídá na Jiří Frank
DREAMDEV:27.4.2015 21:03

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
Avatar
Jiří Frank
Redaktor
Avatar
Jiří Frank:27.4.2015 22:30

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
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
DREAMDEV
Člen
Avatar
Odpovídá na Jiří Frank
DREAMDEV:30.4.2015 19:55

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

 
Odpovědět
30.4.2015 19:55
Avatar
Lesní Muž
Člen
Avatar
Lesní Muž:28.6.2017 13:21

V novější verzi Android Studio je tenhle popis vytváření složek dost nepřesný, téměř neproveditelné. Jestli bys chtěl, můžeš pro budoucí padawany udělat update tohodle dílu.

Editováno 28.6.2017 13:22
 
Odpovědět
28.6.2017 13:21
Avatar
Libor Šimo (libcosenior):24.10.2018 8:09

Ahoj, možno sa špatne pozerám, ale nikde som nenašiel "spsoa_logo". Myslím v stiahnutom vzore. Mal by to byť obrázok umiestnený v zložke Bonus-UvodniAnimace/dra­wable. Tam je vak len msk_logo.jpg a b9calc_text.png.

Odpovědět
24.10.2018 8:09
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Lesní Muž
David Čápka:15.5.2019 15:15

Článek byl aktualizován na nové AS.

Odpovědět
15.5.2019 15:15
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
Daniel Launa
Člen
Avatar
 
Odpovědět
19. dubna 22:26
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 15. Zobrazit vše