Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij slevové akce 30% výuky zdarma!
Pouze tento týden sleva až 80 % na e-learning týkající se PHP
PHP týden

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 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 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 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

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/…ogo_text.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í 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 AspectFill, jelikož každý element (tedy i <Image>) má vlastnost VerticalOptions ve výchozím stavu nastavenou na Fill. Obrázek se díky tomu neořízne, protože <Image> si upraví svou výšku tak, aby se do ní obrázek vlezl.

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"
             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

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 příští lekci, Uložení a načtení dat v Xamarin pomocí textového souboru, si představíme architekturu MVC a začneme pracovat na ToDo aplikaci, která bude ukládat a načítat data z textového souboru pomocí XML serializace.


 

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

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 12x (461.51 kB)
Aplikace je včetně zdrojových kódů v jazyce C#

 

Předchozí článek
Pozicování v Xamarin.Forms
Všechny články v sekci
Xamarin - Mobilní aplikace v C# .NET
Článek pro vás napsal Jaroslav Smrž
Avatar
Jak se ti líbí článek?
10 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.
Aktivity (10)

 

 

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

Avatar
Jaroslav Smrž
Redaktor
Avatar
Jaroslav Smrž:10.10.2019 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.10.2019 8:49
/* Life runs on code */
Avatar
gigi_l
Člen
Avatar
Odpovídá na Jaroslav Smrž
gigi_l:10.10.2019 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.10.2019 8:58
Avatar
Jaroslav Smrž
Redaktor
Avatar
Odpovídá na gigi_l
Jaroslav Smrž:10.10.2019 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.10.2019 9:02
/* Life runs on code */
Avatar
Jan Smutný
Člen
Avatar
Jan Smutný:28.4.2020 7:49

Ahoj. Vyzkoušel jsem si tento tutoriál, ale mám problém. Vůbec se mi nezobrazuje logo ITNetwork. Mám identický kód:

<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>

Vidím <label> i vstup, ale ten obrázek prostě ne :-(. Na emulátoru to funguje, ale na mém telefonu nikoli...

 
Odpovědět
28.4.2020 7:49
Avatar
M4RtY
Člen
Avatar
Odpovídá na Jan Smutný
M4RtY:28.4.2020 11:31

Me se stalo to stejne, logo se nenacitalo - vse ostatni fungovalo. Telefon jsem nemel pripojeny k wifi, takze zkus zkontrolovat pripojeni a melo by to slapat.

 
Odpovědět
28.4.2020 11:31
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Jan Smutný
Člen
Avatar
Odpovídá na M4RtY
Jan Smutný:28.4.2020 13:04

No jo, jsem to ale hlupák. Vždyť se musím dostat k tomu obrázku na dané url. Na to jsem nepomyslel. Děkuji Ti!

 
Odpovědět
28.4.2020 13:04
Avatar
Jaroslav Janků:11.5.2020 18:48

Ahoj, nevite nekdo, proc se mi v okne properties nezobrazují zadne vlastnosti ke kontrolkám z toolboxu?

 
Odpovědět
11.5.2020 18:48
Avatar
Karolína Lebedová:4.6.2020 11:18

Tutoriál je povedený. Vše mi fungovalo bez problémů. Visual studio mám nainstalované v češtině. Občas mi dělalo problém najít anglické názvy v prostředí.

 
Odpovědět
4.6.2020 11:18
Avatar
Alesh
Překladatel
Avatar
Odpovídá na Karolína Lebedová
Alesh:4.6.2020 11:23

Jo, češtinu to dává při instalaci jako výchozí. Je dobré doinstalovat i angličtinu a v nastavení ji dle potřeby přepínat. Osobně dávám přednost angličtině, je určitě univerzálnější.

 
Odpovědět
4.6.2020 11:23
Avatar
Michal Strhal:5. března 15:23

Ahoj,

resim problemek, jak zablokovat(od­blokovat) v pripade entry vyskakovani soft klavesnice v pripade, ze je focus(). Tusite nekdo, jak tohle vyresit, pripadne obejit?

 
Odpovědět
5. března 15:23
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 24. Zobrazit vše