Tour d’horizon des
   Drawables
  Dessiner c’est gagner !!!
Note générale




                2
Introduction
Le B.A.-ba des Drawables




                           3
Introduction
C’est quoi un Drawable?




                          4
Introduction
          C’est quoi un Drawable?



• Entité qui peut être « dessinée »
  • Une forme, un gradient, une imag...
Introduction
          C’est quoi un Drawable?



• Entité qui peut être « dessinée »
  • Une forme, un gradient, une imag...
Introduction
          C’est quoi un Drawable?



• Entité qui peut être « dessinée »
  • Une forme, un gradient, une imag...
Introduction
       Pourquoi est-ce si important?


• Gestion du multi-device facilitée
• Abstraction de ce qui est « dess...
Introduction
  Architecture




                 6
Introduction
  Architecture




   Drawable




                 6
Introduction
                     Architecture




                        Drawable




ColorDrawable   GradientDrawable

...
Introduction
                     Architecture




                        Drawable




ColorDrawable   GradientDrawable  ...
« How-to » basique
    Hello Drawables !




                        7
« How-to » basique
                          Premier essai




private Drawable mDrawable;

public DrawableView(Context co...
« How-to » basique
   Gné ? Ça marche pas !




                           9
« How-to » basique
          Gné ? Ça marche pas !


• Mon Canvas n’est pas dans un état «
  acceptable » ?




          ...
« How-to » basique
          Gné ? Ça marche pas !


• Mon Canvas n’est pas dans un état «
  acceptable » ?
• J’ai oublié ...
« How-to » basique
           Gné ? Ça marche pas !


• Mon Canvas n’est pas dans un état «
  acceptable » ?
• J’ai oublié...
« How-to » basique
           Gné ? Ça marche pas !


• Mon Canvas n’est pas dans un état «
  acceptable » ?
• J’ai oublié...
« How-to » basique
                              La solution !



private Drawable mDrawable;

public DrawableView(Context...
Les fonctionnalités
 Ça permet quoi les Drawables?




                                 11
Quelques fonctionnalités
                 Généralités


• Emplacement / taille :
  • setBounds(), getIntrinsic[Width/Heigh...
Quelques fonctionnalités
                 Drawable.Callback




• Un Drawable doit pouvoir « s’invalider
  »
  • Utilité d...
Quelques fonctionnalités
                         Drawable.Callback

public class DrawableView extends View {

    private...
Principe d’état constant
                                     Problématique



 private static final int OPAQUE = 255;
 pr...
Principe d’état constant
         Explication du phéomène




• Android « factorise » les états des
  Drawables
  • Minimi...
Principe d’état constant
     Explication du phéomène




                               17
Principe d’état constant
      Explication du phéomène

   Drawable              Drawable




                            ...
Principe d’état constant
      Explication du phéomène

   Drawable                   Drawable




              ConstantS...
Principe d’état constant
      Explication du phéomène

   Drawable                   Drawable




              ConstantS...
Principe d’état constant
           Résolution du « problème »



• Pas de fonctionnalité « copy-on-write »
• Utilisation ...
Principe d’état constant
      Résolution du « problème »

   Drawable                Drawable




                       ...
Principe d’état constant
       Résolution du « problème »
           Muté                     Muté

    Drawable         ...
Principe d’état constant
       Résolution du « problème »
           Muté                     Muté

    Drawable         ...
Principe d’état constant
                       Résolution du « problème »



 private static final int OPAQUE = 255;
 pri...
Instanciation
Enfin les travaux pratiques !




                               21
Instancier un drawable
      Le résultat voulu




                          22
Instancier un drawable
      Le résultat voulu




                          22
Instancier un drawable
                Deux possibilités : Java ...




float density = getContext().getResources().getDis...
Instancier un drawable
                             ... et XML


<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:a...
Drawable Listing




                       em o
                 D
                   Code disponible sur
http://www.gith...
BitmapDrawable

• Très largement utilisé
• Pourtant méconnu / mal connu
  • Souvent utilisé tel quel
    • context.getReso...
BitmapDrawable
                              android:tileMode




<?xml version="1.0" encoding="utf-8"?>

<bitmap
    xmln...
BitmapDrawable
                              android:tileMode




<?xml version="1.0" encoding="utf-8"?>

<bitmap
    xmln...
BitmapDrawable
                              android:tileMode




<?xml version="1.0" encoding="utf-8"?>

<bitmap
    xmln...
BitmapDrawable
                              android:tileMode




<?xml version="1.0" encoding="utf-8"?>

<bitmap
    xmln...
BitmapDrawable
                              android:tileMode




<?xml version="1.0" encoding="utf-8"?>

<bitmap
    xmln...
BitmapDrawable
                               android:gravity




<?xml version="1.0" encoding="utf-8"?>

<bitmap
    xmln...
BitmapDrawable
                               android:gravity




<?xml version="1.0" encoding="utf-8"?>

<bitmap
    xmln...
NinePatchDrawable
    Mon préféré héhé !




                         33
NinePatchDrawable
            Mon préféré héhé !




• Instanciation simple :
  • getDrawable(R.drawable.image) (image
   ...
NinePatchDrawable
    Mon préféré héhé !




                         34
StateListDrawable

• Présent partout :
  • Boutons
  • Checkboxes
• Changement de l’apparence fonction
  de l’état courant...
Dernière démos
  On finit en beauté ?




                        36
A quoi ça sert tout ça?
               Flatten Hierarchy




                       em o
                 D
              ...
Créer son Drawable

• Étendre de Drawable (ou une classe
  fille)
• Définir les méthodes abstraites
 • setAlpha, setColorFil...
RemoteDrawable




                       em o
                 D
                   Code disponible sur
http://www.github...
Références

• En savoir plus :
  • http://android.cyrilmottier.com
• Code source :
  • http://android.git.kernel.org/
  • ...
Des questions ?
   N’hésitez pas !
                     41
Prochain SlideShare
Chargement dans…5
×

Tour D Horizon Des Drawables

8 366 vues

Publié le

Publié dans : Technologie
1 commentaire
10 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
8 366
Sur SlideShare
0
Issues des intégrations
0
Intégrations
64
Actions
Partages
0
Téléchargements
185
Commentaires
1
J’aime
10
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • L&amp;#x2019;objet de cette pr&amp;#xE9;sentation : les Drawables !
    Pourquoi : tout simplement parce que je trouve que c&amp;#x2019;est une ressource inexploit&amp;#xE9;e du framework Android !
    De plus peu de programmeurs ont une v&amp;#xE9;ritable connaissance des Drawables.
  • J&amp;#x2019;aimerai commencer par une petite note g&amp;#xE9;n&amp;#xE9;rale : Ne sachant pas trop comment organiser tout &amp;#xE7;a j&amp;#x2019;ai pr&amp;#xE9;f&amp;#xE9;r&amp;#xE9; rassembler les diff&amp;#xE9;rentes petites remarques ici.
    Tout d&amp;#x2019;abord je me pr&amp;#xE9;sente :
    - Je m&amp;#x2019;appelle Cyril Mottier, je suis ing&amp;#xE9;nieur d&amp;#xE9;veloppement sur plateforme mobile (Android et iPhone : c&amp;#x2019;est cool de connaitre les deux car je peux comparer les d&amp;#xE9;fauts/avantages de chacunes des plateformes).
    - Je suis l&amp;#x2019;auteur d&amp;#x2019;un blog de d&amp;#xE9;veloppement francophone sur Android (pourquoi francophone? tout simplement parce qu&amp;#x2019;il y a rien de francophone ... pourtant j&amp;#x2019;aurais pr&amp;#xE9;f&amp;#xE9;r&amp;#xE9; faire de l&amp;#x2019;anglais)
    - Sur le Market, j&amp;#x2019;ai fait MetroMap Paris (que vous avez peut etre utilis&amp;#xE9; en venant ici &amp;#xE0; Paris :D).
    Pour information :
    - J&amp;#x2019;aimerai d&amp;#x2019;abord remercier toute l&amp;#x2019;organisation de m&amp;#x2019;avoir invit&amp;#xE9;
    - La pr&amp;#xE9;sentation a &amp;#xE9;t&amp;#xE9; fait un peu dans la pr&amp;#xE9;cipitation donc il est possible que je m&amp;#x2019;aborde pas forc&amp;#xE9;ment bien les probl&amp;#xE9;matiques ou tout simplement que je parle mal/faussement ... Veuillez m&amp;#x2019;en excuser :).
    - N&amp;#x2019;h&amp;#xE9;sitez pas &amp;#xE0; poser des questions durant la pr&amp;#xE9;sentation si un point vous intrigue.
  • Je vous pose la question : &amp;#xAB; C&amp;#x2019;est quoi un Drawable ? &amp;#xBB;
    - D&amp;#x2019;un point de vue global, un Drawable d&amp;#xE9;signe un objet qui peut &amp;#xEA;tre dessin&amp;#xE9;/affich&amp;#xE9; (traduction b&amp;#xEA;te et m&amp;#xE9;chante du nom anglais). Bizarrement, un texte pourrait &amp;#xEA;tre consid&amp;#xE9;r&amp;#xE9; comme un Drawable mais &amp;#xE7;a n&amp;#x2019;est pas le cas car il n&amp;#x2019;existe pas de TextDrawable ... &amp;#xE0; vous de le coder? :)
    - Dans le framework Android c&amp;#x2019;est un composant &amp;#xE9;l&amp;#xE9;mentaire puisque c&amp;#x2019;est le moyen privil&amp;#xE9;gi&amp;#xE9; pour afficher un composant graphique (image, gradient, etc.)
  • Je vous pose la question : &amp;#xAB; C&amp;#x2019;est quoi un Drawable ? &amp;#xBB;
    - D&amp;#x2019;un point de vue global, un Drawable d&amp;#xE9;signe un objet qui peut &amp;#xEA;tre dessin&amp;#xE9;/affich&amp;#xE9; (traduction b&amp;#xEA;te et m&amp;#xE9;chante du nom anglais). Bizarrement, un texte pourrait &amp;#xEA;tre consid&amp;#xE9;r&amp;#xE9; comme un Drawable mais &amp;#xE7;a n&amp;#x2019;est pas le cas car il n&amp;#x2019;existe pas de TextDrawable ... &amp;#xE0; vous de le coder? :)
    - Dans le framework Android c&amp;#x2019;est un composant &amp;#xE9;l&amp;#xE9;mentaire puisque c&amp;#x2019;est le moyen privil&amp;#xE9;gi&amp;#xE9; pour afficher un composant graphique (image, gradient, etc.)
  • Je vous pose la question : &amp;#xAB; C&amp;#x2019;est quoi un Drawable ? &amp;#xBB;
    - D&amp;#x2019;un point de vue global, un Drawable d&amp;#xE9;signe un objet qui peut &amp;#xEA;tre dessin&amp;#xE9;/affich&amp;#xE9; (traduction b&amp;#xEA;te et m&amp;#xE9;chante du nom anglais). Bizarrement, un texte pourrait &amp;#xEA;tre consid&amp;#xE9;r&amp;#xE9; comme un Drawable mais &amp;#xE7;a n&amp;#x2019;est pas le cas car il n&amp;#x2019;existe pas de TextDrawable ... &amp;#xE0; vous de le coder? :)
    - Dans le framework Android c&amp;#x2019;est un composant &amp;#xE9;l&amp;#xE9;mentaire puisque c&amp;#x2019;est le moyen privil&amp;#xE9;gi&amp;#xE9; pour afficher un composant graphique (image, gradient, etc.)
  • - Permet de g&amp;#xE9;rer plus facile les diff&amp;#xE9;rentes r&amp;#xE9;solutions/densit&amp;#xE9;s (c&amp;#x2019;est cet objet qui g&amp;#xE8;re partiellement - en coordoniation avec les layouts/vues - le redimensionnement)
    - Les Drawables facilitent l&amp;#x2019;utilisation de ressources graphiques tout en augmentant les possibilit&amp;#xE9;s :
    - Un contr&amp;#xF4;le pr&amp;#xE9;cis de l&amp;#x2019;affichage par des propri&amp;#xE9;t&amp;#xE9;s avanc&amp;#xE9;es (setAlpha, setColorFilter, propri&amp;#xE9;t&amp;#xE9;s relatives &amp;#xE0; chaque Drawable comme la gravity ou tileMode sur un BitmapDrawable)
    - Possibilit&amp;#xE9;s vari&amp;#xE9;es gr&amp;#xE2;ce &amp;#xE0; l&amp;#x2019;architecture en pattern composite des Drawables (cf slide suivant)
    - Enfin les Drawables sont tellement bien int&amp;#xE9;gr&amp;#xE9; au syst&amp;#xE8;me qu&amp;#x2019;il vous permette de modifier l&amp;#x2019;apparence globale des widgets Android sans m&amp;#xEA;me les &amp;#xE9;tendre ou les r&amp;#xE9;&amp;#xE9;crire (View.setBackground() par exemple).
  • - Arbre de la hi&amp;#xE9;rarchie des Drawables : il y a des classes abstraites (Drawable, DrawableContainer, etc.) et le pattern Composite =&gt; un Drawable contient un Drawable
    - Une hi&amp;#xE9;rarchie assez cons&amp;#xE9;quente (environ 15 Drawables diff&amp;#xE9;rents dont on peut trouver un exemple dans les sources relatives &amp;#xE0; cette pr&amp;#xE9;sentation)
    - Une hi&amp;#xE9;rarchie &amp;#xE0; l&amp;#x2019;instar de View, ViewGroup, etc. (des Drawable dans d&amp;#x2019;autres Drawables)
  • - Arbre de la hi&amp;#xE9;rarchie des Drawables : il y a des classes abstraites (Drawable, DrawableContainer, etc.) et le pattern Composite =&gt; un Drawable contient un Drawable
    - Une hi&amp;#xE9;rarchie assez cons&amp;#xE9;quente (environ 15 Drawables diff&amp;#xE9;rents dont on peut trouver un exemple dans les sources relatives &amp;#xE0; cette pr&amp;#xE9;sentation)
    - Une hi&amp;#xE9;rarchie &amp;#xE0; l&amp;#x2019;instar de View, ViewGroup, etc. (des Drawable dans d&amp;#x2019;autres Drawables)
  • - Arbre de la hi&amp;#xE9;rarchie des Drawables : il y a des classes abstraites (Drawable, DrawableContainer, etc.) et le pattern Composite =&gt; un Drawable contient un Drawable
    - Une hi&amp;#xE9;rarchie assez cons&amp;#xE9;quente (environ 15 Drawables diff&amp;#xE9;rents dont on peut trouver un exemple dans les sources relatives &amp;#xE0; cette pr&amp;#xE9;sentation)
    - Une hi&amp;#xE9;rarchie &amp;#xE0; l&amp;#x2019;instar de View, ViewGroup, etc. (des Drawable dans d&amp;#x2019;autres Drawables)
  • Et s&amp;#x2019;il vous plait : ne me faites pas de new dans le onDraw ... je vois &amp;#xE7;a trop souvent et &amp;#xE7;a m&amp;#x2019;horrifie :) ... J&amp;#x2019;aime d&amp;#xE9;signer les d&amp;#xE9;veloppeurs comme les fautifs des plaintes du public fasse &amp;#xE0; Android : Si vous faites de la merde, c&amp;#x2019;est tout Android qui prend. VOUS &amp;#xEA;tes les promoteurs de cette superbe plateforme !
  • - Mon canvas n&amp;#x2019;est pas dans un &amp;#xE9;tat acceptable? (canvas.translate(2000, 2000) ...) =&gt; NON
    - J&amp;#x2019;ai zapp&amp;#xE9; d&amp;#x2019;inclure ma vue dans le layout qui s&amp;#x2019;affiche =&gt; &amp;#xC7;a m&amp;#x2019;arrive de temps &amp;#xE0; autre ... trop souvent m&amp;#xEA;me :D ... mais cette fois j&amp;#x2019;ai bien fait attention et ce n&amp;#x2019;est pas &amp;#xE7;a !
    - La solution ??? J&amp;#x2019;ai oubli&amp;#xE9; de d&amp;#xE9;finir la taille de mon Drawable ! (setBounds).
  • - Mon canvas n&amp;#x2019;est pas dans un &amp;#xE9;tat acceptable? (canvas.translate(2000, 2000) ...) =&gt; NON
    - J&amp;#x2019;ai zapp&amp;#xE9; d&amp;#x2019;inclure ma vue dans le layout qui s&amp;#x2019;affiche =&gt; &amp;#xC7;a m&amp;#x2019;arrive de temps &amp;#xE0; autre ... trop souvent m&amp;#xEA;me :D ... mais cette fois j&amp;#x2019;ai bien fait attention et ce n&amp;#x2019;est pas &amp;#xE7;a !
    - La solution ??? J&amp;#x2019;ai oubli&amp;#xE9; de d&amp;#xE9;finir la taille de mon Drawable ! (setBounds).
  • - Mon canvas n&amp;#x2019;est pas dans un &amp;#xE9;tat acceptable? (canvas.translate(2000, 2000) ...) =&gt; NON
    - J&amp;#x2019;ai zapp&amp;#xE9; d&amp;#x2019;inclure ma vue dans le layout qui s&amp;#x2019;affiche =&gt; &amp;#xC7;a m&amp;#x2019;arrive de temps &amp;#xE0; autre ... trop souvent m&amp;#xEA;me :D ... mais cette fois j&amp;#x2019;ai bien fait attention et ce n&amp;#x2019;est pas &amp;#xE7;a !
    - La solution ??? J&amp;#x2019;ai oubli&amp;#xE9; de d&amp;#xE9;finir la taille de mon Drawable ! (setBounds).
  • - Mon canvas n&amp;#x2019;est pas dans un &amp;#xE9;tat acceptable? (canvas.translate(2000, 2000) ...) =&gt; NON
    - J&amp;#x2019;ai zapp&amp;#xE9; d&amp;#x2019;inclure ma vue dans le layout qui s&amp;#x2019;affiche =&gt; &amp;#xC7;a m&amp;#x2019;arrive de temps &amp;#xE0; autre ... trop souvent m&amp;#xEA;me :D ... mais cette fois j&amp;#x2019;ai bien fait attention et ce n&amp;#x2019;est pas &amp;#xE7;a !
    - La solution ??? J&amp;#x2019;ai oubli&amp;#xE9; de d&amp;#xE9;finir la taille de mon Drawable ! (setBounds).
  • Commen&amp;#xE7;ons donc par d&amp;#xE9;finir quelques fonctionnalit&amp;#xE9;s inh&amp;#xE9;rentes aux Drawables :
    - Un Drawable, comme nous venons de le voir, a un emplacement et une taille d&amp;#xE9;finie par setBounds(). Il est &amp;#xE9;galement possible de d&amp;#xE9;terminer la taille &amp;#xAB;pr&amp;#xE9;f&amp;#xE9;r&amp;#xE9;e&amp;#xBB; du Drawable ainsi que &amp;#xE7;a taille minimale (Dans le cas d&amp;#x2019;un Bitmap/NinePatchDrawable c&amp;#x2019;est &amp;#xE9;quivalent)
    - Un Drawable peut &amp;#xE9;galement avoir un &amp;#xE9;tat courant et un niveau courant : cette fonctionnalit&amp;#xE9; n&amp;#x2019;est pas utilis&amp;#xE9;e dans l&amp;#x2019;int&amp;#xE9;gralit&amp;#xE9; des Drawables mais nous y reviendront dans la suite de cette pr&amp;#xE9;sentation.
    - Enfin, puisque les Drawables sont des entit&amp;#xE9;s graphiques, il est possible de modifier leur aspect lors du rendu comme le niveau de transparence, tramage ou non, etc.
  • - Pour s&amp;#x2019;animer, bouger, tourner, etc .. en clair changer, un Drawable doit pouvoir se redessiner. Or cette fonction est propre &amp;#xE0; la classe View (m&amp;#xE9;thode invalidate() et postInvalidate()). C&amp;#x2019;est donc l&amp;#x2019;utilit&amp;#xE9; de la m&amp;#xE9;thode invalidateDrawable() de Drawable.Callback.

    - Un Drawable dispose d&amp;#x2019;une r&amp;#xE9;f&amp;#xE9;rence sur une classe qui impl&amp;#xE9;mente Drawable.Callback. Il s&amp;#x2019;av&amp;#xE8;re que View impl&amp;#xE9;mente cette derni&amp;#xE8;re et fournit une m&amp;#xE9;thode d&amp;#x2019;aide : verifyDrawable(Drawable). Lorsqu&amp;#x2019;un Drawable &amp;#xAB;veut&amp;#xBB; s&amp;#x2019;invalider, il appelle invalidateDrawable(). La classe View impl&amp;#xE9;mente cette m&amp;#xE9;thode et effectue un invalidate() ssi verifyDrawable(d) renvoie vrai.
  • Le code c&amp;#x2019;est cool mais Android apporte une fonctionnalit&amp;#xE9; tr&amp;#xE8;s int&amp;#xE9;ressante qui consiste &amp;#xE0; d&amp;#xE9;finir par des fichiers XML toutes entit&amp;#xE9;s relative &amp;#xE0; l&amp;#x2019;UI. Les Drawables ne d&amp;#xE9;rogent pas &amp;#xE0; la r&amp;#xE8;gles!
  • Le code c&amp;#x2019;est cool mais Android apporte une fonctionnalit&amp;#xE9; tr&amp;#xE8;s int&amp;#xE9;ressante qui consiste &amp;#xE0; d&amp;#xE9;finir par des fichiers XML toutes entit&amp;#xE9;s relative &amp;#xE0; l&amp;#x2019;UI. Les Drawables ne d&amp;#xE9;rogent pas &amp;#xE0; la r&amp;#xE8;gles!
  • C&amp;#x2019;est inutile de faire &amp;#xE7;a parce que &amp;#xE7;a revient &amp;#xE0; faire un getDrawable(R.drawable.pattern) (mode par d&amp;#xE9;faut).
  • C&amp;#x2019;est inutile de faire &amp;#xE7;a parce que &amp;#xE7;a revient &amp;#xE0; faire un getDrawable(R.drawable.pattern) (mode par d&amp;#xE9;faut).
  • En mode &amp;#xAB; clamp &amp;#xBB;, les ar&amp;#xEA;tes droites et inf&amp;#xE9;rieures sont r&amp;#xE9;p&amp;#xE9;t&amp;#xE9;es pour remplir l&amp;#x2019;int&amp;#xE9;gralit&amp;#xE9; des &amp;#xAB;bounds&amp;#xBB;
  • Via XML il sert &amp;#xE0; rien .... :(
  • Via XML il sert &amp;#xE0; rien .... :(
  • Via XML il sert &amp;#xE0; rien .... :(
  • Via XML il sert &amp;#xE0; rien .... :(
  • Via XML il sert &amp;#xE0; rien .... :(
  • Via XML il sert &amp;#xE0; rien .... :(
  • C&amp;#x2019;est l&amp;#x2019;impl&amp;#xE9;mentation la plus aboutie que je connaissent des image &amp;#xE9;tirables :
    - sous iPhone : sym&amp;#xE9;trique et sur les ar&amp;#xEA;tes ..
    - en CSS3 : sur les ar&amp;#xEA;tes

    En Android ; c&amp;#x2019;est des N-patchs ! (zones &amp;#xE9;tirables multiples) et proportionnellement &amp;#xE9;tir&amp;#xE9;es. Surtout : l&amp;#x2019;information des zones &amp;#xE9;tirables et du padding et incluses DANS l&amp;#x2019;image ! C&amp;#x2019;est parfait alors que sous iPhone, cette information est dans le code ...
  • Montrer que le splash screen de MetroMap Paris peut &amp;#xEA;tre r&amp;#xE9;alis&amp;#xE9; &amp;#xE0; l&amp;#x2019;aide d&amp;#x2019;un unique FrameLayout !!!! (pouss&amp;#xE9; &amp;#xE0; l&amp;#x2019;extr&amp;#xEA;me)
  • Bien pr&amp;#xE9;ciser que j&amp;#x2019;ai fait celui l&amp;#xE0; dans la pr&amp;#xE9;cipitation et donc que le syst&amp;#xE8;me est loin d&amp;#x2019;&amp;#xEA;tre parfait ... Mais l&amp;#x2019;id&amp;#xE9;e est l&amp;#xE0; :)
  • - En savoir plus : sur le m&amp;#xEA;me sujet, vous pourrez d&amp;#xE9;couvrir un article expliquant comment cr&amp;#xE9;er ses propres boutons (StateListDrawable) et un autre sur les nine-patch (NinePatchDrawable). Beaucoup d&amp;#x2019;articles divers pour rendre vos UI rapides et belles : pour r&amp;#xE9;sumer faire de vos UI un succ&amp;#xE8;s !
    - Code source :
    - Avoir acc&amp;#xE8;s au code source d&amp;#x2019;Android est une merveilleuse opportunit&amp;#xE9; de bien s&amp;#x2019;approprier la plateforme. N&amp;#x2019;h&amp;#xE9;sitez pas &amp;#xE0; faire un tour dedans ... je vais m&amp;#xEA;me faire suivre la bonne parole des Googlers : Aidez les en soumettant vos patchs !
    - GitHub : le code source de l&amp;#x2019;application de d&amp;#xE9;monstration est disponible sur ce site.
  • Voil&amp;#xE0; ! C&amp;#x2019;est fini ... j&amp;#x2019;esp&amp;#xE8;re avoir r&amp;#xE9;pondu &amp;#xE0; vos attentes et surtout vous avoir montrer de nouvelles facettes inexploit&amp;#xE9;es du syst&amp;#xE8;me Android. H&amp;#x2019;h&amp;#xE9;sitez pas &amp;#xE0; poser vos questions !
    Bien s&amp;#xFB;r je serais disponible par la suite si vous le souhaitez pour r&amp;#xE9;pondre &amp;#xE0; des questions dans un mode plus &amp;#xAB; priv&amp;#xE9; &amp;#xBB;.
  • Tour D Horizon Des Drawables

    1. 1. Tour d’horizon des Drawables Dessiner c’est gagner !!!
    2. 2. Note générale 2
    3. 3. Introduction Le B.A.-ba des Drawables 3
    4. 4. Introduction C’est quoi un Drawable? 4
    5. 5. Introduction C’est quoi un Drawable? • Entité qui peut être « dessinée » • Une forme, un gradient, une image, un 9- patch, etc. 4
    6. 6. Introduction C’est quoi un Drawable? • Entité qui peut être « dessinée » • Une forme, un gradient, une image, un 9- patch, etc. • Composant essentiel du SDK Android 4
    7. 7. Introduction C’est quoi un Drawable? • Entité qui peut être « dessinée » • Une forme, un gradient, une image, un 9- patch, etc. • Composant essentiel du SDK Android • Instanciable en Java ou XML 4
    8. 8. Introduction Pourquoi est-ce si important? • Gestion du multi-device facilitée • Abstraction de ce qui est « dessinable » • Plus simple d’utilisation • Plus évolué que les Bitmaps ! • Possibilité de modifier des widgets sans les étendre 5
    9. 9. Introduction Architecture 6
    10. 10. Introduction Architecture Drawable 6
    11. 11. Introduction Architecture Drawable ColorDrawable GradientDrawable 6
    12. 12. Introduction Architecture Drawable ColorDrawable GradientDrawable LayerDrawable 6
    13. 13. « How-to » basique Hello Drawables ! 7
    14. 14. « How-to » basique Premier essai private Drawable mDrawable; public DrawableView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); mDrawable = context.getResources().getDrawable(R.drawable.my_drawable); } public void onDraw(Canvas canvas) { super.onDraw(canvas); mDrawable.draw(canvas); } 8
    15. 15. « How-to » basique Gné ? Ça marche pas ! 9
    16. 16. « How-to » basique Gné ? Ça marche pas ! • Mon Canvas n’est pas dans un état « acceptable » ? 9
    17. 17. « How-to » basique Gné ? Ça marche pas ! • Mon Canvas n’est pas dans un état « acceptable » ? • J’ai oublié de mettre la vue dans mon layout ? 9
    18. 18. « How-to » basique Gné ? Ça marche pas ! • Mon Canvas n’est pas dans un état « acceptable » ? • J’ai oublié de mettre la vue dans mon layout ? • .... Je n’ai pas définit la taille de mon Drawable 9
    19. 19. « How-to » basique Gné ? Ça marche pas ! • Mon Canvas n’est pas dans un état « acceptable » ? • J’ai oublié de mettre la vue dans mon layout ? • .... Je n’ai pas définit la taille de mon Drawable • setBounds(), getIntrinsic[Width/Height]() 9
    20. 20. « How-to » basique La solution ! private Drawable mDrawable; public DrawableView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); mDrawable = context.getResources().getDrawable(R.drawable.my_drawable); mDrawable.setBounds(0, 0, mDrawable.getIntrinsicWidth(), mDrawable.getIntrinsicHeight()); } public void onDraw(Canvas canvas) { super.onDraw(canvas); mDrawable.draw(canvas); } 10
    21. 21. Les fonctionnalités Ça permet quoi les Drawables? 11
    22. 22. Quelques fonctionnalités Généralités • Emplacement / taille : • setBounds(), getIntrinsic[Width/Height] (), getMinimum[Width/Height](), etc. • Etat courant : • setState(), state_[pressed/focused/...], setLevel(), etc. • Affichage : setAlpha(), setDither(), ... 12
    23. 23. Quelques fonctionnalités Drawable.Callback • Un Drawable doit pouvoir « s’invalider » • Utilité de l’interface Drawable.Callback • View implémente Drawable.Callback • Méthode d’aide verifyDrawable() 13
    24. 24. Quelques fonctionnalités Drawable.Callback public class DrawableView extends View { private Drawable mDrawable; public DrawableView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); mDrawable = context.getResources().getDrawable(R.drawable.my_drawable); mDrawable.setBounds(0, 0, mDrawable.getIntrinsicWidth(), mDrawable.getIntrinsicHeight()); } @Override protected boolean verifyDrawable(Drawable who) { return who == mDrawable || super.verifyDrawable(who); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); mDrawable.draw(canvas); } } 14
    25. 25. Principe d’état constant Problématique private static final int OPAQUE = 255; private static final int TRANSLUCENT = 70; Book book = ...; TextView listItem = ...; listItem.setText(book.getTitle()); Drawable star = getContext().getResources().getDrawable(R.drawable.star); if (book.isFavorite()) { star.setAlpha(OPAQUE); } else { star.setAlpha(TRANSLUCENT); } Extrait de http://www.curious-creature.org/2009/05/02/drawable-mutations/ 15
    26. 26. Principe d’état constant Explication du phéomène • Android « factorise » les états des Drawables • Minimise l’empreinte mémoire 16
    27. 27. Principe d’état constant Explication du phéomène 17
    28. 28. Principe d’état constant Explication du phéomène Drawable Drawable 17
    29. 29. Principe d’état constant Explication du phéomène Drawable Drawable ConstantState 17
    30. 30. Principe d’état constant Explication du phéomène Drawable Drawable ConstantState 17
    31. 31. Principe d’état constant Résolution du « problème » • Pas de fonctionnalité « copy-on-write » • Utilisation de la méthode mutate() : • Copie de l’état constant • Mise du flag mMutated à true • Appel multiple à mutated() sans effet 18
    32. 32. Principe d’état constant Résolution du « problème » Drawable Drawable 19
    33. 33. Principe d’état constant Résolution du « problème » Muté Muté Drawable Drawable ConstantState ConstantState 19
    34. 34. Principe d’état constant Résolution du « problème » Muté Muté Drawable Drawable ConstantState ConstantState 19
    35. 35. Principe d’état constant Résolution du « problème » private static final int OPAQUE = 255; private static final int TRANSLUCENT = 70; Book book = ...; TextView listItem = ...; listItem.setText(book.getTitle()); Drawable star = getContext().getResources().getDrawable(R.drawable.star); if (book.isFavorite()) { star.mutate().setAlpha(OPAQUE); } else { star.mutate().setAlpha(TRANSLUCENT); } Extrait de http://www.curious-creature.org/2009/05/02/drawable-mutations/ 20
    36. 36. Instanciation Enfin les travaux pratiques ! 21
    37. 37. Instancier un drawable Le résultat voulu 22
    38. 38. Instancier un drawable Le résultat voulu 22
    39. 39. Instancier un drawable Deux possibilités : Java ... float density = getContext().getResources().getDisplayMetrics().density; // gradient from #4e525c to #31343c int[] colors = new int[] {Color.rgb(78, 82, 92), Color.rgb(49, 52, 60)}; GradientDrawable gradient = new GradientDrawable(Orientation.BOTTOM_TOP, colors); gradient.setShape(GradientDrawable.OVAL); gradient.setStroke((int) (3 * density), Color.WHITE, 4 * density, 5 * density); 23
    40. 40. Instancier un drawable ... et XML <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <gradient android:startColor="#4e525c" android:endColor="#31343c" android:angle="90" /> <stroke android:width="3dip" android:color="#fff" android:dashWidth="4dip" android:dashGap="5dip" /> </shape> 24
    41. 41. Drawable Listing em o D Code disponible sur http://www.github.com/cyrilmottier/DrawablePresentation 25
    42. 42. BitmapDrawable • Très largement utilisé • Pourtant méconnu / mal connu • Souvent utilisé tel quel • context.getResources().getDrawable(R.drawable.image) (où image est un fichier de type png ou jpg) • Contrôles plus poussés disponibles • tileMode, gravity, etc. 26
    43. 43. BitmapDrawable android:tileMode <?xml version="1.0" encoding="utf-8"?> <bitmap xmlns:android="http:// schemas.android.com/apk/res/android" android:src="@drawable/pattern" /> 27
    44. 44. BitmapDrawable android:tileMode <?xml version="1.0" encoding="utf-8"?> <bitmap xmlns:android="http:// schemas.android.com/apk/res/android" android:src="@drawable/pattern" /> 27
    45. 45. BitmapDrawable android:tileMode <?xml version="1.0" encoding="utf-8"?> <bitmap xmlns:android="http:// schemas.android.com/apk/res/android" android:src="@drawable/pattern" android:tileMode="clamp" /> 28
    46. 46. BitmapDrawable android:tileMode <?xml version="1.0" encoding="utf-8"?> <bitmap xmlns:android="http:// schemas.android.com/apk/res/android" android:src="@drawable/pattern" android:tileMode="repeat" /> 29
    47. 47. BitmapDrawable android:tileMode <?xml version="1.0" encoding="utf-8"?> <bitmap xmlns:android="http:// schemas.android.com/apk/res/android" android:src="@drawable/pattern" android:tileMode="mirror" /> 30
    48. 48. BitmapDrawable android:gravity <?xml version="1.0" encoding="utf-8"?> <bitmap xmlns:android="http:// schemas.android.com/apk/res/android" android:src="@drawable/pattern" android:gravity="center" /> 31
    49. 49. BitmapDrawable android:gravity <?xml version="1.0" encoding="utf-8"?> <bitmap xmlns:android="http:// schemas.android.com/apk/res/android" android:src="@drawable/pattern" android:gravity="top|right" /> 32
    50. 50. NinePatchDrawable Mon préféré héhé ! 33
    51. 51. NinePatchDrawable Mon préféré héhé ! • Instanciation simple : • getDrawable(R.drawable.image) (image ayant l’extension .9.png) • Concept d’image « étirable » 33
    52. 52. NinePatchDrawable Mon préféré héhé ! 34
    53. 53. StateListDrawable • Présent partout : • Boutons • Checkboxes • Changement de l’apparence fonction de l’état courant 35
    54. 54. Dernière démos On finit en beauté ? 36
    55. 55. A quoi ça sert tout ça? Flatten Hierarchy em o D Code disponible sur http://www.github.com/cyrilmottier/DrawablePresentation 37
    56. 56. Créer son Drawable • Étendre de Drawable (ou une classe fille) • Définir les méthodes abstraites • setAlpha, setColorFilter, draw, etc. • Redéfinir si nécessaire 38
    57. 57. RemoteDrawable em o D Code disponible sur http://www.github.com/cyrilmottier/DrawablePresentation 39
    58. 58. Références • En savoir plus : • http://android.cyrilmottier.com • Code source : • http://android.git.kernel.org/ • http://github.com/cyrilmottier 40
    59. 59. Des questions ? N’hésitez pas ! 41

    ×