Gestion des ui

410 vues

Publié le

Formation des enseignants à ISET Rades : Gestion des Interfaces graphiques

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
410
Sur SlideShare
0
Issues des intégrations
0
Intégrations
4
Actions
Partages
0
Téléchargements
19
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • 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.
  • Gestion des ui

    1. 1. Android Gestion des Interfaces Formation Enseignants ISET Rades
    2. 2. 2 Partie 1 - Layout LinearLayout, RelativeLayout, FrameLayout, Table Layout Y. BEN TLILI
    3. 3. 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
    4. 4.   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. 5. 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
    6. 6.  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
    7. 7.     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
    8. 8. FrameLayout  Le FrameLayout est utilisé généralement pour superposer des views ensembles. Y. BEN TLILI
    9. 9. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height=“wrap_content"></FrameLayout> Y. BEN TLILI
    10. 10. TableLayout  Arranger les éléments dans des linges et colonnes sous forme d’un tableau. Y. BEN TLILI
    11. 11. <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. 12. 12 Partie 2 - Objets Simples, composés EditText, Button, TextView, ListView… Y. BEN TLILI
    13. 13.  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
    14. 14.  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
    15. 15.  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
    16. 16.  Checkbox <CheckBox android:id="@+id/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Android" /> Y. BEN TLILI
    17. 17.  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
    18. 18.  ListView <ListView android:id="@+id/list" android:layout_height="wrap_content" android:layout_width="match_parent"> Y. BEN TLILI
    19. 19.  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. 20. 20 Partie 3 - Drawables Y. BEN TLILI
    21. 21.  Les drawables sont les images utilisées dans toute l’application.  Il existe plusieurs catégories des drawables Y. BEN TLILI
    22. 22.     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
    23. 23.   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
    24. 24. <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
    25. 25. <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. 26. 26 Partie 4 - Autres ressources Colors.xml, Strings.xml… Y. BEN TLILI
    27. 27.     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

    ×