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

Compilation

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

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

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

Relative Layout

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

Linear Layout

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

ListView

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

View Pager

Permet une navigation horizontale par écran
Nécessite un adapter de View ou Fragment
Souvent accompagné d’un ViewPagerIndicator

View Pager Indicator

NavigationDrawer

Navigation Drawer

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

EditText

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

Spinner

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

ActionBar

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.