Android Wear
Créez votre propre Watchface
Florent Champigny
Xebia
AndroidManifest
Déclaré en tant que Service de Wallpaper
permission : android.permission.BIND_WALLPAPER
intent-filter : an...
AndroidManifest
Utilise les permissions
com.google.android.permission.PROVIDE_BACKGROUND
android.permission.WAKE_LOCK
AndroidManifest
Déclare les meta-datas
android.service.wallpaper -> xml contenant <wallpaper/>
com.google.android.wearable...
CanvasWatchFaceService
public class MyWatchFaceService extends CanvasWatchFaceService {
@Override public Engine onCreateEn...
CanvasWatchFaceService.Engine
void onCreate(SurfaceHolder holder);
void onDestroy();
void onSurfaceChanged(SurfaceHolder h...
Ambiant mode
Ambiant
Canvas - Paint
Color
StrokeWidth
AntiAlias
StrokeCap
StrokeJoin
ShadowLayer
Style
Canvas - Paint
Color
StrokeWidth
AntiAlias
StrokeCap
StrokeJoin
ShadowLayer
Style
(Épaisseur du pinceau)
Canvas - Paint
Color
StrokeWidth
AntiAlias
StrokeCap
StrokeJoin
ShadowLayer
Style
(Lissage de la texture)
Canvas - Paint
Color
StrokeWidth
AntiAlias
StrokeCap
StrokeJoin
ShadowLayer
Style
BUTT
ROUND
SQUARE
Canvas - Paint
Color
StrokeWidth
AntiAlias
StrokeCap
StrokeJoin
ShadowLayer
Style
MITER ROUND BEVEL
Canvas - Paint
Color
StrokeWidth
AntiAlias
StrokeCap
StrokeJoin
ShadowLayer
Style
FILL STROKE STROKE & FILL
Canvas
canvas.drawBitmap( bitmap, left, top, paint);
canvas.drawRect(left, top, right, bottom, paint);
…
canvas.drawRoundR...
Canvas
canvas.save();
canvas.restore();
canvas.rotate(angle, centerX, centerY);
canvas.translate(dx, dy);
canvas.scale(sx,...
Canvas
canvas.drawBitmap(background,0,0,p);
canvas.save();
canvas.rotate(90, 0.5f, 0.5f);
canvas.drawRect(0.5f ,0.5f, 1f, ...
Canvas
canvas.drawBitmap(background,0,0,p);
canvas.save();
canvas.rotate(90, 0.5f, 0.5f);
canvas.drawRect(0.45f ,0.5f, 0.5...
Canvas
canvas.drawBitmap(background,0,0,p);
canvas.save();
canvas.rotate(90, 0.5f, 0.5f);
canvas.drawRect(0.45f ,0.5f, 0.5...
Canvas
canvas.drawBitmap(background,0,0,p);
canvas.save();
canvas.rotate(90, 0.5f, 0.5f);
canvas.drawRect(0.45f ,0.5f, 0.5...
Canvas
canvas.drawBitmap(background,0,0,p);
canvas.save();
canvas.rotate(90, 0.5f, 0.5f);
canvas.drawRect(0.45f ,0.5f, 0.5...
Canvas
canvas.drawBitmap(background,0,0,p);
canvas.save();
canvas.rotate(90, 0.5f, 0.5f);
canvas.drawRect(0.45f ,0.5f, 0.5...
Canvas
canvas.drawBitmap(background,0,0,p);
canvas.save();
canvas.rotate(90, 0.5f, 0.5f);
canvas.drawRect(0.45f ,0.5f, 0.5...
Prochain SlideShare
Chargement dans…5
×

Android wear - watch face

3 800 vues

Publié le

Créer sa propre watchface Android Wear

https://github.com/florent37/WatchFaceSample

Publié dans : Périphériques & matériel
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
3 800
Sur SlideShare
0
Issues des intégrations
0
Intégrations
20
Actions
Partages
0
Téléchargements
3
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Android wear - watch face

  1. 1. Android Wear Créez votre propre Watchface Florent Champigny Xebia
  2. 2. AndroidManifest Déclaré en tant que Service de Wallpaper permission : android.permission.BIND_WALLPAPER intent-filter : android.service.wallpaper.WallpaperService
  3. 3. AndroidManifest Utilise les permissions com.google.android.permission.PROVIDE_BACKGROUND android.permission.WAKE_LOCK
  4. 4. AndroidManifest Déclare les meta-datas android.service.wallpaper -> xml contenant <wallpaper/> com.google.android.wearable.watchface.preview -> Drawable com.google.android.wearable.watchface.preview_circular -> Drawable
  5. 5. CanvasWatchFaceService public class MyWatchFaceService extends CanvasWatchFaceService { @Override public Engine onCreateEngine() { } }
  6. 6. CanvasWatchFaceService.Engine void onCreate(SurfaceHolder holder); void onDestroy(); void onSurfaceChanged(SurfaceHolder holder, int format, int width, int height); void onTimeTick(); void onVisibilityChanged(boolean visible); void onDraw(Canvas canvas, Rect bounds); void onAmbientModeChanged(boolean inAmbientMode);
  7. 7. Ambiant mode Ambiant
  8. 8. Canvas - Paint Color StrokeWidth AntiAlias StrokeCap StrokeJoin ShadowLayer Style
  9. 9. Canvas - Paint Color StrokeWidth AntiAlias StrokeCap StrokeJoin ShadowLayer Style (Épaisseur du pinceau)
  10. 10. Canvas - Paint Color StrokeWidth AntiAlias StrokeCap StrokeJoin ShadowLayer Style (Lissage de la texture)
  11. 11. Canvas - Paint Color StrokeWidth AntiAlias StrokeCap StrokeJoin ShadowLayer Style BUTT ROUND SQUARE
  12. 12. Canvas - Paint Color StrokeWidth AntiAlias StrokeCap StrokeJoin ShadowLayer Style MITER ROUND BEVEL
  13. 13. Canvas - Paint Color StrokeWidth AntiAlias StrokeCap StrokeJoin ShadowLayer Style FILL STROKE STROKE & FILL
  14. 14. Canvas canvas.drawBitmap( bitmap, left, top, paint); canvas.drawRect(left, top, right, bottom, paint); … canvas.drawRoundRect(left, top, right, bottom, rx, ry, paint); canvas.drawLine(startX, startY, stopX, stopY, paint); canvas.drawOval(rect , paint); canvas.drawCircle(centerX, centerY, radius, paint);
  15. 15. Canvas canvas.save(); canvas.restore(); canvas.rotate(angle, centerX, centerY); canvas.translate(dx, dy); canvas.scale(sx, sy);
  16. 16. Canvas canvas.drawBitmap(background,0,0,p); canvas.save(); canvas.rotate(90, 0.5f, 0.5f); canvas.drawRect(0.5f ,0.5f, 1f, 1f, p); canvas.restore(); 0 y 1 0 x 1
  17. 17. Canvas canvas.drawBitmap(background,0,0,p); canvas.save(); canvas.rotate(90, 0.5f, 0.5f); canvas.drawRect(0.45f ,0.5f, 0.55f, 1f, p); canvas.restore(); 0 y 1 0 x 1
  18. 18. Canvas canvas.drawBitmap(background,0,0,p); canvas.save(); canvas.rotate(90, 0.5f, 0.5f); canvas.drawRect(0.45f ,0.5f, 0.55f, 1f, p); canvas.restore(); 0 y 1 0 x 1
  19. 19. Canvas canvas.drawBitmap(background,0,0,p); canvas.save(); canvas.rotate(90, 0.5f, 0.5f); canvas.drawRect(0.45f ,0.5f, 0.55f, 1f, p); canvas.restore(); 0 y 1 0 x 1
  20. 20. Canvas canvas.drawBitmap(background,0,0,p); canvas.save(); canvas.rotate(90, 0.5f, 0.5f); canvas.drawRect(0.45f ,0.5f, 0.55f, 1f, p); canvas.restore(); 0 y 1 0 x 1
  21. 21. Canvas canvas.drawBitmap(background,0,0,p); canvas.save(); canvas.rotate(90, 0.5f, 0.5f); canvas.drawRect(0.45f ,0.5f, 0.55f, 1f, p); canvas.restore(); 0 y 1 0 x 1
  22. 22. Canvas canvas.drawBitmap(background,0,0,p); canvas.save(); canvas.rotate(90, 0.5f, 0.5f); canvas.drawRect(0.45f ,0.5f, 0.55f, 1f, p); canvas.restore(); 0 y 1 0 x 1

×