Tvorba mobilní Android aplikace v jazyce C#

Téma	C# aplikace pro Android s grafickými interaktivními prvky
Tematický celek	Tvorba mobilní Android aplikace v jazyce C#
Motivační rámec	Teď když už umíme vytvořit a spustit jednoduchou aplikaci, je třeba posunout k ovládacím grafickým prvkům.
Počet žáků	15
Věk žáků	16-18
Pomůcky	PC, tablet nebo emulátor OS Android. Vývojové prostředí SharpDevelop z balíčku dot42.
Stručný popis aktivity s využitím přístroje	Studenti pomocí vývojového prostředí sharpDevelop vytvoří aplikaci využívající dvě tlačítka, která budou plnit různé akce.
Vhodné místo	Běžná počítačová učebna vybavená operačním systémem Windows.
Cíle aktivity	Studenti budou schopni vytvořit Android aplikaci, která bude obsahovat ovládací grafické interaktivní prvky, jako jsou např. tlačítka.
Rozvíjené kompetence	Kompetence k učení, k řešení problémů
Předchozí znalosti	Aktivita navazuje na aktivitu Ahoj Světe! - naše první C# aplikace na Androidu
Časový plán	Fáze činnosti s přístrojem	Metody a formy, motivace
10 minut	Spuštění počítače, založení nového projektu a odstranění přebytečných prvků.	Samostatná práce nebo práce ve skupině
15 minut	Tvorba prvního tlačítka se změnou jeho textu při stisku.	Samostatná práce nebo práce ve skupině
20 minut	Tvorba druhého tlačítka, které zobrazí libovolnou hlášku v novém dialogu a  následné vyzkoušení finální aplikace.	Samostatná práce nebo práce ve skupině
Hodnocení	Bez hodnocení. Studenti budou hodnoceni až po tvorbě vlastních aplikací.
Návaznosti	Na tuto aktivitu navazuje C# aplikace pro Android a práce s animacemi.

Zadání:

1. Vytvořte nový projekt typu dot42.

2. Vymažte z projektu všechny přebytečné prvky a pojmenujte výslednou aplikaci.

3. Vložte do návrhu stránky nové tlačítko roztažené přes celou obrazovku a při jeho stisku mu změňte jeho text.

4. Vložte do návrhu stránky nové tlačítko, které bude malé a libovolně napozicované pod tlačítkem předchozím. Při stisku na toto tlačítko se objeví informační okno s libovolným textem.

5. Aplikaci nahrajte do zařízení či emulátoru a vyzkoušejte.

Postup:

Nejprve je třeba založit novou aplikaci typu dot42 pro Android v prostředí SharpDevelop. Postup je obdobný jako v předchozí kapitole s tím rozdílem, že tentokrát smažeme textové pole pro hlášku "Ahoj světe", kterou nám SharpDevelop v základu vytváří. toho docílíme tak, že si otevřeme xml soubor MainLayout, který je součástí projektu. Tento soubor je pro práci s grafikou velice důležitý, jak se dozvíme v další části. Postup je pak na následujícím videu:

Dalším krokem pak bude samotné vytvoření nového tlačítka. Nejprve však svou aplikaci pojmenujeme. V příkladu jsem použil název "Interaktivní prvky", a jak je vidět na následujícím videu, umístil jsem ho do tagu Label nad hlavní aplikaci pomocí syntaxe [Activity(Label = "Interaktivní prvky")]. To způsobí, že naše aplikace bude mít mezi aplikacemi v našem zařízení patřičný název a nadpis. Dalším krokem je pak vložení samotného tlačítka.

Dot42 řeší grafický design Android aplikací úplně stejně jako všechny ostatní jazyky určené pro tento operační systém. Základní rozvržení grafiky se řeší přes konfigurační xml soubory, tzv. Layouty. Tyto xml soubory mají svoji vlastní syntaxi a možnosti, které jsou velmi podobné CSS (Kaskádovým stylům užívaným na webu). Pokud se programátor chce naučit s grafikou na androidu pracovat, je pro něj naprosto nezbytné se s těmito xml layouty seznámit. Manuály jsou pak k nahlédnutí např. zde: http://developer.android.com/guide/topics/ui/declaring-layout.html

V příkladě bylo použito tlačítko s následujícím zápisem:

     <Button
        android:id="@+id/Tlacitko1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Zmáčkni mě" />

Vysvětlení tohoto zápisu je následující. Vlastnost  android:id="@+id/ registruje tlačítko v aplikaci pod určitým názvem, pomocí něhož se bude s tlačítkem pracovat. V našem případě jsme použili jméno Tlacitko1. Další použitá vlastnost byla  android:layout_width, jehož hodnotu jsme nastavili na fill_parent. Tato vlastnost udává šířku tlačítka a naše zvolená hodnota pak určuje, že tlačítko bude roztaženo přes celou obrazovku. Podobně je na tom pak vlastnost android:layout_height, která udává výšku. V obou těchto případech jsme mohli nastavit výšku v bodech, ale místo toho jsme použili předdefinované možnosti Android layoutu. V případě výšky to bylo wrap_content, což znamená, že se tlačítko roztahuje podle toho, co je v něm napsáno. Poslední byla vlastnost android:text, která jak jistě každému dojde, určuje, co bude na tlačítku napsáno.

Jakmile jsme měli grafickou část tlačítka, bylo třeba vytvořit funkcionalitu. V hlavním programu jsme proto přidali:

            var tlacitko = (Button)FindViewById(R.Ids.Tlacitko1);
            tlacitko.Click += (x,s) => tlacitko.Text = "Zmáčknul jsi mě";

Tyto dva řádky jsou pak samy o sobě vcelku pochopitelné. Na prvním využíváme funkci FindViewById, která vrátí odkaz na specifikovaný objekt, který se nachází na layoutu, tedy v grafice aplikace. Funkce ho hledá podle id předtím specifikovaného ve vlastnosti android:id="@+id/. Funkce hledá univerzálně objekty, proto je třeba výsledek přetypovat na Button. Na další řádce pak přidáme mezi listenery buttonu na událost Klik zkrácený zápis event handleru, který bere vždy parametry (object sender, eventArgs parametry), zde definované jako (x, s). Pokud máme událost, která dělá jen jednu akci na jednom řádku, vyplatí se tento zápis psát zkráceně, jak je tomu v příkladu. U dalšího tlačítka použijeme zápis klasicky celý, který je běžným uživatelům jazyka C# už povědomější. Celou tuto část pak ilustruje následující video:

 

 Naším dalším úkolem bylo vytvořit tlačítko, po jehož kliknutí na nás vyskočí námi definovaná hláška. Tentokrát jsme v layoutu použili trochu jiné parametry, a to následující:

     <Button
      android:id="@+id/Tlacitko2"
      android:layout_width="150dp"
      android:layout_marginLeft="15dp"
      android:layout_marginTop="80dp" 
      android:layout_height="wrap_content"
      android:text="Ukaž mi zprávu"/>

Je tedy třeba probrat několik změn a novinek. Do android:layout_width jsme tentokrát specifikovali šířku v bodech a přidali jsme dvě nové vlastnosti, a to  android:layout_marginLeft a android:layout_marginTop. Obě tyto vlastnosti řeší velikost mezer kolem našeho tlačítka. Vlastnost marginLeft z leva a vlastnost marginTop ze shora. U obou jsme nastavili příslušný počet bodů. Výsledek tohoto rozvržení si pak můžeme prohlédnout v ukázce finální aplikace.

Když jsme tedy hotovi i s druhým tlačítkem, je třeba přidat jeho funkcionalitu. Podobně jako u prvního tlačítka mu musíme přidat funkci reagující na událost stisknutí, takzvaný handler. Tentokrát však použijeme klasický zápis a vytvoříme si na to celou novou funkci. Začátek je velmi podobný:

           var tlacitko2 = (Button)FindViewById(R.Ids.Tlacitko2);
            tlacitko2.Click += ZobrazZpravu;

A teď musíme vytvořit funkci ZobrazZpravu. Její zápis pak vypadá následovně:

         private void ZobrazZpravu(object zdroj, EventArgs parametry){
            var tvurce = new AlertDialog.Builder(this);
            tvurce.SetMessage("Toto je naše ukázková zpáva!");
            var okno = tvurce.Create();
            okno.Show();
        }

Jak jsem již psal předtím, klasická funkce reagující na událost má tyto základní parametry (object zdroj, EventArgs parametry). Když takovou funkci vyrobíme, můžeme jí přiřadit jako handler události. V našem případě má sloužit k zobrazení dialogové hlášky. Proto je třeba nejprve si vyvrořit AlertDialog Builder a uložit si ho do proměnné. Jakmile ho máme, musíme mu přesně specifikovat, jakou zprávu chceme zobrazit. Na to nám poslouží funkce SetMessage. Jakmile máme takto builder nastaven, stačí mu jen přikázat, aby vyrobil instanci okna pomocí funkce Create a následně ho ukázat pomocí funkce Show.

Celý postup je pak vidět na následujícím videu:

A tím pádem je celá aplikace hotová a je třeba ji exportovat do emulátoru nebo do libovolného zařízení s OS Android. Na následujícím videu můžeme vidět, jak vypadá a jak se chová: