Progettazione dell'interfaccia utente Android controlli di base del testo

In questo tutorial imparerai come creare controlli di testo Android di base. Quindi imparerai come configurare, modellare e manipolare i controlli in vari modi.

Questo tutorial mostra i passaggi per creare un numero di controlli TextView diversi nell'applicazione Android. In primo luogo, si impara come aggiungere controlli di testo di base ai file di layout e quali sono alcuni dei loro attributi più utili. Successivamente, si impara come impostare i contenuti del controllo del testo in due modi diversi. Infine, discuteremo alcune delle altre funzionalità disponibili per il controllo TextView in Android.

L'SDK di Android include un semplice controllo di testo statico da utilizzare all'interno dei tuoi layout: TextView (android.widget.TextView). Un buon esempio di utilizzo del controllo TextView sarebbe quello di visualizzare etichette testuali per altri controlli, come "Inserisci una data:", "Inserisci un nome:" o "Inserisci una password:".

Ecco un esempio di una schermata con molti controlli TextView diversi visualizzati su di essa.

Passaggio 1: crea un'applicazione Android

Inizia creando un progetto Android. Implementa la tua applicazione Android normalmente. Una volta che hai configurato un progetto e l'applicazione è in esecuzione, decidi in quale schermata vuoi aggiungere controlli di testo. Forse hai semplicemente creato un nuovo progetto Android con l'attività e il layout predefiniti (main.xml). Questo funzionerà per questo esercizio. Una volta impostato il tuo progetto Android, sei pronto per procedere con questo tutorial.

Passaggio 2: aggiunta di un controllo TextView a un layout

I controlli TextView sono generalmente inclusi come parte del file di risorse di layout dell'attività. Ad esempio, per aggiungere un controllo TextView alla risorsa di layout main.xml associata all'applicazione, è necessario modificare il file di layout. Puoi farlo in Eclipse usando il designer di risorse di layout o modificando direttamente l'XML. I controlli possono anche essere creati a livello di codice e aggiunti al tuo schermo in fase di runtime. Crea semplicemente un controllo Textview (android.widget.TextView) e aggiungilo al tuo layout all'interno della tua attività.

Per aggiungere un controllo TextView a un file di risorse di layout, apri il file di layout /res/layout/main.xml che fa parte del tuo progetto Android. Fare clic su LinearLayout (o controllo layout genitore) a cui si desidera aggiungere il controllo TextView. In Eclipse dall'interno del designer di risorse di layout grafico, è possibile selezionare il controllo TextView e trascinarlo nel layout principale.

Per configurare l'aspetto e il comportamento del controllo TextView, regolare gli attributi del controllo selezionando il controllo (nella scheda Struttura o nella finestra Anteprima) e modificandone gli attributi, come mostrato nella scheda Proprietà. È inoltre possibile modificare direttamente l'XML.

Attributi specifici dei controlli TextView di cui vorrete essere a conoscenza:

  • Assegna al controllo TextView un nome univoco utilizzando la proprietà id.
  • Imposta il testo visualizzato all'interno del controllo TextView usando la proprietà text; programmaticamente impostato con il metodo setText ().
  • Impostare l'altezza del layout e le proprietà della larghezza del layout del controllo come appropriato.
  • Imposta qualsiasi altro attributo che desideri regolare l'aspetto del controllo. Ad esempio, regola le dimensioni del testo, il colore, il carattere o altre impostazioni di stile.

Discutiamo alcuni degli attributi più comuni per i controlli TextView.

Passaggio 3: allineamento del testo all'interno di un controllo TextView

Per impostazione predefinita, i contenuti testuali di un controllo TextView sono allineati a sinistra. Tuttavia, puoi posizionare il testo usando l'attributo gravità. Questa impostazione posiziona il testo rispetto alla larghezza e all'altezza generali del controllo e ha senso solo da usare se ci sono spazi bianchi all'interno del controllo TextView perché hai impostato layout_height e / o layout_width su qualcosa di diverso da wrap_content. In XML, questa proprietà apparirebbe nel controllo TextView come:

 Android: la gravità = "center" 

È possibile visualizzare un esempio di controllo TextView allineato al centro nella figura sopra, denominato "Testo centrato". Questo controllo TextView ha un layout_width di match_parent e un layout_height di wrap_content.

Se stai lavorando con controlli TextView nel tuo codice Java, puoi anche impostare l'allineamento del tuo controllo TextView a livello di programmazione usando il metodo setGravity () della classe TextView.

Passaggio 4: controllo dello sfondo di un controllo TextView

Per impostazione predefinita, lo sfondo di un controllo TextView è trasparente. Cioè, qualunque cosa sia dietro il controllo è mostrato. Tuttavia, è possibile impostare lo sfondo di un controllo in modo esplicito, su una risorsa colore o su un disegno (immagine). In XML, questa proprietà apparirebbe nel controllo TextView come:

 Android: background = "# 0000FF"

Puoi vedere un esempio di un controllo TextView con uno sfondo blu nella figura sopra. Questo controllo TextView ha un layout_width di match_parent e un layout_height di wrap_content. Si noti che l'intero controllo ha lo sfondo, non solo l'area con il contenuto del testo.

Se stai lavorando con controlli TextView nel tuo codice Java, puoi anche impostare l'allineamento del tuo controllo TextView a livello di programmazione usando il metodo setBackgroundResource () della classe View.

Passaggio 5: collegamento automatico dei contenuti del controllo TextView

Per impostazione predefinita, qualsiasi contenuto di testo all'interno di un controllo TextView viene visualizzato come testo normale. Tuttavia, impostando un semplice attributo chiamato autoLink, è possibile abilitare il rilevamento automatico di informazioni Web, e-mail, telefoniche e di indirizzo all'interno del testo. In XML, questa proprietà apparirebbe nel controllo TextView come:

 Android: AutoLink = "all"

È possibile visualizzare un esempio di controllo TextView con collegamenti automatici nella figura sopra. Questo controllo TextView non ha un'elaborazione speciale del collegamento di gestione; il suo contenuto è solo una stringa. Il sistema operativo Android rileva il numero di telefono che, una volta fatto clic, avvia l'applicazione Telefono. Allo stesso modo, l'email avvia l'app di posta elettronica preferita dell'utente. L'URL avvia l'applicazione Browser. Se dovessi includere un indirizzo completamente risolvibile, sarebbe collegato all'applicazione Mappe.
Se stai lavorando con controlli TextView nel tuo codice Java, puoi anche impostare la funzione autoLink del tuo controllo TextView a livello di programmazione usando il metodo setAutoLinkMask () della classe TextView.

Passaggio 6: utilizzo dei controlli TextView multilinea

Per impostazione predefinita, il contenuto del testo di un controllo TextView si avvolge e continua su più righe, a meno che non venga specificato diversamente. Puoi personalizzare questo comportamento in diversi modi:

  • Puoi utilizzare l'attributo android: lines per impostare il controllo TextView su un numero specifico di righe.
  • Puoi utilizzare l'attributo android: minLines e android: maxLines per impostare il controllo TextView su un numero mai inferiore o superiore a un numero specifico di righe.
  • È possibile utilizzare l'attributo android: singleLine per evitare il wrapping su più righe, ma invece fornire una vista alterativa a una riga del testo.
  • Puoi utilizzare l'attributo android: lineSpacingExtra per specificare la distanza degli spazi bianchi tra ogni riga (ad esempio, doppia spaziatura per la leggibilità).

Puoi vedere esempi di controlli TextView su più linee e interlinea nella figura sopra.

Se stai lavorando con i controlli TextView nel tuo codice Java, puoi anche modificare queste impostazioni a livello di programmazione usando i metodi appropriati della classe TextView (vedi le informazioni sulla classe TextView con la documentazione di Android SDK per i dettagli).

Passaggio 7: Personalizzazione del colore del testo di un controllo TextView

Puoi controllare il colore del testo all'interno del controllo TextView usando l'attributo textColor. Questo attributo può essere impostato su una risorsa colore o su un colore specifico in base al valore esadecimale. In XML, questa proprietà apparirebbe nel controllo TextView come:

 Android: textColor = "# ff0000"

Puoi vedere un esempio di un controllo TextView rosso nella figura sopra. Se stai lavorando con controlli TextView nel tuo codice Java, puoi anche impostare l'attributo color del tuo controllo TextView a livello di programmazione usando il metodo setTextColor () della classe TextView.

È inoltre possibile creare un effetto piuttosto sottile di effetto bagliore sul controllo TextView utilizzando gli attributi shadowColor, shadowDx, shadowDy e shadowRadius, come mostrato nel controllo TextView in basso della figura. Questi attributi sono programmaticamente equivalenti al metodo setShadowLayer () della classe TextView.

Passaggio 8: personalizzazione dello stile e della famiglia di caratteri di un controllo TextView

Puoi controllare lo stile del testo (grassetto, corsivo) e la famiglia di caratteri (sans, serif, monospace) nel controllo TextView usando gli attributi textStyle e typeface. In XML, queste proprietà apparirebbero nel controllo TextView come:

 android: textStyle = "bold" android: typeface = "monospace"

Puoi vedere esempi di controlli TextView in grassetto e monospace nella figura sopra. Se stai lavorando con controlli TextView nel tuo codice Java, puoi anche impostare gli entrambi attributi del controllo TextView a livello di programmazione usando il metodo setTypeface () della classe TextView

Conclusione

I controlli TextView sono comunemente usati nelle interfacce utente delle applicazioni Android per visualizzare i contenuti del testo in modi diversi. In questo tutorial, hai imparato come creare controlli di testo Android e personalizzarli in una varietà di modi semplici. Questi attributi possono essere mescolati e abbinati per consentire la visualizzazione di testo molto flessibile sullo schermo.