1. Tour d’horizon des
Drawables
Dessiner c’est gagner !!!

2. Note générale
2

3. Introduction
Le B.A.-ba des Drawables
3

4. Introduction
C’est quoi un Drawable?
4

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. 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. 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. 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. Introduction
Architecture
6

10. Introduction
Architecture
Drawable
6

11. Introduction
Architecture
Drawable
ColorDrawable GradientDrawable
6

12. Introduction
Architecture
Drawable
ColorDrawable GradientDrawable LayerDrawable
6

13. « How-to » basique
Hello Drawables !
7

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. « How-to » basique
Gné ? Ça marche pas !
9

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

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. « 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. « 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. « 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. Les fonctionnalités
Ça permet quoi les Drawables?
11

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. 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. 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. 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. Principe d’état constant
Explication du phéomène
• Android « factorise » les états des
Drawables
• Minimise l’empreinte mémoire
16

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

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

29. Principe d’état constant
Explication du phéomène
Drawable Drawable
ConstantState
17

30. Principe d’état constant
Explication du phéomène
Drawable Drawable
ConstantState
17

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. Principe d’état constant
Résolution du « problème »
Drawable Drawable
19

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

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

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. Instanciation
Enfin les travaux pratiques !
21

37. Instancier un drawable
Le résultat voulu
22

38. Instancier un drawable
Le résultat voulu
22

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. 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. Drawable Listing
em o
D
Code disponible sur
http://www.github.com/cyrilmottier/DrawablePresentation
25

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. 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. 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. 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. 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. 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. 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. 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. NinePatchDrawable
Mon préféré héhé !
33

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. NinePatchDrawable
Mon préféré héhé !
34

53. StateListDrawable
• Présent partout :
• Boutons
• Checkboxes
• Changement de l’apparence fonction
de l’état courant
35

54. Dernière démos
On finit en beauté ?
36

55. A quoi ça sert tout ça?
Flatten Hierarchy
em o
D
Code disponible sur
http://www.github.com/cyrilmottier/DrawablePresentation
37

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. RemoteDrawable
em o
D
Code disponible sur
http://www.github.com/cyrilmottier/DrawablePresentation
39

58. Références
• En savoir plus :
• http://android.cyrilmottier.com
• Code source :
• http://android.git.kernel.org/
• http://github.com/cyrilmottier
40

59. Des questions ?
N’hésitez pas !
41