Lekce 10 - Šibenice pro Android - Aktivity a implementace

V minulé lekci, Šibenice pro Android - Analýza a návrh aplikace, jsme se věnovali analýze a návrhu hry Šibenice. V dnešním tutoriá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:angle="45"
        android:centerColor="#ff484848"
        android:centerX="40%"
        android:endColor="#ff484848"
        android:startColor="#ed535353" />
    <padding
        android:bottom="7dp"
        android:left="7dp"
        android:right="7dp"
        android:top="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:angle="45"
        android:centerColor="#402929"
        android:centerX="40%"
        android:endColor="#402929"
        android:startColor="#fffff6c2" />
    <padding
        android:bottom="0dp"
        android:left="0dp"
        android:right="0dp"
        android:top="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í skóre. 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 skóre 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 Welcome screen animace kalkulačky.

MenuActivity

Rozcestník naší hry:

public class MenuActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_menu);
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_NOSENSOR);
    }

    public void zacniHrat(View v) {
        Intent novaAktivita = new Intent(this, VyberOkruhy.class);
        startActivity(novaAktivita);
    }

    public void vypisScore(View v){
        Intent novaAktivita = new Intent(this, ShowScoreActivity.class);
        startActivity(novaAktivita);
    }

    public void uzavri(View v){
        finish();
    }
}

vyberOkruhy

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

public class VyberOkruhy extends AppCompatActivity {

    int met = 0;

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

    public void hraj(View v) {
        RadioGroup rg = findViewById(R.id.radioGroup);
        int vybraneID = rg.getCheckedRadioButtonId();

        RadioButton vybraneRadio = 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í lekci, Šibenice pro Android - MainGameActivity, se budeme věnovat hlavní aktivitě hry.