Getting gang med Xamarin.Forms: layoutalternativer
41
Del
Del
Del
Denne Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av
Dette innlegget er en del av en serie som heter Komme i gang med Xamarin.Forms.Getting Startet med Xamarin.Forms. Basics
1. Layout Options
Når det gjelder å utforme og legge ut skjermene til søknaden din, har du to hovedalternativer, skrive kode eller bruke XAML. Hvis du noen gang har gjort noe WPF (Windows Presentation Foundation) eller Silverlight utvikling, da er du sikkert allerede kjent med XAML. XAML er eXtensible Application Markup Language Hotell som ble opprettet for å bidra til å definere et program utseende uten å måtte håndtere alt i kode. Xamarin.Forms fungerer med begge alternativene. Det vil til syvende og sist være opp til deg å bestemme hvilket alternativ du foretrekker.
Det er viktig å merke seg at XAML brukes for Xamarin.Forms er ikke kompatibel med andre former for XAML og XAML verktøy.
Alternativ 1: Bruke kode
Hvis du er den typen person som elsker å være i kode og ikke vil ha noe å gjøre med noen form for markering, eller en designer, så vil du trolig være svært komfortabel med dette alternativet. Du programma instantiate ulike typer Se objekter og legge dem direkte til en side eller til et oppsett på en side. Her er et enkelt eksempel på å skape en SimplePage klasse, Instantiating noen Se objekter, og legge dem til side gjennom en StackLayout objekt
public class SamplePage: ContentPage {public SamplePage () {Padding = new Tykkelse (20),. Var label = ny etikett {Text = "Jeg er en enkel side", bakgrunnsfarge = Color.Blue, Font = Font.SystemFontOfSize (30), WidthRequest = 150, HeightRequest = 40}; Var knapp = new Button {Text = "Jeg har en knapp", bakgrunnsfarge = Color.Red, Font = Font.SystemFontOfSize (20), WidthRequest = 200, HeightRequest = 200}; Var entry = new Entry {Placeholder = "Jeg har en oppføring box", bakgrunnsfarge = Color.Green, WidthRequest = 200, HeightRequest = 150}; Content = ny StackLayout {Mellomrom = 10, barn = {knappen, oppføring, label}}; }}
Som du kan se, utsikten objekter har en rekke egenskaper til felles, som du kan bruke til å sette tekst, farger, avstand, høyde, bredde, etc. Alt du trenger å gjøre nå er å endre GetMainPage metode i App klassen til å returnere en ny forekomst av SamplePage klassen, og vekk du går.
Ingen har noensinne anklaget meg for å være en designer, men det er så enkelt å lage grunnleggende sider i koden.
Alternativ 2: Bruke XAML
Hvis du foretrekker å skille utseendet og følelsen av søknaden fra logikk og gjennomføring, så XAML kan bare være veien å gå. XAML lar deg lage hele utformingen av søknaden i et spesialisert XML-format som Xamarin kan oversette til sidene, oppsett, synspunkter og celler, og vise dem til brukeren. Hvis du aldri har brukt XAML før, kan det ta litt tid å bli vant til. Men når du først får taket på det, det kan faktisk være ganske fin.
Hvis du vil bruke XAML i kombinasjon med Xamarin.Forms, vil du trenger for å lage ditt prosjekt ved hjelp av Blank App (Xamarin. Skjemaer Portable)
mal slik at all Xamarin.Forms koden kan deles inn i sin egen dll.
I koden eksempelet i forrige avsnitt, skapt deg et veldig enkelt ContentPage klasse i kode. Å skape den samme ContentPage bruker XAML, høyreklikker du på PCL prosjektet og velg Legg til > Nytt element
. Fra Legg til nytt element
dialogboksen velger du Skjema XAML Side
mal og erstatte standard innholdet med følgende:?
≪ xml version = "1.0" encoding = " utf-8 http://xamarin.com/schemas/2014/forms~~number=plural "xmlns: x =" ">, < ContentPage xmlns =?" http://schemas.microsoft.com/winfx/2009/xaml "x: class = "SampleFormsXAMLApp.SampleXAMLPage" Padding = "30" > < StackLayout Spacing = "10" > < etikett Text = "Jeg er en enkel side" bakgrunnsfarge = "Blue" Font = "30" WidthRequest = "150" HeightRequest = "40" /> < Button Text = "Jeg har en knapp" bakgrunnsfarge = "Red" Font = "20" WidthRequest = "200" HeightRequest = "200" /> < Entry Placeholder = "Jeg har en entry boksen" bakgrunnsfarge = "Green" WidthRequest = "200" HeightRequest = "150" /> < /StackLayout > < /ContentPage >
Hvis du kjører programmet ditt, bør du se det samme skjermbildet som i eksempelet kode. The Page, Layout, og Vis typer kart til XML-elementer og egenskapene er det element attributter. Du står fritt til å bruke enten muligheten til å opprette fullt tilpass, kryssplattform brukergrensesnitt.
2. Fleksibilitet gjennom databinding
Du kan lage apps hvor du oppretter Se objekter for dine Page gjenstander og eksplisitt satt sine egenskaper, men som raskt blir tungvint. Når du eksplisitt angi egenskaper i XAML-kode, er du ikke lenger i stand til å gjenbruke det XAML Side for noe annet. Med andre ord, må du opprette nye XAML sider for hver variant du trenger. Hvem har tid til det?
Hadde det ikke vært fint om du kunne lage gjenbruk XAML sider med ingen tilpasset brukergrensesnitt kode og holde alt logisk atskilt? Selvfølgelig. Velkommen til MVVM.
4. Model-View-ViewModel
Model-View-View
l er en arkitektonisk mønster som ble opprettet med XAML i tankene. I kjernen, deler den grunnleggende konseptet av andre arkitektoniske mønstre som MVP og MVC. Det er designet for å skille data, modellen lag, fra presentasjonen, utsikten lag. Ledningen mellom de to er det ViewModel
. Utsikten modellen er en klasse som forenkler kommunikasjonen mellom modellen og se lagene gjennom en mekanisme som kalles databinding
. Databinding er i kjernen av MVVM mønster og er gjort gjennom XAML selv. La oss ta en titt på et eksempel.
5. Opprette en Sample Application
Start med å lage en ny Xamarin.Forms søknad ved å velge Blanke app (Xamarin.Forms Portable)
prosjekt mal og gi den navnet MyRecipeBox
.
Som du sikkert har gjettet, vil dette være grunnlaget for en grunnleggende app som kan lagre oppskrifter. La oss begynne med å lage en grunnleggende modell av app, en oppskrift.
MyRecipeBox
prosjekt, opprette en ny mappe og gi den navnet Modeller
. Dette er ikke et krav, det bare legger noen organisasjon til prosjektet som alltid hjelper som det blir større. I Modeller
mappe, legge til en ny klasse og name it oppskrift. Erstatte standard gjennomføring med følgende:
public class Oppskrift {public string Name {får; sett; } Public string Description {får; sett; } Public Timespan PrepTime {får; sett; } Public Timespan CookingTime {får; sett; } Public List < streng > Retninger {få; sett; }}
Nå som du har en grunnleggende modell klasse, kan du opprette en visning modell for det. Tenk på en visning modellen som en klasse som inneholder deler av en modell som trenger å bli vist og interaksjon med på en skjerm. Å holde ting enkelt, vi kommer til å konsentrere seg om de fire øverste eiendommene.
Opprett en ny mappe i MyRecipeBox
prosjektet og gi den navnet ViewModels
. I mappe ViewModels
, opprette en ny klasse og gi den navnet RecipeViewModel. Når vedta MVVM mønster i .NET, preget ViewModels er vanligvis preget av det faktum at de implementere INotifyPropertyChanged grensesnittet. Dette grensesnittet er hva brukes til å tillate andre deler av koden for å abonnere på hendelser og aktivere data bindende. Erstatte standard gjennomføringen av RecipeViewModel klassen med følgende:
public class RecipeViewModel: INotifyPropertyChanged {private Oppskrift _recipe; offentlig arrangement PropertyChangedEventHandler PropertyChanged; offentlig RecipeViewModel (oppskrift oppskrift) {_recipe = oppskrift; Retninger = new ObservableCollection < streng > (_ recipe.Directions); } Public ObservableCollection < streng > Retninger {få; sett; } Public string Name {få {return _recipe! = Null? _recipe.Name: null; } Satt {if (! _recipe = Null) {_recipe.Name = verdi; if (PropertyChanged = null!) PropertyChanged (dette, nye PropertyChangedEventArgs ("Name")) {; }}}} Public string Description {få {return _recipe! = Null? _recipe.Description: null; } Satt {if (! _recipe = Null) {_recipe.Description = verdi; if (PropertyChanged = null!) {PropertyChanged (Dette nye PropertyChangedEventArgs ("Beskrivelse")); }}}} Public string PrepTime {få {return _recipe! = Null? _recipe.PrepTime.ToString (): "Ingen"; } Satt {if (_recipe = null) {_recipe.PrepTime = TimeSpan.Parse (verdi); if (PropertyChanged = null) {PropertyChanged (dette, nye PropertyChangedEventArgs ("PrepTime")); }}}} Public string CookingTime {få {return _recipe! = Null? _recipe.CookingTime.ToString (): "Ingen"; } Satt {if (_recipe = null) {_recipe.CookingTime = TimeSpan.Parse (verdi); if (PropertyChanged = null) {PropertyChanged (dette, nye PropertyChangedEventArgs ("CookingTime")); }}}}}
Du har kanskje lagt merke til at RecipeViewModel implementerer INotifyPropertyChanged grensesnittet. Hvis du grave dypere inn i dette grensesnittet, vil du se at den inneholder en eiendom som må iverksettes
felles grensesnitt INotifyPropertyChanged {hendelsen PropertyChangedEventHandler PropertyChanged;}.
RecipleViewModel klassen tar i en forekomst av Oppskrift klasse og Da utsetter bare fire av sine eiendommer. De getters assosiert med disse egenskapene bare returnere dataene i Oppskrift eksempel selv. De setters på, derimot, sjekk for å se om PropertyChanged er ikke null. PropertyChanged vil være null dersom det ikke er abonnenter på denne hendelsen. I så fall skjer det ingenting. Hvis PropertyChanged er ikke null, da arrangementet kalles og hver abonnent av hendelsen mottar informasjon om at dette synet modellen er endret.
I MVVM mønster, er abonnenten til disse hendelsene vanligvis utsikten beskrevet av XAML slik at brukergrensesnittet til å oppdatere om de underliggende modellene har endret seg.
Det er på tide å lage en side som viser brukeren oppskriften data og utnytter databinding for å oppdatere brukergrensesnitt. Start med å lage en Visninger
mappe i MyRecipeBox
prosjektet. I Visninger
mappe, legge til en ny
Skjema XAML Side Hotell og navn det RecipeSummaryPage.
Erstatt standard XAML i filen med følgende :?
< xml version = "1.0" encoding = "utf-8" > < ContentPage xmlns = "http://xamarin.com/schemas/2014/forms~~number=plural" xmlns: x = "http: //schemas.microsoft.com/winfx/2009/xaml "x: Class =" MyRecipeBox.Views.RecipeSummaryPage "Tittel =" {Binding navn} "Padding =" 30 "> < StackLayout Avstand = "10" VerticalOptions = "FillAndExpand" > < etikett Text = "Oppskrift Name" textcolor = "Red" /> < etikett Text = "{Binding navn}" /> < etikett Text = "Oppskrift Beskrivelse" textcolor = "Red" /> < etikett Text = "{Binding Beskrivelse}" /> < etikett Text = "Total Prep Time" textcolor = "Red" /> < etikett Text = "{Binding PrepTime}" /> < etikett Text = "Total Cook Time" textcolor = "Red" /> < etikett Text = "{Binding CookTime}" /> < etikett Text = "Directions" textcolor = "Red" /> < Listview ItemsSource = "{Binding beskrivelser}" > < /StackLayout > < /ContentPage >
Som du kan se, bindingen er skapt ved å plassere noen formatert tekst der du vil at bundne data skal vises. Syntaksen for å oppnå dette er "{Binding xxxxx}", der xxxxx er navnet på eiendommen som du ønsker å binde. Til slutt, lurer du kanskje på hvordan du binder utsikten modellen du opprettet til dette synet.
Hvis du klikker den lille pilen ved siden av RecipeSummaryPage.xaml
fil, bør du se en annen fil vises RecipleSummaryPage.xaml.cs
. Dette er koden bak filen som inneholder C # -kode for å kjøre denne siden. Du må endre konstruktøren av denne klassen å se slik ut:
offentlig RecipeSummaryPage (RecipeViewModel recipeViewModel) {InitializeComponent (); this.BindingContext = recipeViewModel;}
BindingContext Eiendommen er der du må tilordne visningen modell for å skape den nevnte bindende. For å gjøre det, passerer en forekomst av din RecipeViewModel i konstruktøren.
For å se fruktene av vårt arbeid vises på skjermen, må du gjøre en liten endring å få dette arbeidet. I App.cs
fil, i MyRecipeBox
prosjektet, oppdatere GetMainPage metoden som vist nedenfor.
Public static Side GetMainPage () {var oppskriften = ny oppskrift {Name = "Toast", Description = "Det er toast, tuller du", PrepTime = new Timespan (0, 0, 15), CookingTime = new Timespan (0, 2, 0), beskrivelser = new List < streng > {"Grab brød "," Sett brød i brødrister "," Spis toast "}}; returnere ny RecipeSummaryPage (ny RecipeViewModel (oppskrift));}
Resultatet bør ligne på følgende skjerm
I neste og siste trinnet, vil vi opprette og vise en liste over Oppskrift objekter som. brukeren kan klikke for å bringe dem til en detalj side. La oss begynne med å lage et nytt syn modell som inneholder en liste over Oppskrift stedene. Legg til en ny klasse til ViewModels
mappe og gi den navnet RecipeListViewModel. Gjennomføringen ser slik ut:
public class RecipeListViewModel {public ObservableCollection < Oppskrift > Oppskrifter {få; sett; } Public RecipeListViewModel () {Oppskrifter = new ObservableCollection < Oppskrift > (); Recipes.Add (ny oppskrift {Name = "Toast", Description = "Tuller du? Det er toast.", CookingTime = new Timespan (0, 2, 0), PrepTime = new Timespan (0, 0, 15), beskrivelser = new List < streng > {"Plukk opp brød", "Sett pause i brødrister", "Spis Toast"}}); Recipes.Add (ny oppskrift {Name = "Cereal", Description = "Du vet, frokost ting.", CookingTime = TimeSpan.Zero, PrepTime = new Timespan (0, 1, 0), beskrivelser = new List < streng > {"Sett kornblanding i bollen", "Sett melk i bollen", "Sett skjeen i bollen", "Sett skjeen i munnen"}}); Recipes.Add (ny oppskrift {Name = "Sandwich", Description = "Brød og sånt YUM.", CookingTime = TimeSpan.Zero, PrepTime = new Timespan (0, 5, 0), beskrivelser = new List < streng > { "Få 2 skiver brød", "Put ost mellom break skiver", "Sett skinke mellom break skiver", "Enjoy"}}); }}
Du har kanskje lagt merke til at vi hard kodet oppskriftene i den RecipeListViewModel klassen. I en reell søknad, ville oppskriftene være hentet fra en web-tjeneste eller en database.
Opprett en ny side for å vise listen over oppskrifter. I Visninger
mappen oppretter du en ny Form XAML Side Hotell og navn denne RecipleListPage. Erstatte innholdet med følgende:?
≪ xml version = "1.0" encoding = "utf-8" > < ContentPage xmlns = "http://xamarin.com/schemas/2014/forms" xmlns : x = "http://schemas.microsoft.com/winfx/2009/xaml" x: Class = "MyRecipeBox.Views.RecipeListPage" Tittel = "Oppskrifter" > < Listview x: Name = "recipeList" ItemsSource = "{Binding Oppskrifter}" ItemTapped = "OnItemSelected" > < ListView.ItemTemplate > < DataTemplate > < TextCell Text = "{Binding navn}" /> < /DataTemplate > < /ListView.ItemTemplate> < /Listview > < /ContentPage >
Dette XAML er ganske lik den forrige eksempel. Denne gangen, derimot, trenger du bare en listevisning på siden. Når du bruker databinding i en Listview, må du grave ned litt dypere for å gjøre selve binding. Først binder du den fullstendige listen til ItemsSource eiendom theListView og du da trenger å definere Mal og DataTemplate av Listview for å være en TextCell og bind TextCell til den enkelte eiendom for Oppskrift forekomsten du vil vise. Dette er hva gjengir oppskrift navnene på skjermen.
Du kan også se at det er et navn som er knyttet til Listview, recipeList, som vil komme godt med litt senere, så vel som en hendelseshåndterer. I dette tilfellet, når en bruker kraner et element i listevisningen, er ItemTapped hendelsen sparken. Du har nå abonnert på den hendelsen og vil bruke en metode kalt OnItemSelected å håndtere det.
I neste trinn, må vi gjøre noen ledninger opp i RecipeListPage.xaml.cs
fil å sette theBindingContext av vår nye side, samt implementere OnItemSelected hendelseshåndterer
offentlig delvis class RecipeListPage {public RecipeListPage () {InitializeComponent (.); this.BindingContext = new RecipeListViewModel (); } Public void OnItemSelected (objekt avsenderen, ItemTappedEventArgs args) {var oppskriften = args.Item som oppskrift; if (oppskrift == null) tilbake; Navigation.PushAsync (ny RecipeSummaryPage (ny RecipeViewModel (oppskrift))); //Tilbake det valgte elementet recipeList.SelectedItem = null; }}
BindingContext eiendommen vil rett og slett bli satt til en ny forekomst av RecipleListViewModel som du opprettet tidligere. Hendelseshåndterer metoden er litt annerledes. Først må du sjekke at det valgte elementet er en oppskrift som er oppnådd i følgende linjer:
Var oppskrift = args.Item som Oppskrift; if (oppskrift == null) tilbake;
Hvis det valgte elementet er en oppskrift objekt, så bruker du navigasjons eiendom for å legge en ny forekomst av RecipleSummaryPage til gjeldende NavigationView. Til slutt må du sørge for at ingen elementer i listen er valgt for øyeblikket
Navigation.PushAsync (ny RecipeSummaryPage (ny RecipeViewModel (oppskrift)));. //Tilbake valgt itemrecipeList.SelectedItem = null;
Tilgang den Listview er gjort gjennom navn som ble tildelt det tidligere. Du kan få tilgang til alle Vis på siden ved å tilordne et navn til Vis-og henvise til den ved navn i koden.
Den siste endringen vi trenger å gjøre er å oppdatere GetMainPage metoden i App .cs
fil. som vist nedenfor:
public static Side GetMainPage () {return new NavigationPage (ny RecipeListPage ());}
Du kommer tilbake en ny forekomst av NavigationPage klassen som hovedsiden og sette root nettsiden til en ny forekomst av RecipleListPage klassen. Nå som alt er kablet opp, du kan kjøre programmet på alle tre plattformer og se noe sånt som følgende:
Pek på noen av radene i listen tar deg til den tilsvarende oppskrift oppsummering side som du har sett før .
Konklusjon
Du har nå sett de ulike alternativene for å legge ut søknaden din hjelp Xamarin.Forms. Du skal føle deg komfortabel å skape grunnleggende programmer som kan kjøre på de store mobile plattformer ved hjelp av en enkelt kode base for både forretningslogikk samt brukergrensesnittet til applikasjonen. Når du har brukt litt tid på å jobbe med Xamarin.Forms, vil neste steg være å lære å tilpasse programmets brukergrensesnitt og legge til nye kontroller. Men det er for en annen dag
Neste trinn:. Se Course
Hvis du ønsker å lære mer om Xamarin, så sjekk ut vår kurs Bygge Multi-Platform Apps med C # i Xamarin.
I kurset vil du lære hvordan du oppretter en kryssplattform søknad fra en enkelt kodebasen som vil kjøre på tre distinkt forskjellige plattformer: iOS, Android og Windows Phone 8. Tror det kan ikke være gjort? På bare en liten stund vil du gjøre det selv. La oss få til å fungere.
Du kan ta med en gang med en helt gratis
14 dagers prøveversjon av en Tuts + abonnement. Ta en titt på våre abonnement alternativer å komme i gang, eller, hvis du er like interessert i dette kurset, kan du kjøpe det individuelt for $ 15! Her er en forhåndsvisning for å komme i gang: