7. diel - Android programovanie - Welcome screen animácie kalkulačky

V minulej lekcii, Android programovanie - Dokončenie implementácia kalkulačky , sme dokončili jednoduchú kalkulačku pre Android v Jave. Nasledujúce bonusová kapitola bude o pridanie aktivity s úvodnú animáciou, ktorá bude reprezentovať moju školu. Touto bonusovú kapitolka trochu predbieham, pretože v aplikácii, ktorú si v ďalších kapitolách vytvoríme, sa budú objavovať animácie a pred tým než sa tak stane, si detailne preberieme možnosti ohľadom animácií. Ak sa teda necítite na túto kapitolku a preskočíte ju, nič sa nedeje.

Vytvorenie XML návrhu

Do zložky layout/ pridáme nový súbor activity_welcome.xml:

<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>

Vytvorenie welcome_sc.xml

V priečinku res/ si vytvoríme zložku anim/. V nej potom súbor welcome_sc.xml a vložíme kód (vysvetlenie je vnútri v komentároch):

<?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>

Ak by sme chceli animovať viac objektov ImageView (kľudne zároveň), musíme vytvoriť viac týchto súborov.

Vytvorenie Welcome.java

Do zložky, kde máte .java kódy, pridáme súbor 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

Teraz máme všetko nastavené, stačí zariadiť, aby sa ako prvý aktivita spustila Welcome. To docielime tak, že pridáme aktivitu do AndroidManifestu s tým, že sa bude jednať o Main Activity:

<?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>

Vďaka nastaveniu v AndroidManifestu sa teraz ako prvý spustí aktivita Welcome. Tá má svoj vzhľad nastavený v activity_welcome.xml.

V kóde pre túto aktivitu Welcome.java je v metóde onCreate() nastavená animácie pre ImageView, čo je logo našej školy a vlákno s časovačom. Samotné nastavenia pre animáciu (to čo má animácie robiť, tj. Zobrazí logo školy a jeho posun po osi Y) je v súbore welcome_sc.xml. Vďaka vláknu s časovačom v metóde onCreate() sa za 3500 ms spustí naše aktivita s kalkulačkou (calcActivity.class).

V budúcej lekcii, Šibenice pre Android - Animácie, Shared preferences a Intent , začneme s tvorbou novej, tentoraz už grafické Android aplikácie