Android - Progettazione dell'interfaccia utente

In questo capitolo esamineremo i diversi componenti dell'interfaccia utente dello schermo di Android. Questo capitolo tratta anche i suggerimenti per migliorare la progettazione dell'interfaccia utente e spiega anche come progettare un'interfaccia utente.

Componenti dello schermo dell'interfaccia utente

Una tipica interfaccia utente di un'applicazione Android è costituita dalla barra delle azioni e dall'area del contenuto dell'applicazione.

Barra delle azioni principali
Controllo della vista
Area del contenuto
Barra delle azioni divisa

Questi componenti sono stati mostrati anche nell'immagine qui sotto:

Comprensione dei componenti dello schermo

L'unità di base dell'applicazione Android è l'attività. Un'interfaccia utente è definita in un file xml. Durante la compilazione, ogni elemento nell'XML viene compilato in una classe GUI Android equivalente con attributi rappresentati da metodi.

Visualizza e ViewGroups

Un'attività è costituita da visualizzazioni. Una vista è solo un widget che appare sullo schermo. Potrebbe essere un pulsante, ecc. Una o più viste possono essere raggruppate in una GroupView. L'esempio di ViewGroup include i layout.

Tipi di layout

Esistono molti tipi di layout. Alcuni dei quali sono elencati di seguito:

Layout lineare
Layout assoluto
Layout della tabella
Layout del frame
Layout relativo

Layout lineare

Il layout lineare è ulteriormente suddiviso in layout orizzontale e verticale. Significa che può disporre le viste in una singola colonna o in una singola riga. Ecco il codice del layout lineare (verticale) che include una vista di testo.

<?xml version=”1.0” encoding=”utf-8”?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
   android:layout_width=”fill_parent”
   android:layout_height=”fill_parent”
   android:orientation=”vertical” >
   
   <TextView
      android:layout_width=”fill_parent”
      android:layout_height=”wrap_content”
      android:text=”@string/hello” />
</LinearLayout>

AbsoluteLayout

AbsoluteLayout consente di specificare la posizione esatta dei suoi figli. Può essere dichiarato così.

<AbsoluteLayout
   android:layout_width=”fill_parent”
   android:layout_height=”fill_parent”
   xmlns:android=”http://schemas.android.com/apk/res/android” >
   
   <Button
      android:layout_width=”188dp”
      android:layout_height=”wrap_content”
      android:text=”Button”
      android:layout_x=”126px”
      android:layout_y=”361px” />
</AbsoluteLayout>

TableLayout

Il TableLayout raggruppa le visualizzazioni in righe e colonne. Può essere dichiarato così.

<TableLayout
   xmlns:android=”http://schemas.android.com/apk/res/android”
   android:layout_height=”fill_parent”
   android:layout_width=”fill_parent” >
   
   <TableRow>
      <TextView
         android:text=”User Name:”
         android:width =”120dp”
         />
      
      <EditText
         android:id=”@+id/txtUserName”
         android:width=”200dp” />
   </TableRow>
   
</TableLayout>

RelativeLayout

RelativeLayout consente di specificare come le visualizzazioni figlie sono posizionate l'una rispetto all'altra e può essere dichiarato in questo modo.

<RelativeLayout
   android:id=”@+id/RLayout”
   android:layout_width=”fill_parent”
   android:layout_height=”fill_parent”
   xmlns:android=”http://schemas.android.com/apk/res/android” >
</RelativeLayout>

FrameLayout

FrameLayout è un segnaposto sullo schermo che puoi utilizzare per visualizzare una singola visualizzazione. Può essere dichiarato così.

<?xml version=”1.0” encoding=”utf-8”?>
<FrameLayout
   android:layout_width=”wrap_content”
   android:layout_height=”wrap_content”
   android:layout_alignLeft=”@+id/lblComments”
   android:layout_below=”@+id/lblComments”
   android:layout_centerHorizontal=”true” >
   
   <ImageView
      android:src = “@drawable/droid”
      android:layout_width=”wrap_content”
      android:layout_height=”wrap_content” />
</FrameLayout>

Oltre a questi attributi, esistono altri attributi comuni a tutte le viste e ai ViewGroup. Sono elencati di seguito:

Suor n	Visualizza e descrizione
1	layout_width Specifica la larghezza di View o ViewGroup
2	layout_height Specifica l'altezza di View o ViewGroup
3	layout_marginTop Specifica lo spazio aggiuntivo sul lato superiore di View o ViewGroup
4	layout_marginBottom Specifica lo spazio aggiuntivo sul lato inferiore di View o ViewGroup
5	layout_marginLeft Specifica lo spazio aggiuntivo sul lato sinistro di View o ViewGroup
6	layout_marginRight Specifica lo spazio aggiuntivo sul lato destro di View o ViewGroup
7	layout_gravity Specifica come vengono posizionate le viste figlio
8	layout_weight Specifica la quantità di spazio aggiuntivo nel layout da allocare alla vista

Unità di misura

Quando specifichi la dimensione di un elemento su un'interfaccia utente Android, dovresti ricordare le seguenti unità di misura.

Suor n	Unità e descrizione
1	dp Pixel indipendente dalla densità. 1 dp equivale a un pixel su uno schermo a 160 dpi.
2	sp Pixel indipendente dalla scala. È simile a dp ed è consigliato per specificare le dimensioni dei caratteri
3	pt Punto. Un punto è definito come 1/72 di pollice, in base alle dimensioni fisiche dello schermo.
4	px Pixel. Corrisponde ai pixel effettivi sullo schermo

Densità dello schermo

Suor n	Densità e DPI
1	Low density (ldpi) 120 dpi
2	Medium density (mdpi) 160 dpi
3	High density (hdpi) 240 dpi
4	Extra High density (xhdpi) 320 dpi

Ottimizzazione dei layout

Ecco alcune delle linee guida per creare layout efficienti.

Evita annidamenti non necessari
Evita di utilizzare troppe visualizzazioni
Evita l'annidamento profondo

↰ Previous page Next page ↱