1. diel - Spinner - Vytvorenie základného roletového menu

Vitajte v Java Android tutoriálu, v ktorom si ukážeme, ako prispôsobiť vzhľad a správanie Android komponentov a vytvoriť si komponenty tiež čisto vlastné. Dnes si ukážeme, ako upraviť vzhľad komponenty Spinner tak, aby jeho položky napr. Obsahovali okrem textu aj ikony.

Vlastné Spinner

Spinner je rozbaľovacie menu zobrazujúci zoznam pre voľbu jednej z ponúknutých možností. V základnej konfigurácii sú jednotlivé položky tvorené jedným TextView, ktorého vzhľad nemožno meniť. Toto ale možno obísť vytvorením vlastného XML súboru s jedným TextView, ktorého vzhľad sami definujeme.

Najprv si ukážeme základnú konfiguráciu a neskôr i spôsob s vlastným TextView. Nakoniec si ukážeme aj Spinner s položkami tvorenými nami definovaným layoutom. Všetko si ukážeme na ukážkové aplikáciu:

Okno aplikácie má tri rôzne farebné časti, kde každá obsahuje jeden Spinner. Prvé dva majú vpravo pod sebou jeden TextView. V tretej časti je pod spinnerom umiestnená tabuľka pre zobrazenie dát podľa voľby v treťom spinnera. Prvé Spinner slúži na výber dňa v týždni, druhý k voľbe mesiace a v treťom budeme vyberať štát, ktorého dáta zobrazíme v tabuľke.

Najprv vytvoríme funkčné aplikáciu s prvým spinnerom a neskôr pridáme druhý aj tretí Spinner.

Projekt aplikácie

V Android Štúdiu vytvoríme nový projekt SpinnerExample. Ak máme otvorený iný projekt, vytvoríme ho v hornom menu cez voľby File -> New -> New Project ...:

Ak máme otvorené úvodné okno Android Studia, klikneme na + Create New Project:

Oba postupy zobrazí toto okno:

V hornej lište zvolíme Phone and Tablet, potom označíme možnosť Empty Activity a potvrdíme tlačidlom Next. Bude zobrazené toto okno:

Vyplníme názov projektu, ako programovací jazyk nastavíme Java a všetko potvrdíme tlačidlom Finish. Budú vygenerované súbory projektu. Najdôležitejšie sú MainActivity.java a activity_main.xml.

Spinner v základnom nastavení

Tento spôsob vytvorenia spinnera je najjednoduchší, ale zároveň bez možnosti vlastného prispôsobenia vzhľadu jeho položiek - sú tvorené jedným defaultným TextView.

Príprava potrebných súčastí

Najprv v resources pripravíme dve farebné konštanty a jedno pole textových reťazcov pre menu spinnera.

Súbor colors.xml - Deklarácia použitých farieb

Otvoríme vygenerovaný súbor res/values/colors.xml. Na jeho koniec pridáme farbu pre pozadie aplikácie a pre pozadie prvého spinnera:

<color name="app_background_color">#E8E8E8</color>
<color name="background_color_spinner_1">#FFF8BB</color>

Súbor strings.xml - Data spinnera

Otvoríme vygenerovaný súbor res/values/strings.xml. Na jeho koniec pridáme pole textových reťazcov, pomenované days_array:

<string-array name="days_array">
    <item>...</item>
    <item>Pondělí</item>
    <item>Úterý</item>
    <item>Středa</item>
    <item>Čtvrtek</item>
    <item>Pátek</item>
    <item>Sobota</item>
    <item>Neděle</item>
</string-array>

Súbor activity_main.xml - Vzhľad aplikácie

Otvoríme súbor activity_main.xml, v ktorom vytvoríme vzhľad hlavné aktivity aplikácie s prvým spinnerom. Obsah súboru doplníme takto:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/app_background_color">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/background_color_spinner_1"
            android:orientation="vertical"
            android:padding="20dp">

            <Spinner
                android:id="@+id/spinnerDefault"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

            <TextView
                android:id="@+id/labelSpinnerDefault"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="right"
                android:text="TextView"
                android:textColor="@color/black" />

        </LinearLayout>

    </LinearLayout>

</ScrollView>

Ide o základné komponenty, tvoriace obrazovku aplikácie.

Java kód aplikácie - MainActivity.java

Teraz v Java kóde naprogramujeme metódu pre inicializáciu prvého spinnera. Otvoríme súbor MainActivity.java.

Referencie na komponenty a onCreate()

Najprv ho doplníme do tejto podoby:

public class MainActivity extends AppCompatActivity {

    Spinner spinnerDefault;
    TextView labelSpinnerDefault;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        spinnerDefault = findViewById(R.id.spinnerDefault);
        labelSpinnerDefault = findViewById(R.id.labelSpinnerDefault);

        initDefaultSpinner();
    }
}

V kóde deklarujeme premenné pre referencie použitých komponentov, ktoré v metóde onCreate() inicializujeme. Na konci metódy onCreate() voláme metódu initDefaultSpinner() pre nastavenie prvého spinnera.

initDefaultSpinner()

Metódu teda pridáme:

private void initDefaultSpinner() {
    ArrayAdapter<String> adapter = new ArrayAdapter(this, android.R.layout.simple_spinner_item, getResources().getStringArray(R.array.days_array));
    adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
    spinnerDefault.setAdapter(adapter);

    spinnerDefault.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
        @Override
        public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
            labelSpinnerDefault.setText(parent.getItemAtPosition(position).toString());
        }

        @Override
        public void onNothingSelected(AdapterView<?> parent) {

        }
    });
}

V prvom riadku deklarujeme premennú adapter typu ArrayAdapter. Adaptéry všeobecne predstavujú logickú medzivrstvu, prepájajúci dáta s grafickým užívateľským rozhraním aplikácie. V konstruktoru triedy ArrayAdapter máme tri parametre:

• this - Aktuálne kontext.
• android.R.layout.simple_spinner_item - Defaultný vzhľad spinnera pri "zabalenom" menu - vzhľad zvolenej položky.
• R.array.days_array - ID pole textových reťazcov v resources, ktoré budú v menu zobrazené. Tu použijeme pole s názvami dní v týždni, ktoré sme deklarovali v súbore res/values/strings. Pole z resources získavame volaním getResources().getStringArray().

Ďalej na premenné adapter voláme metódu setDropDownViewResource(), patriaci triede ArrayAdapter. Táto metóda nastaví vzhľad položiek rozbaleného menu. Aj tu nastavujeme defaultný vzhľad. Toto nastavenie nie je povinné. Nasledujúce dva obrázky ukazujú rozdiel vo výslednom vzhľade spinnera - na prvom obrázku je vidieť spinner bez popísaného nastavenia a na druhom obrázku máme spinner s nastaveným defaultným vzhľadom položiek menu:

V ďalšom riadku spinnera nastavujeme vytvorený adaptér.

Voľba položky

Na spinnera obsluhujeme udalosť výberu položky rozhraním OnItemSelectedListener metódou setOnItemSelectedListener(). V tomto rozhraní musíme prepísať metódy:

• onItemSelected() - Je volaná kliknutím na niektorú položku menu. Má tieto parametre: id - ID zvolenej položky. Zodpovedá indexu poľa, ktorým bol adaptér "naplnený".

  position - Pozícia zvoleného objektu v adaptéri. Tu nepracujeme s poľom, ktorým bol adaptér naplnený, ale priamo so zoznamom, ktorý bol vnútorne v adaptéri vytvorený zo spomínaného poľa.

  parent - Referencie na tento adaptér. Najčastejšie z tejto premennej získavame objekt podľa pozície v parametri position, viď ďalej.

  view - Objekt typu View, reprezentujúci zvolenú položku.

• id - ID zvolenej položky. Zodpovedá indexu poľa, ktorým bol adaptér "naplnený".
• position - Pozícia zvoleného objektu v adaptéri. Tu nepracujeme s poľom, ktorým bol adaptér naplnený, ale priamo so zoznamom, ktorý bol vnútorne v adaptéri vytvorený zo spomínaného poľa.
• parent - Referencie na tento adaptér. Najčastejšie z tejto premennej získavame objekt podľa pozície v parametri position, viď ďalej.
• view - Objekt typu View, reprezentujúci zvolenú položku.
• onNothingSelected() - Metóda je volaná vždy, keď už aktuálne vybraná položka nie je k dispozícii (došlo k vyprázdneniu adaptéra atď.).

V metóde onItemSelected() požadovaný deň v týždni získame pomocou parametra position a parametra parent, na ktorom voláme metódu getItemAtPosition(). Metóda vracia základný typ Object, na ktorom musíme zavolať metódu toString(). Takto získaný textový reťazec zobrazujeme v TextView pod prvým spinnerom.

Prvý spinner máme hotový. Projekt je k stiahnutiu nižšie pod lekcií.

V budúcej lekcii, Spinner - Vlastné TextView položky - XML kód , pridáme do projektu ukážkové aplikácie druhý Spinner, ktorého vzhľad upravíme pomocou XML kódu.