2. diel - Spinner - Vlastné TextView položky - XML kód

V minulej lekcii, Spinner - Vytvorenie základného roletového menu , sme začali pracovať na projekte ukážkové aplikácie s tromi spinnery. Prvé, používajúci len základné nastavenie, sme zároveň dokončili.

V dnešnom Java Android tutoriálu si ukážeme, že položky spinnera možné graficky "vylepšiť".

Spinner s vlastným TextView

Už vieme, že defaultná vzhľad položiek spinnera obsahuje jeden TextView pre zobrazenie textu. Ak nám tento jediný TextView stačí, ale radi by sme jeho vzhľad nejako prispôsobili (veľkosť a farbu textu, pozadia atď.), Je možné vytvoriť XML súbor s definíciou vlastného TextView.

Pripravený vzhľad potom aplikujeme na vybranú položku aj na vzhľad položiek v rozbalenom menu. Môžeme tiež vytvoriť návrhy dva:

• jeden ako vzor pre vybranú položku a
• druhý ako vzor položiek v rozbalenom menu.

Týmto to ale nekončí! Ak sa dostaneme do situácie, kedy by nám k zobrazenie dát vo spinnera jeden TextView v položke nestačil, nadefinujeme v XML návrh layoutu, obsahujúci ľubovoľné komponenty. Postupne si všetky popísané možnosti vyskúšame.

V tejto lekcii do našej ukážkové aplikácie pridáme druhý spinner, umožňujúca voľbu mesiace v roku. Pre tento Spinner vytvoríme osobitne návrh pre TextView vybrané položky a zvlášť návrh pre TextView položiek otvoreného menu:

Na uvedených obrázkoch stojí za povšimnutie rozdielny vzhľad položiek rozbaleného menu a zvolenej položky.

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

Do súboru res/values/colors.xml pridáme konštantu s farbou pozadia časti s druhým spinnerom:

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

Súbor strings.xml - Data spinnera

V súbore res/values/strings.xml deklarujeme pole textových reťazcov s názvami mesiacov pre menu druhého spinnera:

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

Ďalej vytvoríme celkom 3 XML návrhy:

• XML návrh pozadia vybrané položky
• XML návrh TextView vybrané položky
• XML návrh TextView položiek menu

XML súbor s pozadím vybrané položky

Z obrázku v úvode lekcie je zrejmé, že TextView zvolené položky má čierne pozadie, zelené orámovanie a guľaté rohy. Tento vzhľad nadefinujeme v XML súboru, ktorý teraz vytvoríme.

Klikneme pravým tlačidlom myši na priečinok res/drawable/ v štruktúre projektu. V zobrazenom menu, cez možnosť New, klikneme na Drawable Resource File:

V otvorenom okne do políčka File name napíšeme selected_item_background, do políčka Root element napíšeme shape a potvrdíme tlačidlom OK:

Vytvorený súbor 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>

Elementom <shape> deklarujeme, že vytvárame tvar. V elementu <solid> nastavujeme jeho farbu, elementom <stroke> nastavujeme farbu a hrúbku jeho okraje a elementom <corners> definujeme zaguľatenie jeho rohov.

Ak budeme mať v Android Štúdiu nastavené zobrazenie v režime Split podľa nasledujúceho obrázku, uvidíme toto:

Xml návrh TextView vybrané položky spinnera

Ďalšie nový XML súbor vytvoríme kliknutím pravým tlačidlom myši na priečinok res/layout/ v štruktúre projektu a v zobrazenom menu, cez ponuku New zvolíme možnosť Layout Resource File:

V otvorenom okne vyplníme potrebné údaje. Do políčka File name napíšeme spinner_selected_item a do políčka Root element napíšeme TextView:

Potvrdíme stlačením tlačidla OK. Novovytvorený súbor doplníme kódom 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 uvedenom kóde tvorenému TextView nastavujeme nami vytvorené pozadia selected_item_background. Ďalej nastavujeme parameter gravity na hodnotu center_horizontal pre horizontálne zarovnanie textu položiek. Nastavujeme aj parameter padding a pomocou parametrov shadowColor, shadowDx, shadowDy a shadowRadius nastavujeme zobrazenému textu efekt tieňa. Ďalej nastavujeme farbu a veľkosť textu a na koniec aj tučný štýl.

Xml návrh TextView položiek menu rozbaleného spinnera

Tento vzhľad opäť definujeme samostatným XML súborom. Podobne, ako v predchádzajúcej pasáži, vytvoríme nový XML súbor, tentoraz pomenovaný spinner_dropdown_item as týmto obsahom:

<?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 prvý pohľad jednoduchšie - nastavujeme len zarovnanie textu na stred, jeho farbu, veľkosť a tučný štýl.

Pridanie druhého spinnera do XML návrhu aplikácie

Súbor activity_main.xml, v ktorom máme návrh vzhľadu hlavné aktivity aplikácie, doplníme o kód druhého spinnera:

<?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 úspore miesta je tu skôr napísaný kód skrátený a je uvedený len kód novo pridaných elementov. Do XML kódu sme za prvú oblasť s prvým spinnerom pridali horizontálne oddeľovač, tvorený elementom <View>. Za oddeľovačom je umiestnený layout s druhým spinnerom. Týmto máme pripravený XML kód druhého spinnera.

V budúcej lekcii, Spinner - Vlastné TextView položky - Java kód , doplníme projekt ukážkové aplikácie o Java kód druhého Spinner, ktorý sa od toho prvého bude líšiť nielen vzhľadom, ale i spôsobom práce s dátami.