Lekce 10 - Šibenice pro Android - Aktivity a implementace

V minulém tutoriálu o programování aplikací pro Android jsme se věnovali analýze a návrhu hry Šibenice. V dnešním dílu vytvoříme jednotlivé aktivity a také začneme s implementací Java kódu.

XML návrhy jednotlivých aktivit

Activity_menu

Návrh menu

Obrázek pochází z https://www.flickr.com/…/3525455240/

Pozadí pro všechny aktivity je i v této aplikaci definováno v samostatném XML. Pro nás je nový akorát stroke, kde je definován rámeček.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#ed535353"
        android:endColor="#ff484848"
        android:centerColor="#ff484848"
        android:centerX="40%"
        android:angle="45"
        />

    <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />

    <stroke
        android:width="10dp"
        android:color="#998066"
        />
</shape>

I zde definujeme design tlačítka v samostatném XML souboru:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
    <corners
        android:radius="20dp"
        />
    <gradient
        android:startColor="#fffff6c2"
        android:endColor="#402929"
        android:centerColor="#402929"
        android:centerX="40%"
        android:angle="45"
        />
    <padding
        android:left="0dp"
        android:top="0dp"
        android:right="0dp"
        android:bottom="0dp"
        />
    <size
        android:width="270dp"
        android:height="70dp"
        />
    <stroke
        android:width="5dp"
        android:color="#783131"
        />
</shape>

Activity_vyber_o­kruhy

Návrh výběru okruhů

Vybereme libovolný radioButton a nastavíme mu:

android:checked="true"

Tím zajistíme, že se hráči nepodaří pokračovat dále bez vybraného okruhu.

Activity_main_game

V této aktivitě bude probíhat samotné hraní. Návrh může vypadat například takto.

MainGame návrh

imageView4 slouží pro zobrazení animace (v tomto případě jde o nápis šibenice).

ZaverecnaPlocha je ImageView, ve kterém se budou zobrazovat chybné kroky. Ve spodním prostoru tohoto View je umístěn textView „Chyby“, ve kterém budeme zobrazovat chybně hádaná písmena.

Ve spodní části je frameLayout, který má jako pozadí nastaven xml tak, aby opakoval určité pozadí (v tomto případě dřevěné desky).

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/repback"
    android:tileMode="repeat"
/>

Výše vidíme vybrání obrázku, který se má opakovat a nastavení opakování.

V tomto frameLayoutu jsou dva řádky. V prvním řádku bude 10 textView. Maximum písmen v jednom slově může být 10. Pokud vylosované slovo bude mít méně písmen, nastavíme přebytečným textView parametr GONE, čímž je pošleme „pryč“. V posledním řádku bude tlačítko pro zadávání a editText pro vkládání znaků.

Activity_end_game

EndGame návrh

V textView „slovo“ se zobrazí hádané slovo.

V linearLayoutu jsou vyskládány 3 řádky. V prvním je textView pro zobrazení score. Ve druhém řádku je editText pro zápis jména hráče a v posledním řádku jsou dvě tlačítka.

Ve spodním ImageView ZaverecnaPlocha se spustí animace, podle toho zda hráč vyhrál nebo prohrál.

Activity_show_score

ShowScore návrh

U této aktivity nám stačí dvě tlačítka. Jedno pro vymazání a druhé pro ukončení aktivity.

Pro výpis score použijeme scrollView, ten se sám postará o možnost rolování v případě, že se výsledky nevlezou na jednu stránku výpisu.

Implementace Java kódu

Jelikož aktivity máme tímto navržené, můžeme přejít k implementaci Java kódu.

Welcome

Tato aktivita je stejná jako v předešlém projektu a je podrobně popsána v Android programování - Welcome screen animace kalkulačky.

MenuActivity

Rozcestník naší hry.

/**
 * Třída pro aktivitu MenuActivity
 */
public class MenuActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_menu);
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_NOSENSOR);
    }

    /**
     * Metoda pro ukončení
     * @param v Zajistí nám viditelnost této metody, abychom k ní mohli přistoupit z xml, tzn. metoda onclick
     */
    public void Uzavri (View v){
        finish();
    }

    /**
     * Metoda, která nás přesune do aktivity pro novou hru za pomocí intentu.
     * @param v
     */
    public void ZacniHrat(View v) {
        Intent NovaAktivita = new Intent(this, VyberOkruhy.class);
        startActivity(NovaAktivita);
    }

    /**
     * Metoda, která nás přesune do aktivity pro výpis score za pomocí intentu.
     * @param v Zajistí nám viditelnost této metody, abychom k ní mohli přistoupit z xml, tzn. metoda onclick
     */
    public void VypisScore(View v) {
        Intent NovaAktivita = new Intent(this, ShowScoreActivity.class);
        startActivity(NovaAktivita);
    }
}

VyberOkruhy

Třída pro výběr okruhu.

/**
 * Třída pro aktivitu VyberOkruhy
 */
public class VyberOkruhy extends Activity {
    int met=0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_vyber_okruhy);
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_NOSENSOR);
    }

    /**
     * Do instanční proměnné met uloží číslo, na základě vybraného RadioButtonu.
     * Pomocí intentu přesune hráče do aktivity MainGameActivity.
     * Jako extra data přidá do buňky "VybranaMetoda" hodnotu proměnné met.
     * @param v Zajistí nám viditelnost této metody, abychom k ní mohli přistoupit z xml, tzn. metoda onclick
     */
    public void Hraj(View v){

        RadioGroup RG = (RadioGroup) findViewById(R.id.RadioGroup);
        int VybraneID = RG.getCheckedRadioButtonId();

        RadioButton VybraneRadio = (RadioButton) findViewById(VybraneID);

        String VybranyNazev = VybraneRadio.getText().toString();
        Toast.makeText(getApplicationContext(), "Vybrán okruh: "+VybranyNazev, Toast.LENGTH_LONG).show();

        if(VybranyNazev.equals(" Informatika"))met=1;
        if(VybranyNazev.equals(" Města"))met=2;
        if(VybranyNazev.equals(" Zvířata"))met=3;
        if(VybranyNazev.equals(" Auta"))met=4;

        Intent inte = new Intent(this, MainGameActivity.class);
        inte.putExtra("VybranaMetoda", met);
        startActivity(inte);
        finish();
    }

V příštím dílu se budeme věnovat hlavní aktivitě hry.