Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij slevové akce 50% výuky zdarma!
Pouze tento týden sleva až 80 % na e-learning týkající se Javy
Discount week - May - 50

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

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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.


 

Předchozí článek
Vlastní Android Spinner - Vytvoření základního menu
Všechny články v sekci
Vlastní vzhled Android komponent
Článek pro vás napsal Pavel
Avatar
Jak se ti líbí článek?
1 hlasů
Autor se věnuje programování v Javě, hlavně pro Android. Mezi jeho další zájmy patří Arduino, Minecraft.
Aktivity (5)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!