10. diel - Šibenice pre Android - Aktivity a implementácia

V minulej lekcii, Šibenice pre Android - Analýza a návrh aplikácie , sme sa venovali analýze a návrhu hry Šibenica. V dnešnom tutoriále vytvoríme jednotlivé aktivity a tiež začneme s implementáciou Java kódu.

Xml návrhy jednotlivých aktivít

Activity_menu

návrh menu

Obrázok pochádza z https://www.flickr.com/.../3525455240/

Pozadie pre všetky aktivity je aj v tejto aplikácii definované v samostatnom XML. Pre nás je nový akurát <stroke>, kde je definovaný rámč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>

Aj tu definujeme dizajn tlačidla v samostatnom XML súboru:

<?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ýberu okruhov

Vyberieme ľubovoľný RadioButton a nastavíme mu:

android:checked="true"

Tým zabezpečíme, že sa hráči nepodarí pokračovať ďalej bez vybraného okruhu.

Activity_main_game

V tejto aktivite bude prebiehať samotné hranie. Návrh môže vyzerať napríklad takto.

Maingate návrh

imageView4 slúži pre zobrazenie animácie (v tomto prípade ide o nápis šibenice).

ZaverecnaPlocha je ImageView, v ktorom sa budú zobrazovať chybné kroky. V spodnom priestore tohto View je umiestnený TextView "Chyby", v ktorom budeme zobrazovať chybne hádanie písmená.

V spodnej časti je frameLayout, ktorý má ako pozadie nastavený XML tak, aby opakoval určité pozadie (v tomto prípade drevenej dosky):

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

Vyššie vidíme vybranie obrázka, ktorý sa má opakovať a nastavenie opakovania.

V tomto frameLayoutu sú dva riadky. V prvom riadku bude 10 TextView. Maximum písmen v jednom slove môže byť 10. Ak vyžrebované slovo bude mať menej písmen, nastavíme prebytočným TextView parameter GONE, čím je pošleme "preč". V poslednom riadku bude tlačidlo pre zadávanie a editText pre vkladanie znakov.

Activity_end_game

Endgame návrh

V TextView "slovo" sa zobrazí hádanie slovo.

V linearLayoutu sú vyskladané 3 riadky. V prvom je TextView pre zobrazenie skóre. V druhom riadku je editText pre zápis mena hráča a v poslednom riadku sú dve tlačidlá.

V spodnom ImageView ZaverecnaPlocha sa spustí animácia, podľa toho či hráč vyhral alebo prehral.

Activity_show_score

ShowScore návrh

Pri tejto aktivity nám stačí dve tlačidlá. Jedno pre vymazanie a druhé pre ukončenie aktivity.

Pre výpis skóre použijeme ScrollView, ten sa sám postará o možnosť rolovanie v prípade, že sa výsledky nezmestia na jednu stránku výpise.

Implementácia Java kódu

Keďže aktivity máme týmto navrhnuté, môžeme prejsť k implementácii Java kódu.

Welcome

Táto aktivita je rovnaká ako v predošlom projekte a je podrobne opísaná v Welcome screen animácie kalkulačky.

MenuActivity

Rozcestník našej 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

Trieda pre výber 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 budúcej lekcii, Šibenice pre Android - MainGameActivity , sa budeme venovať hlavnej aktivite hry.