ITnetwork summer 2020 ITnetwork summer 2020

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/…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 ú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 :-).

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.


 

Stáhnout

Staženo 1x (1.54 MB)
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
Tvorba mobilních aplikací v Xamarin a C# .NET
Článek pro vás napsal Jaroslav Smrž
Avatar
Jak se ti líbí článek?
9 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 (5)

 

 

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

Avatar
gigi_l
Člen
Avatar
gigi_l:10.10.2019 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.10.2019 8:38
Avatar
Jaroslav Smrž
Super redaktor
Avatar
Odpovídá na gigi_l
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ž
Super 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. dubna 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. dubna 7:49
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
M4RtY
Člen
Avatar
Odpovídá na Jan Smutný
M4RtY:28. dubna 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. dubna 11:31
Avatar
Jan Smutný
Člen
Avatar
Odpovídá na M4RtY
Jan Smutný:28. dubna 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. dubna 13:04
Avatar
Jaroslav Janků:11. května 18:48

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

 
Odpovědět
11. května 18:48
Avatar
Karolína Lebedová:4. června 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. června 11:18
Avatar
Alesh
Překladatel
Avatar
Odpovídá na Karolína Lebedová
Alesh:4. června 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. června 11: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 23. Zobrazit vše