Java týden
Procvič si angličtinu zdarma s naším americkým e-learningem! Learn more
Pouze tento týden sleva až 80 % na celý Java e-learning!

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

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

Vítejte u dalšího dílu kurzu o programování multiplatformních mobilních aplikací v Xamarin a C# .NET. V minulé lekci, První multiplatformní aplikace v Xamarin a C# .NET, jsme si vytvořili první jednoduchou aplikaci, která nás umí pozdravit podle uživatelem zadaného oslovení. Dnes se podíváme na ladění naší aplikace přímo na připojeném zařízení (našem telefonu) a ukážeme si základy pozicování jednotlivých komponent.

Jako vždy budu psát postup pro Android na operačním systému Windows 10. Při ladění verze pro iOS na iPhone je postup obdobný a jistě si s ním každý "jablíčkář" snadno poradí.

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

Ze všeho nejdříve musíme v telefonu aktivovat skrytou kartu "Možnosti 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í.

Možnosti pro vývojáře pro Android zařízení

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.

Připojení Android zařízení pro ladění Xamarin aplikace

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 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="osloveni"
    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"
/>

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/…work_big.png:

Logo ITnetwork

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/itnetwork_big.png"
    Aspect="AspectFill"
    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í obrazovku obrázkem bez zachování poměru stran
  • AspectFill – Vyplní obrázkem horizontální osu a zachová poměr stran obrázku.
  • AspectFit – Přizpůsobuje obrázek velikosti, ale může dojít k přetečení obrázku do ostatních prvků.

Ve většině případů je tak nejvýhodnější použít AspectFill. Pro úpnost 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"
             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>

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

Stylovaná Xamarin aplikace

Zavě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 :-) To napravíme hned v příští lekci, , kde začneme pracovat na poznámkovém bloku, který později rozšíříme o práci s datem a časem a stane se z něj tak užitečná aplikace, která nám pomůže s nákupním seznamem či připomenutím schůzky.


 

 

Článek pro vás napsal Jaroslav Smrž
Avatar
Jak se ti líbí článek?
6 hlasů
Autor se věnuje primárně vývoji webových aplikací v ASP.NET a PHP. Když je čas, tak tvoří i webové stránky a mobilní aplikace.
Předchozí článek
První multiplatformní aplikace v Xamarin a C# .NET
Všechny články v sekci
Tvorba mobilních aplikací v Xamarin a C# .NET
Aktivity (2)

 

 

Komentáře

Avatar
Radovan Škvor:9. srpna 15:01

Bude nějaké pokračování?
Docela chybí datum publikování článku.

 
Odpovědět 9. srpna 15:01
Avatar
Odpovídá na Radovan Škvor
Andy Scheuchzer:9. srpna 15:15

Klikni na Aktivity vpravo mezi rozcestníkem a komentáři.

Odpovědět  +3 9. srpna 15:15
Člověk, co si myslí, že snědl všechnu moudrost světa, i když tomu tak není.
Avatar
Jaroslav Smrž
Redaktor
Avatar
Odpovídá na Radovan Škvor
Jaroslav Smrž:9. srpna 15:15

Ano, pokračování bude. Omlouvám se za zpoždění, ale nemám teď moc času. Již mám téměř hotové další 3 lekce a počítám, že o víkendu je dokončím, takže příští týden by se tu měly objevit :) Jinak zatím poslední článek je cca 2-3 týdny starý.

Odpovědět 9. srpna 15:15
I have no idea what it is doing but I´m scared to delete it... xD
Avatar
Odpovídá na Jaroslav Smrž
Radovan Škvor:9. srpna 15:17

Super už se těším :-)

 
Odpovědět  +1 9. srpna 15:17
Avatar
Cyril Šebek
Člen
Avatar
Cyril Šebek:9. srpna 16:50

Jo, jsem se vrátil z dovolené a už se těším na programování (na další lekce) a říkam si "Hmm... na ITnetwork už jich bude alespoň 5" a ono nic. No tak už se těším.

 
Odpovědět 9. srpna 16:50
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.