Lekce 2 - Vlastní Android Spinner - TextView položky - XML kód

V minulé lekci, Vlastní Android Spinner - Vytvoření základního menu, jsme začali pracovat na projektu ukázkové aplikace se třemi spinnery. První, používající jen základní nastavení, jsme zároveň dokončili.

V dnešním Java Android tutoriálu si ukážeme, že položky spinneru lze graficky "vylepšit".

Spinner s vlastním TextView

Již víme, že defaultní vzhled položek spinneru obsahuje jeden TextView pro zobrazení textu. Pokud nám tento jediný TextView stačí, ale rádi bychom jeho vzhled nějak přizpůsobili (velikost a barvu textu, pozadí atd.), lze vytvořit XML soubor s definicí vlastního TextView.

Připravený vzhled poté aplikujeme na vybranou položku i na vzhled položek v rozbaleném menu. Můžeme také vytvořit návrhy dva:

• jeden jako vzor pro vybranou položku a
• druhý jako vzor položek v rozbaleném menu.

Tímto to ale nekončí! Pokud se dostaneme do situace, kdy by nám k zobrazení dat ve spinneru jeden TextView v položce nestačil, nadefinujeme v XML návrh layoutu, obsahující libovolné komponenty. Postupně si všechny popsané možnosti vyzkoušíme.

V této lekci do naší ukázkové aplikace přidáme druhý spinner, umožňující volbu měsíce v roce. Pro tento Spinner vytvoříme zvlášť návrh pro TextView vybrané položky a zvlášť návrh pro TextView položek otevřeného menu:

Na uvedených obrázcích stojí za povšimnutí rozdílný vzhled položek rozbaleného menu a zvolené položky.

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

Do souboru res/values/colors.xml přidáme konstantu s barvou pozadí části s druhým spinnerem:

<color name="background_color_spinner_2">#C9E7FF</color>

Soubor strings.xml - Data spinneru

V souboru res/values/strings.xml deklarujeme pole textových řetězců s názvy měsíců pro menu druhého spinneru:

<string-array name="months">
    <item>...</item>
    <item>Leden</item>
    <item>Únor</item>
    <item>Březen</item>
    <item>Duben</item>
    <item>Květen</item>
    <item>Červen</item>
    <item>Červenec</item>
    <item>Srpen</item>
    <item>Září</item>
    <item>Ŕíjen</item>
    <item>Listopad</item>
    <item>Prosinec</item>
</string-array>

XML návrhy

Dále vytvoříme celkem 3 XML návrhy:

• XML návrh pozadí vybrané položky
• XML návrh TextView vybrané položky
• XML návrh TextView položek menu

XML soubor s pozadím vybrané položky

Z obrázku v úvodu lekce je patrné, že TextView zvolené položky má černé pozadí, zelené orámování a kulaté rohy. Tento vzhled nadefinujeme v XML souboru, který nyní vytvoříme.

Klikneme pravým tlačítkem myši na složku res/drawable/ ve struktuře projektu. V zobrazeném menu, přes možnost New, klikneme na Drawable Resource File:

V otevřeném okně do políčka File name napíšeme selected_item_background, do políčka Root element napíšeme shape a potvrdíme tlačítkem OK:

Vytvořený soubor doplníme tak, aby obsahoval tento kód:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/black"/>

    <stroke
        android:color="#89FF00"
        android:width="3dp"/>

    <corners android:radius="10dp"/>
</shape>

Elementem <shape> deklarujeme, že vytváříme tvar. V elementu <solid> nastavujeme jeho barvu, elementem <stroke> nastavujeme barvu a tloušťku jeho okraje a elementem <corners> definujeme zakulacení jeho rohů.

Budeme-li mít v Android Studiu nastaveno zobrazení v režimu Split dle následujícího obrázku, uvidíme toto:

XML návrh TextView vybrané položky spinneru

Další nový XML soubor vytvoříme kliknutím pravým tlačítkem myši na složku res/layout/ ve struktuře projektu a v zobrazeném menu, přes nabídku New zvolíme možnost Layout Resource File:

V otevřeném okně vyplníme potřebné údaje. Do políčka File name napíšeme spinner_selected_item a do políčka Root element napíšeme TextView:

Potvrdíme stisknutím tlačítka OK. Nově vytvořený soubor doplníme kódem takto:

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/selected_item_background"
    android:gravity="center_horizontal"
    android:padding="10dp"
    android:shadowColor="#FFEB3C"
    android:shadowDx="10"
    android:shadowDy="10"
    android:shadowRadius="20"
    android:textColor="@color/white"
    android:textSize="36sp"
    android:textStyle="bold">
</TextView>

V uvedeném kódu vytvářenému TextView nastavujeme námi vytvořené pozadí selected_item_background. Dále nastavujeme parametr gravity na hodnotu center_horizontal pro horizontální zarovnání textu položek. Nastavujeme i parametr padding a pomocí parametrů shadowColor, shadowDx, shadowDy a shadowRadius nastavujeme zobrazenému textu efekt stínu. Dále nastavujeme barvu a velikost textu a na konec i tučný styl.

XML návrh TextView položek menu rozbaleného spinneru

Tento vzhled opět definujeme samostatným XML souborem. Podobně, jako v předchozí pasáži, vytvoříme nový XML soubor, tentokrát pojmenovaný spinner_dropdown_item a s tímto obsahem:

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:textColor="#009106"
    android:textSize="36sp"
    android:textStyle="bold">
</TextView>

Tento návrh je na první pohled jednodušší - nastavujeme pouze zarovnání textu na střed, jeho barvu, velikost a tučný styl.

Přidání druhého spinneru do XML návrhu aplikace

Soubor activity_main.xml, ve kterém máme návrh vzhledu hlavní aktivity aplikace, doplníme o kód druhého spinneru:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android" ... >

    <LinearLayout ...>
        <!-- oblast pro první spinner -->
        <LinearLayout ...>
            <Spinner ... />
            <TextView ... />
        </LinearLayout>

        <!-- oddělovač -->
        <View
            android:id="@+id/divider1"
            android:layout_width="match_parent"
            android:layout_height="2dp"
            android:background="#787575" />

        <!-- oblast pro druhý spinner -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/background_color_spinner_2"
            android:orientation="vertical"
            android:padding="20dp">

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

            <TextView
                android:id="@+id/labelCustomItemText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="right"
                android:padding="5dp"
                android:text="TextView"
                android:textColor="@color/black" />
        </LinearLayout>

    </LinearLayout>

</ScrollView>

Kvůli úspoře místa je zde dříve napsaný kód zkrácen a je uveden pouze kód nově přidaných elementů. Do XML kódu jsme za první oblast s prvním spinnerem přidali horizontální oddělovač, tvořený elementem <View>. Za oddělovačem je umístěn layout s druhým spinnerem. Tímto máme připravený XML kód druhého spinneru.

V příští lekci, Vlastní Android Spinner - TextView položky - Java kód, doplníme projekt ukázkové aplikace o Java kód druhého Spinneru, který se od toho prvního bude lišit nejen vzhledem, ale i způsobem práce s daty.