4. diel - Debug Xamarin aplikácie na Android zariadenia a Štýlovanie

Vitajte u ďalšieho dielu kurzu o programovaní multiplatformových mobilných aplikácií v Xamarin a C# .NET. V minulej lekcii, Prvý multiplatformový aplikácie v Xamarin a C # .NET , sme si vytvorili prvú jednoduchú aplikáciu, ktorá nás vie pozdraviť podľa užívateľom zadaného oslovenie. Dnes sa pozrieme na ladenie našej aplikácie priamo na pripojenom zariadení (našom telefónu) a ukážeme si základy pozicovanie jednotlivých komponentov.

Ako vždy budem písať postup pre Android na operačnom systéme Windows 10. Pri ladení verzia pre iOS na iPhone je postup obdobný a iste si s ním každý "jablíčkář" ľahko poradí.

Aktivácia možností pre vývojárov

Zo všetkého najskôr musíme v telefóne aktivovať skrytú kartu "Možnosti pre vývojárov". To vykonáme tak, že prejdeme do Nastavení -> Systém -> O telefonu a 7x - 10x klikneme na položku Číslo sestavení (počet kliknutí sa môže líšiť podľa verzie Android). Systém nás upozorní hláškou, že sme sa stali vývojári. Teraz sa vráťme do Nastavení -> Systém a novo tu uvidíme kartu Možnosti pre vývojárov. Otvoríme ju. Ostatného nastavenia si všímať zatiaľ nebudeme a aktivujeme iba Ladenie USB v sekcii Ladenie.

Spustení aplikácie

Presunieme sa do Visual Studia, kde máme otvorený náš projekt, a telefón pripojíme USB káblom k počítaču. Niektoré telefóny pri pripojení automaticky vypnú USB ladenie a aktivujú iba nabíjanie alebo prenos súborov. Ešte raz teda skontrolujeme, či máme v telefóne povolenej Ladenie USB. Ak všetko beží, Visual Studio by nám hneď malo ponúknuť miesto emulátora naše konkrétne zariadenie. Stačí potom len už aplikáciu spustiť pomocou zeleného tlačidla Play ako pri použití emulátora.

Ak sa vám telefón vo Visual Studiu nezobrazuje, je pravdepodobné, že nemáte v počítači nainštalované USB ovládače pre vaše zariadenie. Ovládače získate na webe výrobcu telefónu a nainštalujete. Potom bude všetko funkčné.

Štýlovanie aplikácie

Keďže naša aplikácia vyzerá veľmi skromne, bolo by dobré nastaviť nejaké vzdialenosti od okraja (margin), vycentrovať uvítací text, zväčšiť font a vykonať ďalšie dizajnové úpravy.

Label

Otvoríme si súbor MainPage.xaml a element <Label> upravíme do nasledujúcej podoby:

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

Ako vidíte, na kóde nie je nič zložité. <Label> sme vycentroval, zväčšili font, nastaviť mu tučnú hodnotu a nastavili farbu textu na šedú farbu s kódom #666666. Margin nám odsadia <Label> o 20 jednotiek zhora. Opäť sa nemusíme nič učiť naspamäť, pretože všetky hodnoty môžeme nastaviť aj v okne Properties a príslušný kód sa nám vygeneruje.

Entry

Budeme pokračovať s <Entry>. Opäť nastavíme odsadenie, vycentrujeme, navyše pridáme Placeholder, ktorý nám zobrazí zástupný text pred zadaním užívateľského vstupu a maximálnu dĺžku znakov:

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

Tlačidlo

Ostáva nám upraviť už len tlačidlo. Okrem odsadenie mu nastavíme ešte farbu pozadia a farbu textu:

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

K tomuto asi nie je potrebné nič vysvetľovať. Aplikáciu si môžete spustiť v emulátora alebo priamo na vašom telefóne.

Image

Ako vidíme, už to vyzerá trochu lepšie, ale ešte by sa hodilo nejaké logo alebo obrázok. Zoznámime sa teda s ďalšie komponentom - <Image>. Tá logicky slúži na vkladanie obrázkov do aplikácie. Keďže ešte nevieme poriadne pracovať so súbormi, naučíme sa najjednoduchší spôsob vkladania a to načítaní obrázka z URL adresy. Na Google si nájdeme ľubovoľný obrázok, klikneme naň pravým tlačidlom a vyberieme možnosť kopírovať URL adresu. Ja nebudem chodiť ďaleko a použijem logo ITnetwork z URL https://www.itnetwork.cz/...work_big.png:

Keďže logo je dobré pozicový do hlavičky, tak náš <Image> umiestnime úplne hore do <StackLayout> nad <Label>. Kód bude vyzerať nasledovne:

<Image
    Source="https://www.itnetwork.cz/images/5/itnetwork_big.png"
    Aspect="AspectFill"
    Margin="0,20"
/>

Source nám hovorí z akého zdroja (v našom prípade url) sa obrázok načíta a Aspect čo sa má diať s pomerom strán. Aspect môže mať celkom 3 hodnoty:

• Fill - Vyplní obrazovku obrázkom bez zachovania pomeru strán
• AspectFill - Vyplní obrázkom horizontálne os a zachová pomer strán obrázka.
• AspectFit - Prispôsobuje obrázok veľkosti, ale môže dôjsť k pretečeniu obrázku do ostatných prvkov.

Vo väčšine prípadov je tak najvýhodnejšie použiť AspectFill. Pre úpnost si ešte ukáž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"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="DialogApp.MainPage">

    <StackLayout>
        <Image
            Source="https://www.itnetwork.cz/images/5/itnetwork_big.png"
            Aspect="AspectFill"
            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="osloveni"
            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"
         />
    </StackLayout>

</ContentPage>

Ak máte všetko správne, výsledok by mal vyzerať takto:

ZÁVER

Dnes sme sa naučili stylovať základné komponenty v našej aplikácii. Iste vyzerá lepšie ako minule, ale praktická využiteľnosť sa rovná nule To napravíme hneď v nasledujúcej lekcii, Uloženie a načítanie dát v Xamarin pomocou textového súboru , kde začneme pracovať na poznámkovom bloku, ktorý neskôr rozšírime o prácu s dátumom a časom a stane sa z neho tak užitočná aplikácia, ktorá nám pomôže s nákupným zoznamom či pripomenutím stretnutia.