Android studio UI Il met la disposition des

Android studio UI § Il met à la disposition des utilisateurs deux mode : Mode Design et le mode Texte. § Mode design : Palette très riches en composants visuels § View : Widgets. § View. Group : Layout. v Développement d’Applications Mobiles 1

Android studio PRÉSENTATION § Mode Texte § § Un fichier sous forme XML : activity_main. xml dans le répertoires des res (ressources). C’est une arborescence Chaque élément (Tag) commence par une balise ouvrante (<) avec le type de l’élément, et se termine par une balise fermente (>). À l’intérieur de la balise il y a les différents attribut avec leurs valeurs. v Développement d’Applications Mobiles 2

Android studio • Les déclarations se font principalement en XML, ce qui évite de passer par les instanciations Java. • Séparer le métier (code) du design. • Comme en développement Web (HTML et CSS). XML <Radio. Group android: layout_width="match_parent" android: layout_height="wrap_content" android: orientation="horizontal" android: layout_margin="5 dp"> <Radio. Button android: layout_width="wrap_content" android: layout_height="wrap_content" android: text="Licence" android: id="@+id/radio. Button" android: layout_weight="1" android: checked="true" android: text. Size="20 dp" android: layout_margin="5 dp" /> <Radio. Button android: layout_width="wrap_content" android: layout_height="wrap_content" android: text="Master" android: id="@+id/radio. Button 2" android: layout_weight="1" android: checked="false" android: text. Size="20 dp" android: layout_margin="5 dp" /> </Radio. Group> § Fichier XML : un Radio. Group qui contient deux Radio. Button v Développement d’Applications Mobiles 3

Android studio LAYOUT ET VIEW § Gabarit (Layout) Les éléments graphiques héritent de la classe View. On peut regrouper des éléments graphiques dans une View. Group. Des View. Group particuliers sont prédéfinis: ce sont des gabarits (layout) qui proposent une prédispositions des objets graphiques: • Linear. Layout: dispose les éléments de gauche à droite ou du haut vers le bas • Relative. Layout: les éléments enfants sont placés les uns par rapport aux autres • Table. Layout: disposition matricielle • Frame. Layout: disposition en haut à gauche en empilant les éléments • Grid. Layout: disposition matricielle avec N colonnes et un nombre infini de lignes • Constraint. Layout: disposition à base de contraintes entre les éléments. v Développement d’Applications Mobiles 4

Android studio LAYOUT ET VIEW • Gabarit (Layout) : Attributs Les attributs des gabarits permettent de spécifier des attributs supplémentaires. Les plus importants sont: • android: layout_width et android: layout_height: • ="match_parent": l'élément remplit tout l'élément parent • ="wrap_content": prend la place minimum nécessaire à l'affichage • ="fill_parent": comme match_parent (deprecated, API<8) • android: orientation: définit l'orientation d'empilement • android: gravity: définit l'alignement des éléments v Développement d’Applications Mobiles 5

Android studio LAYOUT ET VIEW • Gabarit (Layout) : Attributs : exemple Linear. Layout xmlns: android="http: //schemas. android. com/apk/res/android" android: orientation="vertical" android: layout_width="match_parent" android: layout_height="match_parent" android: gravity="center" android: id="@+id/accueilid" > </Linear. Layout> v Développement d’Applications Mobiles 6

Android studio LAYOUT ET VIEW • Widget v Développement d’Applications Mobiles 7

v La fragmentation : Un casse tête pour les développeurs Android est utilisé sur un très grand nombre de périphériques différents et il existe donc de nombreuses dimensions d'écran possibles. • En 2017, on recense environ 24 000 modèles de terminaux Android 8

Android studio DENSITÉ (DPI) La densité correspond au ratio entre la résolution d'un écran et sa taille physique. Exprimée en dpi (dots per inch), cette caractéristique correspond à la quantité de pixels contenue dans une ligne équivalente à 2, 54 cm. Une densité de 200 dpi représente donc 200 pixels sur une ligne de 2, 54 cm. v Développement d’Applications Mobiles 9

Android studio DENSITÉ La densité permet de regrouper les écrans en 6 catégories différentes selon la densité, ce qui facilite le développement. -ldpi (low) aux alentours de 120 dpi (très peu utilisé aujourd'hui) -mdpi (medium)aux alentours de 160 dpi -hdpi (high)aux alentours de 240 dpi -xhdpi (extra-high)aux alentours de 320 dpi -xxhdpi (extra-high)aux alentours de 480 dpi -xxxhdpi (extra-extra-high)aux alentours de 640 dpi Cette densité est extrêmement pratique pour adapter les images et les textes affichés au sein de différents terminaux mobiles. En pratique, ce quantificateur est utilisé principalement pour les dossiers drawable/, mipmap/ et même values/ v Développement d’Applications Mobiles 10

Android studio Unités de mesure SP ? DP ? , , , il existe différentes unités de mesure possible afin d'adapter l'affichage selon nos choix. Android accepte 6 unités de mesure : 4 unités de mesure physique et 2 unités dont la taille peut varier suivant l'appareil. v Développement d’Applications Mobiles 11

Android studio Unités de mesure physique Cette unité est donc liée à la taille physique de l'écran : plus celui-ci est grand, plus il y aura de pouces visibles. § Pixel comme unité de mesure. 1 px correspond à un pixel sur l'écran. § n'est pas recommandées : Le nombre de pixels par pouce peut varier suivant les appareils. § Pouce (inch en anglais) est aussi une unité de mesure possible : 1 pouce (1 in) correspond à environ 2, 54 centimètres. § Millimètre (mm) basée sur la taille physique de l'écran § Point (pt) : basée sur la taille physique de l'écran : § 72 points correspondent à 1 pouce. v Développement d’Applications Mobiles 12

Android studio UNITÉS DE MESURE LOGIQUE On peut également utiliser deux unités de mesure abstraites. • dip ou dp (Density-independant Pixel) est une unité de mesure qui se base sur la densité physique de l'écran. Cette unité est relative à un écran d'une densité de 160 dpi. un dp correspond à un pixel sur un écran ayant une densité de 160 dpi. Ex : pour un écran ayant une densité de 160 dpi : 1 dp -> 1 pixel. pour un écran ayant une densité de 320 dpi : 1 dp -> 2 pixels. il offre une cohérence pour les tailles réelles des éléments d‘IU sur différents appareils. v Développement d’Applications Mobiles 13

Android studio § sp UNITÉS DE MESURE LOGIQUE (Scale-independant Pixels) : Elle se base sur la densité physique mais aussi sur la préférence de l'utilisateur en terme de taille de police. Elle est donc utilisée pour spécifier la taille des textes affichés à l'écran. v Développement d’Applications Mobiles 14

Android studio Ressources § Sous Andorid il plusieurs types de ressources : § les fichiers de ressources de l'application (images, chaînes de caractères, layout, …etc) qui dépendent du contexte (langue, taille de l'écran, mode portrait/paysage…) ; § les bases de données ; § les fichiers préférences ; § les fichiers pour la lecture et la lecture/écriture sans contexte. § NB : Toutes ces ressources se trouvent dans votre application sous res/. v Développement d’Applications Mobiles 15

Android studio v Développement d’Applications Mobiles RESSOURCE 16

Android studio 1) RESSOURCE Les layouts : les fichiers nous permettant de définir nos vues (par exemple activity_main. xml du TD 1). 2) Les mipmap : Ils ont pour but de contenir l’icône de lancement de l’application. 3) Les drawables : • les images de type (. png, . 9. png, . jpg, . gif) (les *. gif n’étant pas conseillés), • ou des fichiers XML qui sont compilés dans les sous-types de ressources extractibles suivants: • Listes d'états (State lists) • Formes (Shapes) • Dessin d'animation (Animation drawables) NB : outil Android Asset Studio https: //romannurik. github. io/Android. Asset. Studio/ v Développement d’Applications Mobiles 17

Android studio RESSOURCE 4) Menu : tout ce qui est en rapport avec les menus de l’application ou les barres d’action. 5) Values (Les valeurs) : Strings : au lieu d’utiliser directement du texte (en hard), on utilise plutôt des constantes chaines de caractères (pour l’internationalisation de notre application). Ce fichier est déclaré dans String. xml. Dimens : la même chose pour les tailles (fichier dimens. xml). Colors : la même chose pour les couleurs (fichier colors. xml). Styles : pour les styles. v Développement d’Applications Mobiles 18

Android studio 4) RESSOURCE Autres : assets : Contient un fichier qui doit être compilé dans un fichier. apk tel quel. Vous pouvez parcourir ce répertoire de la même manière qu'un système de fichiers classique à l'aide d'URI et lire des fichiers sous forme de flux d'octets à l'aide de Asset. Manager. Par exemple, les textures et les données de jeu. Font : les fonts externe (non standard). …etc. raw : des données brutes dans leur format d’origine. Ce répertoire peut contenir des fichiers audio, vidéo, html, …etc. v Développement d’Applications Mobiles 19

Android studio RESSOURCE Utilisation : v Développement d’Applications Mobiles 20

Android studio RESSOURCE Utilisation : • Pour les écrans de différents tailles : • Pour Portrait paysage v Développement d’Applications Mobiles 21

Android studio RESSOURCE Utilisation : Définir les dimensions en constantes dimension (valuedim): <resources> <!-- Text. Views --> <dimen name="size_text_title">12 sp</dimen> <dimen name="size_text_description">10 sp</dimen> <!-- Images --> <dimen name="size_image_height">30 dip</dimen> <dimen name="size_image_width">30 dip</dimen> </resources> configuration par défaut <resources> <!-- Text. Views --> <dimen name="size_text_title">17 sp</dimen> <dimen name="size_text_description">15 sp</dimen> <!-- Images --> <dimen name="size_image_height">40 dip</dimen> <dimen name="size_image_width">40 dip</dimen> </resources> configuration pour les fortes densités values-xxhdpi/dimen. xml Dans le Fichier activity_main. xml : <Text. View android: text. Size="@dimen/size_text_title"/> v Développement d’Applications Mobiles 22

Android studio RESSOURCE Les ressources de l'applications sont utilisées dans le code au travers de la classe statique R. Android re-génère automatiquement la classe statique R : Les ressources dés qu'elles sont déclarées dans le fichier XML ou que le fichier associé est déposé dans le répertoire adéquat. Les ressources sont utilisées de la manière suivante : • android. R. type_ressource. nom_ressource Ex 1 : retrouver la resosurce text. View par son identificateur (id) Text. View texte = (Text. View) find. View. By. Id (R. id. txetview 1); Ex 2 : La récupération de la constante chaine hello Resources res = get. Resources(); String hw = res. get. String(R. string. hello); v Développement d’Applications Mobiles 23

Android studio Fichier R : RESSOURCE public final class R { public static final class attr { } public static final class dimen { public static final int padding_large=0 x 7 f 040002; public static final int padding_medium=0 x 7 f 040001; public static final int padding_small=0 x 7 f 040000; } public static final class drawable { public static final int ic_action_search=0 x 7 f 020000; public static final int ic_launcher=0 x 7 f 020001; } public static final class id { public static final int menu_settings=0 x 7 f 080000; } public static final class layout { public static final int activity_main=0 x 7 f 030000; } public static final class menu { public static final int activity_main=0 x 7 f 070000; } public static final class string { public static final int app_name=0 x 7 f 050000; public static final int hello_world=0 x 7 f 050001; public static final int menu_settings=0 x 7 f 050002; public static final int title_activity_main=0 x 7 f 050003; } public static final class style { public static final int App. Theme=0 x 7 f 060000; v Développement d’Applications Mobiles 24

Android studio Pour plus d’informations : Open. Class. Room RESSOURCE Créez des applications pour Android > Constitution des interfaces graphiques https: //openclassrooms. com/fr/courses/4568596 -construisez-une-interfaceutilisateur-flexible-et-adaptative/4778286 -initiez-vous-au-support-desdifferentes-tailles-decrans Developper. com Tutoriel Android : Apprendre à utiliser les ressources https: //mathias-seguy. developpez. com/tutoriels/android/utiliser-ressources/ Developer. android. com • App resources overview https: //developer. android. com/guide/topics/resources/providingresources. html v Développement d’Applications Mobiles 25

Android studio RESSOURCE DEMO : v Développement d’Applications Mobiles 26