02-vues.asc

Android

Ce qu’on a vu jusqu’à présent

• Tour d’horizon du milieu du mobile

• Historique d’Android

• Spécificités du développement mobile

• Eco-système

Compilation

• Votre IDE gère la complexité à votre place

  • Ant avec Eclipse

  • Gradle avec Android Studio

• Génération du fichier R

• Compilation des fichiers Java

• Compilation dex

• packaging sous forme d’un apk

En une image

Le SDK Android

• Le SDK Manager permet de mettre à jour et d’installer des fonctionnalités supplémentaires

• Il fournit les outils utilisés pour le développement:

  • ADB (Android Debug Bridge)

    • transfert de fichiers

    • accès shell

    • intallation d’applications

    • debug

  • dx

  • apkbuilder

Développer pour Android

• Les interfaces sont définies dans des fichiers XML

• On y accède depuis notre code via le Context

• Seul le code qui a instancié l’interface y a accès

Caution

L’API n’est pas tout à fait celle de Java, pas accès à Jaxb, classes redéfinies (Color par exemple).

R

• Fichier généré par le système

• Dans le dossier gen et ajouté au classpath

  • ⇒ autocomplétion

• Pointeur vers vos ressources

  • fichiers XML depuis Java

  • images

• Les ressources sont alors dans le Context

  • un identifiant par ressource

  • tableau indexé

Accès aux ressources

• Pour y accéder

  • getResources() + get "typé"

  • R.type.maResource

String title = context.getString(R.string.title)
Color color = context.getResources().getColor(R.color.title)

• Certaines méthodes prennent directement les id

  • ex : setText(R.string.monTexte)

Les éléments d’interface

Oui, c’est bien le sujet de cette partie du cours

Différentes vues

Toute l’arborescence est basée à partir de la classe View

Types de vues

• Hierarchie bien plus complexe, ne pas hésiter à redescendre dans la hiérarchie, il y a des chances que la classe que vous cherchez à créer existe déjà.

• Inflate :

  • XML ⇒ Java

• Deux types de vue :

  • Affichage

  • Conteneurs

Conteneurs et Layouts

Ou comment mettre des trucs dans d’autres trucs

Conteneurs

• Un des mécanisme de gestion du multi-écrans

• N’ont pas d’affichage propre, juste des limites

• Servent à positionner des vues placées dedans

• Chaque conteneur a sa règle de positionnement

  • Les maîtriser toutes c’est pouvoir faire une infinité d’interfaces

RelativeLayout

• Positionne les vues les unes par rapport aux autres

• Par rapport

  • au parent

  • à une vue déjà placée

• attributs majeurs

  • align_position

  • alignParent_position

  • above/below

  • center_orientation

  • position_of

LinearLayout

• Positionne les éléments en ligne

  • Champs orientation

    • verticalement

    • horizontalement

  • champs gravity

• Les uns après les autres

• Par proportion

  • attribut layout_weight

  • utilise des poids

ListView et ExpendableListView

• Gère une liste d’éléments

• Fonctionne grâce à un adapter

• Gère des vues hors affichage

• Doit gérer la réutilisation des vues

ViewPager

• Permet une navigation horizontale par écran

• Nécessite un adapter de View ou Fragment

• Souvent accompagné d’un ViewPagerIndicator

NavigationDrawer

• Permet une navigation de Top Level améliorée

  • économie de place

• Élément hors écran

• A importer de la bibliothèque de compatibilité

Autres conteneurs utiles

• ScrollView

  • conteneur pour rendre un contenu plus large que l’écran scrollable

• FrameView

  • conteneur d’une seule vue

• GridView et GridLayout

  • GridLayout ⇒ nouvelle version

  • Mise en forme de type formulaire

• TableLayout

  • Mise en forme type Table HTML

  • TableRow

Les éléments graphiques

Composants graphiques et contrôles.

Composants graphiques

• Affichent du contenu

  • Callback de mesure

  • Callback de layout

  • Callback de dessin

• Gèrent les entrées utilisateur

  • avec les listeners

  • setOnClickListener

  • setOnLongPressListener

Le texte

• TextView

• EditText

• Les méthodes

  • text (set et get)

  • inputType (Date, Number, PhoneNumber, Mail, etc…​)

  • les méthodes de mise en forme du texte

  • les listeners de remplissage

Les interactions utilisateur

• Button ou ImageButton

  • hérité du textView

• Pickers (Date and Time)

  • min, max, init

• RatingBar

  • numStar, rating, stepSize

• AnalogClock, TextClock, QuickContactBadge, ZoomControls

CompoundButton

• CheckBox

  • isChecked

• Switch

  • amélioration de CheckBox

• RadioButton

  • fonctionne avec RadioGroup

  • toggle()

Progression et Listes

• ProgressBar, SeekBar

  • définie ou indéfinie

  • min, max

  • progress

• Spinners

  • Choix dans une liste

  • Nécessite un adapter de liste

Medias

• ImageView, ImageButton

  • src

  • scaleType

  • penser à gérer son cache

• MediaController

  • Des boutons simples de contrôle de la musique

• VideoView

  • Afficher une vidéo par le système

• SurfaceView, GLSurfaceView et TextureView

Liste des formats supportés

WebView

• Conteneur pour afficher un contenu web

• Encapsule WebKit ou Chromium

• Pour mettre du contenu

  • ouvrir une page

  • intégrer du code

Action Bar

• Un conteneur qui n’en est pas un

• Uniformisation de la barre d’en-tête

  • Logo

  • Zone d’actions

    • niveau 1

    • niveau 2

Création d’interfaces

En parler c’est bien, les construire c’est mieux.

Méthodes de création

• Avec IntelliJ dans l’éditeur

  • C’est déjà pas si mal

• Sous Eclipse

  • Attention au codé généré

  • Lourd pour de grosses interfaces

• Le plus sûr reste de bien connaître et le faire à la main

Ecrire son interface

• En Java :

  • On instancie les objets correspondant au runtime

  • On doit tout gérer tout seul

• En XML :

  • Descriptions XML

  • Editeur graphique

• Le meilleur des deux mondes :

  • On conçoit rapidement en WYSIWYG

  • On peauffine le code XML produit

  • On rajoute les comportements en Java

Hiérarchique

• Les vues peuvent avoir une seule vue parente

• Les ViewGroup peuvent contenir plusieurs vues

• On les imbrique pour former l’IHM de l’application

Déclaration en XML

• Dans le dossier res

  • sous dossier layout

  • structure de dossier à voir plus tard

• Structuration

  • Une vue == une balise

  • Un champs == un attribut

  • layout_width et layout_height obligatoires

  • un id pour pouvoir récupérer vos vues

• Instancié ensuite par le système

Un exemple

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
              android:orientation="vertical" >
    <TextView android:id="@+id/text"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="I am a TextView" />
    <Button android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="I am a Button" />
</LinearLayout>

Depuis Java

• On instancie le layout

  • appliquer votre layout à votre activity

  • avec setContentView(R.layout.mon_layout)

• On récupère l’instance java de nos vues

  • findViewById depuis une activity ou une vue

• On peut alors manipuler les vues

  • tester les getters/setters

• On peut ajouter des écouteurs d’actions

  • mButton.setOnClickListener(myOCL)

Remarques

• Accéder aux autres vues en xml

  • @id/id_res ⇒ référence

  • @+id/id_res ⇒ crée si n’existe pas et référence

• Faire un findViewById le moins souvent possible

  • Généralement au onCreate ou onCreateView

• Unité de mesure : le density pixel (dp)

  • s’affranchir des variations de densités de pixels

  • résultat de taille "réelle" cohérent

En avant le TP

Vous pouvez attaquer le premier vrai TP et mettre au point vos premières interfaces.