Share
Dezvoltarea widget-urilor pentru platforma Android implică un set de sarcini ușor diferit de dezvoltarea standard a aplicațiilor. În această serie de tutoriale, vom lucra prin procesul de dezvoltare a unui widget personalizabil de ceas analogic. Ceasul va fi bazat pe clasa Android AnalogClock și personalizat cu grafica proprie.
În această serie de tutori, dezvoltăm un widget personalizabil pentru ceasul analogic Android, utilizând clasa AnalogClock și grafica personalizată. În prima parte a seriei, creăm proiectul, pregătim fișierul Manifest și alte resurse. În această parte, vom lucra la proiectarea widgetului. Aceasta va implica crearea de grafici pentru cadranul cu ceas și mâini, precum și implementarea layout-ului în XML. Vom crea grafică pentru densitățile diferite ale dispozitivelor. În partea finală a seriei, vom implementa permițând utilizatorului să aleagă dintr-o selecție de modele pentru ceas, deci vom crea trei opțiuni de design aici.
Acesta este Partea a 2-a din seria noastră despre Construirea unui Widget personalizabil pentru ceas Android cu ajutorul a patru tutoriale:
Widgetul Android AnalogClock utilizează trei imagini: cadranul cu ceas, mâna minutelor și mâna oră. Prin urmare, vom crea trei elemente de design pentru fiecare versiune a widget-ului de ceas pe care dorim ca utilizatorii să fie capabili să aleagă între. Vom crea, de asemenea, opțiuni de design alternative cu mâinile cu cadran, oră și minute. Pentru acest proiect, va trebui să vizăm diferite densități ale ecranului dispozitivului, pentru care vom crea fișiere imagine în patru scale diferite.
Vom crea trei modele de ceasuri, fiecare cu un cadran, o mână de mână și o mână de oră. Puteți utiliza, desigur, propriile desene sau modele, dar nu ezitați să utilizați fișierele imagine pe care le folosim aici pentru a începe. Fișierele imagine pentru fiecare design la fiecare densitate sunt incluse în link-ul de descărcare pentru acest tutorial și vor fi de asemenea incluse în descărcarea pentru partea 4.
Primul este cadranul de ceas. Amintiți-vă că am specificat widget-ul ca fiind două celule lățime și două celule mari, rezultând o dimensiune maximă de 146dp (pixeli independenți de densitate). Pentru această serie de tutorial vom crea patru versiuni ale fiecărei imagini pentru a se potrivi celor patru categorii de densitate.
În loc să creați imagini pentru fiecare densitate, puteți utiliza alternativ grafice NinePatch, care sunt fișiere bitmaps care pot fi scalate în sus și în jos pentru a se potrivi cu densitățile dispozitivului, permițându-vă să creați o singură imagine pentru fiecare design. Fezabilitatea utilizării NinePatch depinde parțial de conținutul desenelor pe care le folosiți, dar există instrumente care să vă ajute să le creați dacă doriți.
Este mai ușor dacă începeți cu densitatea medie, care ar trebui să aibă un maxim de 146 px pe ambele axe. Aici este setarea implicită a ceasului pe care o folosim la densitate medie, pe care o puteți folosi fie ca referință pentru propriile desene sau dacă nu doriți să creați propria dvs. până la ultima:
În acest caz, imaginea este de 146 pixeli pe ambele axe, dar puteți să o micșorați dacă doriți. Vom specifica o marjă pentru dispozitivele care rulează API-uri Android mai mici de 14, dar nu vor furniza o marjă pentru dispozitivele pe 14-plus, deoarece la cele mai recente niveluri de API există o marjă automată între widget-uri. Puteți folosi destul de mult orice design doriți - ceasul dvs. nu trebuie să fie chiar circular. Includerea fie a mărcilor, fie a numerelor care indică orele de pe cadran, este recomandabilă din perspectiva utilizării, deși nu este esențială.
Iată cele două modele de ceasuri alternative pe care le vom folosi, un stil de piatră și celălalt metalic, afișat aici la densitate medie:
Odată ce ați proiectat programele de ceas, puteți crea versiuni alternative ale fiecărei imagini pentru diferite densități. În funcție de desenele dvs., acest lucru poate să nu fie necesar, dar vom include versiuni personalizate ale fiecărei imagini pentru desenele din acest tutorial. Următoarele indică dimensiunea maximă pe care o folosim pentru widget-ul nostru pe ambele axe X și Y la fiecare densitate:
Când aveți fișiere de imagine pentru fiecare design de cadran cu care doriți să utilizați (și versiuni pentru fiecare densitate, dacă este cazul), copiați-le în folderele desenate din spațiul de lucru al proiectului widget Android. Eclipse va crea în mod normal un dosar pentru fiecare categorie de densitate automat, dar, dacă utilizați doar o singură imagine pentru toate densitățile, puteți crea un folder pur și simplu denumit "trasabil" și plasați imaginea acolo. Dosarele pentru fiecare nivel de densitate sunt:
Android AVD Manager vă va permite să vă testați proiectul widget finit la fiecare dintre aceste densități. După ce ați salvat imaginile în diferitele foldere desenate, asigurați-vă că ați folosit aceleași nume în fiecare dintre ele. De exemplu, unul dintre modelele de cadran pe care le folosim este numit "clock_dial_stone" - acesta este numele fișierului de imagine pentru cadranul de piatră din fiecare dosar densitate, deși conținutul fiecărei versiuni este diferit, deși numai în dimensiune. Dacă aveți în continuare îndoieli cu privire la modul în care ar trebui să funcționeze acest lucru, descărcați doar fișierele imagine utilizând linkul de descărcare din partea de sus a acestui tutorial și răsfoiți folderele pentru a obține ideea.
Apoi, creați o imagine pentru mâinile ceasului și a minutelor ceasului widget, inclusiv imaginile pentru fiecare design și fiecare densitate pe care o vizați. Iată mâinile noastre cu densitate medie de minute pentru fiecare design:
Din nou, nu ezitați să le folosiți pentru a începe sau pentru a-ți elabora propriul. Observați că aceste fișiere imagine conțin spațiu transparent în jurul mâinii. Trebuie să proiectați fiecare dintre imaginile dvs. de mână cu toată înălțimea cadranului de ceas cu care vor fi utilizate. Fiecare mână trebuie să fie în poziția exactă în care ar fi în momentul în care se îndreaptă spre doisprezece, așezată peste imaginea de pe afișajul ceasului și la jumătatea drumului. Mâna trebuie să fie, de asemenea, în centrul fișierului de imagine orizontal, deoarece va fi rotită din punctul central atunci când se afișează ora. Lungimea mâinilor din fișierul imagine este într-adevăr dependentă de dvs., atâta timp cât înălțimea completă a imaginii este aceeași cu înălțimea imaginii de apelare.
Următoarea diagramă prezintă scala completă a imaginilor de mână cu mâna de la ora 12 și mâna oră la trei (mâna oră a fost rotită la 90 de grade în sensul acelor de ceasornic în punctul central al acesteia):
Odată ce ați selectat modelele de mână minute, salvați câte unul pentru fiecare densitate, micșorându-le în sus și în jos pentru a se potrivi cu înălțimea cadranului în fiecare caz. Copiați-le din nou în folderele dvs. desenate din nou, utilizând același nume pentru fiecare desen în toate folderele de densitate, ca și în cazul imaginilor de cadran.
Apoi efectuați același proces pentru mâinile dvs. de oră. Iată mâinile oră pentru cele trei modele pe care le folosim:
Principiul este identic cu cel al mâinilor, cu excepția faptului că mâinile oră ar trebui să fie, în general, mai scurte. Proiectați mâinile oră indicând ora 12 și pregătiți versiunile pentru fiecare densitate, copiindu-le în folderele tale desenate așa cum ați făcut pentru mâinile minute.
Designul widget-ului va folosi câteva date pe care le vom include în dosarele "values" ale proiectului nostru. În versiunea Android API 14 și mai departe, sistemul include automat margini între widget-uri așa cum apar pe ecranul inițial al utilizatorului. Cu toate acestea, în versiunile anterioare de API, acest lucru nu a fost cazul. Din acest motiv, dorim să specificăm o marjă care să includă widget-ul ceasului pe dispozitive care rulează niveluri Android mai mici de 14. Acesta este un caz în care putem exploata faptul că avem dosare de valori care vizează aceste două categorii de niveluri API utilizator.
Vom defini margini în fișierul nostru de aspect XML referindu-ne la o resursă de dimensiuni. În directorul "values", creați un fișier nou numit "dimensions.xml" - selectați folderul "values" din Eclipse și faceți clic dreapta sau alegeți "File", apoi "New", "File".
Când faceți clic pe butonul "Finalizare", Eclipse va crea și deschide fișierul. Selectați fila "dimensions.xml" pentru a edita codul. Introduceți următoarele:
8dp
Acest cod afișează pur și simplu o valoare a dimensiunii utilizând pixeli independenți de densitate împreună cu un nume, astfel încât să putem face referire la aceasta în altă parte.
Salvați fișierul. Acum, copiați-l făcând clic dreapta în dosarul "values" sau selectând-l și selectând "Edit" - apoi selectați "Copy". Inserați-l în dosarul "values-v14" pe care l-am creat ultima dată - faceți clic dreapta sau selectați directorul și alegeți "Edit", apoi selectați "Paste". Fișierul va apărea în dosarul "values-v14", care vizează nivelurile API de la 14 ani. Deschideți această nouă copie a fișierului și editați valoarea dimensiunii pentru a indica o marjă de zero după cum urmează:
0dp
Acum, atunci când aspectul XML se referă la această valoare a dimensiunii folosind numele său, va fi utilizată o valoare de zero la dispozitive care execută API 14 plus și o valoare de 8dp va fi folosită altfel.
Acum, să definim widget-ul nostru în XML. Rețineți că am specificat un aspect inițial pentru widgetul din fișierul XML în care am definit proprietățile de bază. Aspectul pe care l-am referit acolo a fost "clock_widget_layout", deci creați acest fișier acum. Faceți clic dreapta sau selectați folderul "layout" și alegeți "File" apoi "New", "File". Introduceți "clock_widget_layout.xml" ca nume de fișier și dați clic pe "Finalizați".
Selectați fila "clock_widget_layout.xml" atunci când Eclipse deschide fișierul astfel încât să puteți edita XML-ul. Folosim un layout relativ pentru widgetul nostru - dacă doriți să folosiți un design diferit, puteți utiliza alternativ fie un layout liniar sau un cadru, deoarece acestea sunt singurele suportate de widget-uri. Pentru a utiliza aspectul relativ, adăugați următoarea schiță în fișierul de aspect XML:
Aici specificăm un ID pentru widget, pe care îl vom folosi pentru implementarea clicurilor pe el în codul nostru Java din Partea 4. Observați că codul se referă, de asemenea, la valoarea dimensiunii create, folosind sintaxa standard - numele "dimensiunilor .xml "nu contează de fapt, trebuie doar să listați un element" dimen "într-un fișier de valori pentru a se referi la acesta în acest mod.
În interiorul aspectului relativ, adăugați widget-ul AnalogClock după cum urmează:
Acesta este elementul standard Android Analog Clock, care ne permite să personalizăm afișajul. Utilizăm un atribut ID astfel încât să putem face referire la widget-ul din Java. Cele trei atribute finale specifică resursele de tracțiune pe care le-am creat pentru mâinile pentru cadran, minut și oră. Dacă ați salvat al tău cu nume de fișiere diferite, modificați acest cod pentru a le reflecta. Android va selecta fișierul desenat din dosarul de densitate relevant pe fiecare dispozitiv utilizator.
Din moment ce le permitem utilizatorilor să aleagă un design, vom include de fapt toate cele trei modele în XML-ul nostru, stabilind toate cu excepția unuia pentru a fi inițial invizibile. Asigurați-vă că primul design pe care îl includeți este cel pe care doriți să-l afișați în mod implicit, apoi adăugați altele după cum urmează:
Din nou, modificați denumirile care pot fi desenate pentru a reflecta numele imaginilor pentru cadrane, minute și oră pentru fiecare dintre desenele dvs. Puteți include mai mult de trei modele dacă doriți - asigurați-vă că toți, cu excepția unuia dintre ei, au vizibilitatea setată la invizibil, astfel încât să apară inițial numai un singur model (opțiunea implicită). Vom putea implementa alegerea utilizatorilor între aceste modele în Java folosind atributele elementului ID al elementelor ceasului Analog, care se încheie cu numere întregi începând de la zero și incrementând cu fiecare design. Salvați fișierul de aspect.
Iată grafică a modului în care fiecare dintre modelele noastre va arăta când widgetul este complet:
Acesta este procesul de proiectare pentru widget-ul ceasului nostru complet. Dacă nu doriți să vă creați propriile imagini de design în acest stadiu, folosiți doar imaginile din dosarul de descărcare la început. În tutorialul următor vom folosi clasa AppWidgetProvider pentru a implementa widgetul nostru în Java. În partea finală a seriei vom implementa clicuri utilizator pe widget, oferind o alegere între modele și actualizarea preferințelor utilizatorului pentru a afișa în mod continuu opțiunea aleasă.
Accentsconagua