Progettazione dell'interfaccia utente Android controlli immagine di base

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

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

L'SDK di Android include un semplice controllo di testo statico da utilizzare all'interno dei tuoi layout: ImageView (android.widget.ImageView). Un buon esempio di utilizzo del controllo ImageView sarebbe quello di visualizzare un'icona o un'immagine sullo schermo. I controlli ImageView possono essere grafici bitmap (come PNG, JPG e GIF) oppure possono essere altri tipi Drawable supportati dalla piattaforma Android, come le forme definite in XML.

Ecco un esempio di una schermata con cinque diversi controlli ImageView 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 i controlli di ImageView. 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 ImageView a un layout

I controlli ImageView sono generalmente inclusi come parte del file di risorse di layout della tua attività. Ad esempio, per aggiungere un controllo ImageView 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 ImageView (android.widget.ImageView) e aggiungilo al tuo layout all'interno della tua attività.

Per aggiungere un controllo ImageView 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 ImageView. In Eclipse dall'interno del designer di risorse di layout grafico, è possibile selezionare il controllo ImageView dalla sezione Immagini e supporti della palette e trascinarlo nel layout principale.

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

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

• Assegna al controllo ImageView un nome univoco utilizzando la proprietà id in modo che possa essere referenziato da altri controlli nell'XML del layout e in modo programmatico dal codice Java.
• Quando si lavora con layout e risorse disegnabili, impostare l'immagine visualizzata all'interno del controllo ImageView usando la proprietà src; questo può essere impostato in modo programmatico con il metodo setImageResource () o ci sono altri modi per caricare immagini da altre fonti, come setImageBitmap, setImageDrawable () e setImageUri (), a seconda di dove ha origine l'immagine.
• Come al solito, imposta l'altezza del layout e le proprietà della larghezza del layout del controllo.
• Imposta qualsiasi altro attributo che desideri regolare l'aspetto del controllo. Ad esempio, regola il padding, la visibilità o altre impostazioni.

Ad esempio, ecco l'XML di base trovato in un file di layout per ImageView:

Infine, se e quando si desidera accedere a un ImageView a livello di codice all'interno della propria classe Activity, è sufficiente utilizzare il suo identificatore per caricarlo:

 ImageView img = (ImageView) findViewById (R.id.imageViewOfGirl);

Ora esaminiamo alcuni degli attributi più comuni per i controlli ImageView.

Passaggio 3: ridimensionamento dei controlli ImageView

Per impostazione predefinita, i contenuti di un controllo ImageView hanno una determinata dimensione, in genere la dimensione delle dimensioni grafiche. Sono inoltre limitati dagli attributi layout_width e layout_height. È inoltre possibile specificare gli attributi di altezza e larghezza minimi e massimi utilizzando una risorsa di dimensione (dp, px, ecc.). Per ulteriori informazioni sulle dimensioni, consultare la documentazione di SDK di Android in Dimensioni risorse.

In XML, queste proprietà apparirebbero nel controllo ImageView come:

 android: minHeight = "50dp" android: minWidth = "50dp" android: maxHeight = "150dp" android: maxWidth = "150dp"

Qui stiamo specificando che il controllo dovrebbe avere una dimensione minima e massima specifica. Nota che quando usato da solo, specificare queste dimensioni non mantiene le proporzioni dell'immagine, e quindi può sembrare schiacciato, schiacciato o comunque non ideale.

Se stai lavorando con il controllo ImageView nel tuo codice Java, puoi anche impostare le dimensioni minime e massime del controllo ImageView a livello di programmazione utilizzando i metodi setMinimumHeight (), setMaxHeight (), setMinimumWidth () e setMaxWidth () della classe ImageView.

Passaggio 3: ridimensionamento della grafica nei controlli ImageView

Quando ridimensioni un controllo ImageView, se desideri aumentare o ridurre la scala, spesso desideri mantenere le proporzioni tra larghezza e larghezza, in modo che l'immagine sia corretta. La figura sopra mostra diversi controlli ImageView che mostrano esattamente la stessa immagine di una ragazza, solo con diverse larghezze, altezze e proporzioni.

È possibile specificare che il controllo ImageView mantenga le proporzioni utilizzando l'attributo adjustViewBounds. In XML, questa proprietà apparirebbe all'interno del controllo ImageView come:

 Android: adjustViewBounds = "true"

Questo attributo è più frequentemente combinato con il tipo di ridimensionamento che si desidera raggiungere. Il tipo di scala più semplice e più comune che utilizzerai è il tipo fitXY, che ridimensiona l'altezza e la larghezza in alto o in basso finché non si adatta alle dimensioni massime specificate. Tieni presente che ciò non significa che il controllo sarà le dimensioni ESATTE / minime di quelle dimensioni a meno che non si associno esattamente allo stesso rapporto di aspetto.

 Android: scaleType = "fitXY"

Se stai lavorando con il controllo ImageView nel tuo codice Java, puoi anche impostare i limiti di visualizzazione e il tipo di scala del controllo ImageView a livello di programmazione utilizzando i metodi setAdjustViewBounds () e setScaleType () della classe ImageView.

Passaggio 5: gestione dei clic sul controllo di ImageView

Come qualsiasi altro controllo di visualizzazione, un ImageView può essere abilitato per fare clic, se lo desideri. Questa abilità è disattivata per impostazione predefinita in un ImageView. Accenderlo è semplice, però. È sufficiente abilitare il clic di ImageView utilizzando l'attributo cliccabile e quindi specificare il gestore di clic con l'attributo onClick, in questo modo:

 android: clickable = "true" android: onClick = "onClickGirl"

Quindi dovrai aggiornare la tua classe di attività e implementare il metodo onClickGirl, in questo modo:

 public void onClickGirl (Visualizza vista) Toast.makeText (this, "Mi hai cliccato!", Toast.LENGTH_SHORT) .show (); 

I controlli di ImageView supportano anche i clic lunghi, ma è necessario registrarli a livello di programmazione. Puoi anche rendere una ImageView focalizzabile e abilitare o disabilitare il feedback tattile, se lo desideri.

Passaggio 7: Ottimizzazione della grafica per l'utilizzo nei controlli ImageView

In generale, si desidera fornire risorse grafiche mobili dimensionate in modo appropriato per i tipi di dispositivi che si desidera targetizzare. Ecco alcuni scenari diversi:

• Se stai archiviando la grafica come risorse di progetto, potresti prendere in considerazione la possibilità di fornire versioni alternative per diverse dimensioni o risoluzioni dello schermo (consulta l'SDK di Android su Risorse alternative per ulteriori informazioni sui qualificatori di risorse).
• Se hai bisogno di una grafica semplice che si estende a diverse dimensioni, puoi guardare la grafica di NinePatch.
• Se la grafica che stai visualizzando proviene da una terza parte, potresti avere meno controllo sulla dimensione. Hai ancora delle opzioni: puoi ridimensionarle al volo come discusso in precedenza, oppure puoi usare la classe Bitmap per creare fisicamente un vero e proprio grafico che è dimensionato come desideri, e quindi visualizzarlo.

Passaggio 5: rendere accessibili i controlli ImageView

Le app Android sono utilizzate da molti diversi tipi di utenti. L'accessibilità è un aspetto da tenere in considerazione quando scrivi le tue app: in che modo una persona con una visione limitata o assente può lavorare con la tua app? Una tecnica semplice che aiuta a supportare gli screen reader incorporati e altre funzionalità di accessibilità di Android è sempre, sempre, impostare sempre la descrizione del contenuto per ogni elemento grafico sullo schermo: i controlli di ImageView più di tutti:

 android: contentDescription = "Immagine di una ragazza"

Impostando la descrizione del contenuto, anche quelli che non possono vedere la ragazza nella foto sapranno che ce n'è uno e possono fornirne uno con la loro immaginazione.

È inoltre possibile impostare questo campo a livello di programmazione utilizzando il metodo setContentDescription ().

Conclusione

I controlli ImageView sono comunemente usati nelle interfacce utente delle applicazioni Android per visualizzare contenuti grafici (disegnabili) in diversi modi. In questo tutorial, hai imparato come creare controlli immagine Android e personalizzarli in una varietà di modi semplici. Questi attributi possono essere mescolati e abbinati per consentire una visualizzazione delle immagini molto flessibile sullo schermo.