Embed Size (px)
DESCRIPTION
Formation des enseignants à ISET Rades : Gestion des Interfaces graphiques
Citation preview
Android Gestion des Interfaces
Formation Enseignants ISET Rades
Y. BEN TLILI
Partie 1 - LayoutLinearLayout, RelativeLayout, FrameLayout, Table
Layout
2
Y. BEN TLILI
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.
Partie 1 - Layout3
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>
Partie 1 - Layout
Y. BEN TLILI
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_alignParentLeft et android:layout_alignParentRight.
Partie 1 - Layout5
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é.
Partie 1 - Layout
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/android" android:layout_width=“match_parent" android:layout_height=“wrap_content" ></RelativeLayout>
Partie 1 - Layout
Y. BEN TLILI
FrameLayout Le FrameLayout est utilisé généralement
pour superposer des views ensembles.
Partie 1 - Layout
Y. BEN TLILI
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height=“wrap_content"></FrameLayout>
Partie 1 - Layout
Y. BEN TLILI
TableLayout Arranger les éléments dans des linges
et colonnes sous forme d’un tableau.
Partie 1 - Layout
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>
Partie 1 - Layout
Y. BEN TLILI
Partie 2 - Objets Simples, composés
EditText, Button, TextView, ListView…
12
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
Partie 2 – Objets Simples
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" />
Partie 2 – Objets Simples
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"/>
Partie 2 – Objets Simples
Y. BEN TLILI
Checkbox
<CheckBox android:id="@+id/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Android" />
Partie 2 – Objets Simples
Y. BEN TLILI
Partie 2 – Objets Composés
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">
Partie 2 – Objets Composés
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>
Partie 2 – Objets Composés
Y. BEN TLILI
Partie 3 - Drawables
20
Y. BEN TLILI
Les drawables sont les images utilisées dans toute l’application.
Il existe plusieurs catégories des drawables
Partie 3 – Drawable
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
Partie 3 – Drawable
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..)..
Partie 3 – Drawable
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>
Partie 3 – Drawable
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>
Partie 3 – Drawable
Y. BEN TLILI
Partie 4 - Autres ressources
Colors.xml, Strings.xml…
26
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.
Partie 4 – Autres ressources
![Carnet de suivi des apprentissages : GUIDE ......Le programme 2015 (BO du 26 mars) le pose ainsi : « l’école maternelle est une école ui s’adapte aux jeunes enfants[…]ui patiue](https://img.pdfslide.fr/doc/110x75/5e582c4f5303cb716402f78f/carnet-de-suivi-des-apprentissages-guide-le-programme-2015-bo-du-26-mars.jpg)
