Share
Pe măsură ce creați aplicații cu Xamarin.Forms, veți simți fără îndoială simplitatea de a crea interfețe utilizator. Folosind Xamarin.Forms, puteți utiliza aceeași terminologie pentru controale pe mai multe platforme.
Deși acest concept poate fi foarte puternic, ca designer sau dezvoltator, acesta poate fi oarecum limitator. Se pare că suntem forțați să folosim comenzile de interfață utilizator nativă care vin cu fiecare dintre platforme fără posibilitatea de a adăuga personalizare. Nu este cazul.
Pentru a intra în procesul de personalizare a interfeței de utilizator pentru anumite platforme, trebuie să înțelegeți mai întâi procesul de redare a Xamarin.Forms.
Când vine vorba de utilizarea Xamarin.Forms pentru a crea o interfață utilizator pentru aplicația mobilă pe platformă mobilă, există două piese importante ale puzzle-ului pe care trebuie să le înțelegeți.
Prima piesă a puzzle-ului este element. Puteți să vă gândiți la un element ca o definiție agnostică de platformă a unui control în Xamarin.Forms. Dacă ați citit deloc documentația, veți ști că aceste controale sunt denumite, de asemenea, ca Vedere obiecte. Pentru a fi chiar mai specific, fiecare element din Xamarin.Forms derivă din Vedere clasă.
Aceste elemente sunt folosite pentru a descrie un element vizual. Elementele oferă o definiție agnostică pe platformă a caracteristicilor modului în care controlul ar trebui să arate și să se comporte. Un element propriu nu poate crea un control care să fie afișat utilizatorului. Are nevoie de ajutor. Aici intră a doua parte a procesului de randare, a renderer.
Un renderer intră în joc atunci când executați aplicația. Rolul redactorului este de a prelua elementul agnostic de pe platformă și de ao transforma în ceva vizibil pentru a fi prezentat utilizatorului.
De exemplu, dacă utilizați a Eticheta control în proiectul dvs. partajat, în timpul executării aplicației dvs., cadrul Xamarin.Forms ar folosi o instanță a LabelRenderer pentru a desena controlul nativ. Dacă începeți să vă întrebați cum se întâmplă acest lucru dintr-un proiect de cod comun, este o întrebare foarte bună. Răspunsul este că nu.
Să ilustrăm acest lucru cu un exemplu. Începeți prin a deschide Xamarin Studio sau Visual Studio. Procesul și conceptele sunt aceleași pentru ambele. Dacă utilizați Xamarin Studio, nu există suport pentru proiectele Windows Phone, astfel încât să creați doar trei proiecte în soluția dvs. Dacă utilizați Visual Studio, veți crea patru proiecte.
În Visual Studio, creați un nou proiect și Selectați Mobil Aplicații familia de proiecte din stânga și alegeți Aplicație Blank (Xamarin.Forms Portable) șablon de proiect pe dreapta. Puteți numi proiectul dvs. orice doriți, dar dacă doriți să urmați împreună cu mine, utilizați numele Personalizare, și click O.K.
Acum, în funcție de IDE, ar trebui să vedeți trei sau patru proiecte în soluția dvs. Dacă extindeți Referințe în dosarul dvs. Personalizare (portabil) proiect, veți vedea o referință de asamblare la Xamarin.Forms.Core. Aici sunt definite toate elementele diferite pentru a fi utilizate în proiectul dvs. de interfață partajată. Nimic din obișnuit acolo.
Dacă deschideți fiecare dintre proiectele specifice platformei și extindeți-le Referințe foldere, veți vedea că fiecare conține o implementare specifică platformei acelei biblioteci Xamarin.Forms, numită Xamarin.Forms.Platform.Android, Xamarin.Forms.Platform.iOS, și Xamarin.Forms.Platform.WP8 respectiv.
În aceste ansambluri veți găsi redare pentru fiecare dintre elementele Xamarin.Forms. Acum începeți să vedeți aspectul procesului. Elementele de platformă agnostice sau Vedere obiecte, se află în proiectul codului partajat, dar toate elementele de randare specifice pentru elemente se află în proiectele specifice platformei.
Aceasta înseamnă că pentru fiecare dintre elementele pe care le utilizați vor fi create două redare în Xamarin Studio și trei în Visual Studio. Acum, când vedeți cum este structurat acest lucru în Xamarin.Forms, următoarea întrebare logică este, de obicei, "Când trebuie să folosesc personalizările?".
Există cu siguranță un număr bun de proprietăți și caracteristici care sunt definite în cadrul elementelor Xamarin.Forms care pot fi utilizate pentru a particulariza controlul final pe fiecare platformă. Cu toate acestea, nu fiecare personalizare disponibilă în fiecare dintre platforme există în Xamarin.Forms. În acest caz, există două scenarii principale când veți dori să creați personalizări.
Primul scenariu în care vor fi necesare particularizări este atunci când doriți să creați un control complet personalizat. Să presupunem că doriți să creați un control al calendarului sau un fel de control grafic. Din păcate nimic asemănător nu există astăzi în Xamarin.Forms, ceea ce nu înseamnă că nu se va întâmpla niciodată.
Aceasta este cu siguranță o situație în care va trebui să porniți de la un pătrat și să creați totul de la zero. Va trebui să definiți elementul pe care îl veți folosi pentru a descrie caracteristicile controlului într-un mod agnostic de platformă. Apoi, va trebui să creați un renderer personalizat pentru fiecare platformă pe care doriți să o sprijiniți.
În funcție de ceea ce construiți, acesta poate fi un proiect destul de amplu. În acest caz, o voi salva pentru un alt tutorial în sine. În schimb, în acest tutorial, ne vom concentra pe cel de-al doilea scenariu în care veți avea nevoie de o particularizare.
Cea de-a doua situație pe care o veți avea nevoie de o particularizare este când un element încorporat nu acceptă o caracteristică specifică a unei platforme pe care doriți să o sprijiniți. Un exemplu ar fi acesta Eticheta Control. În Xamarin.Forms, nu există niciun mecanism sau proprietate care să vă permită să creați echivalentul pe fiecare dintre platforme pentru a face textul cu caractere aldine sau italice. Acest lucru poate părea ca un scenariu foarte simplu, dar veți descoperi că procesul de bază de a face această schimbare disponibil în element și de a-l face să înțeleagă că va fi la fel ca în unele dintre scenariile mai complexe.
Având în vedere cel de-al doilea scenariu, aveți două opțiuni. Puteți înlocui rasplata existentă pentru o anumită platformă (sau pentru toate platformele) și puteți crea propriile funcționalități și logica desenelor pentru toate capabilitățile elementului. Alternativ, puteți crea propriul element care derivă din elementul existent și asociați noul element cu un renderer personalizat. În acest fel, veți păstra toate funcțiile implicite de logică și de randare ale elementului de bază și o personalizați după cum doriți. Acesta va fi ruta pe care o luam pentru acest exemplu. Acum, să vedem cum să adăugăm această funcție la propriul nostru proiect.
Să începem acest proces prin stabilirea structurii de bază a aplicației noastre, astfel încât să putem vedea linia de bază și apoi să facem schimbări. Începeți prin a vă deschide App.cs fișier în Personalizare (portabil) proiect în Soluție Explorer. Modificați GetMainPage metoda de a arata astfel:
Pagina statică publică GetMainPage () var iLabel = etichetă nouă TextColor = Culoare.Fără, Text = "Vreau să fiu italicizat!", HorizontalOptions = LayoutOptions.CenterAndExpand; var bLabel = noua etichetă Text = "Vreau să fiu îndrăzneț!", TextColor = Culoare.Fără, HorizontalOptions = LayoutOptions.CenterAndExpand; var bothLabel = new Label Text = "Vreau să fiu italicizat și îndrăzneț!", TextColor = Culoare.Fără, HorizontalOptions = LayoutOptions.CenterAndExpand; returnează conținutul noului conținut BackgroundColor = Culoare albă, Conținut = nou StackLayout Padding = 100, Spațiere = 100, Copii = iLabel, bLabel, ambeleLabel;
După cum puteți vedea aici, am creat trei simple Eticheta controale. Cineva vrea să fie italicizat, vrea să fie îndrăzneț, iar al treilea este lacom și vrea să fie ambii. Dacă ați rula această aplicație pe iOS, Android și Windows Phone, ar arăta astfel:
iOS
Android
Windows Phone
După cum vedeți, ei nu vor să fie atât de plictisitori. Ei bine, nu doar stați acolo, ajutați-i.
Primul lucru pe care trebuie să-l facem este să creăm un element nou pe care să-l putem folosi pentru a oferi personalizări suplimentare celor existente Eticheta Control. Începeți prin adăugarea unei clase noi la dvs. Personalizare (portabil) proiect și numește-l StyledLabel. Înlocuiți conținutul cu următoarele:
public enum StyleType Italic, Bold, BoldItalic clasă publică StyledLabel: Etichetă public StyleType Style get; a stabilit;
Definim o enumerare și o clasă foarte simple. Am definit enumerarea pentru a permite italic, bold, and bold plus italic valori. Apoi creăm o clasă StyledLabelcare derivă din Etichetaclasa de bază și adăugați o proprietate nouă, Stil,pentru a menține stilul adecvat pe care dorim să îl aplicăm controlului.
Pentru a vă asigura că totul funcționează și că trebuie să modificați App.cs fișier din nou și înlocuiți Eticheta elemente din primul nostru exemplu cu noul nostru StyledLabel elemente. Deoarece StyleLabel clasa moșteni de la Eticheta clasa, totul ar trebui să funcționeze.
Pagina statică publică GetMainPage () var iLabel = StyledLabel nou TextColor = Culoare.Net, Text = "Vreau să fiu italicizat!", HorizontalOptions = LayoutOptions.CenterAndExpand, Style = StyleType.Italic; var bLabel = noua StyledLabel Text = "Vreau să fiu îndrăzneț!", TextColor = Color.Black, HorizontalOptions = LayoutOptions.CenterAndExpand, Style = StyleType.Bold; var bothLabel = new StyledLabel Text = "Vreau să fiu italicizat și îndrăzneț!", TextColor = Color.Black, HorizontalOptions = LayoutOptions.CenterAndExpand, Style = StyleType.BoldItalic; returnează conținutul noului conținut BackgroundColor = Culoare albă, Conținut = nou StackLayout Padding = 100, Spațiere = 100, Copii = iLabel, bLabel, ambeleLabel;
Încă o dată, aici sunt rezultatele acestei schimbări.
iOS
Android
Windows Phone
După cum puteți vedea, nimic nu sa schimbat. Acum, că avem un nou element personalizat, este timpul să creați redare personalizate pentru a avea grijă de controalele native.
Primul pas pentru a crea un renderer este să adăugați o nouă clasă platformei pe care o vizați. Vom începe cu Xamarin.Android proiect. În cadrul acestui proiect, creați un nou fișier de clasă și denumiți-l StyledLabelRenderer și înlocuiți conținutul cu următoarele:
folosind Android.Graphics; utilizând personalizarea; folosind Customization.Droid; folosind Xamarin.Forms; utilizând Xamarin.Forms.Platform.Android; [assembla: ExportRenderer (typeof (StyledLabel), typeof (StyledLabelRenderer)]] namespace Customization.Droid public class StyledLabelRenderer: LabelRenderer suprascriere protejată void OnElementChanged (ElementChangedEventArgs
Să aruncăm o privire mai atentă la acest bloc de cod.
[asamblare: ExportRenderer (typeof (StyledLabel), typeof (StyledLabelRenderer)]]
Începem cu o specială asamblare atribut care îi spune lui Xamarin.Forms să folosească acest lucru StyledLabelRenderer clasa ca randător de fiecare dată când încearcă să facă StyledLabel obiecte. Acest lucru este necesar pentru ca personalizările dvs. să funcționeze corect.
La fel ca atunci când am creat un nou StyledLabel element, am moștenit de la Eticheta clasa, vom avea noile noastre StyledLabelRenderer clasa moșteni de la LabelRenderer clasă. Acest lucru ne va permite să păstrăm funcționalitatea existentă, astfel încât trebuie doar să ignorăm ceea ce dorim să modificăm sau să personalizăm.
Pentru a aplica noua noastră formatare, va trebui să intrăm în procesul de redare și facem acest lucru prin OnElementChanged metodă. În această metodă, putem face toate personalizările noastre.
Când faci personalizările tale, există două proprietăți foarte importante pe care le vei folosi. În primul rând, va trebui să obțineți o referință la elementul original pe care l-ați creat și care este redat în metoda noastră de randare personalizată. Faceți asta folosind Element proprietate. Acesta este un obiect generic, astfel încât va trebui să aruncați acest lucru la orice tip pe care îl redați. În acest caz, este a StyledLabel.
var styledLabel = (StyledLabel) Element;
A doua proprietate importantă de care aveți nevoie este Control proprietate. Această proprietate conține o referință tipărită la controlul nativ de pe platformă. În acest caz, deoarece ați moștenit de la LabelRenderer clasa, codul deja știe că Control în acest caz este a TextView.
Din acest punct, veți folosi o logică simplă pentru a determina ce personalizare să efectuați și să aplicați personalizările native corespunzătoare. În acest caz, veți folosi mecanismul Android pentru modificarea fontului unui a TextView folosind SetTypeface metodă.
comutare (stilLabel.Style) caz StyleType.Bold: Control.SetTypeface (null, TypefaceStyle.Bold); pauză; caz StyleType.Italic: Control.SetTypeface (null, TypefaceStyle.Italic); pauză; cazul casei StyleType.BoldItalic: Control.SetTypeface (null, TypefaceStyle.BoldItalic); pauză;
Dacă ar trebui să rulați această aplicație acum, ar trebui să vedeți ceva de genul următor în Emulatorul Android, exact ceea ce v-am propus.
Procesul de creare a aplicației de redare iOS este exact același până în momentul în care se elimină OnElementChanged metodă. Începeți prin a crea o nouă clasă în dvs. Customization.iOS proiect. Numeste StyledLabelRenderer și înlocuiți conținutul cu următoarele:
utilizând personalizarea; folosind Customization.iOS; folosind MonoTouch.UIKit; folosind Xamarin.Forms; utilizând Xamarin.Forms.Platform.iOS; [assembly: ExportRenderer (typeof (StyledLabel), typeof (StyledLabelRenderer)]] namespace Customization.iOS public class StyledLabelRenderer: LabelRenderer suprascriere protejată void OnElementChanged (ElementChangedEventArgs
După cum puteți vedea, totul este exact același lucru. Aveți același lucru asamblare atribuiți, aveți prioritate la fel OnElementChanged metoda, esti casting Element proprietate la StyledLabel, și aveți aceeași coajă de a intrerupator declarație de lucru prin intermediul Stil proprietate.
Singura diferență vine în cazul în care aplicați stilul pentru nativ UILabel Control.
Accentsconagua
comutare (stilLabel.Style) caz StyleType.Bold: Control.Font = UIFont.BoldSystemFontOfSize (16.0f); pauză; caz StyleType.Italic: Control.Font = UIFont.ItalicSystemFontOfSize (16.0f); pauză; cazul casei StyleType.BoldItalic: Control.Font = UIFont.FromName ("Helvetica-BoldOblique", 16.0f); pauză; Modul în care faci a UILabel„s Font proprietatea fie bold sau italic în iOS este printr-o metodă statică de ajutor pe UIFont clasă numită fie BoldSystemFontOfSize sau ItalicSystemFontOfSize. Acest lucru va funcționa fie în cazul unui font aldine, fie în font italic, dar nu în ambele. Dacă încercați să aplicați ambele acestea la o UILabel, numai ultima va face.
Pentru a obține ambele stiluri, vom cheat un pic și vom folosi un font încorporat în iOS numit Helvetica-BoldOblique. Acest font are încorporat atât bold și italic, încât nu trebuie să le facem individual.
Dacă rulați acest lucru în simulatorul iOS, veți obține următorul rezultat:
În sfârșit, ajungem la Windows Phone. Așa cum probabil ați ghicit deja, procesul este exact același. Creați o nouă clasă în Customization.WinPhone proiect, numește-l StyledLabelRenderer și înlocuiți conținutul cu următoarele:
utilizând System.Windows; utilizând personalizarea; folosind Customization.WinPhone; folosind Xamarin.Forms; utilizând Xamarin.Forms.Platform.WinPhone; [assembly: ExportRenderer (typeof (StyledLabel), typeof (StyledLabelRenderer)]] namespace Customizare.WinPhone public class StyledLabelRenderer: LabelRenderer suprascriere protejată void OnElementChanged (ElementChangedEventArgs
Din nou, totul este același, cu excepția logicii. În acest caz, pentru a face textul italic, setați TextBlock„s Stilul fontului proprietate la Cursiv. Apoi, pentru a face textul îngroșat, setați Grosimea fontului proprietate la Îndrăzneţ. Dacă doriți să aplicați ambele, setați pur și simplu ambele.
Executarea acestei aplicații în emulatorul Windows Phone vă va oferi următorul rezultat:
Ați creat acum cu succes un element complet funcțional, personalizat, încrucișat, care se redă perfect pe toate cele trei platforme. Acum ar trebui să te simți pregătit să iei lumea. Ei bine aproape.
Procesul pe care l-am urmat de-a lungul acestui tutorial este complet valabil și în majoritatea cazurilor va funcționa perfect. Există totuși un caz foarte specific, în care ne vom lipsi de anumite funcționalități dacă vom folosi această abordare. Acest caz este legat de date în XAML.
Una dintre caracteristicile foarte interesante ale Xamarin.Forms este faptul că utilizați XAML și legarea datelor la fel cum ați face dacă creați o aplicație Windows Phone, WPF sau Silverlight. Din păcate, legarea datelor și XAML sunt dincolo de scopul acestui tutorial, dar vă încurajez să citiți mai multe despre acest subiect pe pagina XAML pentru Xamarin.Forms.
Să începem prin construirea unei pagini simple XAML care duplică interfața de utilizator pe care am creat-o anterior în cod. Începeți prin a adăuga un fișier nou la dvs. Personalizări (portabil) proiect, selectarea Formează pagina XAML fișier și dându-i un nume de StyledLabelPage.
Odată ce fișierul este creat, înlocuiți conținutul cu următoarele:
