Share
Wenn Sie Anwendungen mit Xamarin.Forms erstellen, werden Sie ohne Zweifel die einfache Erstellung von Benutzeroberflächen mögen. Mit Xamarin.Forms können Sie dieselbe Terminologie für Steuerungen auf mehreren Plattformen verwenden.
Obwohl dieses Konzept als Designer oder Entwickler sehr mächtig sein kann, kann es etwas einschränkend sein. Es scheint, als wären wir gezwungen, die systemeigenen Steuerelemente der Benutzeroberfläche zu verwenden, die mit jeder der Plattformen geliefert werden, ohne dass die Möglichkeit der Anpassung besteht. Das ist nicht der Fall.
Damit Sie die Benutzeroberfläche für bestimmte Plattformen anpassen können, müssen Sie zunächst den Renderprozess von Xamarin.Forms kennen.
Wenn Sie Xamarin.Forms verwenden, um eine Benutzeroberfläche für Ihre plattformübergreifende mobile Anwendung zu erstellen, gibt es zwei wichtige Teile des Puzzles, die Sie verstehen müssen.
Das erste Puzzleteil ist das Element. Sie können sich ein Element als plattformunabhängige Definition eines Steuerelements in Xamarin.Forms vorstellen. Wenn Sie die Dokumentation überhaupt gelesen haben, wissen Sie, dass diese Steuerungen auch als bezeichnet werden Aussicht Objekte. Genauer gesagt, jedes Element in Xamarin.Forms stammt von der Aussicht Klasse.
Diese Elemente werden verwendet, um ein visuelles Element zu beschreiben. Die Elemente bieten eine plattformunabhängige Definition von Eigenschaften, wie das Steuerelement aussehen und sich verhalten soll. Ein Element allein kann kein Steuerelement erstellen, das dem Benutzer angezeigt wird. Es braucht etwas Hilfe. Hier kommt der zweite Teil des Rendering-Prozesses ins Spiel: a Renderer.
Wenn Sie Ihre Anwendung ausführen, wird ein Renderer verwendet. Die Aufgabe des Renderers besteht darin, das plattformunabhängige Element in ein visuelles Element umzuwandeln, das dem Benutzer präsentiert werden kann.
Zum Beispiel, wenn Sie eine Etikette Wenn Sie in Ihrem freigegebenen Projekt steuern, verwendet das Xamarin.Forms-Framework während der Ausführung Ihrer Anwendung eine Instanz von LabelRenderer Klasse, um das native Steuerelement zu zeichnen. Wenn Sie sich fragen, wie das bei einem gemeinsam genutzten Code-Projekt geschieht, ist dies eine sehr gute Frage. Die Antwort lautet: Nein.
Lassen Sie uns dies an einem Beispiel veranschaulichen. Öffnen Sie entweder Xamarin Studio oder Visual Studio. Der Prozess und die Konzepte sind für beide gleich. Wenn Sie Xamarin Studio verwenden, gibt es keine Unterstützung für Windows Phone-Projekte. Sie erstellen also nur drei Projekte in Ihrer Projektmappe. Wenn Sie Visual Studio verwenden, erstellen Sie vier Projekte.
Erstellen Sie in Visual Studio ein neues Projekt und wählen das Handy, Mobiltelefon Apps Projektfamilie auf der linken Seite und wählen Sie die Leere App (tragbare Xamarin.Forms) Projektvorlage rechts. Sie können Ihrem Projekt einen beliebigen Namen geben, aber wenn Sie mit mir folgen möchten, verwenden Sie den Namen Anpassung, und der Klick OK.
Je nach IDE sollten Sie nun drei oder vier Projekte in Ihrer Lösung sehen. Wenn Sie das erweitern Verweise Ordner in Ihrem Anpassung (tragbar) Projekt sehen Sie eine Assembly-Referenz auf Xamarin.Forms.Core. Hier werden alle verschiedenen Elemente definiert, die Sie in Ihrem freigegebenen Benutzeroberflächenprojekt verwenden können. Nichts Außergewöhnliches dort.
Wenn Sie jedes der plattformspezifischen Projekte öffnen und erweitern Verweise Ordner sehen Sie, dass jeder eine plattformspezifische Implementierung dieser Xamarin.Forms-Bibliothek mit dem Namen enthält Xamarin.Forms.Platform.Android, Xamarin.Forms.Platform.iOS, und Xamarin.Forms.Platform.WP8 beziehungsweise.
In diesen Assemblys finden Sie die Renderer für jedes Xamarin.Forms-Element. Jetzt sehen Sie das Layout des Prozesses. Die plattformunabhängigen Elemente oder Aussicht Objekte befinden sich im Shared Code-Projekt, alle spezifischen Renderer für die Elemente befinden sich jedoch in den plattformspezifischen Projekten.
Das bedeutet, dass für jedes der von Ihnen verwendeten Elemente zwei Renderer in Xamarin Studio und drei in Visual Studio erstellt werden. Da Sie nun sehen, wie dies in Xamarin.Forms strukturiert ist, lautet die nächste logische Frage normalerweise: "Wann sollte ich Anpassungen verwenden?".
In Xamarin.Forms-Elementen gibt es definitiv eine Reihe von Eigenschaften und Eigenschaften, die zum Anpassen der endgültigen Steuerung auf jeder der Plattformen verwendet werden können. Allerdings ist in Xamarin.Forms nicht jede auf jeder Plattform verfügbare Anpassung vorhanden. In diesem Fall gibt es zwei Hauptszenarien, in denen Sie Anpassungen erstellen möchten.
Das erste Szenario, in dem Anpassungen erforderlich sind, ist das Erstellen eines vollständig benutzerdefinierten Steuerelements. Angenommen, Sie wollten ein Kalendersteuerelement oder eine Art grafisches Steuerelement erstellen. Leider gibt es heute in Xamarin.Forms nichts dergleichen, was nicht heißt, dass es niemals so sein wird.
Dies ist definitiv eine Situation, in der Sie von Anfang an beginnen müssen und alles von Grund auf neu erstellen müssen. Sie müssen das Element definieren, das Sie verwenden möchten, um die Eigenschaften des Steuerelements plattformunabhängig zu beschreiben. Dann müssen Sie auch einen benutzerdefinierten Renderer für jede der Plattformen erstellen, die Sie unterstützen möchten.
Je nachdem, was Sie bauen, kann dies ein ziemlich umfangreiches Projekt sein. Wenn dies der Fall ist, werde ich das für ein anderes Tutorial an und für sich speichern. Stattdessen konzentrieren wir uns in diesem Tutorial auf das zweite Szenario, in dem Sie einige Anpassungen benötigen.
Die zweite Situation, in der Sie Anpassungen benötigen, ist, wenn ein integriertes Element eine bestimmte Funktion einer Plattform, die Sie unterstützen möchten, nicht unterstützt. Ein Beispiel dafür wäre auf der Etikette Steuerung. In Xamarin.Forms gibt es keinen Mechanismus oder keine Eigenschaft, mit dem Sie auf jeder Plattform das Äquivalent erstellen können, um den Text fett oder kursiv zu machen. Dies mag wie ein sehr einfaches Szenario erscheinen, aber Sie werden feststellen, dass der grundlegende Prozess, um diese Änderung im Element verfügbar zu machen, und der Renderer das Verständnis dafür hat, dass es hier genauso ist wie in einigen der komplexeren Szenarien.
Im Hinblick auf das zweite Szenario haben Sie zwei Möglichkeiten. Sie können entweder den vorhandenen Renderer für eine bestimmte Plattform (oder für alle Plattformen) ersetzen und Ihre eigene Funktionalität und Zeichnungslogik für alle Funktionen des Elements erstellen. Alternativ können Sie ein eigenes Element erstellen, das vom vorhandenen Element abgeleitet wird, und dieses neue Element mit einem benutzerdefinierten Renderer verknüpfen. Auf diese Weise behalten Sie alle Standardlogik- und Renderingfunktionen des Basiselements bei und passen es nach Ihren Wünschen an. Dies ist die Route, die wir für dieses Beispiel nehmen. Nun wollen wir sehen, wie Sie diese Funktionalität in Ihr eigenes Projekt einfügen können.
Beginnen wir mit diesem Prozess, indem wir die Grundstruktur unserer Anwendung einrichten, damit wir unsere Baseline sehen und dann Änderungen vornehmen können. Beginnen Sie mit dem Öffnen Ihres App.cs Datei in der Anpassung (tragbar) Projekt in der Lösungsforscher. Modifiziere den GetMainPage Methode, um so auszusehen:
public static Page GetMainPage () var iLabel = neues Label TextColor = Color.Black, Text = "Ich möchte kursiv sein!", HorizontalOptions = LayoutOptions.CenterAndExpand; var bLabel = new Label Text = "Ich möchte fett sein!", TextColor = Color.Black, HorizontalOptions = LayoutOptions.CenterAndExpand; var bothLabel = new Label Text = "Ich möchte kursiv und fett sein!", TextColor = Color.Black, HorizontalOptions = LayoutOptions.CenterAndExpand; return new ContentPage BackgroundColor = Color.White, Content = new StackLayout Padding = 100, Abstand = 100, Children = iLabel, bLabel, bothLabel;
Wie Sie hier sehen können, haben wir drei einfache erstellt Etikette Kontrollen. Man will kursiv sein, man will mutig sein, und der dritte ist gierig und will beides sein. Wenn Sie diese Anwendung unter iOS, Android und Windows Phone ausführen würden, würden sie ungefähr so aussehen:
iOS
Android
Windows Phone
Wie Sie sehen können, wollen sie nicht so langweilig sein. Nun, setz dich nicht einfach hin, hilf ihnen.
Als Erstes müssen Sie ein neues Element erstellen, mit dem wir zusätzliche Anpassungen an das vorhandene Element vornehmen können Etikette Steuerung. Fügen Sie zunächst eine neue Klasse hinzu Anpassung (tragbar) Projekt und nennen Sie es StyledLabel. Ersetzen Sie den Inhalt durch Folgendes:
public enum StyleType Italic, Bold, BoldItalic public class StyledLabel: Label öffentlicher StyleType-Stil get; einstellen;
Wir definieren eine sehr einfache Aufzählung und Klasse. Wir haben die Aufzählung definiert, um Kursiv, Fett und Fett plus Kursiv zuzulassen Werte. Wir erstellen dann eine Klasse StyledLabeldas kommt von der EtiketteBasisklasse und fügen Sie eine neue Eigenschaft hinzu, Stil,Um den entsprechenden Stil zu erhalten, möchten wir das Steuerelement anwenden.
Um sicher zu gehen, dass alles noch funktioniert, und es sollte, ändern wir das App.cs Datei noch einmal und ersetzen Sie das Etikette Elemente in unserem ersten Beispiel mit unserem neuen StyledLabel Elemente. Weil der StyleLabel Klasse erbt von der Etikette Klasse, alles sollte noch funktionieren.
public static Page GetMainPage () var iLabel = neues StyledLabel TextColor = Color.Black, Text = "Ich möchte kursiv sein!", HorizontalOptions = LayoutOptions.CenterAndExpand, Style = StyleType.Italic; var bLabel = new StyledLabel Text = "Ich möchte fett sein!", TextColor = Color.Black, HorizontalOptions = LayoutOptions.CenterAndExpand, Style = StyleType.Bold; var bothLabel = new StyledLabel Text = "Ich möchte kursiv und fett sein!", TextColor = Color.Black, HorizontalOptions = LayoutOptions.CenterAndExpand, Style = StyleType.BoldItalic; return new ContentPage BackgroundColor = Color.White, Content = new StackLayout Padding = 100, Abstand = 100, Children = iLabel, bLabel, bothLabel;
Hier sind noch einmal die Ergebnisse dieser Änderung.
iOS
Android
Windows Phone
Wie Sie sehen, hat sich nichts geändert. Jetzt, da wir ein neues benutzerdefiniertes Element haben, ist es an der Zeit, die benutzerdefinierten Renderer zu erstellen, die sich auf die systemeigenen Steuerelemente konzentrieren.
Der erste Schritt beim Erstellen eines Renderers ist das Hinzufügen einer neuen Klasse zur Plattform, auf die Sie abzielen. Wir beginnen mit dem Xamarin.Android Projekt. Erstellen Sie in diesem Projekt eine neue Klassendatei und benennen Sie sie StyledLabelRenderer und ersetzen Sie den Inhalt durch Folgendes:
mit Android.Grafiken; mit der Anpassung; using Customization.Droid; mit Xamarin.Forms; using Xamarin.Forms.Platform.Android; [Assembly: ExportRenderer (typeof (StyledLabel), typeof (StyledLabelRenderer))] Namespace Customization.Droid öffentliche Klasse StyledLabelRenderer: LabelRenderer protected überschreibt void OnElementChanged (ElementChangedEventArgs.)
Sehen wir uns diesen Codeblock genauer an.
[Assembly: ExportRenderer (typeof (StyledLabel), typeof (StyledLabelRenderer))]
Wir beginnen mit einem besonderen Versammlung Attribut, das Xamarin.Forms anweist, dies zu verwenden StyledLabelRenderer Klasse als Renderer jedes Mal, wenn versucht wird, zu rendern StyledLabel Objekte. Dies ist erforderlich, damit Ihre Anpassungen ordnungsgemäß funktionieren.
Genau wie damals, als wir ein neues erstellt haben StyledLabel Element haben wir von dem geerbt Etikette Klasse, wir werden unser neues haben StyledLabelRenderer Klasse erben von der LabelRenderer Klasse. Dies ermöglicht es uns, die vorhandene Funktionalität beizubehalten, sodass wir nur das überschreiben müssen, was wir ändern oder anpassen möchten.
Um unsere neuen Formatierungen anwenden zu können, müssen wir in den Rendering-Prozess einsteigen, und das tun wir über die OnElementChanged Methode. In dieser Methode können wir alle Anpassungen vornehmen.
Bei Ihren Anpassungen werden zwei sehr wichtige Eigenschaften verwendet. Zunächst benötigen Sie einen Verweis auf das ursprüngliche Element, das Sie erstellt haben und das in unserer benutzerdefinierten Renderer-Methode gerendert wird. Sie tun dies mit der Element Eigentum. Dies ist ein generisches Objekt, daher müssen Sie es in jeden Typ konvertieren, den Sie rendern. In diesem Fall ist es eine StyledLabel.
var styledLabel = (StyledLabel) Element;
Die zweite wichtige Eigenschaft, die Sie benötigen, ist die Steuerung Eigentum. Diese Eigenschaft enthält einen typisierten Verweis auf das native Steuerelement auf der Plattform. In diesem Fall, da Sie vom geerbt haben LabelRenderer Klasse, der Code weiß bereits, dass die Steuerung in diesem Fall ist a Textvorschau.
An diesem Punkt verwenden Sie eine einfache Logik, um zu bestimmen, welche Anpassung vorgenommen werden soll, und die entsprechenden nativen Anpassungen anzuwenden. In diesem Fall verwenden Sie den Android-Mechanismus zum Ändern der Schriftart von a Textvorschau mit der SetTypeface Methode.
switch (styledLabel.Style) case StyleType.Bold: Control.SetTypeface (null, TypefaceStyle.Bold); brechen; case StyleType.Italic: Control.SetTypeface (null, TypefaceStyle.Italic); brechen; case StyleType.BoldItalic: Control.SetTypeface (null, TypefaceStyle.BoldItalic); brechen;
Wenn Sie diese Anwendung jetzt ausführen, sollten Sie im Android-Emulator etwa Folgendes sehen, und genau das haben wir uns vorgenommen.
Das Erstellen des iOS-Renderers ist bis zum Überschreiben des Betriebssystems identisch OnElementChanged Methode. Beginnen Sie mit dem Erstellen einer neuen Klasse in Ihrem Anpassung.iOS Projekt. Nennen Sie es StyledLabelRenderer und ersetzen Sie den Inhalt durch Folgendes:
mit der Anpassung; mit Customization.iOS; using MonoTouch.UIKit; mit Xamarin.Forms; using Xamarin.Forms.Platform.iOS; [assembly: ExportRenderer (typeof (StyledLabel), typeof (StyledLabelRenderer))] Namespace Customization.iOS public class StyledLabelRenderer: LabelRenderer protected überschreibt void OnElementChanged (ElementChangedEventArgs.)
Wie Sie sehen, ist alles genau gleich. Du hast das Gleiche Versammlung Attribut überschreiben Sie dasselbe OnElementChanged Methode, gießen Sie die Element Eigentum an ein StyledLabel, und du hast die gleiche Schale von a Schalter Anweisung zur Arbeit durch die Stil Eigentum.
Der einzige Unterschied besteht darin, wo Sie das Styling auf das Native anwenden UILabel Steuerung.
Accentsconagua
switch (styledLabel.Style) case StyleType.Bold: Control.Font = UIFont.BoldSystemFontOfSize (16.0f); brechen; case StyleType.Italic: Control.Font = UIFont.ItalicSystemFontOfSize (16.0f); brechen; case StyleType.BoldItalic: Control.Font = UIFont.FromName ("Helvetica-BoldOblique", 16.0f); brechen; Die Art und Weise, wie Sie eine machen UILabel's Schriftart Die Eigenschaft, die in iOS entweder fett oder kursiv dargestellt wird, erfolgt über eine statische Hilfsmethode UIFont Klasse entweder benannt BoldSystemFontOfSize oder ItalicSystemFontOfSize. Das funktioniert im Fall einer fetten oder einer kursiven Schrift, jedoch nicht bei beiden. Wenn Sie versuchen, beide auf eine UILabel, Nur der letzte wird gerendert.
Um beide Stile zu erhalten, schummeln wir ein wenig und verwenden eine eingebaute Schrift in iOS mit dem Namen Helvetica-BoldOblique. Diese Schrift enthält sowohl Fett als auch Kursiv, so dass wir sie nicht einzeln ausführen müssen.
Wenn Sie dies im iOS-Simulator ausführen, erhalten Sie folgendes Ergebnis:
Schließlich kommen wir zu Windows Phone. Wie Sie vielleicht schon erraten haben, ist der Prozess genau derselbe. Erstellen Sie eine neue Klasse in der Anpassung.WinPhone Projekt, nennen Sie es StyledLabelRenderer und ersetzen Sie den Inhalt durch Folgendes:
using System.Windows; mit der Anpassung; using Customization.WinPhone; mit Xamarin.Forms; using Xamarin.Forms.Platform.WinPhone; [assembly: ExportRenderer (typeof (StyledLabel), typeof (StyledLabelRenderer))] Namespace Customization.WinPhone öffentliche Klasse StyledLabelRenderer: LabelRenderer protected überschreibt void OnElementChanged (ElementChangedEventArgs
Wieder ist alles bis auf die Logik gleich. Um den Text kursiv zu machen, setzen Sie das Textblock's Schriftstil Eigentum an Kursiv. Um den Text fett zu machen, setzen Sie das FontWeight Eigentum an Fett gedruckt. Wenn Sie beides anwenden möchten, setzen Sie einfach beides.
Wenn Sie diese Anwendung im Windows Phone-Emulator ausführen, erhalten Sie folgendes Ergebnis:
Sie haben jetzt erfolgreich ein voll funktionsfähiges, kundenspezifisches Cross-Plattform-Element erstellt, das sich auf allen drei Plattformen perfekt rendert. Sie sollten sich jetzt bereit fühlen, die Welt zu erobern. Naja fast.
Der Prozess, den wir in diesem Lernprogramm durchlaufen haben, ist vollständig gültig und funktioniert in den meisten Fällen einwandfrei. Es gibt jedoch einen ganz speziellen Fall, in dem wir einige Funktionen verpassen, wenn wir diesen Ansatz verwenden. Dieser Fall ist in XAML datenbindend.
Eine der coolsten Funktionen von Xamarin.Forms ist die Tatsache, dass Sie XAML und Datenbindung genauso verwenden können, als würden Sie eine Windows Phone-, WPF- oder Silverlight-Anwendung erstellen. Leider sind Datenbindung und XAML nicht in diesem Tutorial enthalten, aber ich möchte Sie dazu ermutigen, mehr über dieses Thema auf der Seite XAML für Xamarin.Forms zu lesen.
Beginnen wir mit dem Erstellen einer einfachen XAML-Seite, die die zuvor im Code erstellte Benutzeroberfläche dupliziert. Beginnen Sie mit dem Hinzufügen einer neuen Datei zu Ihrem Anpassungen (tragbar) Projekt, wählen Sie die Forms XAML-Seite Dateityp und geben Sie einen Namen von StyledLabelPage.
Ersetzen Sie nach dem Erstellen der Datei den Inhalt durch Folgendes:
