Lekce 6 - Debug Xamarin aplikace na Android zařízení a stylovaní

Minulá lekce, Pozicování v Xamarin.Forms, byla o pozicování v XAML.

Dnes se podíváme na ladění naší aplikace přímo na připojeném Android zařízení (našem telefonu) a v praxi si ukážeme základy stylování a pozicování jednotlivých komponent.

Jako vždy budu psát postup především pro Android a iOS na operačním systému Windows 10.

Připojení Android zařízení

Ze všeho nejdříve musíme v našem telefonu aktivovat skrytou kartu "Možnosti pro vývojáře".

Aktivace možností pro vývojáře

To provedeme tak, že přejdeme do Nastavení -> Systém -> O telefonu a 7x – 10x klikneme na položku Číslo sestavení (počet kliknutí se může lišit podle verze Android). Systém nás upozorní hláškou, že jsme se stali vývojáři. Nyní se vraťme do Nastavení -> Systém a nově zde uvidíme kartu Možnosti pro vývojáře. Otevřeme ji. Ostatního nastavení si všímat zatím nebudeme a aktivujeme pouze Ladění USB v sekci Ladění:

Spuštění aplikace

Přesuneme se do Visual Studia, kde máme otevřený náš projekt, a telefon připojíme USB kabelem k počítači. Některé telefony při připojení automaticky vypnou USB ladění a aktivují pouze nabíjení nebo přenos souborů. Ještě jednou tedy zkontrolujeme, zda máme v telefonu povolené Ladění USB. Pokud vše běží, Visual Studio by nám hned mělo nabídnout místo emulátoru naše konkrétní zařízení. Stačí pak jen již aplikaci spustit pomocí zeleného tlačítka Play jako při použití emulátoru:

Pokud se vám telefon ve Visual Studiu nezobrazuje, je pravděpodobné, že nemáte v počítači nainstalované USB ovladače pro vaše zařízení. Ovladače získáte na webu výrobce telefonu a nainstalujete. Poté bude vše funkční.

Stylování aplikace

Jelikož naše první aplikace vypadá velice skromně, bylo by dobré nastavit nějaké vzdálenosti od okraje (margin), vycentrovat uvítací text, zvětšit font a provést další designové úpravy.

Label

Otevřeme si soubor MainPage.xaml a element <Label> upravíme do následující podoby:

<Label
    Text="Vítejte v první aplikaci!"
    FontSize="Large"
    TextColor="#666666"
    FontAttributes="Bold"
    HorizontalOptions="Center"
    HorizontalTextAlignment="Center" Margin="0,20,0,0"
/>

Jak vidíte, na kódu není nic složitého. <Label> jsme vycentrovali, zvětšili font, nastavili mu tučnou hodnotu a nastavili barvu textu na šedou barvu s kódem #666666. Margin nám odsadí <Label> o 20 jednotek shora. Opět se nemusíme nic učit nazpaměť, neboť všechny hodnoty můžeme nastavit i v okně Properties a příslušný kód se nám vygeneruje.

Entry

Budeme pokračovat s <Entry>. Opět nastavíme odsazení, vycentrujeme, navíc přidáme Placeholder, který nám zobrazí zástupný text před zadáním uživatelského vstupu a maximální délku znaků:

<Entry
    x:Name="osloveniEntry"
    HorizontalTextAlignment="Center"
    HorizontalOptions="Center"
    Margin="20,20"
    MaxLength="255"
    Placeholder="Zadejte oslovení"
/>

Tlačítko

Zbývá nám upravit už jen tlačítko. Kromě odsazení mu nastavíme ještě barvu pozadí a barvu textu:

<Button
    x:Name="button"
    Text="Pozdravit!"
    Margin="20,10"
    BackgroundColor="#26940F"
    TextColor="#FFFFFF"
    Clicked="Button_Clicked"
/>

K tomuto asi není potřeba nic vysvětlovat. Aplikaci si můžete spustit v emulátoru nebo přímo na vašem telefonu.

Image

Jak vidíme, už to vypadá trochu lépe, ale ještě by se hodilo nějaké logo nebo obrázek. Seznámíme se tedy s další komponentou – <Image>. Ta logicky slouží k vkládání obrázků do aplikace. Jelikož ještě neumíme pořádně pracovat se soubory, naučíme se nejjednodušší způsob vkládání a to načtení obrázku z URL adresy. Na Google si najdeme libovolný obrázek, klikneme na něj pravým tlačítkem a vybereme možnost kopírovat URL adresu. Já nebudu chodit daleko a použiji logo ITnetwork z URL https://www.itnetwork.cz/…im-final.png:

Jelikož logo je dobré pozicovat do hlavičky, tak náš <Image> umístíme úplně nahoru do <StackLayout> nad <Label>. Kód bude vypadat následovně:

<Image
    Source="https://www.itnetwork.cz/images/5/loga/itnetwork-logo-claim-final.png"
    Aspect="AspectFit"
    HeightRequest="80"
    Margin="0,20"
/>

Source nám říká z jakého zdroje (v našem případě url) se obrázek načte a Aspect co se má dít s poměrem stran. Aspect může mít celkem 3 hodnoty:

• Fill - Vyplní celou komponentu <Image> obrázkem bez zachování poměru stran.
• AspectFill - Vyplní obrázkem celou komponentu <Image> a zároveň zachová poměr stran obrázku. Když má obrázek jiný poměr stran než komponenta <Image>, tak některé části obrázku mohou být oříznuty a nezobrazovat se.
• AspectFit - Vždy zobrazí celý obrázek se zachovaným poměrem stran. Když má obrázek jiný poměr stran než komponenta <Image>, tak některé části <Image> mohou zůstat nevyplněné.

Ve většině případů je tak nejvýhodnější použít AspectFill nebo AspectFit. My používáme AspectFit, jelikož jsme elementu <Image> nastavili fixní výšku a chceme zobrazovat celý obrázek.

Pro úplnost si ještě ukažme celý kód MainPage.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="DialogApp.MainPage">

    <StackLayout Margin="20,50">
        <Image
            Source="https://www.itnetwork.cz/images/5/loga/itnetwork-logo-claim-final.png"
            Aspect="AspectFit"
            HeightRequest="80"
            Margin="0,20"
         />
        <Label
            Text="Vítejte v první aplikaci!"
            FontSize="Large"
            TextColor="#666666"
            FontAttributes="Bold"
            HorizontalOptions="Center"
            HorizontalTextAlignment="Center" Margin="0,20,0,0"
         />
        <Entry
            x:Name="osloveniEntry"
            HorizontalTextAlignment="Center"
            HorizontalOptions="Center"
            Margin="20,20"
            MaxLength="255"
            Placeholder="Zadejte oslovení"
         />
        <Button
            x:Name="button"
            Text="Pozdravit!"
            Margin="20,10"
            BackgroundColor="#26940F"
            TextColor="#FFFFFF"
            Clicked="Button_Clicked"
         />
    </StackLayout>

</ContentPage>

Pokud máte vše správně, výsledek by měl vypadat takto:

Závěrem

Dnes jsme se naučili stylovat základní komponenty v naší aplikaci. Jistě vypadá lépe než minule, ale praktická využitelnost se rovná nule .

V následujícím cvičení, Řešené úlohy k 1.-6. lekci Xamarin v C# .NET, si procvičíme nabyté zkušenosti z předchozích lekcí.

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.