Aloitetaan yhteinen matka kauniiden natiivien cross-platform-sovellusten rakentamiseen .NETin, Xamarinin ja Visual Studion avulla! Tässä blogissa opastan sinut koko prosessin läpi ja kuvaan kaiken, mitä File -> New for Xamarin. Jos olet visuaalisempi oppija, minulla on kokonainen video, jonka voit katsoa:
Säädetään ensin hieman pohjatyötä vastaamalla joihinkin usein kysyttyihin kysymyksiin.
Mikä on .NET?
.NET on monialustainen, erittäin suorituskykyinen ja avoimen lähdekoodin ajoaika, jota käytetään useiden eri kielten, editoreiden ja kirjastojen kanssa ja joka mahdollistaa sovellusten rakentamisen webiin, mobiililaitteisiin, työpöydälle, peleihin ja muuhun. Se on perusta, jonka avulla koodia voidaan ajaa eri alustoilla, kuten iOS:llä, Androidilla ja Windowsilla. Jos olet web-kehittäjä, tämä on kuin V8-ajoaika, joka suorittaa JavaScriptin, tai jos olet Java-kehittäjä, JVM, joka suorittaa Javan.
Mikä on Xamarin?
.NET:ssä on joukko sille rakennettuja kehyksiä, jotka mahdollistavat ainutlaatuisia skenaarioita kehittäjille tiettyjä alustoja varten. Esimerkiksi ASP.NET Core ja Blazor ovat .NET:lle rakennettuja kehyksiä web-kehitystä varten. WPF ja UWP ovat .NET:lle rakennettuja kehyksiä työpöytäkehitystä varten. Xamarin on kehys ja työkalut, joiden avulla voidaan rakentaa sovelluksia iOS:lle, Androidille ja macOS:lle. Se sisältää myös useita kirjastoja, jotka mahdollistavat alustarajat ylittävän kehityksen iOS:n, Androidin, macOS:n ja Windowsin välillä, mukaan lukien Xamarin.Forms alustarajat ylittävään käyttöliittymään ja Xamarin.Essentials natiivialustan ominaisuuksien käyttämiseen alustarajat ylittäen.
Mitä ohjelmointikieliä voin käyttää?
.NET tukee useita ohjelmointikieliä, muun muassa C#:a, F#:a ja Visual Basicia. Voit käyttää mitä tahansa näistä ohjelmointikielistä sovellusten rakentamiseen Xamarinilla, mutta olen kuitenkin C#-kehittäjä, ja se on ensisijainen kieli sovelluskehityksessä. F#:lle on kuitenkin olemassa fantastisia kehyksiä, kuten Fabulous funktionaaliseen kehitykseen.
XAML on toinen ”kieli”, jota käytetään käyttöliittymän rakentamiseen Xamarinilla. XAML:ää on käytetty jo pitkään Windows-sovellusten rakentamiseen WPF:n ja UWP:n avulla, ja siinä on hienoja ominaisuuksia, kuten helppolukuinen merkintä, Hot Reload -tekniikka ja kehittynyt datan sitominen, jotka tekevät käyttöliittymäkehityksestä helppoa.
Mitä työkaluja voin käyttää?
.NET mahdollistaa kehittäjille laajan valikoiman työkaluja, mukaan lukien komentorivin työkalut, koodieditorit, kuten esimerkiksi Visual Studio Code, ja täydelliset IDE:t (integroitu kehittämisympäristö), joita ovat muun muassa Visual Studio 2019:n Visual Studio 2019:llä ja Macin Visual Studio 2019:llä. Kehittääksemme mobiilisovelluksia Xamarinilla meidän on käytettävä joko Visual Studio 2019:ää tai Visual Studio 2019 for Macia, koska niissä on täydet ominaisuudet sovellusten rakentamiseen.
Aloitetaan siis ensimmäisten mobiilisovellusten rakentaminen Xamarinilla!
Visual Studion asentaminen mobiilikehitystä varten
Ensimmäinen askel cross-platform-matkallasi on Visual Studio 2019:n asentaminen Windowsille tai Visual Studio 2019:n asentaminen Macille.
Kun asennat Visual Studio 2019:n Windowsille, sinun tarvitsee vain valita Mobile development with .NET-työkuorma:
Macille tarkoitetussa Visual Studio 2019:ssä voit valita asennettavaksi Androidin ja iOS:n.
Jos teet iOS-kehitystä, sinun on myös asennettava Xcode macOS-koneellesi.
Näiden vaiheiden jälkeen olet valmis mobiilikehitykseen!
Kun luot ja suoritat Android-projektin, sinua saatetaan pyytää asentamaan lisää Android SDK:ta ja luomaan Android-emulaattoreita.
Projektin luominen
Nyt kun Visual Studio 2019 ja Xamarin on asennettu, päästään töihin! Kun käynnistät Visual Studio 2019:n, sinulla on mahdollisuus luoda uusi projekti. Windowsissa voit etsiä Xamarin.Forms tai käyttää projektityypit-suodatinta ja valita Mobile. Haluamme valita Mobile App (Xamarin.Forms).
Kun valitset tämän uuden projektin, näet uuden valintaikkunan, jossa kysytään, minkä tyyppistä mallia sovellukselle haluat käyttää:
Meillä on muutama vaihtoehto, jotka voimme valita perustuen sovellustyyppiin, jonka haluamme rakentaa.
Flyout, Tabbed, & Blank
Flyout & Tabbed-sovellusmallit perustuvat uusimpaan Xamarin.Forms-teknologiaan nimeltä Shell. Se mahdollistaa sovellusten nopeamman telineellistämisen ja tarjoaa ainutlaatuisia ominaisuuksia, kuten URL-pohjaisen navigoinnin. Nämä mallit ovat samankaltaisia pääasiallisella erolla, jos haluat flyout-valikon tai alareunan välilehdet sovelluksesi pohjaksi.
Tyhjä sovellus on juuri sellainen ja tarjoaa melko yksinkertaisen mallin, jossa on vain yksi sivu ja ei mitään muuta.
Mennään Flyoutilla! Haluan, että aloitamme tästä, koska useimmat opetusohjelmat eivät käy läpi Shelliä ja minulle se on Xamarin-sovelluskehityksen tulevaisuus. Tässä mallissa on paljon on, joten tulevissa postauksissa käymme läpi jokaisen osion, mutta tänään vain luomme projektin ja käymme läpi mitä Shell on.
Jos käytät Visual Studio 2019 for Macia, haluat valita Multiplatform > App > Flyout Forms App
Mitä projektissa on?
Nyt kun sovellusprojekti on luotu, näet useita projekteja yhden ratkaisun sisällä.
Kävellään läpi, mitä tässä uudessa ratkaisussamme on:
Ensimmäinen projekti sisältää useita kansioita, kooditiedostoja ja käyttöliittymätiedostoja. Tämä projekti on .NET Standard -projekti, jonka avulla meillä on yksi projekti, joka voidaan jakaa eri käyttöjärjestelmissä. Tähän projektiin kirjoitamme suurimman osan koodistamme.
iOS & Android-projektit ovat ”pää-” tai ”emoprojekti”, johon sijoitetaan alustakohtaista koodia, asetuksia, resursseja ja muuta. Täällä haluat määrittää erilaisia asetuksia, kuten näyttönimen, sovelluksen kuvakkeen, versionumerot ja kaiken koodin, jota tarvitaan iOS- tai Android-kohtaisiin asioihin, jotka eivät ole saatavilla alustarajat ylittäen. Jossain vaiheessa sinun täytyy mennä näihin projekteihin ja säätää asioita, mutta toistaiseksi pysymme cross-platform-projektissa.
Xamarin.Forms Cross-Platform UI
Cross-platform .NET Standard -projektimme sisältä löytyy hieman koodia sovellustamme varten. Tässä mallissa esitellään esimerkkisovellus, jossa on kohdeluettelo ja about-sivu. Kohteet on järjestetty kansioihin:
- Mallit: Nämä ovat luokkia, jotka edustavat tietoja sovelluksissasi, kuten henkilö, auto, koira, kissa jne. Tässä sovelluksessa meillä on yksi malli nimeltä Item.
- Services: Tämän kansion sisälle laitetaan koodia, joka käyttää muita kuin käyttöliittymään liittyviä asioita, kuten verkkopalvelukutsuja, tietokantoja jne. Projektissa on yksinkertainen MockDataStore, jota käytetään kohteiden tallentamiseen muistiin.
- Views: Tähän sijoitetaan XAML-käyttöliittymätiedostomme!
- ViewModels: Tästä kansiosta löydät tiedostot, jotka vastaavat lähes 1:1 Views-kansiota. Tämä johtuu siitä, että jokaisella näkymällä on ViewModel, joka on sidottu niin, että Xamarin.Forms voi yhdistää nämä kaksi niin, että näkymä voi näyttää tietoja tai kutsua metodeja kussakin ViewModelissa.
Katsotaanpa AboutPage.xaml, joka on ensimmäinen sivu, jonka näemme, kun käynnistämme sovelluksen. Tässä näemme muutamia asioita, ensin on ylätason elementti ContentPage:
<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}">Tässä on muutama xmlns-tagi, jotka edustavat, missä tietty koodi asuu. Default ja x sisältyvät jokaiseen tiedostoon ja ovat perustoiminnallisuutta varten. Tunnisteen xmlns:vm avulla pääsemme käsiksi omaan koodiin XAML:stä, jonka näemme hetken kuluttua. x:Class on viittaus sivun nimiavaruuteen ja nimeen, tämä vastaa takana olevaa koodia. Lopuksi on Title-ominaisuus, joka on datasidottu ViewModelissamme olevaan Title-nimiseen ominaisuuteen.
Voimme asettaa XAML-sisällöllä lisäominaisuuksia, kuten BindingContext ja Resources. Tässä käytämme tuota xmlns:vm-tagia asettaaksemme BindingContextin uudeksi AboutViewModel-instanssiksi:
<ContentPage.BindingContext> <vm:AboutViewModel /></ContentPage.BindingContext>Jatkossa on Color-resurssi, jota voidaan käyttää sivulla. Resurssien avulla voimme poistaa päällekkäistä koodia ja luoda uudelleenkäytettäviä avain-/arvopareja. Tämä muistuttaa tavallaan CSS:ää web-kehityksessä.
<ContentPage.Resources> <ResourceDictionary> <Color x:Key="Accent">#96d1ff</Color> </ResourceDictionary></ContentPage.Resources>Voimme lisätä resursseihin lisää asioita, kuten merkkijonoja, tyylejä ja muuta.
Viimeiseksi jokaisella sivulla voi olla yksi juurielementtiohjaus. Tämä on yleensä Layout, kuten StackLayout, ScrollView tai Grid, kuten meillä on tässä. Grid on mahtava ohjain, jossa on rivejä ja sarakkeita. Emme mene paljon yksityiskohtiin layouteista, mutta tämä näyttää kuvan, jonkin verran tekstiä ja painikkeen, jota napsauttamalla voidaan avata verkkoselain.
<Button Margin="0,10,0,0" Text="Learn more" Command="{Binding OpenWebCommand}" BackgroundColor="{StaticResource Primary}" TextColor="White" />Huomaa
{StaticResource Primary}, joka on viittaus aiemmin määrittelemäämme resurssiinAccent, muttaPrimarysijaitsee App.xaml-tiedostossamme App.xaml:ssä, jotka ovat resursseja, jotka ovat käytettävissä koko sovelluksessa.
Voidaksesi löytää lisää asetteluja ja ohjaimia voit avata Työkaluruudun nähdäksesi, mitä on saatavilla:
Viimeiseksi, jos valitset ohjaimen tai asettelun, Ominaisuusruutu näyttää kaikki eri ominaisuudet, jotka ovat käytettävissä kyseisessä ohjaimessa.
Yksi erittäin tärkeä asia on se, että jokaisen XAML-sivun takana on XAML-näkymän kannalta tärkeää koodia, ja siinä on tietyt metodit konstruktorille ja tapahtumalle, kuten kun sivut näytetään tai katoavat. Voit käyttää pientä nuolen pudotusnäppäintä nähdäksesi .xaml.cs-tiedoston takana olevan koodin.
Jos avaat sen, huomaat, että se on hyvin yksinkertainen, koska tälle näkymälle ei ole mitään erityisiä tapahtumia, joita tarvittaisiin juuri nyt.
public partial class AboutPage : ContentPage{ public AboutPage() { InitializeComponent(); }}Käyttäjän vuorovaikutus ja näkymämallit
Keskustellaanpa nyt XAML:ssä luodun sivun näkymämallista. Avaa ViewModels -> AboutViewModel.cs-tiedosto kaksoisnapsauttamalla sitä.
public class AboutViewModel : BaseViewModel{ public AboutViewModel() { Title = "About"; OpenWebCommand = new Command(async () => await Browser.OpenAsync("https://aka.ms/xamarin-quickstart")); } public ICommand OpenWebCommand { get; }}Tämä on hämmästyttävän yksinkertainen ViewModel, mutta se on huomattava esimerkki siitä, miten tietojen sitominen toimii. Tässä ViewModel asettaa otsikoksi About ja luo sitten uuden komennon, joka kutsuu Browser.OpenAsync avatakseen verkkoselaimen sivulla.
Tämä Command on jotain erikoista. Toisin kuin Title, joka on yksinkertainen string, joka näytetään, Command on erityinen luokka, jota voimme käyttää kertoaksemme käyttöliittymällemme tehdä jotain, kun käyttäjä on vuorovaikutuksessa sen kanssa. Esimerkiksi Button:ssa näimme seuraavan koodin:
Command="{Binding OpenWebCommand}"Tämä koodi kertoo Xamarin.Formsille, että ViewModelissamme on public Command, jossa on koodia suoritettavaksi, kun käyttäjä napsauttaa painiketta. Tässä tapauksessa haluamme avata selaimen, joka on yksi monista Xamarin.Essentialsin natiivista ominaisuuksista. Kutsu Browser.OpenAsync käynnistää iOS- ja Android-käyttöjärjestelmäkohtaisen selaimen yhdellä koodirivillä.
Nopeita muutoksia XAML Hot Reloadilla
Nyt on aika käynnistää sovelluksemme. Haluan aloittaa Androidilla, koska emulaattoreita on saatavilla paikallisesti sekä Windowsissa että macOS:ssä. Visual Studion valikossa näet, että Android on oletusprojekti ja tulee debug-painike on käytettävissä ja näyttää Android-emulaattorit käytettävissä. Kun napsautat debug-painiketta, jos sinulla ei ole yhtään emulaattoria, sinua pyydetään luomaan sellainen.
Kun sovellus käynnistyy, se siirtyy Debug-tilaan, jonka avulla voimme asettaa break-pisteitä koodillemme nähdäksemme arvot, mutta se mahdollistaa myös XAML Hot Reloadin, jossa voimme tehdä muutoksia käyttöliittymään ilman, että meidän tarvitsee lopettaa debuggaus.
Avataan AboutPage.xaml ja vaihdetaan Accent väri eri väriksi. Tässä päivitän sen oranssiksi ja painan save nähdäksemme muutokset.
Tässä vaiheessa voimme lisätä uusia ohjaimia, päivittää käyttöliittymää ja jatkaa sovelluksemme työstämistä Androidissa.
Deploy to iOS with Hot Restart
Viedään iOS käyttöön! Napsauta iOS-projektia hiiren kakkospainikkeella ja valitse Set as Startup Project:
IOS:ssa asiat ovat kehittäjien kannalta hieman toisin. Jos olet macOS:ssä ja asennat Xcoden, sinulla on iOS-simulaattorit käytettävissä. Jos tämä on sinulle, voit valita simulaattorin ja sitten debugata sovelluksesi. Windowsissa ei ole iOS-simulaattoreita 🙁 joten on kaksi tapaa saada
- iOS Remoted Simulator: Jos sinulla on macOS-kone, voit asentaa Visual Studio 2019 for Macin ja Xcoden ja muodostaa siihen yhteyden Windows-koneestasi käyttääksesi sitä etäkehityskoneena. Sen jälkeen iOS-simulaattori voidaan käynnistää Windows-koneesi näytöltä, mikä on erittäin siistiä!
- iOS Hot Restart: Tämä on uusi esikatselutekniikka, jonka avulla voit ottaa käyttöön sovelluksesi debug-buildin suoraan iOS-laitteeseesi, joka on kytketty Windows-koneeseesi. Tämä on hienoa, jos sinulla ei ole macia ja haluat debugata sovelluksesi ja käyttää mahtavia ominaisuuksia, kuten XAML Hot Reload.
Perusteena asetuksillesi ja käytettävissäsi oleville laitteille on loistava vaihtoehto aloittaa iOS-sovelluksesi debuggaus Windowsista. Lue läpi linkittämäni dokumentaatio, josta saat täydellisen asennusoppaan.
Sovelluksen ja Shellin ymmärtäminen
Viimeiseksi haluan puhua siitä, mitä on *Appissamme ja mitä Shellissämme:
Sovelluksemme sisällä.xaml:stä löydät globaalit resurssit, kuten Primary, jota käytimme aiemmin painikkeessa, mutta myös tyylejä, kuten globaali Button-tyyli, jota käytämme tilojen kanssa, kun ne ovat käytössä ja pois käytöstä. Jos avaat App.xaml.cs-koodin takaa löydät App:n creationg:n, joka asettaa MainPage:n meidän AppShell:lle ja jolla on myös ylimääräisiä tapahtumia, jotka ovat samanlaisia kuin sivullamme, mutta sovellukselle, kuten milloin se käynnistyi, meni lepotilaan (eli taustalle) ja jatkui.
AppShell.xaml:ssä on sovelluksemme rakenteen Shell. Se sisältää tyylejä ja värejä sovelluksemme kuorelle, ja sen jälkeen siinä on lisäelementtejä välilehdille, esittelylehdille ja näytettäville sivuille. Täältä löytyy kaksi FlyoutItem-elementtiä, jotka edustavat AboutPage ja BrowsePage. Lisäksi siinä on MenuItem, jolla näytetään kirjautumis-/uloskirjautumispainike. ShellContent:llä on sidonta luomallemme sivulle, ja automaattisesti sivut tulevat näkyviin ja siirtyvät kuhunkin niistä, kun ne valitaan.
Xamarin.Forms Shellissä ja sovellusten luomisessa Xamarinilla on paljon muutakin, mutta toivottavasti tämä laittaa sinut lähtöpolulle, jotta pääset liikkeelle sovelluksesi kanssa. Muista seurata .NET dev.to-tiliä saadaksesi lisää merkintöjä tästä sarjasta.