Hledáme fulltime PHP programátora do ITnetwork týmu - 100% homeoffice, 100% časově flexibilní #bezdeadlinu Mám zájem!
Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij slevové akce 50% výuky zdarma!
Discount week 50

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:

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

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.


 

Stáhnout

Staženo 1x (1.46 MB)
Aplikace je včetně zdrojových kódů v jazyce Java

 

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 (7)

 

 

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í!