Costruire un orologio analogico Android personalizzabile

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.

Una volta che l'orologio è stato aggiunto alla schermata iniziale dell'utente, verrà continuamente aggiornato per visualizzare l'ora corrente. Definiremo le proprietà del widget in XML, con una classe Java che estende AppWidgetProvider per gestire gli aggiornamenti. Consentiremo inoltre all'utente di configurare l'aspetto del widget facendo clic su di esso, con una classe Attività che gestisce l'interazione dell'utente. Come forse avrai notato, le schede di Google Play per i widget spesso hanno valutazioni e commenti bassi da parte degli utenti che non realizzano che un widget non viene avviato allo stesso modo di un'app normale. Per questo motivo e per risolvere alcuni problemi relativi ai dispositivi con Android 4.0 (Ice Cream Sandwich), includeremo anche un'attività di avvio informativo per l'app widget. Specificheremo anche il layout e varie altre risorse applicative in XML.

Questa serie di tutorial sulla creazione di un widget orologio analogico Android personalizzabile è suddivisa in quattro parti:

  • Impostazione del progetto Android Widget
  • Progettare l'orologio
  • Ricezione di aggiornamenti e avvio
  • Implementazione della configurazione utente

Ecco un'istantanea di come sarà il risultato finale con la visualizzazione predefinita (vale a dire prima della personalizzazione dell'utente):

In questa prima parte della serie, configureremo il nostro progetto di widget, aggiungeremo gli elementi necessari al file Manifest e creeremo il file di risorse XML che definirà le proprietà di base del widget. Questo tutorial iniziale richiede solo alcuni passaggi, ma la comprensione di ognuno di essi è fondamentale per l'apprendimento degli elementi essenziali dello sviluppo di widget.


Passaggio 1: avviare un progetto widget Android

Se hai creato solo app Android standard in passato, la creazione di un progetto widget è leggermente diversa. Avvia il tuo progetto in Eclipse nel solito modo, scegliendo "File", "Nuovo" e quindi "Progetto". Seleziona "Progetto Android" dall'elenco e quindi premi "Avanti". Nella finestra "Nuovo progetto Android", inserire il nome che si desidera utilizzare per il progetto del widget e fare clic su "Avanti".

Seleziona un obiettivo di costruzione per la tua app e fai clic su "Avanti". Abbiamo come target Android 4.0, che è il livello 14 dell'API.

Nella finestra Informazioni sull'applicazione, inserisci il nome del pacchetto. Quando sviluppi un'app widget, non è necessario creare un'attività, quindi puoi deselezionare la sezione "Crea attività". Tuttavia, includeremo un'attività per fornire informazioni sull'utilizzo del widget, quindi lasceremo che Eclipse crei l'attività per ora. Qui puoi modificare l'SDK minimo o, facoltativamente, modificarlo nel file Manifest.

Fai clic su "Fine" ed Eclipse costruirà il tuo progetto.


Passaggio 2: modifica il manifesto del progetto

Apri il file manifest del progetto: deve essere salvato come "AndroidManifest.xml" nella cartella del progetto, visibile all'interno di Package Explorer. Fare doppio clic per aprirlo, quindi selezionare la scheda "AndroidManifest.xml" in modo da poter modificare direttamente il codice XML.

Se non hai modificato l'SDK minimo quando hai creato il progetto, ma desideri farlo ora, puoi modificare l'elemento "uses-sdk" come nell'esempio seguente:

 

Oltre a specificare l'SDK minimo qui, viene anche indicato l'SDK di destinazione. Con il livello di targeting 14, possiamo utilizzare lo spazio automatico del margine tra i widget visualizzati sui dispositivi che eseguono Ice Cream Sandwich.

A questo punto, è possibile modificare la sezione Attività principale del Manifest se non si desidera utilizzare un'attività di avvio. Tuttavia, lasceremo questa sezione così com'è. Ci sono due ragioni per farlo:

  • Quando gli utenti scaricano un widget tramite Google Play, tentano istintivamente di aprirlo, dimenticando o non sapendo che le app dei widget non vengono avviate in modo normale ma vengono invece aggiunte alla schermata iniziale. Quando ciò accade, possiamo utilizzare l'attività di avvio principale per visualizzare un piccolo testo informativo che spiega come aggiungere il widget, eliminando eventuali commenti o valutazioni negative da utenti confusi.
  • C'è un problema con i widget in esecuzione su Android 4.0 che a volte impediscono agli utenti di poter aggiungere nuovi widget ai loro schermi. In 4.0, gli utenti aggiungono i widget aprendo il menu del dispositivo, selezionando la scheda Widget, trovando il widget elencato lì e premendo per tenerlo, lasciandolo cadere nella schermata iniziale. Tuttavia, in alcuni casi, un nuovo widget non viene visualizzato nella scheda Widget. Normalmente questo viene risolto al riavvio del dispositivo, ma può naturalmente creare confusione e impedire l'utilizzo della tua app. Fornire un'attività di lancio previene questo problema.

Dopo il tag Activity di chiusura, ma all'interno dell'elemento Application, aggiungi un altro elemento Activity per lo schermo che includeremo per consentire agli utenti di selezionare uno stile di orologio personalizzato:

  

L'attività sarà denominata "ClockChoice" e verrà aggiunta al progetto nella Parte 4. Dopo il nuovo elemento Activity, aggiungi un elemento Receiver al tuo manifest come segue:

  

Qui indichiamo la classe che gestirà gli aggiornamenti del widget, che sarà "ClockWidget" e estenderà AppWidgetProvider. All'interno di questo elemento Receiver, tra i tag di apertura e di chiusura, aggiungi un filtro Intent come segue:

   

Questo specifica che il widget riceverà aggiornamenti. Infine, sempre all'interno dell'elemento Receiver, aggiungi un elemento meta-dati:

 

Qui specifichiamo un file XML in cui dichiareremo le proprietà di base del widget, utilizzando l'attributo name per indicare che questo file contiene dati per un AppWidgetProvider. Salva il tuo file manifest - non preoccuparti se vedi un errore perché la risorsa XML non può essere trovata, la creeremo in seguito.


Passaggio 3: definire le proprietà del widget

Creiamo ora la risorsa XML che abbiamo specificato nel manifesto. Le proprietà del widget saranno definite in questo file. Nella directory delle risorse del progetto, aggiungi una nuova cartella denominata "xml" se non ne esiste già una. Fai clic destro sulla cartella "res" (o selezionalo e scegli "File"), seleziona "Nuovo" quindi "Cartella" e inserisci "xml" come nome della cartella prima di fare clic su "Fine".

Ora crea un nuovo file in questa cartella facendo clic con il pulsante destro del mouse (o selezionandolo e scegliendo "File"), scegliendo "Nuovo", quindi "File" e inserendo "clock_widget.xml" in modo che corrisponda al nome che hai incluso nelle metriche manifest. elemento di dati.

Fai clic su "Fine" per creare il file - non preoccuparti di eventuali errori, questi scompariranno quando aggiungiamo il nostro codice XML.

Il tuo file dovrebbe aprirsi automaticamente in Eclipse. Seleziona la scheda "clock_widget.xml" per modificare il codice.

Il widget XML richiede solo un singolo elemento XML: aggiungilo come segue:

 

Gli attributi di elemento qui sono le ossa di qualsiasi app di widget. Innanzitutto, definiamo la larghezza e l'altezza minima per il widget dell'orologio che apparirà sullo schermo dell'utente. Utilizziamo pixel indipendenti dalla densità per consentire al sistema Android di far fronte alle variazioni di densità dello schermo. Quando si calcola la dimensione di un widget, si moltiplica il numero di celle che si desidera su ciascun asse per 74, quindi si sottrae 2 dal risultato. Vogliamo che il widget dell'orologio sia largo 2 celle e 2 celle in altezza, quindi l'altezza e la larghezza minima sono entrambe 146.

Il valore del periodo di aggiornamento determina la frequenza di aggiornamento dell'app del widget. Dato che stiamo utilizzando Android AnalogClock come base per il nostro widget, non dobbiamo preoccuparci troppo di questo valore e possiamo fornire zero. Quando sviluppi widget che pianifichi di aggiornare all'interno del tuo codice applicazione, potresti dover fornire un valore diverso qui. Se si utilizza questo valore per determinare il periodo di aggiornamento, la maggior parte degli aggiornamenti si verificherà ogni 30 minuti. Tuttavia, è possibile fornire aggiornamenti più frequenti se si utilizza un AlarmManager all'interno della propria app.

Infine, indichiamo il layout iniziale del widget nominando un file di layout, che aggiungeremo al progetto nel prossimo tutorial: non preoccuparti degli errori visualizzati da Eclipse nel frattempo. Ci sono altri attributi che puoi includere nell'elemento "appwidget-provider" se lo desideri, come ad esempio un'immagine di anteprima che gli utenti possono vedere prima di aggiungere il tuo widget - se non fornisci un'anteprima, gli utenti vedranno invece l'icona dell'app nel selettore di widget o menu.


Passaggio 4: aggiungere valori al progetto

La fase di preparazione finale per il widget dell'orologio riguarda le risorse del valore dell'app. Eclipse avrebbe dovuto creare una cartella "valori" all'interno della cartella "res" del progetto, con il file XML di Strings già incluso. Stiamo aggiungendo un'altra cartella di valori specifica per le API Android dalla 14 in poi. Questo ci permetterà di adattare determinati aspetti del widget a quei livelli API, in particolare le stringhe che appaiono all'interno dell'interfaccia e i valori delle dimensioni che utilizziamo per applicare i margini alla visualizzazione del widget.

Crea una nuova cartella nella directory "res" facendo clic destro su di essa (o selezionandola e scegliendo "File"), selezionando "Nuovo", "Cartella" e inserendo "valori-v14" prima di fare clic su "Fine".

Apri il file XML Strings dalla cartella dei valori principali e seleziona la scheda "strings.xml" per visualizzare il codice.

Per prima cosa modifica il nome dell'applicazione String in qualcosa di più leggibile, come segue:

 Widget orologio personalizzato

Successivamente, modifica la stringa "ciao" per fornire istruzioni:

  Ciao \ n \ n Grazie per aver installato il Custom Clock Widget. \ N \ n È necessario aggiungere il widget alla schermata iniziale per usarlo. Premi a lungo la schermata Home e seleziona il widget dall'elenco di quelli installati sul tuo dispositivo. 

Questo è il testo informativo che verrà visualizzato se l'utente avvia o apre l'app dopo averlo installato. Certo, puoi modificare questo testo nel modo che preferisci. Poiché il processo di aggiunta dei widget è diverso per i dispositivi con Android 4.0 e versioni successive, utilizzeremo una stringa leggermente diversa per indirizzare gli utenti. Salvare il file XML delle stringhe principale, quindi copiarlo e incollarlo nella cartella "values-v14". Per copiare, fai clic con il pulsante destro del mouse sul file "strings.xml" nella cartella "values" (o selezionalo e scegli "Modifica") quindi seleziona "Copia". Per incollare, fai clic con il tasto destro su "values-v14" (o selezionalo e scegli "Modifica") e seleziona "Incolla". Ora apri la versione del file XML di Strings nella cartella "values-v14". Modifica la stringa "ciao" in questa nuova copia del file per soddisfare gli utenti su Android 4.0 più:

  Ciao \ n \ n Grazie per aver installato il widget Orologio personalizzato. È necessario aggiungere il widget alla schermata iniziale per usarlo. Seleziona la scheda Widget nel menu dell'applicazione del tuo dispositivo. Quando trovi il widget dell'orologio, premi e tieni premuto, rilasciandolo per aggiungerlo allo schermo. 

Ora ogni utente vedrà una stringa informativa pertinente al proprio dispositivo. Includeremo queste stringhe quando creeremo il layout dell'attività di lancio. Successivamente, aggiungeremo un altro file in ogni cartella dei valori, ma per ora è tutto ciò di cui abbiamo bisogno.


La prossima volta

Ora abbiamo eseguito le attività di configurazione per il widget, quindi siamo pronti per implementare il design dell'orologio, che faremo nel prossimo tutorial. Ciò comporterà la creazione di file di layout XML disegnabili per il widget e la schermata Attività di avvio. Nella parte 3, gestiremo la ricezione degli aggiornamenti per l'orologio e l'implementazione dell'attività di lancio. Nella parte 4, aggiungeremo la possibilità per gli utenti di scegliere un'opzione di visualizzazione dell'orologio facendo clic sul widget.