Créer une appli Android Partie 1

Transcription

1 Partie 1 Java Android Hervé PHILIPPE Promotion

2 Plan Docs, tutos Interface graphique Généralité Révolution tactile Gamification Material Design Créer une appli Android Définitions Structure d un projet Ressources IHM Layout View ViewGroup Bonnes pratiques BitBucket Intégration dans Android Studio

3 Développement Android Studio Docs, tutos Doc officielle : Tutos, docs, API de référence (tout en anglais)

4 Développement Android Studio Docs, tutos Doc officielle : Tutos, docs, API de référence (tout en anglais)

5 Développement Android Studio Docs, tutos Doc officielle : Tutos, docs, API de référence (tout en anglais) OpenClassrooms.com Developpez.com Stackoverflow.com

6 Développement Android Studio Docs, tutos Doc officielle : Tutos, docs, API de référence (tout en anglais) OpenClassrooms.com Developpez.com Stackoverflow.com Autres :

7 Développement Android Studio Docs, tutos Doc officielle : Tutos, docs, API de référence (tout en anglais) OpenClassrooms.com Developpez.com Stackoverflow.com Autres : Google est ton ami ;)!

8 Développement Android Studio Docs, tutos Doc officielle : Tutos, docs, API de référence (tout en anglais) OpenClassrooms.com Developpez.com Stackoverflow.com Autres : Google est ton ami ;)! Wikipedia aussi!!!

9 Interface graphique Généralités Une application mobile a (très souvent) besoin : D une communication web via réseaux sociaux Vidéos (YouTube ) Images (Instagram, Pinterest ) Actus, anecdotes (Twitter, Facebook ) D une belle interface graphique Agréable à regarder Ergonomique : facile à utiliser sur tout type d appareils Réactive -> l interface graphique est très importante

10 Interface graphique Révolution tactile Ecran tactile Simplicité Sentiment de maîtrise Téléphone Appareil mobile Communiquant Smartphones = écran tactile + téléphone Mobilité -> pas seulement pour le boulot Démocratisation de l utilisation des applications Succès des «stores» d applications grâce aux jeux

11 Interface graphique Gamification Arrivée de la gamification un peu partout

12 Interface graphique Gamification Exemples d éléments graphiques Barres de progression Augmentation de niveau Diplômes

13 Interface graphique Gamification Exemples d éléments graphiques Barres de progression Augmentation de niveau Diplômes Interaction avec l utilisateur Gestes IHM innovante : Reconnaissance vocale Hand-tracker / head-tracker Notifications, s, sms

14 Interface graphique Material Design Ensemble de règles applicables aux interfaces graphiques des applications Proposé par Google A partir d Android 5.0 (Lollipop) Succède à l interface Holo ( ) Sobre avec petites animations Valeur sûre!

15 Plan Docs, tutos Interface graphique Généralité Révolution tactile Gamification Material Design Créer une appli Android Définitions Structure d un projet Ressources IHM Layout View ViewGroup Bonnes pratiques BitBucket Intégration dans Android Studio

16 A vous de jouer! Créer un «Project» avec Android Studio, SANS activité Choisir un nom pertinent Réfléchir à la version minimale d Android

17 Définitions App Component Un composant d application est un point d entrée d une application : Intent Activities Une activité est un écran d une application Services Un service est une tâche de fond, souvent longue, sans interface graphique Content Providers Un fournisseur de contenu partage les données d une application à une autre Broadcast receivers Un récepteur de diffusion permet d agir après avoir reçu une intention générique (batterie faible, téléchargement terminé ) Une intention est le mécanisme permettant d interagir avec les composants d applications. Ex: lors du démarrage de votre application l intention «Launcher» est envoyée.

18 Créer la première activité de votre application Ca sera une activité très simple : «Empty Activity» Elle sera activée par l intention «Launcher» Elle aura une interface graphique (layout)

19 Structure d un projet «Project» dans Android Studio manifests->androidmanifest.xml java -> fichiers source application Application Application de test (Junit) res -> ressources L apparence graphique des pages Les données de l application Les fichiers de l application Gradle Scripts Pour compiler/linker Le(s) module(s), librarie(s) Le projet dans sa globalité

20 Ressources Dossier «Ressources» Fichiers binaires : images, sons Fichiers textes XML (données, layouts) A la compilation, les ressources deviennent des données utilisables en code Types de ressources : Animation (/res/anim ou /res/drawable) ColorStateList (/res/color) Drawable (/res/drawable) MipMap (/res/mipmap) Layout (/res/layout) Menu (/res/menu) String (/res/values) Style (/res/values) Autres (/res/values) Bool Color Dimension ID Integer Integer Array Typed Array

21 Ressources Système de «qualifiers», classés en dossiers Pour avoir plusieurs versions en fonction de : L écran : taille, densité, orientation La langue, la région L IHM (tactile, clavier ) Autre (mode nuit, type réseau GSM ) Ordre important. Ex: drawable-port-hdpi/ (images pour écran 240dpi mode portrait) Doc:

22 Ressources Système de «qualifiers», classés en dossiers Pour avoir plusieurs versions en fonction de : L écran : taille, densité, orientation La langue, la région L IHM (tactile, clavier ) Autre (mode nuit, type réseau GSM ) Ordre important. Ex: drawable-port-hdpi/ (images pour écran 240dpi mode portrait) Doc: Dans Android Studio, faire «New -> Android ressource»!

23 IHM - Layout Un layout est un gabarit, qu on utilise par exemple pour une activité. Il est défini par un fichier XML On retrouve tous les layouts dans le dossier de ressources «layout»

24 IHM Layout Langage XML utilisé pour l IHM Balises Attributs Utilisation de namespaces Ex: xmlns:android=" xmlns:tools="

25 IHM Layout Langage XML utilisé pour l IHM Balises Attributs Utilisation de namespaces Ex: xmlns:android=" xmlns:tools=" Pour récupérer la valeur d une ressource

26 IHM Layout Langage XML utilisé pour l IHM Balises Attributs Utilisation de namespaces Ex: xmlns:android=" xmlns:tools=" Pour récupérer la valeur d une ressource Pour créer un nouvel «id» lors de la compilation (toutes les ressources (XML) sont compilées en fichiers Java)

27 IHM View L élément graphique de base d une application Android s appelle vue (View) Une vue sert à afficher une élément graphique pour interagir avec l utilisateur Un groupe de vues (ViewGroup) permet d afficher d autres vues Remarque : un élément de type ViewGroup est aussi de type View (par héritage)

28 IHM - View L élément graphique de base d une application Android s appelle vue (View) Une vue sert à afficher une élément graphique pour interagir avec l utilisateur Un groupe de vues (ViewGroup) permet d afficher d autres vues Remarque : un élément de type ViewGroup est aussi de type View (par héritage) Un layout est en fait de type «ViewGroup» c est-à-dire qu il contient des éléments de type «View»

29 IHM ViewGroup LinearLayout Eléments affichés les uns à la suite des autres RelativeLayout Eléments affichés par rapport à d autres éléments Attributs obligatoires : android:orientation (LinearLayout) android:layout_width (LinearLayout et RelativeLayout) android:layout_height (LinearLayout et RelativeLayout)

30 IHM ViewGroup LinearLayout Eléments affichés les uns à la suite des autres RelativeLayout Eléments affichés par rapport à d autres éléments TableLayout Eléments affichés dans un tableau GridLayout Eléments affichés dans un tableau, mais plus de souplesse Attributs obligatoires : android:orientation (LinearLayout) android:layout_width (LinearLayout et RelativeLayout) android:layout_height (LinearLayout et RelativeLayout)

31 IHM ViewGroup LinearLayout Eléments affichés les uns à la suite des autres RelativeLayout Eléments affichés par rapport à d autres éléments TableLayout Eléments affichés dans un tableau GridLayout Eléments affichés dans un tableau, mais plus de souplesse FrameLayout 1 seul élément affiché! Attributs obligatoires : android:orientation (LinearLayout) android:layout_width (LinearLayout et RelativeLayout) android:layout_height (LinearLayout et RelativeLayout)

32 IHM ViewGroup Autres ViewGroup : ListView Afficher des données sous la forme d une liste GridView Afficher des données dans un tableau ScrollView Ajouter un défilement vertical à une vue

33 IHM Bonnes pratiques Prendre en compte les caractéristiques de l écran : La taille La densité de pixels L orientation La résolution Densités prédéfinies mdpi (medium) ~160dpi hdpi (high) ~240dpi xhdpi (extra-high) ~320dpi xxhdpi (extra-extra-high) ~480dpi xxxhdpi (extra-extra-extra-high) ~640dpi

34 IHM Bonnes pratiques Prendre en compte les caractéristiques de l écran : La taille La densité de pixels L orientation La résolution Pour les dimensions : Densités prédéfinies mdpi (medium) ~160dpi hdpi (high) ~240dpi xhdpi (extra-high) ~320dpi xxhdpi (extra-extra-high) ~480dpi xxxhdpi (extra-extra-extra-high) ~640dpi «density-independent pixels» (dp) Pour les textes : «scale-independent pixels» (sp)

35 BitBucket Intégration dans Android Studio Créer un compte (si ce n est pas déjà fait!) Créer un repository dans BitBucket Nom du projet Choisir Git Dans Android Studio Créer un projet vide VCS > Enable Version Control Integration Choisir Git Cliquer sur «Terminal» (panel en bas) Faire les commandes :

36 But : créer une application qui gère une «médiathèque» personnelle (livres, revues, CDs, DVDs, Blurays ) Créer les layouts nécessaires à l application