Předvánoční slevová akce Předvánoční slevová akce
Využij předvánočních slev a získej od nás 20 % bodů zdarma! Více zde

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

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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, Uložení a načtení dat v Xamarin pomocí textového souboru, 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?
7 hlasů
Autor se věnuje primárně vývoji webových aplikací v .NET Core. Zajímá se také o vývoj her v Unreal Engine 4 a mobilních aplikací v Xamarin.
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
Miniatura
Následující článek
Uložení a načtení dat v Xamarin pomocí textového souboru
Aktivity (2)

 

 

Komentáře
Zobrazit starší komentáře (7)

Avatar
Jaroslav Smrž
Redaktor
Avatar
Jaroslav Smrž:6. září 13:09

Rád bych se omluvil za velkou prodlevu, ale měl jsem vážnější zdravotní problém. Nyní je snad již vše na dobré cestě a další 3 lekce jsou v plánu na příští týden (9. - 15. září). Díky za pochopení.

Odpovědět
6. září 13:09
/* Life runs on code */
Avatar
Ing. Cehuľa Milan:12. září 12:13

Neviem prečo, ale apka sa pri pripojenom mobile (Android 9, EMUI 9.1.0) síce do mobilu nahrala, ale ihneď sa sama ukončila, bez akéhokoľvek zásahu. Až po odklinknutí "USE SHARED RUNTIME" vo vlastnostiach SkuskaXamarin01­.Android to funguje tak, ako popisuje autor tutoriálu :-) .

 
Odpovědět
12. září 12:13
Avatar
Taaa Diiii
Člen
Avatar
Taaa Diiii:25. září 7:39

Dobrý den, rád bych se zeptal zda bude pokračovaní tohoto užasneho tutorialu :) Je to zatim nejlepe psani tutorial na Xamarin.Forms , cross-platform.

 
Odpovědět
25. září 7:39
Avatar
Jaroslav Smrž
Redaktor
Avatar
Odpovídá na Taaa Diiii
Jaroslav Smrž:25. září 8:33

Děkuji za pochvalu :) Vážím si toho. Další 2 lekce - Ukládání a načítání dat ze souborů - jsou již v redakci a čekají na publikování. Další navazující lekce - SQLite databáze - půjde do redakce během zítřka, takže příští týden ji můžete očekávat publikovanou.

Odpovědět
25. září 8:33
/* Life runs on code */
Avatar
Taaa Diiii
Člen
Avatar
Taaa Diiii:25. září 9:37

Dekuji za užasnou správu :) zrovna práce z soubory a s lokální databázi jsou věci s kterými jsem se už hodně krát zabýval. Dále by mne celkem zajímala práce s právama (permisions) jak je to řešene na cross-platform, custom layout pro každé zařízeni, Windows a android a web reference na asp core server na IIS zda to lze implementovat v Xamarin.Forms. Budete se budoucno zabývat i touto problematikou?

 
Odpovědět
25. září 9:37
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Jaroslav Smrž
Redaktor
Avatar
Odpovídá na Taaa Diiii
Jaroslav Smrž:25. září 11:15

Ano, mimo jiné, je custom layout a další specifika pro jednotlivá zařízení, plánovaný do další lekce po SQLite. Pak bude následovat několik článků na téma xamarin a .NET Core WebApi, což jistě oceníš. V podstatě postupně vytvoříme .NET Core webovou stránku, na které bude nějaký online objednávkový systém, např na pizzu. Z ní se pak budou načítat data do aplikace v Xamarin. Co se práv týče, to bych mohl také zahrnout podrobněji do tutoriálu, ale spíš až později nebo jako nenavazující článek. Když by tě napadlo ještě něco, co bys zde rád viděl, určitě se ozvi a něco vymyslíme.

Odpovědět
25. září 11:15
/* Life runs on code */
Avatar
gigi_l
Člen
Avatar
gigi_l:10. října 8:38

Pro nedockavce :-) Kouknout muzete taky sem... Je to super popsany a skoro 1:1 s tim, co pak autor da sem :-) Microsoft Xamarin

 
Odpovědět
10. října 8:38
Avatar
Jaroslav Smrž
Redaktor
Avatar
Odpovídá na gigi_l
Jaroslav Smrž:10. října 8:49

Nemyslim, že by to bylo 1:1 a dost pochybuji, že by začátečník úplně pochopil, o co jde, navíc při použití překladače :-) Nicméně inspirace na jednoduchou aplikace tam byla, ale téměř všude se setkáš s poznámkovým blokem na začátku. Nejlépe na tom jdou vidět postupy. Pokud máš nápad na nějaký jiný příklad, sem s ním.

Odpovědět
10. října 8:49
/* Life runs on code */
Avatar
gigi_l
Člen
Avatar
Odpovídá na Jaroslav Smrž
gigi_l:10. října 8:58

Vubec jsem to nemyslel zle... spis pro ty nedockavce jako jsem byl ja, je to takova dalsi varianta a derfakto hooodne podbnej navod. Nemelo to byt jako urazka apod. Vsechna cest, ze se tomu venujes :-)
Palec nahoru :-)

 
Odpovědět
10. října 8:58
Avatar
Jaroslav Smrž
Redaktor
Avatar
Odpovídá na gigi_l
Jaroslav Smrž:10. října 9:02

V pohodě, nebral jsem to zle :) Ale pořád platí, že pokud bys měl nějaký nápad na aplikaci, kde by bylo vidět obecné principy, tak budu moc rád. Nejtěžší je vymyslet něco originálního, reálně použitelného, aby to lidi bavilo a zároveň jednoduchého. Celkově celý seriál má směřovat k aplikaci s webAPI. Jsem na tom časově dost špatně, tak každou připomínku vítám.

Odpovědět
10. října 9:02
/* Life runs on code */
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 10 zpráv z 17. Zobrazit vše