Naše první ap­likace nám fun­guje. Zatím ale umíme pouze zob­razit text na ob­razov­ce. Je čas seznámit se s prvky grafic­kého rozhraní, které nabídnou uživateli více in­terak­ce. Nejběžnějším prvkem je nejspíš tlačítko. V této kapitole tedy do pro­jek­tu přidáme tlačítko. Na něm si vysvětlíme práci s kom­ponen­tami grafic­kého rozhraní. Popis dalších kom­ponent už bude stručnější.

Pojďme se nejprve zabývat tím, jak můžeme prvky přidávat a jak můžeme měnit je­jich vlastnos­ti.

1. První způsob již znáte. Můžete přímo up­ravit XML soubor s popisem ak­tiv­ity (ob­razov­ky ap­likace).
   Soubo­ry s popisem ak­tivit jsou ve složce re­s/layout.
   Pro každý probíraný prvek si řek­neme název elemen­tu XML a základní at­ributy, které můžeme nas­tavit.


2. Další způsob je využít grafic­kého návrháře v An­droid Studiu.
   V rámci návrhu (záložka De­sign) přetáhneme grafické prvky do okna myší. Je­jich at­ributy se zob­razí v okně Pro­pert­ies vpravo od grafic­kého návrhu, kde je také můžeme nas­tavovat.


3. Můžeme také přidávat prvky přímo z kódu ap­likace.
   Kód jsme zatím nep­sali, vyz­koušíme si to v příští kapitole.

Většinou se doporučuje pokud možno vytvářet rozhraní pomocí souborů XML. V prin­cipu je jedno, zda píšeme kód XML přímo, nebo používáme grafický návrhář. Vlastnoručně nap­saný kód nám pos­kytuje větší kontrolu a bude asi stručnější, použití grafic­kého návrháře je pohodlnější a nenutí nás znát názvy ele­mentů a psát je ručně.

Kdykoli však chceme měnit vzhled nebo vlastnos­ti prvků za běhu ap­likace, nebo například vytvořit správný počet tlačítek podle počtu záznamů načtených ze souboru, s XML soubo­ry nevys­tačíme a pot­řebujeme přístup ke grafic­kému rozhraní z kódu ap­likace.

Ele­ment: Button

At­ributy:

• Rozměry tlačítka: android:layout_height, android:layout_width
  (hod­noty match_parent a wrap_content viz předchozí kapitola).


• Text, který je na tlačítku umístěn: android:text.
  Jak jsme si již vysvětlili v minulé kapitole, na texty od­kazujeme:
  @string/název_textu.


• Barva pozadí: android:background,
  barva textu: android:textColor,

<?xml version="1.0" encoding="utf-8"?>
<resources>
...
    <item name="nazev_barvy" type="color">#FFFFFF00</item>
...
</resources>

• Iden­tifikátor pro práci s tlačítkem z kódu: android:id.
  Můžeme ho použít k získání od­kazu na tlačítko v kódu ap­likace. Práci s grafic­kými prvky z kódu popíšeme v násle­dující kapitole.


• Rea­kce na tlačítko: android:onClick.
  Udává název metody, která popisuje rea­kci na tlačítko. Jak má metoda vypadat a kam ji umístit popíšeme v další části.

Popis toho, jak má naše ap­likace zareagovat na stisk tlačítka, umístíme do kódu ap­likace.

Chování každé ak­tiv­ity (okna) je v kódu pro­jek­tu popsáno v samos­tatné třídě. Všechny tyto třídy jsou umístěny ve složce app/java, re­spek­tive v její podslož­ce odpovídající zvolenému balíčku. Třída je vždy potom­kem obecné třídy Activity.

Popis chování tlačítka umístíme v odpovídající třídě do nové metody.

• Název metody si můžeme zvolit li­bovolně, stejný název ale musíme uvést v at­ributu android:onClick v XML popisu tlačítka. Tím pro­pojíme tlačítko s popisem jeho funkce.


• Vytvořená metoda musí mít vždy právě jeden para­metr typu View. Hod­nota tohoto para­met­ru re­prezen­tuje grafický prvek (v našem případě tlačítko), který spuštění metody vyvol­al. Obecně tedy můžeme mít jednu metodu, která zpracuje rea­kci na více tlačítek nebo jiných grafic­kých prvků. Podle hod­noty para­met­ru metoda pozná, který prvek událost vyvol­al.


• Metoda nev­rací žádnou náv­ratovou hod­notu (void).

Šab­lona hlavičky třídy a hlavičky metody tedy bude vypadat takto:

class MainActivity extends Activity {
	…
	public void reakce(View prvekZdrojUdalosti) {
		// Co se má stát při stisku tlačítka.
	}
	…
}

Vytvoříme pro­jekt Svítilna. Bude velmi jedno­duchý. Na ob­razov­ce bude stručná in­for­mace o účelu ap­likace a tlačítko. Po stis­ku tlačítka se bude měnit barva tlačítka z černé na bílou a zpět.

Pos­tup vytvoření pro­jek­tu

1. Vytvoření pro­jek­tu a změnu popisu v hlavním okně už znáte z předchozí kapito­ly. Ponec­háme ho tedy jako samos­tatné cvičení. Název pro­jek­tu zvol­te Svitilna, název hlavní ak­tiv­ity SvitilnaActivity. Titulek ap­likace bude Svítilna.


2. Jak už víme, jedno­tlivé ovládací prvky a je­jich uspořádání popisuje soubor ac­tivity_svitil­na.xml ve složce re­s/layout.
   Stejně jako v předchozím pro­jek­tu změníme původní RelativeLayout na LinearLayout (nezapomeň­te na android:orientation).


3. Popis­ku (TextView) v hlavní ak­tivitě upravíme tak, aby popisovala chování ap­likace. Up­ravte šířku. Text uvede­me jako odkaz do souboru strings.xml.


4. Do kódu XML přidej­te nový prvek <Button>, nas­tavte at­ributy android:text, android:layout_width a android:layout_height. tak, aby tlačítko zabíralo celý zbytek okna kromě tex­tové položky na prvním řádku a aby popis tlačítka byl „Rozsviť!“. Text nas­tavte jako odkaz na zdroj v souboru strings.xml.


5. Jako rea­kci na tlačítko nas­tavte pomocí at­ributu android:onClick metodu s názvem prepniBarvu.


6. Zapište kód metody prepniBarvu(...).
   Kód zapisujeme do kódu třídy java/název-balíčku/SvitilnaActivity.
   Hlavička metody bude: public void prepniBarvu(View view) {…}.
   Ve složených závorkách musíme pop­sat změnu barvy pozadí tlačítka. Odkaz na stisknuté tlačítko metoda dostává jako para­metr view. Nas­tav­ení barvy pozadí pro­vedeme metodou
   setBackgroundColor(ContextCompat.getColor(this.R.color.sviti)).
   Tím už jsme vlastně nakous­li téma další kapito­ly – nas­tavování vlastností grafic­kých ele­mentů z kódu ap­likace.
   POZOR! Pro práci s hod­notou para­met­ru view jako s tlačítkem (třída Button) musíme provést přetypování. Zde od­kazujeme na znalos­ti čtenáře z Javy a pouze stručně okomen­tujeme:
   Metoda prepniBarvu dostává jako at­ribut reálně in­stan­ci třídy Button, ale datový typ je View (metoda je přip­ravena na obecně jakýkoli prvek). To je možné, protože Button je potom­kem třídy Blue. Pot­řebujeme tedy přetypování na Button, ab­yc­hom mohli nas­tavovat text a barvu textu. To pro­vedeme kódem:
   Button tlacitko = (Button) view;


7. Do souboru re­s/values/colors.xml musíme doplnit řádek:
<color name="sviti">#FFFFFF</color>. Tím nas­tavíme barvu svítícího tlačítka na bílou.

Výsledná podoba souboru ac­tivity_svitil­na.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".SvitilnaActivity"
    android:orientation="vertical">
    <TextView android:text="@string/popis_chovani" android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <Button android:text="@string/tlacitko_je_vypnute" android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:onClick="prepniBarvu"/>
</LinearLayout>

Podoba souboru Svitil­naAc­tivity.­java po přidání tlačítka:

public class SvitilnaActivity extends ActionBarActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_svitilna);
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        ...
    }
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        …
    }
    public void prepniBarvu(View view) {
      Button zdroj = (Button) view; // Přetypování!!!
      zdroj.setBackgroundColor(ContextCompat.getColor(this, R.color.sviti));
);
    }
}

Podoba souboru re­s/values/colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="sviti">#FFFFFF</color>
</resources>

Podoba souboru re­s/values/strings.xml

<resources>
    <string name="app_name">Svítilna</string>
    <string name="ovladani">Kliknutím na tlačítko přepnete jeho barvu:</string>
    <string name="tlacitko_je_vypnute">Rozsviť !</string>
</resources>

Tlačítko nyní zdánlivě rea­guje pouze na první stisk. To je ale jen zdání. Tlačítko rea­guje na každý stisk, ale stále nas­tavuje jen bílou barvu.

Z hledis­ka An­droidu jsme vyřešili vše potřebné. Aby náš pro­jekt byl al­es­poň troc­hu užitečný, pot­řebujeme ještě:

1. Doplnit přepínání barvy tlačítka tam a zpět (zhas­nutí a rozsvícení světla).


2. Nejlépe up­ravit popis tlačítka, aby uživatel věděl, co tlačítko má dělat. (Na tlačítku bude napsáno, na kterou barvu se po klik­nutí změní.) To ale vyřešíme až v násle­dující kapitole.

Zde před­pokládáme, že čtenář má již jakousi zkušenost s pro­gramováním v Javě. V tuto chvíli totiž není podstatné, zda pro­gramujeme ap­likaci pro An­droid nebo klasic­kou desk­topovou ap­likaci. Uveďme několik doporuče­ní:

1. Vytvořte si pomocný at­ribut zapnuto ve třídě SvitilnaActivity. Datový typ bude boolean. Podle hod­noty at­ributu poznáme, zda je tlačítko zap­nuté nebo vyp­nuté. Po každém stis­ku tedy pro­vedeme:
   zapnuto = ! zapnuto; // přepne hod­notu na opačnou
   if (zapnuto) { … } // nas­tavíme barvu podle toho, zda je zap­nuto tlačítko.


2. Výsledná podoba metody prepniBarvu() bude násle­dující:

public void prepniBarvu(View view) {
    Button zdroj = (Button) view;
    this.zapnuto = ! this.zapnuto;
    if (zapnuto) {
        zdroj.setBackgroundColor(
                ContextCompat.getColor(this, R.color.sviti));
    } else {
        zdroj.setBackgroundColor(
                ContextCompat.getColor(this, R.color.nesviti ));
    }
}




Nezapomeň­me na začátku třídy SvitilnaActivity přidat at­ribut zapnuto:

public class SvitilnaActivity extends AppCompatActivity {

    boolean zapnuto = true;

    ...

1. Prvky můžeme do okna přidávat editací XML souboru, grafic­kým návrhářem nebo v kódu ap­likace.


2. Popis a barvu tlačítka udávají hod­noty at­ributů:
   android:text a android:background a android:textColor.


3. Barvu tlačítka lze v kódu změnit voláním metody setBackgroundColor(…).


4. Rea­kci na tlačítko popíšeme v metodě, jejíž název uvede­me v at­ributu:
   android:onClick.