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 478 vues

Publié le

Publié dans : Technologie

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

×