SlideShare una empresa de Scribd logo
1 de 27
Descargar para leer sin conexión
Android
Gestion des
Interfaces

Formation Enseignants ISET
Rades
2

Partie 1 - Layout
LinearLayout, RelativeLayout, FrameLayout, Table
Layout

Y. BEN TLILI
3

LinearLayout




Le LinearLayout est un Layout qui repose sur une idée
de boite, c’est-à-dire que les conteneurs ou les widgets
appartenant à ce Layout sont soit alignés en ligne
horizontale ou verticale.
Plusieurs éléments sont disponibles pour permettre aux
développeurs de personnaliser ce Layout.

Y. BEN TLILI



Orientation de layout : Verticale vs Horizontale
Tailles des éléments :
android:layout_width
android:layout_height

XML :
<LinearLayout
xmlns:android="http://schemas.android.com/apk/
res/android"
android:orientation="vertical"
android:layout_width=“match_parent"
android:layout_height=“wrap_content"
></LinearLayout>


Y. BEN TLILI
5

RelativeLayout



-

-

Le principe du RelativeLayout est de placer les éléments
selon d’ autres éléments du conteneur.
Positionnement relatif au conteneur :
android:layout_alignParentTop (true / false) : Cette
option permet de préciser si le haut de l’élément doit
être aligné avec celui de son conteneur.
De même pour :
android:layout_alignParentBottom, android:layout_align
ParentLeft et android:layout_alignParentRight.

Y. BEN TLILI
Y. BEN TLILI


Position relative aux autres éléments :Afin de
pouvoir référencer le positionnement d’un élément par rapport
à un autre, vous disposez d’un moyen simple et efficace, il
s’agit des identificateurs (ID) :
* A la déclaration d’un élément : android:id= “@+id/idElem”
* A l’utilisation : @id/idElem






android:layout_above : Indique que l’élément sera placé au-dessus
de celui indiqué par son id.
android:layout_below : Indique que l’élément sera placé en dessous
de celui indiqué par son id.
android:layout_toLeftOf : Indique que l’élément sera placé à gauche
de celui indiqué par son id.
android:layout_toRightOf : Indique que l’élément sera placé à droite
de celui indiqué par son id.
android:layout_alignTop : Indique que le haut de notre élément est
aligné avec le haut de l’élément indiqué.
Y. BEN TLILI





android:layout_alignBottom : Indique que le bas de notre
élément est aligné avec le bas de l’élément indiqué.
android:layout_alignLeft : Indique que le côté gauche de notre
élément est aligné avec le côté gauche de l’élément indiqué.
android:layout_alignRight : Indique que le côté droit de notre
élément est aligné avec le côté droit de l’élément indiqué.
android:layout_alignBaseLine : Indique que les lignes de base
des 2 éléments sont alignées.

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/andr
oid" android:layout_width=“match_parent"
android:layout_height=“wrap_content" ></RelativeLayout>

Y. BEN TLILI
FrameLayout
 Le

FrameLayout est utilisé généralement
pour superposer des views ensembles.

Y. BEN TLILI
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height=“wrap_content"></FrameLayout>

Y. BEN TLILI
TableLayout
 Arranger

les éléments dans des linges et
colonnes sous forme d’un tableau.

Y. BEN TLILI
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff">
<TableRow
android:layout_height="wrap_content"
android:layout_width="fill_parent""></ TableRow>
</ TableLayout>

Y. BEN TLILI
12

Partie 2 - Objets Simples,
composés
EditText, Button, TextView, ListView…

Y. BEN TLILI
 Il

existe plusieurs composants simples
Android afin de construire des interfaces
attirantes.






EditText : Champ Text de Saisie
TextView : Label
CheckBox
Button : un bouton pour gérer des clicks

Y. BEN TLILI
 EditText

:

<EditText
android:id="@+id/email_address"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="@string/email_hint"
android:inputType="textEmailAddress" />

Y. BEN TLILI
 TextView
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Enter your name:"
android:textSize="25sp"
android:textColor="#660000"/>

Y. BEN TLILI
 Checkbox
<CheckBox
android:id="@+id/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Android" />

Y. BEN TLILI
 Il

existe plusieurs types des objets
complexes dans Android. Le plus utilisés
sont :
 ListView : afficher un ensemble
Des données sous forme une liste
déroulante

 GridView: afficher un ensemble
Des données sous forme une
Gride
Y. BEN TLILI
 ListView
<ListView
android:id="@+id/list"
android:layout_height="wrap_content"
android:layout_width="match_parent">

Y. BEN TLILI
 GridView
<GridView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/gridView1"
android:numColumns="auto_fit"
android:columnWidth="50dp"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
</GridView>

Y. BEN TLILI
20

Partie 3 - Drawables

Y. BEN TLILI
 Les

drawables sont les images utilisées
dans toute l’application.
 Il existe plusieurs catégories des
drawables

Y. BEN TLILI







LDPI : Low Density Per Inch : c’est un dossier dédié pour les
images pour les small smartphones avec une densité 120dp
MDPI : Medium Density Per Inech : c’est un dossier dédié
pour les images pour les medium smartphones avec une
densité 160dp .
HDPI : High Density Per Inech : c’est un dossier dédié pour
les images pour les high smartphones avec une densité
240dp .
XHDPI : Extra High Density Per Inech : c’est un dossier dédié
pour les images pour les extra high smartphones avec une
densité 320dp .

Remarque : les extensions utilisées sont .png, .gif, .jpg et
.9.png
Y. BEN TLILI




On peut construire des images à base fichier XML. Le
fichier doit être créer dans un dossier drawable.
Pour créer le fichier, nous pouvons définir les balises
suivantes : <shape> (format : oval, rectangle..),
<gradient>(background,startColor,endColor..)..

Y. BEN TLILI
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape>
<solid
android:color="#ef4444" />
<stroke
android:width="1dp"
android:color="#992f2f" />
<corners
android:radius="6dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
Y. BEN TLILI
<item>
<shape android:shape="oval"><!-- format de bouton -->
<!-- background --> <gradient
android:startColor="#ef4444"
android:endColor="#FFFFFF"
android:angle="45" /><!-- must be multiple of 45° -->
<!-- ligne autour de format --><stroke
android:width="1dp"
android:color="#0000FF" />
<!-- rayon --> <corners
android:radius="60dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" /> </shape> </item></selector>
Y. BEN TLILI
26

Partie 4 - Autres
ressources
Colors.xml, Strings.xml…

Y. BEN TLILI






Styles.xml : c ’est un fichier pour définir un style pour un
ensemble des composants.
Strings.xml : c’est un fichier pour stocker tous les Strings
de votre applications
Colors.xml : c’est un fichier pour stocker les couleurs
utilisés dans votre application.
Le dossier menu pour définir les items de menu dans
l’application s’ils existent.

Y. BEN TLILI

Más contenido relacionado

Similar a Gestion des ui

Les interface graphiques sous android
Les interface graphiques sous androidLes interface graphiques sous android
Les interface graphiques sous androidHoussem Lahiani
 
Interace Utilisateur.pdf
Interace Utilisateur.pdfInterace Utilisateur.pdf
Interace Utilisateur.pdfRihabBENLAMINE
 
Création d’applications et découverte d’Android
Création d’applications et découverte d’AndroidCréation d’applications et découverte d’Android
Création d’applications et découverte d’AndroidENSAM Casablanca
 
interface graphique mobile.pdf
interface graphique mobile.pdfinterface graphique mobile.pdf
interface graphique mobile.pdfYasmineChihab1
 
Mise en place de l'ActionBarCompat dans vos projets Android.
Mise en place de l'ActionBarCompat dans vos projets Android.Mise en place de l'ActionBarCompat dans vos projets Android.
Mise en place de l'ActionBarCompat dans vos projets Android.Mathias Seguy
 
Applications Android - cours 7 : Ressources et adaptation au matériel
Applications Android - cours 7 : Ressources et adaptation au matérielApplications Android - cours 7 : Ressources et adaptation au matériel
Applications Android - cours 7 : Ressources et adaptation au matérielAhmed-Chawki Chaouche
 
Introduction à Android
Introduction à AndroidIntroduction à Android
Introduction à AndroidYoann Gotthilf
 
MobileDay - Session 3 La Mobilité selon Microsoft
MobileDay - Session 3 La Mobilité selon MicrosoftMobileDay - Session 3 La Mobilité selon Microsoft
MobileDay - Session 3 La Mobilité selon MicrosoftCellenza
 
Android Lab Test : Le WIFI (français)
Android Lab Test : Le WIFI (français)Android Lab Test : Le WIFI (français)
Android Lab Test : Le WIFI (français)Bruno Delb
 
Les intents sous Android
Les intents sous Android Les intents sous Android
Les intents sous Android Houssem Lahiani
 
chapitre-7-listviews.pdf
chapitre-7-listviews.pdfchapitre-7-listviews.pdf
chapitre-7-listviews.pdfolfaharrabi2
 

Similar a Gestion des ui (20)

Les interface graphiques sous android
Les interface graphiques sous androidLes interface graphiques sous android
Les interface graphiques sous android
 
Les Layouts XML
Les Layouts XMLLes Layouts XML
Les Layouts XML
 
2-android.pdf
2-android.pdf2-android.pdf
2-android.pdf
 
TP_2.pdf
TP_2.pdfTP_2.pdf
TP_2.pdf
 
Tutorial android
Tutorial androidTutorial android
Tutorial android
 
Interace Utilisateur.pdf
Interace Utilisateur.pdfInterace Utilisateur.pdf
Interace Utilisateur.pdf
 
Création d’applications et découverte d’Android
Création d’applications et découverte d’AndroidCréation d’applications et découverte d’Android
Création d’applications et découverte d’Android
 
Android2017 cours2
Android2017 cours2Android2017 cours2
Android2017 cours2
 
interface graphique mobile.pdf
interface graphique mobile.pdfinterface graphique mobile.pdf
interface graphique mobile.pdf
 
Personnalisation bouton et animations Android
Personnalisation bouton et animations AndroidPersonnalisation bouton et animations Android
Personnalisation bouton et animations Android
 
Mise en place de l'ActionBarCompat dans vos projets Android.
Mise en place de l'ActionBarCompat dans vos projets Android.Mise en place de l'ActionBarCompat dans vos projets Android.
Mise en place de l'ActionBarCompat dans vos projets Android.
 
DART.pptx
DART.pptxDART.pptx
DART.pptx
 
Applications Android - cours 7 : Ressources et adaptation au matériel
Applications Android - cours 7 : Ressources et adaptation au matérielApplications Android - cours 7 : Ressources et adaptation au matériel
Applications Android - cours 7 : Ressources et adaptation au matériel
 
Introduction à Android
Introduction à AndroidIntroduction à Android
Introduction à Android
 
test
testtest
test
 
MobileDay - Session 3 La Mobilité selon Microsoft
MobileDay - Session 3 La Mobilité selon MicrosoftMobileDay - Session 3 La Mobilité selon Microsoft
MobileDay - Session 3 La Mobilité selon Microsoft
 
Android201710 avrilcours3
Android201710 avrilcours3Android201710 avrilcours3
Android201710 avrilcours3
 
Android Lab Test : Le WIFI (français)
Android Lab Test : Le WIFI (français)Android Lab Test : Le WIFI (français)
Android Lab Test : Le WIFI (français)
 
Les intents sous Android
Les intents sous Android Les intents sous Android
Les intents sous Android
 
chapitre-7-listviews.pdf
chapitre-7-listviews.pdfchapitre-7-listviews.pdf
chapitre-7-listviews.pdf
 

Gestion des ui

Notas del editor

  1. Définir Android n’est pas une chose aisée tant les concepts derrière cet intitulé unique sont nombreux.Pour commencer et en simplifiant à l’extrême, on peut dire qu’Android est un …Tout au long de ce Cours, nous découvrirons les nombreuses facettes de ce système et nous élargirons ainsi la définition d’Android.