Kezdjük el közös utunkat, hogy gyönyörű natív, keresztplatformos alkalmazásokat építhessünk a .NET, a Xamarin és a Visual Studio segítségével! Ebben a blogban végigvezetlek a teljes folyamaton, és leírok mindent, ami a File -> New for Xamarin. Ha inkább vizuálisan tanulsz, van egy teljes videóm, amit megnézhetsz:
Először is tegyük le az alapokat néhány gyakori kérdés megválaszolásával.
Mi az a .NET?
A .NET egy platformokon átívelő, nagy teljesítményű és nyílt forráskódú futtatási rendszer, amelyet több nyelvvel, szerkesztővel és könyvtárral együtt használnak, és amely lehetővé teszi alkalmazások készítését webre, mobilra, asztali számítógépre, játékokra és sok másra. Ez az alap, amely lehetővé teszi a kód futtatását különböző platformokon, például iOS-en, Androidon és Windowson. Ha Ön webfejlesztő, akkor ez olyan, mint a V8 futásidő, amely a JavaScriptet hajtja végre, vagy ha Ön Java-fejlesztő, akkor a JVM, amely a Java-t hajtja végre.
Mi a Xamarin?
A Xamarin.NET egy sor olyan keretrendszerrel rendelkezik, amelyek a fejlesztők számára egyedi forgatókönyveket tesznek lehetővé az egyes platformokhoz. Például az ASP.NET Core és a Blazor a .NET-hez épített keretrendszerek a webfejlesztéshez. A WPF és az UWP a .NET-hez épített keretrendszerek asztali fejlesztésre. A Xamarin egy olyan keretrendszer és eszközrendszer, amely lehetővé teszi az iOS, Android és macOS alkalmazások készítését. Több olyan könyvtárat is tartalmaz, amelyek lehetővé teszik a platformok közötti fejlesztést iOS, Android, macOS és Windows rendszereken, beleértve a Xamarin.Forms-t a platformok közötti felhasználói felülethez és a Xamarin.Essentials-t a natív platformfunkciók platformok közötti eléréséhez.
Milyen programozási nyelveket használhatok?
A.NET számos nyelvet támogat, köztük a C#, F# és Visual Basic nyelveket. Ezen programozási nyelvek bármelyikét használhatja a Xamarinnal történő alkalmazásfejlesztéshez, azonban én C# fejlesztő vagyok, és ez az elsődleges nyelv az alkalmazásfejlesztéshez. Az F#-hoz azonban van néhány fantasztikus keretrendszer, például a funkcionális fejlesztéshez a Fabulous.
A XAML egy másik “nyelv”, amelyet a Xamarin felhasználói felületének építéséhez használunk. A XAML-t már régóta használják a WPF és UWP Windows-alkalmazások készítéséhez, és rendelkezik néhány nagyszerű funkcióval, köztük a könnyen olvasható jelöléssel, a Hot Reload technológiával és a fejlett adatkötéssel, amelyekkel a felhasználói felület fejlesztése gyerekjáték.
Milyen eszközöket használhatok?
A.NET lehetővé teszi a fejlesztők számára, hogy eszközök széles skáláját használják, beleértve a parancssoros, kódszerkesztőket, például a Visual Studio Code-ot, valamint a Visual Studio 2019 és a Visual Studio 2019 for Mac teljes IDE-t (integrált fejlesztőkörnyezet). Ahhoz, hogy mobilalkalmazásokat fejlesszünk a Xamarinnal, a Visual Studio 2019 vagy a Visual Studio 2019 for Mac-et kell használnunk, mivel ezek rendelkeznek az alkalmazások építéséhez szükséges teljes körű funkciókkal.
Szóval, kezdjük el építeni az első mobilalkalmazásainkat a Xamarinnal!
A Visual Studio telepítése mobilfejlesztéshez
A keresztplatformos utazás első lépése a Visual Studio 2019 telepítése Windowsra vagy a Visual Studio 2019 Macre.
A Visual Studio 2019 telepítésekor Windowson csak annyit kell tennünk, hogy kiválasztjuk a Mobile development with .NET munkaterhelést:
A Visual Studio 2019 for Mac-en kiválaszthatja az Android és iOS telepítését.
Ha iOS fejlesztést végez, akkor az Xcode-ot is telepítenie kell a macOS gépére.
Ezek után már készen áll a mobilfejlesztésre!
Az Android projekt létrehozásakor és futtatásakor további Android SDK-k telepítését és Android emulátorok létrehozását kérhetik.
A projekt létrehozása
Most, hogy telepítettük a Visual Studio 2019-et és a Xamarint, lássunk munkához! A Visual Studio 2019 indításakor lehetőségünk lesz egy új projekt létrehozására. Windowson rákereshetünk a Xamarin.Forms-ra, vagy használhatjuk a projekttípusok szűrőt, és kiválaszthatjuk a Mobile-t. Mi a Mobile App (Xamarin.Forms) lehetőséget szeretnénk kiválasztani.
Az új projekt kiválasztásakor egy új párbeszédpanel jelenik meg, amelyben megkérdezzük, hogy milyen típusú sablont szeretnénk használni az alkalmazáshoz:
Az elkészítendő alkalmazás típusa alapján választhatunk néhány lehetőséget.
Flyout, Tabbed, & Blank
Flyout & A Tabbed alkalmazássablonok a legújabb Xamarin.Forms technológián, a Shell-en alapulnak. Ez lehetővé teszi az alkalmazások gyorsabb felépítését, és olyan egyedi funkciókat kínál, mint például az URL-alapú navigáció. Ezek a sablonok hasonlóak, egy fő különbséggel, ha flyout menüt vagy alsó lapokat szeretne az alkalmazás alapjául.
A Blank app éppen ez, és egy meglehetősen egyszerű sablont kínál egyetlen oldallal és semmi mással.
Legyen a Flyout! Szeretném, ha itt kezdenénk, mivel a legtöbb oktatóanyag nem megy végig a Shell-en és számomra ez a Xamarin alkalmazásfejlesztés jövője. Ez a sablon sok mindent tartalmaz, így a jövőbeni bejegyzésekben végigmegyünk az egyes részeken, de ma csak létrehozzuk a projektet és átnézzük, hogy mi a Shell.
Ha a Visual Studio 2019 for Mac-et használod, akkor a Multiplatform > App > Flyout Forms App
Mi van a projektben?
Most, hogy az alkalmazás projektet létrehoztuk, több projektet fogunk látni egyetlen megoldáson belül.
Menjünk végig, mi van itt az új megoldásunkban:
Az első projekt több mappát, kódfájlokat és felhasználói felület fájlokat tartalmaz. Ez a projekt egy .NET Standard projekt, amely lehetővé teszi számunkra, hogy egyetlen projektünk legyen, amelyet különböző operációs rendszerek között megoszthatunk. Ebben a projektben fogjuk megírni a kódunk nagy részét.
iOS & Az Android projektek a “fej” vagy “szülő” projekt, amely a platformspecifikus kód, beállítások, eszközök és egyebek elhelyezésére szolgál. Ez az a hely, ahol a különböző beállításokat, például a megjelenítési nevet, az alkalmazás ikonját, a verziószámokat és minden olyan kódot, amely az iOS vagy Android specifikus dolgokhoz szükséges, és amely nem érhető el platformokon átívelő módon. Egy bizonyos ponton be kell majd mennie ezekbe a projektekbe, és át kell majd csípnie a dolgokat, de egyelőre maradunk a keresztplatformos projektben.
Xamarin.Forms Cross-Platform UI
A keresztplatformos .NET Standard projektünkben találunk egy kis kódot az alkalmazásunkhoz. Ez a sablon egy mintaalkalmazást mutat be, amely egy terméklistával és egy kb. oldallal rendelkezik. Az elemek mappákba vannak rendezve:
- Models: Ezek olyan osztályok, amelyek adatokat reprezentálnak az alkalmazásokban, mint például a Person, Car, Dog, Cat, stb. Ebben az alkalmazásban egyetlen modellünk van, melynek neve Item.
- Szolgáltatások: Ebben a mappában olyan kódokat helyezünk el, amelyek nem felhasználói felülettel kapcsolatos dolgokhoz férnek hozzá, például webszolgáltatás-hívásokhoz, adatbázisokhoz stb. A projektben egy egyszerű MockDataStore, amely az elemek memóriában való tárolására szolgál.
- Views:
- ViewModels: Ebben a mappában találjuk azokat a fájlokat, amelyek majdnem 1:1-ben a Views mappának felelnek meg. Ez azért van így, mert minden Nézetnek van egy ViewModellje, amihez van kötve, hogy a Xamarin.Forms össze tudja hidalni a kettőt, így a Nézet képes információkat megjeleníteni vagy metódusokat hívni az egyes ViewModellekben.
Nézzük meg az AboutPage.xaml-t, ami az első oldal, amit látni fogunk, amikor elindítjuk az alkalmazást. Itt látunk néhány dolgot, először is a ContentPage legfelső szintű elemet:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MyAwesomeApp.Views.AboutPage" xmlns:vm="clr-namespace:MyAwesomeApp.ViewModels" Title="{Binding Title}">Itt van néhány xmlns tag, amelyek azt jelzik, hogy hol lakik az adott kód. Az alapértelmezett és az x minden fájlban szerepel, és az alapfunkciókat szolgálják. Az xmlns:vm tag lehetővé teszi, hogy a XAML-ből elérjük a saját kódunkat, amit mindjárt látni fogunk. Az x:Class egy hivatkozás az oldal névterére és nevére, ez megegyezik a mögötte lévő kóddal. Végül van egy Title tulajdonság, amely adatkötött a ViewModelünk Title nevű tulajdonságához.
A XAML-tartalommal további tulajdonságokat, például a BindingContextet és a Resources-t állíthatjuk be. Itt ezt az xmlns:vm taget fogjuk használni, hogy a BindingContextet az AboutViewModel egy új példányára állítsuk be:
<ContentPage.BindingContext> <vm:AboutViewModel /></ContentPage.BindingContext>A következő a Color erőforrás, amelyet az oldalon használhatunk. Az erőforrások lehetővé teszik számunkra, hogy eltávolítsuk a duplikált kódot, és újrafelhasználható kulcs/érték párokat hozzunk létre. Ez bizonyos értelemben hasonlít a CSS-hez a webfejlesztésben.
<ContentPage.Resources> <ResourceDictionary> <Color x:Key="Accent">#96d1ff</Color> </ResourceDictionary></ContentPage.Resources>Az erőforrásokhoz több dolgot is hozzáadhatunk, beleértve a karakterláncokat, stílusokat és egyebeket.
Végül minden oldalnak lehet egy gyökérelem vezérlője. Ez általában egy Layout, például StackLayout, ScrollView, vagy egy Grid, mint amilyen itt van. A grid egy félelmetes vezérlőelem, amely sorokkal és oszlopokkal rendelkezik. Nem fogunk részletesen foglalkozni az elrendezésekkel, de ez itt egy képet, némi szöveget és egy gombot jelenít meg, amelyre kattintva megnyitható a webböngésző.
<Button Margin="0,10,0,0" Text="Learn more" Command="{Binding OpenWebCommand}" BackgroundColor="{StaticResource Primary}" TextColor="White" />Megjegyezzük a
{StaticResource Primary}-et, amely egy hivatkozás egy korábban definiáltAccenterőforrásra, de aPrimaryaz App.xaml fájlunkban található, amelyek az egész alkalmazásban elérhető erőforrások.
Még több elrendezést és vezérlőelemet kereshetünk, ha megnyitjuk az Eszköztárat, hogy megnézzük, mi áll rendelkezésre:
Végül, ha kiválasztunk egy vezérlőt vagy elrendezést, a Tulajdonságok ablaktábla megmutatja az összes különböző tulajdonságot, amely az adott vezérlőn elérhető.
Egy dolog, ami nagyon fontos, hogy minden ilyen XAML lap mögött van kód, ami fontos a XAML nézet számára, és vannak speciális metódusok a konstruktorhoz és az eseményhez, például amikor az oldalak megjelennek vagy eltűnnek. A kis nyíl lenyílóval megnézheti a .xaml.cs fájl mögötti kódot.
Ha megnyitja, látni fogja, hogy nagyon egyszerű, mivel ehhez a nézethez most nincs szükség semmilyen speciális eseményre.
public partial class AboutPage : ContentPage{ public AboutPage() { InitializeComponent(); }}Használói interakció és ViewModellek
Most beszéljünk az oldal ViewModelljéről, amelyet a XAML-ben hoztunk létre. Nyissuk meg a ViewModels -> AboutViewModel.cs fájlt dupla kattintással.
public class AboutViewModel : BaseViewModel{ public AboutViewModel() { Title = "About"; OpenWebCommand = new Command(async () => await Browser.OpenAsync("https://aka.ms/xamarin-quickstart")); } public ICommand OpenWebCommand { get; }}Ez egy elképesztően egyszerű ViewModel, de figyelemre méltó példája az adatkötés működésének. Itt a ViewModel a Title-t About-ra állítja, majd létrehoz egy új Command-et, amely a Browser.OpenAsync-t hívja, hogy megnyissa a webböngészőt az oldalon.
Ez a Command valami különleges. Ellentétben a Title-val, amely egy egyszerű string, amely megjelenik, a Command egy speciális osztály, amelyet arra használhatunk, hogy megmondjuk a felhasználói felületünknek, hogy csináljon valamit, amikor a felhasználó interakcióba lép vele. Például a Button-ünkön a következő kódot láttuk:
Command="{Binding OpenWebCommand}"Ez a kód azt mondja a Xamarin.Formsnak, hogy van egy public parancs a ViewModelünkben, amely kódot tartalmaz, amelyet végre kell hajtani, amikor a felhasználó rákattint a gombra. Ebben az esetben a böngészőt szeretnénk megnyitni, ami a Xamarin.Essentials számos natív funkciójának egyike. A Browser.OpenAsync meghívása egyetlen kódsorral elindítja az iOS és Android specifikus böngészőt.
Gyors módosítások a XAML Hot Reloaddal
Most itt az ideje, hogy elindítsuk az alkalmazásunkat. Szeretek Androidon kezdeni, mert az emulátorok helyben elérhetőek Windowson és macOS-en is. A Visual Studio menüjében látni fogja, hogy az Android az alapértelmezett projekt, és a debug gomb elérhető, és megmutatja az elérhető Android emulátorokat. Amikor a debug gombra kattintunk, ha nincs emulátorunk, akkor megkéri, hogy hozzunk létre egyet.
Az alkalmazás indításakor Debug módba lép, ami lehetővé teszi számunkra, hogy töréspontokat állítsunk be a kódunkon, hogy láthassuk az értékeket, de lehetővé teszi a XAML Hot Reload-ot is, ahol változtathatunk a felhasználói felületen anélkül, hogy a hibakeresést le kellene állítani.
Nyissuk meg az AboutPage.xaml fájlt, és változtassuk meg a Accent színt egy másik színre. Itt narancssárgára frissítem, és megnyomom a mentést, hogy lássam a változásokat.
Ezzel a ponttal új vezérlőelemeket adhatunk hozzá, frissíthetjük a felhasználói felületet, és folytathatjuk a munkát az alkalmazásunkon Androidon.
Deploy to iOS with Hot Restart
Legyen iOS telepítés! Kattintsunk a jobb gombbal az iOS projektre, és válasszuk a Set as Startup Project opciót:
Az iOS-en a dolgok egy kicsit másképp alakulnak a fejlesztők számára. Ha macOS-en vagy és telepíted az Xcode-ot, akkor elérhetőek az iOS szimulátorok. Ha ez te vagy, akkor kiválaszthatsz egy szimulátort, majd debuggolhatod az alkalmazásodat. Windowson nincsenek iOS szimulátorok 🙁 így kétféleképpen szerezheted meg a
- iOS Remoted Simulatorodat: Ha van egy macOS géped, akkor telepítheted a Visual Studio 2019 for Mac-et és az Xcode-ot, és csatlakozhatsz hozzá a Windows gépedről, hogy távoli építőgépként használd. Az iOS szimulátor ezután elindítható a Windows géped megjelenített állapotából, ami nagyon menő!”
- iOS Hot Restart: Ez egy új előnézeti technológia, amely lehetővé teszi, hogy az alkalmazásod hibakeresési buildjét közvetlenül a Windows gépedhez csatlakoztatott iOS eszközödre telepítsd. Ez nagyszerű, ha nincs maced, és szeretnéd debugolni az alkalmazásodat, és olyan fantasztikus funkciókat használni, mint a XAML Hot Reload.
A beállításaidtól és a rendelkezésre álló eszközeidtől függően van egy nagyszerű lehetőség arra, hogy elkezdd az iOS alkalmazásod debugolását Windowsról. Olvassa el a dokumentációt, amit belinkeltem a teljes beállítási útmutatóért.
Az App és a Shell megértése
Az utolsó dolog, amiről szeretnék beszélni, hogy mi van az *Appunkban és mi van a Shellünkben:
Az Appunk belsejében.xaml-ben találsz olyan globális erőforrásokat, mint a Primary, amit korábban a gombon használtunk, de olyan stílusokat is, mint egy globális Button stílus, amit az állapotokkal használunk, amikor engedélyezve és letiltva van. Ha megnyitjuk az App.xaml.cs kódot mögötte lesz a creationg a App, amely beállítja a MainPage a mi AppShell, és további eseményeket is tartalmaz, hasonlóan az oldalunkhoz, de az alkalmazáshoz, mint például amikor elindult, alvó állapotba ment (aka háttér), és újraindult.
Az AppShell.xaml az alkalmazásunk struktúrájának héját tartalmazza. Tartalmazza az alkalmazásunk héjának stílusait és színeit, majd további elemeket tartalmaz a megjelenített lapokhoz, szórólapokhoz és oldalakhoz. Itt találunk két FlyoutItem elemet, amelyek a AboutPage és a BrowsePage elemeket képviselik. Ezenkívül van egy MenuItem a bejelentkezés/kijelentkezés gomb megjelenítéséhez. A ShellContent-nek van egy kötése az általunk létrehozott oldalunkhoz, és automatikusan megjelennek az oldalak, és kiválasztáskor mindegyikhez navigálnak.
A Xamarin.Forms Shell és az alkalmazások Xamarin segítségével történő létrehozása még sok mindent rejt, de remélhetőleg ez elindítja Önt a kezdő úton, hogy elindulhasson az alkalmazásával. Mindenképpen kövesse a .NET dev.to fiókot a sorozat további bejegyzéseiért.