Práce s grafickými prvky
– tlačítko

---

Naše první aplikace nám funguje. Zatím ale umíme pouze zobrazit text na obrazovce. Je čas seznámit se s prvky grafického rozhraní, které nabídnou uživateli více interakce. Nejběžnějším prvkem je nejspíš tlačítko. V této kapitole tedy do projektu přidáme tlačítko. Na něm si vysvětlíme práci s komponentami grafického rozhraní. Popis dalších komponent 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 jejich vlastnosti.

1. První způsob již znáte. Můžete přímo upravit XML soubor s popisem aktivity (obrazovky aplikace).
   Soubory s popisem aktivit jsou ve složce res/layout.
   Pro každý probíraný prvek si řekneme název elementu XML a základní atributy, které můžeme nastavit.


2. Další způsob je využít grafického návrháře v Android Studiu.
   V rámci návrhu (záložka Design) přetáhneme grafické prvky do okna myší. Jejich atributy se zobrazí v okně Properties vpravo od grafického návrhu, kde je také můžeme nastavovat.


3. Můžeme také přidávat prvky přímo z kódu aplikace.
   Kód jsme zatím nepsali, vyzkoušíme si to v příští kapitole.

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

Kdykoli však chceme měnit vzhled nebo vlastnosti prvků za běhu aplikace, nebo například vytvořit správný počet tlačítek podle počtu záznamů načtených ze souboru, s XML soubory nevystačíme a potřebujeme přístup ke grafickému rozhraní z kódu aplikace.

Element: Button

Atributy:

• Rozměry tlačítka: android:layout_height, android:layout_width
  (hodnoty 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 odkazujeme:
  @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>

• Identifikátor pro práci s tlačítkem z kódu: android:id.
  Můžeme ho použít k získání odkazu na tlačítko v kódu aplikace. Práci s grafickými prvky z kódu popíšeme v následující kapitole.


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

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

Chování každé aktivity (okna) je v kódu projektu popsáno v samostatné třídě. Všechny tyto třídy jsou umístěny ve složce app/java, respektive v její podsložce odpovídající zvolenému balíčku. Třída je vždy potomkem 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 libovolně, stejný název ale musíme uvést v atributu android:onClick v XML popisu tlačítka. Tím propojíme tlačítko s popisem jeho funkce.


• Vytvořená metoda musí mít vždy právě jeden parametr typu View. Hodnota tohoto parametru reprezentuje grafický prvek (v našem případě tlačítko), který spuštění metody vyvolal. Obecně tedy můžeme mít jednu metodu, která zpracuje reakci na více tlačítek nebo jiných grafických prvků. Podle hodnoty parametru metoda pozná, který prvek událost vyvolal.


• Metoda nevrací žádnou návratovou hodnotu (void).

Šablona 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 projekt Svítilna. Bude velmi jednoduchý. Na obrazovce bude stručná informace o účelu aplikace a tlačítko. Po stisku tlačítka se bude měnit barva tlačítka z černé na bílou a zpět.

Postup vytvoření projektu

1. Vytvoření projektu a změnu popisu v hlavním okně už znáte z předchozí kapitoly. Ponecháme ho tedy jako samostatné cvičení. Název projektu zvolte Svitilna, název hlavní aktivity SvitilnaActivity. Titulek aplikace bude Svítilna.


2. Jak už víme, jednotlivé ovládací prvky a jejich uspořádání popisuje soubor activity_svitilna.xml ve složce res/layout.
   Stejně jako v předchozím projektu změníme původní RelativeLayout na LinearLayout (nezapomeňte na android:orientation).


3. Popisku (TextView) v hlavní aktivitě upravíme tak, aby popisovala chování aplikace. Upravte šířku. Text uvedeme jako odkaz do souboru strings.xml.


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


5. Jako reakci na tlačítko nastavte pomocí atributu 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 popsat změnu barvy pozadí tlačítka. Odkaz na stisknuté tlačítko metoda dostává jako parametr view. Nastavení barvy pozadí provedeme metodou
   setBackgroundColor(ContextCompat.getColor(this.R.color.sviti)).
   Tím už jsme vlastně nakousli téma další kapitoly – nastavování vlastností grafických elementů z kódu aplikace.
   POZOR! Pro práci s hodnotou parametru view jako s tlačítkem (třída Button) musíme provést přetypování. Zde odkazujeme na znalosti čtenáře z Javy a pouze stručně okomentujeme:
   Metoda prepniBarvu dostává jako atribut reálně instanci třídy Button, ale datový typ je View (metoda je připravena na obecně jakýkoli prvek). To je možné, protože Button je potomkem třídy Blue. Potřebujeme tedy přetypování na Button, abychom mohli nastavovat text a barvu textu. To provedeme kódem:
   Button tlacitko = (Button) view;


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

Výsledná podoba souboru activity_svitilna.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 SvitilnaActivity.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 res/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 res/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ě reaguje pouze na první stisk. To je ale jen zdání. Tlačítko reaguje na každý stisk, ale stále nastavuje jen bílou barvu.

Z hlediska Androidu jsme vyřešili vše potřebné. Aby náš projekt byl alespoň trochu užitečný, potřebujeme ještě:

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


2. Nejlépe upravit 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 kliknutí změní.) To ale vyřešíme až v následující kapitole.

Zde předpokládáme, že čtenář má již jakousi zkušenost s programováním v Javě. V tuto chvíli totiž není podstatné, zda programujeme aplikaci pro Android nebo klasickou desktopovou aplikaci. Uveďme několik doporučení:

1. Vytvořte si pomocný atribut zapnuto ve třídě SvitilnaActivity. Datový typ bude boolean. Podle hodnoty atributu poznáme, zda je tlačítko zapnuté nebo vypnuté. Po každém stisku tedy provedeme:
   zapnuto = ! zapnuto; // přepne hodnotu na opačnou
   if (zapnuto) { … } // nastavíme barvu podle toho, zda je zapnuto tlačítko.


2. Výsledná podoba metody prepniBarvu() bude následují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 atribut zapnuto:

public class SvitilnaActivity extends AppCompatActivity {

    boolean zapnuto = true;

    ...

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


2. Popis a barvu tlačítka udávají hodnoty atributů:
   android:text a android:background a android:textColor.


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


4. Reakci na tlačítko popíšeme v metodě, jejíž název uvedeme v atributu:
   android:onClick.