Procvič si angličtinu zdarma s naším americkým e-learningem! Learn more
Pouze tento týden sleva až 80 % na celý Java e-learning!

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

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

V minulé lekci, Android programování - Dokončení implementace kalkulačky, jsme dokončili jednoduchou kalkulačku pro Android v Javě. 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

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 6x (909.87 kB)
Aplikace je včetně zdrojových kódů v jazyce Android Java

 

 

Č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
Programování Android aplikací v Javě
Miniatura
Následující článek
Šibenice pro Android - Animace, Shared preferences a Intent
Aktivity (4)

 

 

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

Avatar
Jiří Frank
Redaktor
Avatar
Jiří Frank:13.3.2015 17:03

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: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  +1 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
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. května 15:15

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

Odpovědět  +1 15. května 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! :)
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 14. Zobrazit vše