Lekce 1 - Vlastní Android Spinner - Vytvoření základního menu

Vítejte v Java Android tutoriálu, ve kterém si ukážeme, jak uzpůsobit vzhled a chování Android komponent a vytvořit si komponenty také čistě vlastní. Dnes si ukážeme, jak upravit vzhled komponenty Spinner tak, aby jeho položky např. obsahovaly kromě textu i ikony.

Vlastní Spinner

Spinner je rozbalovací menu zobrazující seznam pro volbu jedné z nabídnutých možností. V základní konfiguraci jsou jednotlivé položky tvořeny jedním TextView, jehož vzhled nelze měnit. Toto ale lze obejít vytvořením vlastního XML souboru s jedním TextView, jehož vzhled sami definujeme.

Nejprve si ukážeme základní konfiguraci a později i způsob s vlastním TextView. Nakonec si ukážeme i Spinner s položkami tvořenými námi definovaným layoutem. Vše si ukážeme na ukázkové aplikaci:

Okno aplikace má tři různě barevné části, kde každá obsahuje jeden Spinner:

• První dva mají vpravo pod sebou jeden TextView. První Spinner slouží k výběru dne v týdnu a bude tedy mít základní vzhled Androidu,
• Druhý slouží k volbě měsíce a text jednotlivých položek bude zobrazen v námi definovaném TextView,
• Ve třetím budeme vybírat stát, jehož data zobrazíme v tabulce. Pod třetím Spinnerem umístěna tabulka pro zobrazení dat dle zvolené položky. Třetí Spinner bude mít položky tvořené naším vlastním layoutem.

Nejprve vytvoříme funkční aplikaci s prvním spinnerem a později přidáme druhý i třetí Spinner.

Projekt aplikace

V Android Studiu vytvoříme nový projekt SpinnerExample. Máme-li otevřený jiný projekt, vytvoříme jej v horním menu přes volby File -> New -> New Project...:

Máme-li otevřené úvodní okno Android Studia, klikneme na + Create New Project:

Oba postupy zobrazí toto okno:

V horní liště zvolíme Phone and Tablet, pak označíme možnost Empty Activity a potvrdíme tlačítkem Next. Bude zobrazeno toto okno:

Vyplníme název projektu, jako programovací jazyk nastavíme Java a vše potvrdíme tlačítkem Finish. Budou vygenerovány soubory projektu. Nejdůležitější jsou MainActivity.java a activity_main.xml.

Spinner v základním nastavení

Tento způsob vytvoření spinneru je nejjednodušší, ale zároveň bez možnosti vlastního přizpůsobení vzhledu jeho položek - jsou tvořeny jedním defaultním TextView.

Příprava potřebných součástí

Nejprve v resources připravíme dvě barevné konstanty a jedno pole textových řetězců pro menu spinneru.

Soubor colors.xml - Deklarace použitých barev

Otevřeme vygenerovaný soubor res/values/colors.xml. Na jeho konec přidáme barvu pro pozadí aplikace a pro pozadí prvního spinneru:

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

Soubor strings.xml - Data spinneru

Otevřeme vygenerovaný soubor res/values/strings.xml. Na jeho konec přidáme pole textových řetězců, pojmenované days:

<string-array name="days">
    <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>

Soubor activity_main.xml - Vzhled aplikace

Otevřeme soubor activity_main.xml, ve kterém vytvoříme vzhled hlavní aktivity aplikace s prvním spinnerem. Obsah souboru 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>

Jedná se o základní komponenty, tvořící obrazovku aplikace.

Java kód aplikace - MainActivity.java

Nyní v Java kódu naprogramujeme metodu pro inicializaci prvního spinneru. Otevřeme soubor MainActivity.java.

Reference na komponenty a onCreate()

Prvně jej doplníme do této 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ódu deklarujeme proměnné pro reference použitých komponent, které v metodě onCreate() inicializujeme. Na konci metody onCreate() voláme metodu initDefaultSpinner() pro nastavení prvního spinneru.

initDefaultSpinner()

Metodu tedy přidáme:

private void initDefaultSpinner() {
    ArrayAdapter<String> adapter = new ArrayAdapter(this, android.R.layout.simple_spinner_item, getResources().getStringArray(R.array.days));
    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 prvním řádku deklarujeme proměnnou adapter typu ArrayAdapter. Adaptéry obecně představují logickou mezivrstvu, propojující data s grafickým uživatelským rozhraním aplikace. V konstruktoru třídy ArrayAdapter máme tři parametry:

• this - Aktuální kontext.
• android.R.layout.simple_spinner_item - Defaultní vzhled spinneru při "zabaleném" menu - vzhled zvolené položky.
• R.array.days - ID pole textových řetězců v resources, které budou v menu zobrazeny. Zde použijeme pole s názvy dnů v týdnu, které jsme deklarovali v souboru res/values/strings. Pole z resources získáváme voláním getResources().getStringArray().

Dále na proměnné adapter voláme metodu setDropDownViewResource(), patřící třídě ArrayAdapter. Tato metoda nastaví vzhled položek rozbaleného menu. I zde nastavujeme defaultní vzhled. Toto nastavení není povinné. Následující dva obrázky ukazují rozdíl ve výsledném vzhledu spinneru - na prvním obrázku je vidět spinner bez popsaného nastavení a na druhém obrázku máme spinner s nastaveným defaultním vzhledem položek menu:

V dalším řádku spinneru nastavujeme vytvořený adaptér.

Volba položky

Na spinneru obsluhujeme událost výběru položky rozhraním OnItemSelectedListener metodou setOnItemSelectedListener(). V tomto rozhraní musíme přepsat metody:

• onItemSelected() - Je volána kliknutím na některou položku menu. Má tyto parametry:
  • id - ID zvolené položky. Odpovídá indexu pole, kterým byl adaptér "naplněn".
  • position - Pozice zvoleného objektu v adaptéru. Zde nepracujeme s polem, kterým byl adaptér naplněn, ale přímo se seznamem, který byl vnitřně v adaptéru vytvořen ze zmíněného pole.
  • parent - Reference na tento adaptér. Nejčastěji z této proměnné získáváme objekt podle pozice v parametru position, viz dále.
  • view - Objekt typu View, reprezentující zvolenou položku.
• onNothingSelected() - Metoda je volána vždy, když již aktuálně vybraná položka není k dispozici (došlo k vyprázdnění adaptéru atd.).

V metodě onItemSelected() požadovaný den v týdnu získáme pomocí parametru position a parametru parent, na kterém voláme metodu getItemAtPosition(). Metoda vrací základní typ Object, na kterém musíme zavolat metodu toString(). Takto získaný textový řetězec zobrazujeme v TextView pod prvním spinnerem.

První spinner máme hotový. Projekt je ke stažení níže pod lekcí.

V příští lekci, Vlastní Android Spinner - TextView položky - XML kód, přidáme do projektu ukázkové aplikace druhý Spinner, jehož vzhled upravíme pomocí XML kódu.

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.