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 -
![](https://assets.edu.lat/android/images/ui1.jpg)
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