Bene oggi continueremo la guida su android in particolar modo ci concentreremo su una semplice applicazione che esegue il conto alla rovescia di un numero dato in input. Una volta finito il conto alla rovescia deve mostrare un immagine ed eseguire un'animazione su quest'ultima.
L'ide che useremo è Eclipse Juno. Iniziamo analizzando i file xml.
Layout
Una volta scaricato ecplise e configurato adt , potremo iniziare a creare progetti per android.
Andare su File->New->Android Application Project
Specificare il tema(in questo caso None) nome del package e nome dell'applicazione e l'sdk da usare.Come mostrato di seguito :
Cliccare su Next , Lasciare le configurazioni predefinite come si trovano e continuare. Successivamente si aprirà la finestra per modificare l'immagine standard o sostituirla con un altra icona,dato che ci va bene l'icona standard proseguiamo.Selezioniamo Empty Activity ,dato che non useremo L'actionBar e proseguiamo.
L'organizzazione dei file xml è stata spiegata nella precedente guida , quindi non mi ci soffermerò di nuovo andiamo direttamente nella cartella layout e selezioniamo activity_main.xml che risulta essere una "finestra" vuota di questo tipo :
Predefinito è il RelativeLayout che useremo come contenitore per aggiungere altri due tipi di layout : TableLayout-LinearLayout
Il TableLayout ci permette di disporre i componenti in una tabella di righe.
LinearLayout : permette di disporre i componenti in maniera lineare sia orizzontalmente che verticalmente.
All'interno della TableLayout ci sarà un editText1 , un Button1 e un ImageView ognuno identificato da un proprio id.
Settiamo per l'editText
in modo che mostrerà una tastiera con solo numeri.
è possibile modificare il tipo di input anche tramite il pannello delle proprietà.
Notiamo che è presente anche il LinearLayout dove sono inseriti due Button per settare il tempo in secondi o minuti , che rinomineremo rispettivamente con l'id Secondi e Minuti, per i Button creeremo anche una risorsa di tipo string.
Ecco il Codice del LinearLayout:
Possiamo settare i valori d'altezza e larghezza,principalmente in 2 modi , usando valori in px o dpi (Density Indipendenr Pixel per approfondire vedi :
File Strings.xml
Queste sono le risorse di tipo string usate dal programma due delle quali vengono usate dai Button nel LinearLayout e una invece usata nel Manifest per settare il nome.
Nel TableLayout invece viene usata per settare l'altezza una risorsa di tipo dimen , che appunto serve per settare le dimensione nel caso il dispositivo si trovasse in posizione verticale o orizzontale.
Quindi abbiamo creato due risorse dimens.xml. Posizionando il file una volta nella cartella predefinita res/values e un altra volta con il qualificatore land.
Dimens.xml
Dimens.xml (values-land)
L'altezza, quando il dispositivo viene ruotato (In posizione orizzontale) l'altezza della TableLayout dimezza.
Creare L'animazione
L'animazione vera è propria può essere intesa come un set di istruzioni che si basa sulle 4 animazioni fondamentali che sono le seguenti :
translate : Sposta un elemento
Alpha: Effetto trasparenza
Scale : Ridimensionamento
Rotate : Rotazione
Il susseguirsi di queste 4 operazioni basi crea un animazione più o meno complessa. Nel nostro caso eseguiremo una semi rotazione verso destra.
Per creare una nuova risorsa di tipo anim andare su New->Android Xml File e comparirà questa finestra:
inserire il nome del file e vi troverete di fronte a del codice xml , lasciamo come predefinito Root Element set, in quanto ci serve un set di animazioni.
usiamo soltanto l'animazione rotate e in particolar modo FromDegrees che indica il punto di partenza della rotazione , nel primo caso 0 (cioè senza aver subito alcuna rotazione) e lo portiamo a -30 nell'arco di tempo impostato da android:duration , valore espresso in millisecondi. ( 1000 ms equivale a 1 secondo) Dato che le animazioni avvengono contemporaneamente mettiamo una pausa per genere l' effetto di ondulazione e per questo motivo usiamo android:startOffset che indica dopo quanto tempo deve partire l'animazione. Ovviamente le tre animazioni saranno sequenziali quindi l'ultima attenderà l'esecuzione della prima (durata 1secondo) e l'esecuzione della seconda (durata 0,5 sec) per un totale di attesa di 1,5 sec che espresso in millisecondi è 1500ms.
Bene ora che abbiamo analizzato tutti i file xml passiamo alla programmazione in java.
Analisi dell'activity
Prima di procedere con la lettura soffermiamoci su quanto già fatto dall'ide.Infatti notiamo all'interno della classe MainActivity.java un metodo già definito e anche degli import.
-il package indica il "percorso" nel quale si trovano le classi che scriveremo , in questo caso è presente solo la classe MainActivity.
l'istruzione Import ci permette di importare alcune classi utili per il nostro progetto come per esempio Activity che è il mezzo con il quale l'utente interagisce , ogni metodo ridefinito della classe Activity deve chiama il metodo della superclasse.
Bundle equivale a un contenitore dati nel quale possiamo inserire dei dati che possiamo recuperare nel caso di un cambiamento del sistema.
il metodo setContentView(R.layout.activity_main.xml) ci permette di trasformare l'xml in Ui(User interface) questo processo prende il nome di inflating. Quando viene chiamato questo metodo noi vediamo la finestra come l'abbiamo progettata nel file .xml. Android per gestire le risorse crea una classe statica R che contengono altre classe statiche che rappresentano i vari tipi di risorse e che a loro volta contengono costanti statiche di tipo intere che rappresentano un valore di tipo stringa,animazione, layout ,drawable,color ,dimen etc... .
Per poter settare i singoli eventi dei pulsanti dobbiamo ottenere un riferimento tramite id, i Button così come tutte le widget , non sono altro che specializzazioni delle View , contenute all'interno del package android.widget
usiamo quindi il metodo FindViewById per ottenerne il riferimento e successivamente ne eseguiremo il casting nel tipo desiderato
Una volta ottenuti i riferimenti su essi posso creare i singoli eventi , e usiamo android.view.View.OnClickListener, un interfaccia che ci permette di gestire l'evento click. Per verificare che siano selezionati secondi o minuti , useremo un flag boolean, e due costanti per la conversione di ms in minuti e secondi. (nel caso dei minuti è 6*10^4 e nel caso dei secondo è 10^3).
partiamo iniziando a scrivere l'evento del Button Avvia Timer e implementiamo in MainActivity OnClickListener , ridefinendo l'unico metodo dell'interfaccia ovvero :
per sapere a quale button stiamo facendo riferimento sfrutteremo l'id dell'elemento.
quindi la classe ora diventa :
al momento lasciamo perdere l'AlertDialog , lo inseriremo successivamente ora concentriamoci sul metodo CountDown(), infatti qui useremo postDelayed metodo di un oggetto Handler , che servirà a ritardare di n secondi o n minuti la visualizzazione dell'immagine e dell' animazione.
La classe Handler è definita nel Package android.os.Handler,quindi va importato per usarlo.
Creo una classe Anonima che implementa Runnable , quindi genero un Thread che verrà eseguito dopo n-millisecondi, valore contenuto in myvalue. Una volta scaduto il tempo d'attesa chiama il metodo SetImage(), che vediamo di seguito
Abbiamo completamente trascurato l'animazione , dato che la tratteremo ora , è vero che per creare un set di animazioni dobbiamo usare l'xml ma per avviarlo bisogna anche scrivere il codice java, in particolar modo ci interessano due classi contenuti nei rispettivi package
useremo un metodo statico definito in AnimationUtil che è loadAnimation
Firma del metodo.
quindi otteniamo un riferimento di tipo Animation , in modo da poter settare il numero di ripetizioni. Ecco come è stato implementato nel codice.
Le parti che riguardano l'animazione sono mostrate in blu.
Ultima cosa che ci rimane da implementare è l'AlertDialog , in particolar modo a noi interessa una classe Contenuta in quest'ultima che è Builder.
il package di AlertDialog è android.app.AlertDialog.
ecco come è stato implementato nel progetto :
le parti in blu , riguardano i due AlertDialog
i costruttori di Builder sono due:
noi abbiamo usato il primo senza specificare nessun tema particolare per l'AlertDialog.
Diciamo che il progetto è incompleto , dato che bisognerebbe implementare il salvataggio in un Bundle di myvalue , del valore boolean e dello status dell'imageView. (ad esempio nel caso avvenisse una rotazione dello smartphone o tablet)
Download progetto e apk :
L'ide che useremo è Eclipse Juno. Iniziamo analizzando i file xml.
Layout
Una volta scaricato ecplise e configurato adt , potremo iniziare a creare progetti per android.
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
.Andare su File->New->Android Application Project
Specificare il tema(in questo caso None) nome del package e nome dell'applicazione e l'sdk da usare.Come mostrato di seguito :
Cliccare su Next , Lasciare le configurazioni predefinite come si trovano e continuare. Successivamente si aprirà la finestra per modificare l'immagine standard o sostituirla con un altra icona,dato che ci va bene l'icona standard proseguiamo.Selezioniamo Empty Activity ,dato che non useremo L'actionBar e proseguiamo.
L'organizzazione dei file xml è stata spiegata nella precedente guida , quindi non mi ci soffermerò di nuovo andiamo direttamente nella cartella layout e selezioniamo activity_main.xml che risulta essere una "finestra" vuota di questo tipo :
Predefinito è il RelativeLayout che useremo come contenitore per aggiungere altri due tipi di layout : TableLayout-LinearLayout
Il TableLayout ci permette di disporre i componenti in una tabella di righe.
LinearLayout : permette di disporre i componenti in maniera lineare sia orizzontalmente che verticalmente.
All'interno della TableLayout ci sarà un editText1 , un Button1 e un ImageView ognuno identificato da un proprio id.
Settiamo per l'editText
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
è possibile modificare il tipo di input anche tramite il pannello delle proprietà.
Notiamo che è presente anche il LinearLayout dove sono inseriti due Button per settare il tempo in secondi o minuti , che rinomineremo rispettivamente con l'id Secondi e Minuti, per i Button creeremo anche una risorsa di tipo string.
Ecco il Codice del LinearLayout:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Possiamo settare i valori d'altezza e larghezza,principalmente in 2 modi , usando valori in px o dpi (Density Indipendenr Pixel per approfondire vedi :
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
) oppure usando wrap_content e match_parent.File Strings.xml
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Queste sono le risorse di tipo string usate dal programma due delle quali vengono usate dai Button nel LinearLayout e una invece usata nel Manifest per settare il nome.
Nel TableLayout invece viene usata per settare l'altezza una risorsa di tipo dimen , che appunto serve per settare le dimensione nel caso il dispositivo si trovasse in posizione verticale o orizzontale.
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Quindi abbiamo creato due risorse dimens.xml. Posizionando il file una volta nella cartella predefinita res/values e un altra volta con il qualificatore land.
Dimens.xml
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Dimens.xml (values-land)
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
L'altezza, quando il dispositivo viene ruotato (In posizione orizzontale) l'altezza della TableLayout dimezza.
Creare L'animazione
L'animazione vera è propria può essere intesa come un set di istruzioni che si basa sulle 4 animazioni fondamentali che sono le seguenti :
translate : Sposta un elemento
Alpha: Effetto trasparenza
Scale : Ridimensionamento
Rotate : Rotazione
Il susseguirsi di queste 4 operazioni basi crea un animazione più o meno complessa. Nel nostro caso eseguiremo una semi rotazione verso destra.
Per creare una nuova risorsa di tipo anim andare su New->Android Xml File e comparirà questa finestra:
inserire il nome del file e vi troverete di fronte a del codice xml , lasciamo come predefinito Root Element set, in quanto ci serve un set di animazioni.
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
usiamo soltanto l'animazione rotate e in particolar modo FromDegrees che indica il punto di partenza della rotazione , nel primo caso 0 (cioè senza aver subito alcuna rotazione) e lo portiamo a -30 nell'arco di tempo impostato da android:duration , valore espresso in millisecondi. ( 1000 ms equivale a 1 secondo) Dato che le animazioni avvengono contemporaneamente mettiamo una pausa per genere l' effetto di ondulazione e per questo motivo usiamo android:startOffset che indica dopo quanto tempo deve partire l'animazione. Ovviamente le tre animazioni saranno sequenziali quindi l'ultima attenderà l'esecuzione della prima (durata 1secondo) e l'esecuzione della seconda (durata 0,5 sec) per un totale di attesa di 1,5 sec che espresso in millisecondi è 1500ms.
Bene ora che abbiamo analizzato tutti i file xml passiamo alla programmazione in java.
Analisi dell'activity
Prima di procedere con la lettura soffermiamoci su quanto già fatto dall'ide.Infatti notiamo all'interno della classe MainActivity.java un metodo già definito e anche degli import.
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
-il package indica il "percorso" nel quale si trovano le classi che scriveremo , in questo caso è presente solo la classe MainActivity.
l'istruzione Import ci permette di importare alcune classi utili per il nostro progetto come per esempio Activity che è il mezzo con il quale l'utente interagisce , ogni metodo ridefinito della classe Activity deve chiama il metodo della superclasse.
Bundle equivale a un contenitore dati nel quale possiamo inserire dei dati che possiamo recuperare nel caso di un cambiamento del sistema.
il metodo setContentView(R.layout.activity_main.xml) ci permette di trasformare l'xml in Ui(User interface) questo processo prende il nome di inflating. Quando viene chiamato questo metodo noi vediamo la finestra come l'abbiamo progettata nel file .xml. Android per gestire le risorse crea una classe statica R che contengono altre classe statiche che rappresentano i vari tipi di risorse e che a loro volta contengono costanti statiche di tipo intere che rappresentano un valore di tipo stringa,animazione, layout ,drawable,color ,dimen etc... .
Per poter settare i singoli eventi dei pulsanti dobbiamo ottenere un riferimento tramite id, i Button così come tutte le widget , non sono altro che specializzazioni delle View , contenute all'interno del package android.widget
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
usiamo quindi il metodo FindViewById per ottenerne il riferimento e successivamente ne eseguiremo il casting nel tipo desiderato
Una volta ottenuti i riferimenti su essi posso creare i singoli eventi , e usiamo android.view.View.OnClickListener, un interfaccia che ci permette di gestire l'evento click. Per verificare che siano selezionati secondi o minuti , useremo un flag boolean, e due costanti per la conversione di ms in minuti e secondi. (nel caso dei minuti è 6*10^4 e nel caso dei secondo è 10^3).
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
partiamo iniziando a scrivere l'evento del Button Avvia Timer e implementiamo in MainActivity OnClickListener , ridefinendo l'unico metodo dell'interfaccia ovvero :
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
per sapere a quale button stiamo facendo riferimento sfrutteremo l'id dell'elemento.
quindi la classe ora diventa :
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
al momento lasciamo perdere l'AlertDialog , lo inseriremo successivamente ora concentriamoci sul metodo CountDown(), infatti qui useremo postDelayed metodo di un oggetto Handler , che servirà a ritardare di n secondi o n minuti la visualizzazione dell'immagine e dell' animazione.
La classe Handler è definita nel Package android.os.Handler,quindi va importato per usarlo.
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Creo una classe Anonima che implementa Runnable , quindi genero un Thread che verrà eseguito dopo n-millisecondi, valore contenuto in myvalue. Una volta scaduto il tempo d'attesa chiama il metodo SetImage(), che vediamo di seguito
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Abbiamo completamente trascurato l'animazione , dato che la tratteremo ora , è vero che per creare un set di animazioni dobbiamo usare l'xml ma per avviarlo bisogna anche scrivere il codice java, in particolar modo ci interessano due classi contenuti nei rispettivi package
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
useremo un metodo statico definito in AnimationUtil che è loadAnimation
Firma del metodo.
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
quindi otteniamo un riferimento di tipo Animation , in modo da poter settare il numero di ripetizioni. Ecco come è stato implementato nel codice.
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Ultima cosa che ci rimane da implementare è l'AlertDialog , in particolar modo a noi interessa una classe Contenuta in quest'ultima che è Builder.
il package di AlertDialog è android.app.AlertDialog.
ecco come è stato implementato nel progetto :
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
le parti in blu , riguardano i due AlertDialog
i costruttori di Builder sono due:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
noi abbiamo usato il primo senza specificare nessun tema particolare per l'AlertDialog.
Diciamo che il progetto è incompleto , dato che bisognerebbe implementare il salvataggio in un Bundle di myvalue , del valore boolean e dello status dell'imageView. (ad esempio nel caso avvenisse una rotazione dello smartphone o tablet)
Download progetto e apk :
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
