Tour D Horizon Des Drawables

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 image, un 9- patch, etc. 4

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

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

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 modiﬁer des widgets sans les étendre 5

Introduction Architecture 6

Introduction Architecture Drawable 6

Introduction Architecture Drawable ColorDrawable GradientDrawable 6

Introduction Architecture Drawable ColorDrawable GradientDrawable LayerDrawable 6

« How-to » basique Hello Drawables ! 7

« 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

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

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

« 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

« 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éﬁnit la taille de mon Drawable 9

« 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éﬁnit la taille de mon Drawable • setBounds(), getIntrinsic[Width/Height]() 9

« 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

Les fonctionnalités Ça permet quoi les Drawables? 11

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. • Afﬁchage : setAlpha(), setDither(), ... 12

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

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

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

Principe d’état constant Explication du phéomène • Android « factorise » les états des Drawables • Minimise l’empreinte mémoire 16

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

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

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

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 ﬂag mMutated à true • Appel multiple à mutated() sans effet 18

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

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

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

Instanciation Enﬁn les travaux pratiques ! 21

Instancier un drawable Le résultat voulu 22

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

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

Drawable Listing em o D Code disponible sur http://www.github.com/cyrilmottier/DrawablePresentation 25

BitmapDrawable • Très largement utilisé • Pourtant méconnu / mal connu • Souvent utilisé tel quel • context.getResources().getDrawable(R.drawable.image) (où image est un ﬁchier de type png ou jpg) • Contrôles plus poussés disponibles • tileMode, gravity, etc. 26

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

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

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

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

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

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

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

NinePatchDrawable Mon préféré héhé ! • Instanciation simple : • getDrawable(R.drawable.image) (image ayant l’extension .9.png) • Concept d’image « étirable » 33

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

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

Dernière démos On ﬁnit en beauté ? 36

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

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

RemoteDrawable em o D Code disponible sur http://www.github.com/cyrilmottier/DrawablePresentation 39

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

Des questions ? N’hésitez pas ! 41

http://www.slideshare.net	44
https://twimg0-a.akamaihd.net	10
https://si0.twimg.com	2

Tour D Horizon Des Drawables

by Cyril Mottier

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 56

Statistics

Tour D Horizon Des Drawables Presentation Transcript