Share
Quando crei applicazioni con Xamarin.Forms, non avrai dubbi sulla semplicità della creazione di interfacce utente. Usando Xamarin.Forms, puoi usare la stessa terminologia per i controlli su più piattaforme.
Mentre questo concetto può essere molto potente, come designer o sviluppatore, può essere piuttosto limitante. Potrebbe sembrare che siamo costretti a utilizzare i controlli dell'interfaccia utente nativa forniti con ciascuna delle piattaforme senza la possibilità di aggiungere personalizzazioni. Questo non è il caso.
Per entrare nel processo di personalizzazione dell'interfaccia utente per piattaforme specifiche, devi prima capire il processo di rendering di Xamarin.Forms.
Quando si tratta di utilizzare Xamarin.Forms per creare un'interfaccia utente per l'applicazione mobile multipiattaforma, ci sono due parti importanti del puzzle che è necessario comprendere.
Il primo pezzo del puzzle è il elemento. Puoi pensare ad un elemento come la definizione agnostica della piattaforma di un controllo all'interno di Xamarin.Forms. Se hai letto la documentazione, saprai che anche questi controlli sono indicati come vista oggetti. Per essere ancora più specifici, ogni elemento all'interno di Xamarin.Forms deriva da vista classe.
Questi elementi sono usati per descrivere un elemento visivo. Gli elementi forniscono una definizione agnostica della piattaforma delle caratteristiche di come il controllo dovrebbe apparire e comportarsi. Un elemento a se stante non può effettivamente creare un controllo che viene visualizzato all'utente. Ha bisogno di aiuto. Qui è dove arriva il secondo pezzo del processo di rendering, a renderer.
Quando esegui la tua applicazione, entra in gioco un renderer. Il compito del renderer è di prendere l'elemento agnostico della piattaforma e trasformarlo in qualcosa di visivo da presentare all'utente.
Ad esempio, se stavi usando un Etichetta controllo nel tuo progetto condiviso, durante l'esecuzione della tua applicazione, il framework Xamarin.Forms userebbe un'istanza di LabelRenderer classe per disegnare il controllo nativo. Se stai cominciando a chiedermi come ciò avvenga da un progetto di codice condiviso, questa è un'ottima domanda. La risposta è, non è così.
Illustriamo questo con un esempio. Inizia aprendo Xamarin Studio o Visual Studio. Il processo e i concetti sono gli stessi per entrambi. Se si utilizza Xamarin Studio, non è disponibile alcun supporto per i progetti Windows Phone, pertanto nella propria soluzione verranno creati solo tre progetti. Se si utilizza Visual Studio, verranno creati quattro progetti.
In Visual Studio, crea un nuovo progetto e selezionare il Mobile applicazioni progetto famiglia a sinistra e scegliere il App vuota (Xamarin.Forms Portable) modello di progetto sulla destra. Puoi nominare il tuo progetto come preferisci, ma se vuoi seguirlo, usa il nome Personalizzazione, e il clic ok.
Ora, a seconda del tuo IDE, dovresti vedere tre o quattro progetti nella tua soluzione. Se espandi il Riferimenti cartella nel tuo Personalizzazione (portatile) progetto, vedrai un riferimento all'assembly Xamarin.Forms.Core. È qui che vengono definiti tutti i diversi elementi da utilizzare nel progetto dell'interfaccia utente condivisa. Niente fuori dall'ordinario lì.
Se apri ognuno dei progetti specifici della piattaforma ed espandi la loro Riferimenti cartelle, vedrai che ognuna contiene un'implementazione specifica della piattaforma di quella libreria Xamarin.Forms, chiamata Xamarin.Forms.Platform.Android, Xamarin.Forms.Platform.iOS, e Xamarin.Forms.Platform.WP8 rispettivamente.
È in questi assembly che troverai i renderer per ciascuno degli elementi Xamarin.Forms. Ora stai iniziando a vedere il layout del processo. Gli elementi agnostici della piattaforma, o vista oggetti, sono nel progetto di codice condiviso, ma tutti i renderizzatori specifici per gli elementi si trovano nei progetti specifici della piattaforma.
Ciò significa che per ciascuno degli elementi che utilizzi, verranno creati due renderer creati in Xamarin Studio e tre in Visual Studio. Ora che vedi come è strutturato in Xamarin.Forms, la prossima domanda logica è di solito, "Quando dovrei usare le personalizzazioni?".
Esistono sicuramente un buon numero di proprietà e caratteristiche definite all'interno degli elementi Xamarin.Forms che possono essere utilizzati per personalizzare il controllo finale su ciascuna piattaforma. Tuttavia, non tutte le personalizzazioni disponibili in ciascuna piattaforma sono presenti in Xamarin.Forms. Stando così le cose, ci sono due scenari principali quando vorrai creare delle personalizzazioni.
Il primo scenario in cui saranno necessarie le personalizzazioni è quando si desidera creare un controllo completamente personalizzato. Diciamo che volevi creare un controllo del calendario o magari una sorta di controllo grafico. Sfortunatamente niente di simile esiste oggi in Xamarin.Forms, il che non vuol dire che non lo farà mai.
Questa è sicuramente una situazione in cui dovrai iniziare dal punto di partenza e creare tutto da zero. Sarà necessario definire l'elemento che si intende utilizzare per descrivere le caratteristiche del controllo in modo agnostico rispetto alla piattaforma. Quindi dovrai anche creare un renderizzatore personalizzato per ciascuna delle piattaforme che desideri supportare.
A seconda di cosa stai costruendo, questo può essere un progetto piuttosto ampio. Stando così le cose, lo salverò per un altro tutorial in sé e per sé. Invece, in questo tutorial, ci concentreremo sul secondo scenario in cui avrai bisogno di personalizzazione.
La seconda situazione in cui ti troverai a doverti personalizzare è quando un elemento integrato non supporta una funzione specifica di una piattaforma che desideri supportare. Un esempio di questo sarebbe sul Etichetta controllo. In Xamarin.Forms non esiste alcun meccanismo o proprietà che permetta di creare l'equivalente su ciascuna delle piattaforme per rendere il testo in grassetto o corsivo. Questo può sembrare uno scenario molto semplice, ma scoprirai che il processo di base di rendere questa modifica disponibile nell'elemento e che il renderizzatore lo capisce sarà lo stesso qui in alcuni degli scenari più complessi.
Con il secondo scenario in mente, hai due opzioni. È possibile sostituire il renderizzatore esistente per una piattaforma specifica (o per tutte le piattaforme) e creare la propria funzionalità e logica di disegno per tutte le funzionalità dell'elemento. In alternativa, puoi creare il tuo elemento che deriva dall'elemento esistente e associare quel nuovo elemento con un renderizzatore personalizzato. In questo modo, manterrai tutte le funzionalità di logica e di rendering predefinite dell'elemento base e lo personalizzerà come desideri. Questa sarà la rotta che prendiamo per questo esempio. Ora, vediamo come aggiungere questa funzionalità al nostro progetto.
Iniziamo questo processo impostando la struttura di base della nostra applicazione in modo che possiamo vedere la nostra baseline e quindi apportare le modifiche. Inizia aprendo il tuo App.cs file nel Personalizzazione (portatile) progetto nel Esploratore di soluzioni. Modifica il GetMainPage metodo per assomigliare a questo:
public static Pagina GetMainPage () var iLabel = new Label TextColor = Color.Black, Text = "Voglio essere in corsivo!", HorizontalOptions = LayoutOptions.CenterAndExpand; var bLabel = new Label Text = "Voglio essere grassetto!", TextColor = Color.Black, HorizontalOptions = LayoutOptions.CenterAndExpand; var bothLabel = new Label Text = "Voglio essere in corsivo e in grassetto!", TextColor = Color.Black, HorizontalOptions = LayoutOptions.CenterAndExpand; return new ContentPage BackgroundColor = Color.White, Content = new StackLayout Padding = 100, Spacing = 100, Children = iLabel, bLabel, bothLabel;
Come puoi vedere qui, abbiamo creato tre semplici Etichetta controlli. Uno vuole essere in corsivo, uno vuole essere audace, e il terzo è avido e vuole essere entrambi. Se dovessi eseguire questa applicazione su iOS, Android e Windows Phone, apparirebbero in questo modo:
iOS
androide
Windows Phone
Come puoi vedere, non vogliono essere noiosi. Beh, non limitarti a sederti, aiutali.
La prima cosa che dobbiamo fare è creare un nuovo elemento che possiamo usare per fornire ulteriori personalizzazioni per l'esistente Etichetta controllo. Inizia aggiungendo una nuova classe al tuo Personalizzazione (portatile) progetto e chiamarlo StyledLabel. Sostituisci il suo contenuto con quanto segue:
public enum StyleType Italic, Bold, BoldItalic classe pubblica StyledLabel: Label public StyleType Style get; impostato;
Definiamo una enumerazione e una classe molto semplici. Abbiamo definito l'enumerazione per consentire il corsivo, il grassetto e il grassetto più il corsivo valori. Quindi creiamo una classe StyledLabelche deriva dal Etichettaclasse base e aggiungi una nuova proprietà, Stile,per mantenere lo stile appropriato che vogliamo applicare al controllo.
Per assicurarsi che tutto funzioni ancora, e dovrebbe, modifichiamo il App.cs file ancora una volta e sostituire il Etichetta elementi nel nostro primo esempio con il nostro nuovo StyledLabel elementi. Perché il StyleLabel la classe eredita dal Etichetta classe, tutto dovrebbe ancora funzionare.
public static Pagina GetMainPage () var iLabel = new StyledLabel TextColor = Color.Black, Text = "Voglio essere in corsivo!", HorizontalOptions = LayoutOptions.CenterAndExpand, Style = StyleType.Italic; var bLabel = new StyledLabel Text = "Voglio essere grassetto!", TextColor = Color.Black, HorizontalOptions = LayoutOptions.CenterAndExpand, Style = StyleType.Bold; var bothLabel = new StyledLabel Text = "Voglio essere in corsivo e in grassetto!", TextColor = Color.Black, HorizontalOptions = LayoutOptions.CenterAndExpand, Style = StyleType.BoldItalic; return new ContentPage BackgroundColor = Color.White, Content = new StackLayout Padding = 100, Spacing = 100, Children = iLabel, bLabel, bothLabel;
Ancora una volta, ecco i risultati di questo cambiamento.
iOS
androide
Windows Phone
Come puoi vedere, nulla è cambiato. Ora che abbiamo un nuovo elemento personalizzato, è il momento di creare i renderer personalizzati per gestire i controlli nativi.
Il primo passo per creare un renderer è aggiungere una nuova classe alla piattaforma che stai prendendo di mira. Iniziamo con il Xamarin.Android progetto. All'interno di questo progetto, crea un nuovo file di classe e chiamalo StyledLabelRenderer e sostituire il suo contenuto con il seguente:
utilizzando Android.Graphics; usando la personalizzazione; usando Customization.Droid; usando Xamarin.Forms; utilizzando Xamarin.Forms.Platform.Android; [assembly: ExportRenderer (typeof (StyledLabel), typeof (StyledLabelRenderer))] namespace Customization.Droid public class StyledLabelRenderer: LabelRenderer protected override void OnElementChanged (ElementChangedEventArgs
Diamo uno sguardo più da vicino a questo blocco di codice.
[assembly: ExportRenderer (typeof (StyledLabel), typeof (StyledLabelRenderer))]
Iniziamo con uno speciale montaggio attributo che dice a Xamarin.Forms di usarlo StyledLabelRenderer classe come il renderer ogni volta che tenta di renderizzare StyledLabel oggetti. Questo è necessario affinché le personalizzazioni funzionino correttamente.
Proprio come quando abbiamo creato un nuovo StyledLabel elemento, abbiamo ereditato dal Etichetta classe, avremo il nostro nuovo StyledLabelRenderer la classe eredita dal LabelRenderer classe. Questo ci consentirà di mantenere le funzionalità esistenti, quindi dobbiamo solo sostituire ciò che vogliamo modificare o personalizzare.
Per applicare la nostra nuova formattazione, avremo bisogno di saltare nel processo di rendering e lo facciamo tramite il OnElementChanged metodo. In questo metodo, possiamo fare tutte le nostre personalizzazioni.
Quando fai le tue personalizzazioni, ci sono due proprietà molto importanti che userete. Innanzitutto, è necessario ottenere un riferimento all'elemento originale che è stato creato e che viene sottoposto a rendering nel nostro metodo di rendering personalizzato. Lo fai usando il Elemento proprietà. Questo è un oggetto generico quindi dovrai lanciarlo su qualsiasi tipo di rendering. In questo caso, è un StyledLabel.
var styledLabel = (StyledLabel) Elemento;
La seconda proprietà importante di cui hai bisogno è la Controllo proprietà. Questa proprietà contiene un riferimento digitato al controllo nativo sulla piattaforma. In questo caso, dal momento che hai ereditato dal LabelRenderer classe, il codice sa già che il Controllo in questo caso è un TextView.
Da questo punto, si utilizzerà una logica semplice per determinare quale personalizzazione eseguire e applicare le personalizzazioni native appropriate. In questo caso, utilizzerai il meccanismo Android per modificare il carattere tipografico di a TextView usando il SetTypeface metodo.
switch (styledLabel.Style) case StyleType.Bold: Control.SetTypeface (null, TypefaceStyle.Bold); rompere; case StyleType.Italic: Control.SetTypeface (null, TypefaceStyle.Italic); rompere; case StyleType.BoldItalic: Control.SetTypeface (null, TypefaceStyle.BoldItalic); rompere;
Se dovessi eseguire questa applicazione ora, dovresti vedere qualcosa di simile nell'emulatore Android, che è esattamente ciò a cui miravamo.
Il processo di creazione del renderer iOS è esattamente lo stesso fino al punto di sovrascrivere il OnElementChanged metodo. Inizia creando una nuova classe nel tuo Customization.iOS progetto. Nominalo StyledLabelRenderer e sostituire il contenuto con il seguente:
usando la personalizzazione; usando Customization.iOS; usando MonoTouch.UIKit; usando Xamarin.Forms; utilizzando Xamarin.Forms.Platform.iOS; [assembly: ExportRenderer (typeof (StyledLabel), typeof (StyledLabelRenderer))] spazio dei nomi Customization.iOS public class StyledLabelRenderer: LabelRenderer protected override void OnElementChanged (ElementChangedEventArgs
Come puoi vedere, tutto è esattamente lo stesso. Hai lo stesso montaggio attributo, stai ignorando lo stesso OnElementChanged metodo, stai lanciando il Elemento proprietà a a StyledLabel, e tu hai lo stesso guscio di a interruttore dichiarazione di lavorare attraverso il Stile proprietà.
L'unica differenza arriva quando si applica lo stile al nativo UILabel controllo.
Accentsconagua
switch (styledLabel.Style) case StyleType.Bold: Control.Font = UIFont.BoldSystemFontOfSize (16.0f); rompere; case StyleType.Italic: Control.Font = UIFont.ItalicSystemFontOfSize (16.0f); rompere; case StyleType.BoldItalic: Control.Font = UIFont.FromName ("Helvetica-BoldOblique", 16.0f); rompere; Il modo in cui fai un UILabel'S Font proprietà in grassetto o in corsivo in iOS è attraverso un metodo di supporto statico sul UIFont classe chiamata o BoldSystemFontOfSize o ItalicSystemFontOfSize. Ciò funzionerà nel caso di un carattere grassetto o di un carattere corsivo, ma non di entrambi. Se si tenta di applicare entrambi a a UILabel, solo l'ultimo renderà.
Per ottenere entrambi gli stili, bariamo un po 'e usiamo un font incorporato in iOS chiamato Helvetica-BoldOblique. Questo font ha sia il grassetto che il corsivo incorporato, quindi non dobbiamo eseguirli individualmente.
L'esecuzione di questo in iOS Simulator ti darà il seguente risultato:
Finalmente, arriviamo a Windows Phone. Come avrai già intuito, il processo è esattamente lo stesso. Crea una nuova classe nel Customization.WinPhone progetto, chiamalo StyledLabelRenderer e sostituire il contenuto con il seguente:
usando System.Windows; usando la personalizzazione; utilizzando Customization.WinPhone; usando Xamarin.Forms; utilizzando Xamarin.Forms.Platform.WinPhone; [assembly: ExportRenderer (typeof (StyledLabel), typeof (StyledLabelRenderer))] namespace Customization.WinPhone public class StyledLabelRenderer: LabelRenderer protected override void OnElementChanged (ElementChangedEventArgs
Ancora una volta, tutto è uguale ad eccezione della logica. In questo caso, per rendere il testo in corsivo, si imposta il TextBlock'S Stile del font proprietà a Corsivo. Quindi per rendere il testo in grassetto, si imposta il FontWeight proprietà a Grassetto. Se vuoi applicare entrambi, devi semplicemente impostare entrambi.
L'esecuzione di questa applicazione nell'emulatore di Windows Phone ti darà il seguente risultato:
Ora hai creato con successo un elemento completamente funzionale, personalizzato, multipiattaforma che si rende perfettamente su tutte e tre le piattaforme. Ora dovresti sentirti pronto ad affrontare il mondo. Be 'quasi.
Il processo che abbiamo seguito in questo tutorial è completamente valido e nella maggior parte dei casi funzionerà perfettamente. C'è un caso molto specifico, però, nel quale ci mancheremo alcune funzionalità se usiamo questo approccio. Quella causa è l'associazione dati in XAML.
Una delle caratteristiche molto interessanti di Xamarin.Forms è il fatto che puoi utilizzare XAML e l'associazione dati come faresti se stessimo creando un'applicazione Windows Phone, WPF o Silverlight. Sfortunatamente data-binding e XAML vanno oltre lo scopo di questo tutorial, ma ti incoraggio a leggere di più su questo argomento sulla pagina XAML for Xamarin.Forms.
Iniziamo con la creazione di una semplice pagina XAML che duplica l'interfaccia utente precedentemente creata nel codice. Inizia aggiungendo un nuovo file al tuo Personalizzazioni (portatile) progetto, selezionando il Pagina XAML di moduli tipo di file e dandogli un nome StyledLabelPage.
Una volta creato il file, sostituire il contenuto con il seguente:
