Android - Conception de l'interface utilisateur

Dans ce chapitre, nous examinerons les différents composants de l'interface utilisateur de l'écran Android. Ce chapitre couvre également les astuces pour améliorer la conception de l'interface utilisateur et explique également comment concevoir une interface utilisateur.

Composants de l'écran de l'interface utilisateur

Une interface utilisateur typique d'une application Android se compose de la barre d'action et de la zone de contenu de l'application.

Barre d'action principale
Contrôle de la vue
Zone de contenu
Barre d'action divisée

Ces composants ont également été montrés dans l'image ci-dessous -

Comprendre les composants de l'écran

L'unité de base de l'application Android est l'activité. Une interface utilisateur est définie dans un fichier xml. Pendant la compilation, chaque élément du XML est compilé dans une classe d'interface graphique Android équivalente avec des attributs représentés par des méthodes.

Afficher et afficher les groupes

Une activité est constituée de vues. Une vue n'est qu'un widget qui apparaît à l'écran. Il peut s'agir d'un bouton, etc. Une ou plusieurs vues peuvent être regroupées dans un GroupView. L'exemple de ViewGroup comprend des mises en page.

Types de mise en page

Il existe de nombreux types de mise en page. Certains d'entre eux sont énumérés ci-dessous -

Disposition linéaire
Disposition absolue
Disposition de la table
Disposition du cadre
Disposition relative

Disposition linéaire

La disposition linéaire est divisée en disposition horizontale et verticale. Cela signifie qu'il peut organiser les vues dans une seule colonne ou sur une seule ligne. Voici le code de mise en page linéaire (verticale) qui comprend une vue texte.

<?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

L'AbsoluteLayout vous permet de spécifier l'emplacement exact de ses enfants. Cela peut être déclaré comme ceci.

<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

Le TableLayout regroupe les vues en lignes et en colonnes. Cela peut être déclaré comme ceci.

<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>

Disposition relative

RelativeLayout vous permet de spécifier la façon dont les vues enfants sont positionnées les unes par rapport aux autres. Il peut être déclaré comme ceci.

<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

Le FrameLayout est un espace réservé à l'écran que vous pouvez utiliser pour afficher une seule vue. Cela peut être déclaré comme ceci.

<?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>

Outre ces attributs, il existe d'autres attributs communs à toutes les vues et à tous les ViewGroups. Ils sont listés ci-dessous -

Sr.Non	Vue et description
1	layout_width Spécifie la largeur de la vue ou du groupe de vues
2	layout_height Spécifie la hauteur de la vue ou du groupe de vues
3	layout_marginTop Spécifie un espace supplémentaire sur le côté supérieur de la vue ou du groupe de vues
4	layout_marginBottom Spécifie un espace supplémentaire sur le côté inférieur de la vue ou du groupe de vues
5	layout_marginLeft Spécifie un espace supplémentaire sur le côté gauche de la vue ou du groupe de vues
6	layout_marginRight Spécifie un espace supplémentaire sur le côté droit de la vue ou du groupe de vues
sept	layout_gravity Spécifie comment les vues enfants sont positionnées
8	layout_weight Spécifie la quantité d'espace supplémentaire dans la mise en page qui doit être allouée à la vue

Unités de mesure

Lorsque vous spécifiez la taille d'un élément sur une interface utilisateur Android, vous devez vous rappeler les unités de mesure suivantes.

Sr.Non	Unité et description
1	dp Pixel indépendant de la densité. 1 dp équivaut à un pixel sur un écran de 160 dpi.
2	sp Pixel indépendant de l'échelle. Ceci est similaire à dp et est recommandé pour spécifier les tailles de police
3	pt Point. Un point est défini comme étant 1/72 de pouce, en fonction de la taille physique de l'écran.
4	px Pixel. Correspond aux pixels réels sur l'écran

Densités d'écran

Sr.Non	Densité et DPI
1	Low density (ldpi) 120 ppp
2	Medium density (mdpi) 160 ppp
3	High density (hdpi) 240 ppp
4	Extra High density (xhdpi) 320 ppp

Optimiser les mises en page

Voici quelques conseils pour créer des mises en page efficaces.

Évitez les emboîtements inutiles
Évitez d'utiliser trop de vues
Évitez les nids profonds

↰ Previous page Next page ↱