Share
Terwijl u applicaties maakt met Xamarin.Forms, zult u ongetwijfeld de eenvoud van het maken van gebruikersinterfaces leuk vinden. Met Xamarin.Forms kunt u dezelfde terminologie gebruiken voor besturingselementen op meerdere platforms.
Hoewel dit concept zeer krachtig kan zijn, als ontwerper of ontwikkelaar, kan het enigszins beperkend zijn. Het lijkt misschien alsof we gedwongen worden om de native gebruikersinterfacesturing te gebruiken die bij elk van de platforms hoort, zonder de mogelijkheid om maatwerk toe te voegen. Dit is niet het geval.
Om het gebruikersproces voor specifieke platforms aan te passen, moet u eerst het renderingproces van Xamarin.Forms begrijpen..
Als het gaat om het gebruik van Xamarin.Forms om een gebruikersinterface te maken voor uw cross-platform mobiele applicatie, zijn er twee belangrijke stukjes in de puzzel die u moet begrijpen.
Het eerste stukje van de puzzel is de element. Je kunt een element zien als de platformagnostische definitie van een besturingselement binnen Xamarin.Forms. Als u de documentatie helemaal hebt doorgenomen, weet u dat deze besturingselementen ook worden aangeduid als Uitzicht voorwerpen. Om nog specifieker te zijn, is elk element binnen Xamarin.Forms afgeleid van de Uitzicht klasse.
Deze elementen worden gebruikt om een visueel element te beschrijven. De elementen bieden een platform-agnostische definitie van kenmerken van hoe de besturing eruit moet zien en zich moet gedragen. Een eigen element kan eigenlijk geen besturingselement maken dat aan de gebruiker wordt getoond. Het heeft wat hulp nodig. Dit is waar het tweede deel van het renderingproces in komt, een renderer.
Een renderer komt in het spel wanneer u uw applicatie uitvoert. De taak van de renderer is om het platform-agnostische element te nemen en het om te zetten in iets visueels om aan de gebruiker te presenteren.
Als u bijvoorbeeld een gebruikt Label controle in uw gedeelde project, tijdens het uitvoeren van uw toepassing, zou het kader Xamarin.Forms een exemplaar van de LabelRenderer klasse om de systeemeigen besturing te tekenen. Als je je begint af te vragen hoe dit gebeurt vanuit een project met gedeelde code, is dat een heel goede vraag. Het antwoord is, dat doet het niet.
Laten we dit illustreren met een voorbeeld. Begin met het openen van Xamarin Studio of Visual Studio. Het proces en de concepten zijn hetzelfde voor beide. Als u Xamarin Studio gebruikt, is er geen ondersteuning voor Windows Phone-projecten, dus u maakt slechts drie projecten in uw oplossing. Als u Visual Studio gebruikt, maakt u vier projecten.
Maak in Visual Studio een nieuw project en kiezen de mobiel Apps projectfamilie links en kies de Lege app (Xamarin.Forms Portable) projectsjabloon aan de rechterkant. Je kunt je project een naam geven die je leuk vindt, maar als je het wilt volgen, gebruik dan de naam Maatwerk, en de klik OK.
Afhankelijk van uw IDE zou u nu drie of vier projecten in uw oplossing moeten zien. Als u het uitbreidt Referenties map in uw Maatwerk (draagbaar) project, ziet u een assembly-verwijzing naar Xamarin.Forms.Core. Hier worden alle verschillende elementen gedefinieerd die u kunt gebruiken in uw project met gedeelde gebruikersinterface. Niets bijzonders daar.
Als u elk van de platformspecifieke projecten opent en hun uitbreidt Referenties mappen, zult u zien dat elke een platformspecifieke implementatie van die Xamarin.Forms-bibliotheek bevat, genaamd Xamarin.Forms.Platform.Android, Xamarin.Forms.Platform.iOS, en Xamarin.Forms.Platform.WP8 respectievelijk.
In deze assembly's vindt u de renderers voor elk van de Xamarin.Forms-elementen. Nu begin je de lay-out van het proces te zien. Het platform agnostische elementen, of Uitzicht objecten bevinden zich in het project met gedeelde code, maar alle specifieke weergaven voor de elementen bevinden zich in de platformspecifieke projecten.
Dit betekent dat voor elk van de elementen die u gebruikt, er twee renderers zijn gemaakt in Xamarin Studio en drie in Visual Studio. Nu u ziet hoe dit is gestructureerd in Xamarin.Forms, is de volgende logische vraag meestal: "Wanneer moet ik aanpassingen gebruiken?".
Er zijn absoluut een groot aantal eigenschappen en kenmerken die worden gedefinieerd binnen Xamarin.Forms-elementen die kunnen worden gebruikt om de uiteindelijke controle op elk van de platforms aan te passen. Dat gezegd hebbende, echter, niet elk maatwerk beschikbaar in elk van de platforms bestaat in Xamarin.Forms. In dat geval zijn er twee hoofdscenario's wanneer u aanpassingen wilt maken.
Het eerste scenario waarin aanpassingen nodig zijn, is wanneer u een volledig aangepast besturingselement wilt maken. Laten we zeggen dat je een kalenderbesturingselement wilde maken of misschien een soort grafische besturing. Helaas bestaat er nog steeds niets zoals dat in Xamarin.Forms, wat niet wil zeggen dat het nooit zal gebeuren.
Dit is absoluut een situatie waarbij je vanaf het eerste moet beginnen en alles helemaal opnieuw moet maken. U moet het element dat u gaat gebruiken definiëren om de kenmerken van de besturing op een agnostische manier te beschrijven. Vervolgens moet u ook een aangepaste renderer maken voor elk van de platforms die u wilt ondersteunen.
Afhankelijk van wat je aan het bouwen bent, kan dit een tamelijk uitgebreid project zijn. Als dat het geval is, zal ik dat bewaren voor een andere tutorial op zichzelf. In plaats daarvan zullen we in deze zelfstudie focussen op het tweede scenario waarin je wat aanpassingen nodig hebt.
De tweede situatie waarvan je merkt dat je wat aanpassingen nodig hebt, is wanneer een ingebouwd element geen specifieke functie ondersteunt van een platform dat je wilt ondersteunen. Een voorbeeld hiervan zou zijn op de Label controle. In Xamarin.Forms is er geen mechanisme of eigenschap waarmee u het equivalent op elk van de platforms kunt maken om de tekst vet of cursief te maken. Dit lijkt misschien een heel eenvoudig scenario, maar je zult zien dat het basisproces om deze verandering beschikbaar te maken in het element en de renderer laat begrijpen dat het hier hetzelfde zal zijn als in sommige van de meer complexe scenario's.
Met het tweede scenario in gedachten, heb je twee opties. U kunt de bestaande renderer voor een specifiek platform (of voor alle platforms) vervangen en uw eigen functionaliteit en tekenlogica maken voor alle mogelijkheden van het element. U kunt ook uw eigen element maken dat is afgeleid van het bestaande element en dat nieuwe element koppelen aan een aangepaste renderer. Op deze manier behoudt u alle standaard logica- en weergavemogelijkheden van het basiselement en past u deze naar wens aan. Dit is de route die we nemen voor dit voorbeeld. Laten we nu kijken hoe we deze functionaliteit aan ons eigen project kunnen toevoegen.
Laten we dit proces starten door de basisstructuur van onze applicatie in te stellen, zodat we onze baseline kunnen bekijken en vervolgens wijzigingen kunnen aanbrengen. Begin met het openen van uw App.cs bestand in de Maatwerk (draagbaar) project in de Solution Explorer. Wijzig de GetMainPage methode om er zo uit te zien:
public static Pagina GetMainPage () var iLabel = new Label TextColor = Color.Black, Text = "Ik wil cursief worden!", HorizontalOptions = LayoutOptions.CenterAndExpand; var bLabel = new Label Text = "Ik wil vetgedrukt zijn!", TextColor = Color.Black, HorizontalOptions = LayoutOptions.CenterAndExpand; var bothLabel = new Label Text = "Ik wil cursief en vetgedrukt zijn!", TextColor = Color.Black, HorizontalOptions = LayoutOptions.CenterAndExpand; retourneer nieuwe ContentPage BackgroundColor = Color.White, Content = new StackLayout Padding = 100, Spacing = 100, Children = iLabel, bLabel, bothLabel;
Zoals je hier kunt zien, hebben we drie eenvoudige gemaakt Label controles. Men wil cursief zijn, men wil brutaal zijn, en de derde is hebzuchtig en wil beide zijn. Als u deze applicatie zou gebruiken op iOS, Android en Windows Phone, zouden ze er ongeveer zo uitzien:
iOS
Android
Windows telefoon
Zoals je kunt zien, willen ze niet zo saai zijn. Nou, ga daar niet gewoon zitten en help ze.
Het eerste dat we moeten doen, is een nieuw element maken dat we kunnen gebruiken om aanvullende aanpassingen aan het bestaande aan te brengen Label controle. Begin door een nieuwe klas aan je toe te voegen Maatwerk (draagbaar) project en noem het StyledLabel. Vervang de inhoud door het volgende:
public enum StyleType Italic, Bold, BoldItalic public class StyledLabel: Label public StyleType Style get; vast te stellen;
We definiëren een heel eenvoudige opsomming en klasse. We hebben de opsomming gedefinieerd om cursief, vet en vet en cursief in te stellen waarden. We maken vervolgens een klas StyledLabeldat is afgeleid van de Labelbasisklasse en voeg een nieuwe eigenschap toe, Stijl,om de juiste stijl te behouden die we op het besturingselement willen toepassen.
Om ervoor te zorgen dat alles nog steeds werkt, en het zou moeten, laten we de App.cs bestand nogmaals en vervang de Label elementen in ons eerste voorbeeld met onze nieuwe StyledLabel elementen. Omdat het StyleLabel klasse erft van de Label klasse, alles zou nog moeten werken.
public static Pagina GetMainPage () var iLabel = new StyledLabel TextColor = Color.Black, Text = "Ik wil cursief worden!", HorizontalOptions = LayoutOptions.CenterAndExpand, Style = StyleType.Italic; var bLabel = new StyledLabel Text = "Ik wil vetgedrukt zijn!", TextColor = Color.Black, HorizontalOptions = LayoutOptions.CenterAndExpand, Style = StyleType.Bold; var bothLabel = new StyledLabel Text = "Ik wil cursief en vetgedrukt zijn!", TextColor = Color.Black, HorizontalOptions = LayoutOptions.CenterAndExpand, Style = StyleType.BoldItalic; retourneer nieuwe ContentPage BackgroundColor = Color.White, Content = new StackLayout Padding = 100, Spacing = 100, Children = iLabel, bLabel, bothLabel;
Nogmaals, hier zijn de resultaten van deze verandering.
iOS
Android
Windows telefoon
Zoals je ziet, is er niets veranderd. Nu we een nieuw aangepast element hebben, is het tijd om de aangepaste renderers te maken om voor de native controls te zorgen.
De eerste stap bij het maken van een renderer is om een nieuwe klasse toe te voegen aan het platform dat u target. We zullen beginnen met de Xamarin.Android project. Maak binnen dit project een nieuw klassenbestand aan en noem het StyledLabelRenderer en vervang de inhoud ervan door het volgende:
Android.Graphics gebruiken; gebruik maken van Customization; met Customization.Droid; gebruikmakend van Xamarin.Forms; met behulp van Xamarin.Forms.Platform.Android; [assembly: ExportRenderer (typeof (StyledLabel), typeof (StyledLabelRenderer))] namespace Customization.Droid public class StyledLabelRenderer: LabelRenderer protected override void OnElementChanged (ElementChangedEventArgs
Laten we dit codeblok nader bekijken.
[assembly: ExportRenderer (typeof (StyledLabel), typeof (StyledLabelRenderer))]
We beginnen met een special bijeenkomst attribuut dat Xamarin.Forms vertelt om dit te gebruiken StyledLabelRenderer class als de renderer elke keer dat het probeert te renderen StyledLabel voorwerpen. Dit is nodig om uw aanpassingen correct te laten werken.
Net zoals toen we een nieuwe maakten StyledLabel element, we geërfd van de Label klas, we zullen onze nieuwe hebben StyledLabelRenderer klasse erven van de LabelRenderer klasse. Hierdoor kunnen we de bestaande functionaliteit behouden, zodat we alleen hoeven te bepalen wat we willen wijzigen of aanpassen.
Om onze nieuwe opmaak toe te passen, moeten we het renderen en we doen dat via de OnElementChanged methode. In deze methode kunnen we al onze aanpassingen doen.
Wanneer u uw aanpassingen uitvoert, zijn er twee zeer belangrijke eigenschappen die u gaat gebruiken. Eerst moet u een verwijzing naar het originele element dat u hebt gemaakt en dat wordt weergegeven in onze aangepaste renderermethode. U doet dit met behulp van de Element eigendom. Dit is een generiek object, dus u moet dit naar elk type renderen dat u aan het renderen bent. In dit geval is het een StyledLabel.
var styledLabel = (StyledLabel) Element;
De tweede belangrijke eigenschap die u nodig hebt, is de Controle eigendom. Deze eigenschap bevat een getypte verwijzing naar de systeemeigen besturing op het platform. In dit geval, omdat u hebt geërfd van de LabelRenderer klasse, de code weet al dat de Controle in dit geval is een Tekstweergave.
Vanaf dit punt gebruikt u enkele eenvoudige logica om te bepalen welke aanpassing u moet uitvoeren en de juiste native aanpassingen toe te passen. In dit geval gebruikt u het Android-mechanisme om het lettertype van a aan te passen Tekstweergave door de SetTypeface methode.
switch (styledLabel.Style) case StyleType.Bold: Control.SetTypeface (null, TypefaceStyle.Bold); breken; case StyleType.Italic: Control.SetTypeface (null, TypefaceStyle.Italic); breken; case StyleType.BoldItalic: Control.SetTypeface (null, TypefaceStyle.BoldItalic); breken;
Als u deze applicatie nu zou uitvoeren, zou u iets als het volgende in de Android Emulator moeten zien, en dat is precies waar wij naar op zoek waren.
Het proces voor het maken van de iOS-renderer is precies hetzelfde tot het moment dat de. Wordt overschreven OnElementChanged methode. Begin met het maken van een nieuwe klasse in je Customization.iOS project. Noem maar op StyledLabelRenderer en vervang de inhoud door het volgende:
gebruik maken van Customization; met behulp van Customization.iOS; gebruikmakend van MonoTouch.UIKit; gebruikmakend van Xamarin.Forms; met behulp van Xamarin.Forms.Platform.iOS; [assembly: ExportRenderer (typeof (StyledLabel), typeof (StyledLabelRenderer))] namespace Customization.iOS public class StyledLabelRenderer: LabelRenderer protected override void OnElementChanged (ElementChangedEventArgs
Zoals je ziet, is alles precies hetzelfde. Jij hebt hetzelfde bijeenkomst kenmerk, u overschrijft hetzelfde OnElementChanged methode, je cast het Element eigendom van een StyledLabel, en je hebt dezelfde shell van a schakelaar verklaring om door te werken Stijl eigendom.
Het enige verschil is dat u de styling toepast op de native UILabel controle.
Accentsconagua
switch (styledLabel.Style) case StyleType.Bold: Control.Font = UIFont.BoldSystemFontOfSize (16.0f); breken; case StyleType.Italic: Control.Font = UIFont.ItalicSystemFontOfSize (16.0f); breken; case StyleType.BoldItalic: Control.Font = UIFont.FromName ("Helvetica-BoldOblique", 16.0f); breken; De manier waarop je een maakt UILabel's doopvont eigenschap vet of cursief in iOS is via een statische helper methode op de UIFont klasse met de naam ofwel BoldSystemFontOfSize of ItalicSystemFontOfSize. Dat werkt in het geval van een vet lettertype of een cursief lettertype, maar niet beide. Als je beide probeert toe te passen op een UILabel, alleen de laatste zal renderen.
Om beide stijlen te krijgen, spelen we een beetje vals en gebruiken we een ingebouwd lettertype met de naam iOS Helvetica-VetSchuin. Dit lettertype heeft zowel vet als cursief ingebouwd, dus we hoeven ze niet individueel te doen.
Als u dit in de iOS Simulator uitvoert, krijgt u het volgende resultaat:
Eindelijk komen we bij Windows Phone. Zoals je misschien al geraden hebt, is het proces precies hetzelfde. Maak een nieuwe klasse in de Customization.WinPhone project, noem maar op StyledLabelRenderer en vervang de inhoud door het volgende:
met behulp van System.Windows; gebruik maken van Customization; met Customization.WinPhone; gebruikmakend van Xamarin.Forms; met behulp van Xamarin.Forms.Platform.WinPhone; [assembly: ExportRenderer (typeof (StyledLabel), typeof (StyledLabelRenderer))] namespace Customization.WinPhone public class StyledLabelRenderer: LabelRenderer protected override void OnElementChanged (ElementChangedEventArgs
Nogmaals, alles is hetzelfde, behalve de logica. Als u in dit geval de tekst cursief wilt maken, stelt u de TextBlock's Lettertype eigendom aan Cursief. Om vervolgens de tekst vetgedrukt te maken, stelt u de Lettertype dikte eigendom aan Stoutmoedig. Als u beide wilt toepassen, stelt u eenvoudig beide in.
Als u deze toepassing uitvoert in de Windows Phone-emulator, krijgt u het volgende resultaat:
U hebt nu met succes een volledig functioneel, op maat gemaakt, platformonafhankelijk element gemaakt dat zich perfect op alle drie platforms bevindt. Je zou je nu klaar moeten voelen om de wereld te veroveren. Nou bijna.
Het proces dat we in deze zelfstudie hebben gevolgd, is volledig geldig en zal in de meeste gevallen perfect werken. Er is echter een heel specifiek geval waarin we functionaliteit missen als we die aanpak gebruiken. Dat geval is databinding in XAML.
Een van de coolste functies van Xamarin.Forms is dat je XAML en databinding kunt gebruiken net zoals je zou doen als je een Windows Phone, WPF of Silverlight-applicatie zou maken. Helaas vallen databinding en XAML buiten het bestek van deze tutorial, maar ik raad u aan meer te lezen over dit onderwerp op de XAML for Xamarin.Forms-pagina.
Laten we beginnen met het bouwen van een eenvoudige XAML-pagina die de gebruikersinterface dupliceert die we eerder in code hebben gemaakt. Begin met het toevoegen van een nieuw bestand aan uw Aanpassingen (draagbaar) project, selecteren van de Formulieren XAML-pagina bestandstype en geef het een naam van StyledLabelPage.
Nadat het bestand is gemaakt, vervangt u de inhoud door het volgende:
