Share
Ottieni un corso accelerato pratico per costruire un'interfaccia utente efficace e accattivante per la tua app per Android e progetta un'app interattiva per i quiz lungo la strada!
In questo tutorial, costruiremo un'applicazione per quiz dall'app di terra, ma se stai cercando una soluzione più rapida, dai un'occhiata al modello di app per quiz di Envato Market per Android. È un modello ben progettato che puoi personalizzare come desideri creare la tua app quiz da solide basi.
Se preferisci costruirlo da zero da solo, leggi le istruzioni.
Per lo sviluppatore di app Android, l'interfaccia utente (UI) è la chiave. La tua app può vantare funzionalità all'avanguardia, ma se è racchiusa in un'interfaccia utente poco attraente è improbabile che gli utenti si fermino abbastanza a lungo da scoprire quanto sia davvero grande la tua app.
Questo tutorial fornisce un corso accelerato sulla costruzione di un'interfaccia utente efficace, utilizzando l'esempio di una semplice app quiz. L'app pone una domanda e presenta all'utente quattro possibili risposte, implementate come ImageButtons. I messaggi "corretto" e "errato" vengono visualizzati tramite un popup e l'utente può vedere a colpo d'occhio quale versione dell'app è in esecuzione.
Mentre costruisci l'app, copriremo quanto segue:
Inizia creando un progetto Android chiamato "AndroidGame" e una nuova attività (rimarrai con il nome file predefinito "MainActivity"). Elimina il TextView "Hello World" che Eclipse genera automaticamente, insieme a qualsiasi visualizzazione genitore predefinita che è stata aggiunta.
NOTA DELL'EDITORE: Questo tutorial è basato sul materiale illustrativo Vectortuts + creato nel tutorial "Come creare un'interfaccia utente lavagna Pub in Adobe Illustrator" di Sharon Milne.
Un RelativeLayout è un layout flessibile che consente di organizzare gli elementi dell'interfaccia utente in relazione l'uno con l'altro, il che lo rende particolarmente utile per gli sviluppatori che necessitano di un controllo preciso sull'esatto posizionamento dei componenti dell'interfaccia utente.
Crea un gruppo di visualizzazione RelativeLayout di base per contenere tutti gli elementi dell'interfaccia utente:
Come sistema operativo open source, Android si adatta a tutti i tipi di dispositivi ed è il sistema operativo preferito da molti produttori diversi: non è più nemmeno limitato agli smartphone! Questo presenta sia opportunità entusiasmanti che sfide provocanti il mal di testa per gli sviluppatori Android. Quando sviluppi la tua interfaccia utente, tieni presente che la tua app deve essere visualizzata correttamente sul maggior numero possibile di dispositivi. Mentre la progettazione per più schermi è un tema troppo ampio per questo tutorial, come punto di partenza dovresti fornire versioni alternative di ogni immagine utilizzata nella tua app. Queste immagini alternative dovrebbero essere ottimizzate per schermi con densità di pixel differenti. Quando l'app si avvia, Android caricherà automaticamente l'immagine corretta in base alle caratteristiche di visualizzazione del dispositivo.
Apri la cartella 'res' e vedrai quattro cartelle disegnabili che Eclipse genera di default:
Queste cartelle prendono di mira schermate con densità di pixel diverse, seguendo un rapporto di scala 3: 4: 6: 8 (ad esempio, se disegnabile-ldpi contiene un'immagine di 36 x 36 pixel, quindi drawable-mdpi dovrebbe contenere un'immagine di 48 x 48 pixel , e così via).
Crea quattro versioni dell'immagine di sfondo in base a questo rapporto e trascina ciascuna versione nella cartella appropriata.
Aggiungi l'immagine di sfondo a RelativeLayout usando l'attributo 'android: background', facendo riferimento alla risorsa immagine come faresti con qualsiasi oggetto drawable:
Avvia l'emulatore Android e dai un'occhiata al tuo lavoro fino ad ora.
Il primo passo per creare un ImageButton è aggiungere le immagini richieste al tuo progetto. Anche in questo caso, poiché desideri che il tuo dispositivo sia visualizzato correttamente su una gamma di schermi, devi fornire quattro versioni di ciascuna immagine. Inizieremo con il pulsante "2003", quindi trascina e rilascia le quattro versioni dell'immagine "2003" nelle cartelle corrispondenti.
I ImageButtons vengono creati utilizzando il tag 'ImageButton' seguito dai normali attributi altezza / larghezza e alcuni attributi di allineamento specifici di RelativeLayout.
Crea il tuo primo ImageButton e modifica l'allineamento fino a quando non sei soddisfatto di come è posizionato. In questo esempio, sto usando il seguente:
Ma il tuo ImageButton manca la parte più importante: un'immagine! Fare riferimento a questa immagine come risorsa estraibile, ma questa volta utilizzando la proprietà 'android: src':
Controlla come appare nell'emulatore.
Ripeti questa procedura per gli altri quattro pulsanti. Questa è una buona opportunità per sperimentare i vari attributi RelativeLayout (i documenti Android sono un'ottima fonte di informazioni aggiuntive sui diversi layout).
Come perfezionare il layout, potrebbe essere utile tenere aperto l'emulatore, passare da esso all'editor grafico di layout e al tuo XML.
Ecco il codice che sto usando:
I pulsanti potrebbero essere visualizzati correttamente nell'emulatore, ma Eclipse genera più errori di "Attributo di attributoDownload mancante nell'immagine". Di cosa si tratta??
L'attributo ContentDescrition rende le applicazioni più accessibili agli utenti che non possono facilmente consumare contenuti grafici, fornendo una descrizione di testo alternativa. Questa descrizione può essere utilizzata da screen reader e strumenti di accessibilità simili.
Il primo passo è definire alcune nuove risorse stringa. Le stringhe sono definite nel file res / layout / strings.xml, quindi aprilo e passa alla scheda strings.xml se necessario.
Le risorse di stringa vengono create con la seguente sintassi:
Testo da visualizzare
Definire una stringa per ContentDescription di ciascun ImageButton:
Risposta 2003 Risposta 2004 Risposta 2005 Risposta 2006
Torna al file activity_main.xml e aggiungi un attributo ContentDescription a ciascun ImageButton, ad esempio:
Android: contentDescription = "@ string / button2003" />
In realtà, è improbabile che smetterai di sviluppare un'app alla versione 1.0, mentre cucini nuovi contenuti e rilasci le correzioni per eventuali fastidiosi bug che gli utenti scoprono. Pertanto, è utile se le persone possono dire a colpo d'occhio quale versione della tua app sono in esecuzione. Il modo più semplice per farlo è con TextView.
Apri il file strings.xml e definisci il numero di versione corrente come una stringa:
Versione 1.0
Puoi creare rapidamente una TextView che chiama "@ string / Version" ma lo stile di testo predefinito di Android non è particolarmente allettante. Per fortuna, TextView ha una serie di attributi che possono dare un po 'di noioso testo vecchio. Puoi leggere ulteriori informazioni su tutti gli attributi disponibili nei documenti Android, ma in questo tutorial utilizzeremo quanto segue:
Crea la tua TextView, aggiungi alcuni attributi di stile e quindi fai riferimento alla stringa "Versione":
Funziona, ma se hai intenzione di riutilizzare questo insieme di attributi altrove, dovresti definirlo come uno "Stile" personalizzato. Uno stile è una raccolta di proprietà che salva il tempo (in questo caso il colore del carattere, la dimensione del carattere e lo stile corsivo) che specifica l'aspetto di una vista o persino un'intera applicazione.
Sentirai spesso "stili" e "temi" menzionati in un contesto simile. In sostanza, l'unica differenza tra uno stile e un tema è il loro ambito: gli "stili" applicati alle attività diventano "temi".Per definire uno stile personalizzato:
- 13dp
Per questo tutorial, definiremo il seguente stile personalizzato:
Applicare questo stile personalizzato a TextView è facile, basta sostituire tutti gli attributi definiti dallo stile VersionFont, con: style = "@ stile / VersionFont".
per esempio:
Questo stile personalizzato non è definito nello spazio dei nomi Android, motivo per cui non è necessario includere un riferimento "android:".
Entrambi questi metodi sono validi modi di testo di stile, ma tieni presente che uno stile personalizzato può accelerare il processo di codifica se hai intenzione di riutilizzare la stessa collezione di attributi nell'applicazione.
L'interfaccia utente potrebbe essere finita, ma c'è un ultimo passaggio: far sapere all'utente se ha selezionato la risposta corretta. Il modo più semplice per rendere pulsanti 'tappable' è implementando il Android: onClick proprietà per ogni pulsante.
Inizieremo aggiungendolo al primo pulsante:
Il nome del metodo onClick deve corrispondere a un metodo pubblico nel file MainActivity.Java, quindi aggiungi quanto segue alla tua attività:
vuoto pubblico onClick2003 (visualizzazione vista)
Ora specifica il comportamento che si attiva "onClick2003". Un modo semplice per dire all'utente che hanno sbagliato la domanda, è con una notifica di brindisi:
public void onClick2003 (Visualizza vista) Toast.makeText (this, "Wrong! Try again", Toast.LENGTH_SHORT) .show ();
Esegui questo codice aggiornato nell'emulatore e fai clic per controllare che il tuo toast funzioni correttamente.
Successo!
Inserisci al clic agli altri tre pulsanti e crea metodi pubblici corrispondenti nella tua attività, con allegati appropriati. Una volta terminato, avvia l'emulatore e fai clic per verificare che tutto funzioni correttamente.
Nel corso di questo tutorial hai appreso gli elementi essenziali del design dell'interfaccia utente Android e hai creato un'interfaccia utente semplice ma efficace che ha alcune funzionalità funzionanti da avviare! Prova ad applicare alcune di queste tecniche ai tuoi progetti Android, per assicurarti che la tua interfaccia utente non faccia cadere la tua app.
Accentsconagua