Share
Lo sviluppo di widget per la piattaforma Android comporta un insieme leggermente diverso di compiti rispetto allo sviluppo di app standard. In questa serie di tutorial, lavoreremo attraverso il processo di sviluppo di un widget orologio analogico personalizzabile. L'orologio sarà basato sulla classe Android AnalogClock e personalizzato con la tua grafica.
In questa serie di tutorial stiamo sviluppando un widget orologio analogico Android personalizzabile utilizzando la classe AnalogClock e la grafica personalizzata. Nella prima parte della serie, creiamo il progetto, preparando il file Manifest e altre risorse. In questa parte, lavoreremo sul design del widget. Ciò comporterà la creazione di elementi grafici per il quadrante dell'orologio e le mani, oltre all'implementazione del layout in XML. Creeremo la grafica per diverse densità di dispositivi. Nella parte finale della serie, implementeremo l'opzione di consentire all'utente di scegliere tra una selezione di design per l'orologio, quindi creeremo qui tre opzioni di design.
Questa è la parte 2 della nostra serie sulla creazione di un widget orologio analogico Android personalizzabile su quattro tutorial:
Il widget Android AnalogClock utilizza tre immagini: il quadrante dell'orologio, la lancetta dei minuti e la lancetta delle ore. Creeremo quindi tre elementi di design per ciascuna versione del widget orologio che vogliamo che gli utenti possano scegliere. Creeremo anche opzioni di design alternative con le lancette dei numeri, delle ore e dei minuti. Per questo progetto, avremo bisogno di indirizzare diverse densità dello schermo del dispositivo, per le quali creeremo file di immagine su quattro diverse scale.
Creeremo tre modelli di orologio, ciascuno con quadrante, lancetta dei minuti e lancetta delle ore. Puoi ovviamente usare i tuoi disegni, ma sentiti libero di usare i file immagine che stiamo usando qui per iniziare. I file di immagine per ciascun disegno a ciascuna densità sono inclusi nel collegamento per il download per questo tutorial e saranno inclusi anche nel download per la Parte 4.
Il primo è il quadrante dell'orologio. Ricorda che abbiamo specificato che il widget è di due celle di larghezza e due di altezza, ottenendo una dimensione massima di 146 dpi (pixel indipendenti dalla densità). Per questa serie di tutorial creeremo quattro versioni di ciascuna immagine per soddisfare le quattro categorie di densità.
Invece di creare immagini per ciascuna densità, in alternativa è possibile utilizzare la grafica NinePatch, che è una bitmap che può essere scalata verso l'alto o verso il basso per adattarsi alla densità del dispositivo, consentendo di creare una singola immagine per ciascun disegno. La fattibilità dell'utilizzo di NinePatch dipende in parte dal contenuto dei progetti che stai utilizzando, ma ci sono strumenti che ti aiutano a crearli se lo desideri.
È più semplice se inizi con la densità media, che dovrebbe essere un massimo di 146 pixel su entrambi gli assi. Ecco il quadrante dell'orologio predefinito che utilizziamo a densità media, che puoi utilizzare come riferimento per i tuoi progetti o se non vuoi crearne uno solo più tardi:
In questo caso, l'immagine è 146 px su entrambi gli assi, ma puoi ridurla se lo desideri. Specificheremo un margine per i dispositivi con API Android inferiori a 14, ma non forniremo un margine per i dispositivi su 14-plus, perché nei livelli API più recenti viene inserito un margine automatico tra i widget. Puoi usare praticamente tutti i design che ti piacciono: il tuo orologio non ha nemmeno bisogno di essere circolare. L'inclusione di segni o numeri che indicano le ore sul quadrante è consigliabile dal punto di vista dell'usabilità, sebbene non sia essenziale.
Ecco i due modelli di quadrante dell'orologio alternativi che useremo, uno stile di pietra e l'altro metallico, qui visualizzato a media densità:
Una volta progettati i quadranti, puoi creare versioni alternative di ciascuna immagine per le diverse densità. A seconda dei progetti, questo potrebbe non essere necessario, ma includeremo versioni su misura di ogni immagine per i disegni in questo tutorial. Quanto segue indica la dimensione massima che stiamo usando per il nostro widget su entrambi gli assi X e Y ad ogni densità:
Quando si dispone di file di immagine per ciascun design del quadrante dell'orologio che si desidera utilizzare (e versioni per ciascuna densità, se appropriato), copiarli nelle cartelle disegnabili nell'area di lavoro del progetto widget Android. Normalmente, Eclipse crea automaticamente una cartella per ogni categoria di densità, ma, se si utilizza solo un'immagine per tutte le densità, è possibile creare una cartella denominata semplicemente "estraibile" e posizionare l'immagine lì. Le cartelle per ciascun livello di densità sono:
Android AVD Manager ti permetterà di testare il tuo progetto di widget finito su ciascuna di queste densità. Dopo aver salvato le tue immagini nelle varie cartelle disegnabili, assicurati di aver usato gli stessi nomi in ognuna di esse. Ad esempio, uno dei dial design che usiamo si chiama "clock_dial_stone" - questo è il nome file dell'immagine per il quadrante di pietra in ogni cartella di densità sebbene il contenuto di ciascuna versione sia diverso se solo nella dimensione. Se hai ancora dei dubbi su come dovrebbe funzionare, basta scaricare i file immagine usando il link per il download nella parte superiore di questo tutorial e sfogliare le cartelle per ottenere l'idea.
Quindi crea un'immagine per le lancette delle ore e dei minuti del tuo orologio, incluse le immagini per ciascun disegno e ogni densità che stai bersagliando. Ecco le nostre lancette dei minuti a media densità per ogni modello:
Di nuovo, sentiti libero di usarli per iniziare o per elaborare il tuo. Si noti che questi file di immagine contengono spazio trasparente intorno alla mano. È necessario progettare ciascuna delle immagini della mano con l'intera altezza del quadrante dell'orologio con cui verranno utilizzate. Ogni mano deve essere nella posizione esatta in cui si troverebbe quando punta a dodici, posizionata sopra l'immagine del quadrante dell'orologio e a metà di essa. La mano deve essere anche al centro del suo file immagine in senso orizzontale, poiché verrà ruotata dal suo punto centrale durante la visualizzazione dell'ora. La lunghezza delle mani all'interno del file immagine dipende solo da te, a condizione che l'intera altezza dell'immagine sia uguale all'altezza dell'immagine del quadrante.
Lo schema seguente mostra il fondo scala delle immagini della mano con la lancetta dei minuti alle dodici e la lancetta delle ore alle tre (la lancetta delle ore è stata ruotata di 90 ° in senso orario sul suo punto centrale):
Una volta ordinati i disegni delle lancette dei minuti, salva di nuovo uno per ogni densità, ridimensionandoli su e giù in modo che corrispondano all'altezza del quadrante dell'orologio in ciascun caso. Ricopritele nuovamente nelle cartelle disegnabili, usando lo stesso nome per ciascun disegno nelle cartelle di densità come con le immagini di composizione.
Quindi esegui lo stesso processo per le tue lancette delle ore. Ecco le lancette delle ore per i tre progetti che stiamo utilizzando:
Il principio qui è lo stesso delle lancette dei minuti, con la differenza che le lancette delle ore dovrebbero essere generalmente più corte. Progetta le tue lancette delle ore puntando alle 12 e prepara le versioni per ogni densità, copiandole nelle cartelle disegnabili come hai fatto per le lancette dei minuti.
Il design del widget userà alcuni dati che includeremo nelle cartelle "valori" del nostro progetto. Su Android API 14 e versioni successive, il sistema include automaticamente i margini tra i widget come appaiono sulla schermata iniziale dell'utente. Tuttavia, nelle precedenti versioni API questo non era il caso. Per questo motivo vogliamo specificare un margine per includere il widget intorno all'orologio su dispositivi con livelli Android inferiori a 14. Questo è un caso in cui possiamo sfruttare il fatto che abbiamo cartelle di valori che hanno come target queste due categorie di livelli API utente.
Definiremo i margini nel nostro file di layout XML facendo riferimento a una risorsa di dimensione. Nella directory "values", crea un nuovo file denominato "dimensions.xml": seleziona la cartella "values" in Eclipse e fai clic con il pulsante destro del mouse o scegli "File", quindi "Nuovo", "File" e inserisci il nome del file.
Quando fai clic sul pulsante "Fine", Eclipse crea e apre il file. Seleziona la scheda "dimensions.xml" per modificare il codice. Digita il seguente:
8DP
Questo codice elenca semplicemente un valore di dimensione usando pixel indipendenti dalla densità insieme a un nome in modo che possiamo riferirci altrove.
Salva il file. Ora copialo facendo clic con il pulsante destro del mouse nella cartella "valori" o selezionandolo e scegliendo "Modifica", quindi selezionare "Copia". Incollalo nella cartella "values-v14" che abbiamo creato l'ultima volta: fai clic con il pulsante destro del mouse o seleziona la cartella e seleziona "Modifica", quindi seleziona "Incolla". Il file verrà visualizzato nella cartella "values-v14", che indirizza i livelli API da 14 in poi. Aprire questa nuova copia del file e modificare il valore della dimensione per indicare un margine pari a zero come segue:
0DP
Ora quando il layout XML fa riferimento a questo valore di dimensione utilizzando il suo nome, verrà utilizzato un valore pari a zero sui dispositivi che eseguono l'API 14 plus e verrà utilizzato un valore di 8dp altrimenti.
Ora definiamo il nostro widget in XML. Ricorda che abbiamo specificato un layout iniziale per il widget nel file XML in cui abbiamo definito le sue proprietà di base. Il layout a cui ci riferivamo era "clock_widget_layout", quindi crea questo file ora. Fai clic con il pulsante destro del mouse o seleziona la cartella "layout" e scegli "File", quindi "Nuovo", "File". Inserisci "clock_widget_layout.xml" come nome del file e fai clic su "Fine".
Selezionare la scheda "clock_widget_layout.xml" quando Eclipse apre il file in modo da poter modificare l'XML. Stiamo utilizzando un layout relativo per il nostro widget: se desideri utilizzare un design diverso, puoi utilizzare alternativamente un layout lineare o un frame, in quanto questi sono gli unici supportati dai widget. Per utilizzare il layout relativo, aggiungi il seguente schema al file di layout XML:
Qui specifichiamo un ID per il widget, che useremo per implementare i clic su di esso nel nostro codice Java nella Parte 4. Si noti che il codice fa anche riferimento al valore di dimensione che abbiamo creato, usando la sintassi standard - il nome delle "dimensioni" .xml "il file in realtà non conta, è sufficiente elencare un elemento" dimen "in un file di valori per farvi riferimento in questo modo.
All'interno del layout relativo, aggiungi il tuo widget AnalogClock come segue:
Questo è l'elemento Android Analog Clock standard, che ci consente di personalizzare il display. Usiamo un attributo ID in modo che possiamo fare riferimento al widget in Java. Gli ultimi tre attributi specificano le risorse estraibili che abbiamo creato per le lancette del quadrante, dei minuti e delle ore. Se hai salvato il tuo con nomi di file diversi, modifica questo codice per rifletterli. Android seleziona il file drawable dalla relativa cartella di densità su ciascun dispositivo utente.
Dato che stiamo permettendo agli utenti di scegliere un design, in realtà includeremo tutti e tre i progetti nel nostro XML, impostando tutti tranne uno per essere inizialmente invisibili. Assicurati che il primo disegno che includi sia quello che vuoi visualizzare di default, quindi aggiungi gli altri come segue:
Ancora una volta, modificare i nomi dei disegni per riflettere i nomi per le immagini di quadranti, minuti e ore per ciascuno dei vostri disegni. Puoi includere più di tre design se lo desideri - assicurati che tutti tranne uno di essi abbiano la visibilità impostata su invisibile, in modo che inizialmente venga visualizzato solo un disegno (l'opzione predefinita). Saremo in grado di implementare la scelta dell'utente tra questi progetti in Java utilizzando gli attributi ID dell'elemento Analog Clock, che terminano tutti con numeri interi che iniziano da zero e incrementano con ogni progetto. Salva il tuo file di layout.
Ecco alcuni screengrabs di come appariranno ciascuno dei nostri disegni una volta completato il widget:
Questo è il processo di progettazione per il nostro widget orologio completo. Se non si desidera creare le proprie immagini di progettazione in questa fase, è sufficiente utilizzare le immagini nella cartella di download all'inizio. Nel prossimo tutorial useremo la classe AppWidgetProvider per implementare il nostro widget in Java. Nella parte finale della serie implementeremo i clic dell'utente sul widget, presentando una scelta tra i progetti e aggiornando le preferenze dell'utente per visualizzare continuamente l'opzione scelta.
Accentsconagua