Les fiches actives apparaissent dans la section actuelle de la chronologie et affichent des informations pertinentes à l'heure actuelle.
Les fiches actives sont idéales lorsque les utilisateurs sont activement impliqués dans une tâche, mais souhaitent consulter régulièrement des informations complémentaires dans Glass. Par exemple, ils peuvent vérifier le temps d'exécution toutes les quelques minutes ou contrôler un lecteur de musique lorsqu'ils souhaitent ignorer ou mettre en pause un titre.
Si c'est la première fois que vous développez pour Glass, commencez par lire le guide des tâches en cours. Ce document explique comment créer un Glassware complet avec une carte active, en respectant nos bonnes pratiques de conception.
Fonctionnement
Les fiches actives permettent de les conserver dans la section actuelle de la chronologie tant qu'elles sont pertinentes. Contrairement aux fiches statiques, les fiches actives ne sont pas conservées dans la chronologie, et les utilisateurs les suppriment explicitement une fois qu'ils n'en ont plus besoin.
Les utilisateurs démarrent généralement les cartes en direct en prononçant une commande vocale dans le menu principal, ce qui lance un service d'arrière-plan qui affiche la carte. Il peut ensuite appuyer sur la fiche pour afficher les éléments du menu pouvant agir sur la fiche (par exemple, la fermer de la chronologie).
Quand les utiliser
Les fiches actives sont conçues pour des tâches en cours auxquelles les utilisateurs peuvent accéder fréquemment, comme un écran qui indique l'état d'exécution d'une action, une carte animée pendant la navigation ou un lecteur de musique.
Un autre avantage des cartes actives est qu'elles sont adaptées aux interfaces utilisateur qui nécessitent une interaction en temps réel avec les utilisateurs, ainsi que des mises à jour de l'interface utilisateur en temps réel.
Lorsque vous utilisez des cartes en temps réel, la chronologie conserve le contrôle de l'expérience utilisateur. Par conséquent, lorsque vous balayez une carte active, la chronologie permet de la parcourir au lieu d'agir directement sur la carte en temps réel. De plus, l'écran s'allume et s'éteint en fonction du comportement du système (après cinq secondes sans interaction de l'utilisateur ou pendant un coup de tête).
Cependant, les cartes en temps réel ont accès à de nombreuses fonctionnalités identiques à celles d'une immersion, telles que les données des capteurs ou des données GPS. Cela vous permet toujours de créer des expériences attrayantes tout en permettant aux utilisateurs de rester dans la chronologie pour effectuer d'autres tâches, telles que la vérification des messages.
Architecture
Les fiches actives nécessitent un contexte de longue durée pour en être propriétaires pendant toute la durée de leur visibilité. Vous devez donc les gérer dans un service d'arrière-plan.
Vous pouvez ensuite publier et afficher une fiche active dès le démarrage du service ou en réponse à d'autres événements surveillés par le service. Vous pouvez afficher les cartes actives à faible fréquence (une fois toutes les quelques secondes) ou à haute fréquence (jusqu'à ce que le système puisse s'actualiser).
Lorsque la carte active n'est plus pertinente, détruisez le service pour arrêter l'affichage.
Affichage basse fréquence
L'affichage basse fréquence est limité à un petit ensemble de vues Android et ne peut mettre à jour l'écran qu'une fois toutes les quelques secondes.
Il s'agit d'un moyen simple de créer des cartes actives avec du contenu simple qui ne nécessite pas d'affichage constant ni de mises à jour fréquentes.
Rendu haute fréquence
Le rendu haute fréquence vous permet d'utiliser davantage d'options disponibles dans le framework graphique Android.
Le système vous fournit la surface de sauvegarde réelle de la carte active sur laquelle vous dessinez directement à l'aide de vues et de mises en page 2D, ou même de graphiques 3D complexes avec OpenGL.
Créer des cartes actives à basse fréquence
L'affichage basse fréquence nécessite une UI fournie par un objet RemoteViews, qui est compatible avec le sous-ensemble suivant de mises en page et de vues Android:
Utilisez le rendu basse fréquence dans les cas suivants:
- Vous n'avez besoin que des API Android View standards listées précédemment.
- Vous n'avez besoin que de mises à jour relativement peu fréquentes (quelques secondes entre les actualisations).
À noter :
- Un
PendingIntentdoit toujours être déclaré avecsetAction()pour les fiches actives. - Pour modifier une fiche après la publication, appelez
setViews()sur la fiche avec l'objet RemoteViews mis à jour avant de la publier à nouveau.
Pour créer des cartes actives à basse fréquence:
Créez la mise en page ou la vue que vous souhaitez afficher. L'exemple suivant montre la mise en page d'un match de basket-ball imaginaire:
<TextView android:id="@+id/home_team_name_text_view" android:layout_width="249px" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:gravity="center" android:textSize="40px" /> <TextView android:id="@+id/away_team_name_text_view" android:layout_width="249px" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:gravity="center" android:textSize="40px" /> <TextView android:id="@+id/away_score_text_view" android:layout_width="249px" android:layout_height="wrap_content" android:layout_alignLeft="@+id/away_team_name_text_view" android:layout_below="@+id/away_team_name_text_view" android:gravity="center" android:textSize="70px" /> <TextView android:id="@+id/home_score_text_view" android:layout_width="249px" android:layout_height="wrap_content" android:layout_alignLeft="@+id/home_team_name_text_view" android:layout_below="@+id/home_team_name_text_view" android:gravity="center" android:textSize="70px" /> <TextView android:id="@+id/footer_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" android:layout_marginBottom="33px" android:textSize="26px" />Créez un service qui gère la fiche active et affiche votre mise en page ou votre vue. Cet exemple de service met à jour le score d'un match de basket-ball imaginaire toutes les 30 secondes.
import java.util.Random; import com.google.android.glass.timeline.LiveCard; import com.google.android.glass.timeline.LiveCard.PublishMode; import android.app.PendingIntent; import android.app.Service; import android.content.Intent; import android.os.Handler; import android.os.IBinder; import android.widget.RemoteViews; public class LiveCardService extends Service { private static final String LIVE_CARD_TAG = "LiveCardDemo"; private LiveCard mLiveCard; private RemoteViews mLiveCardView; private int homeScore, awayScore; private Random mPointsGenerator; private final Handler mHandler = new Handler(); private final UpdateLiveCardRunnable mUpdateLiveCardRunnable = new UpdateLiveCardRunnable(); private static final long DELAY_MILLIS = 30000; @Override public void onCreate() { super.onCreate(); mPointsGenerator = new Random(); } @Override public int onStartCommand(Intent intent, int flags, int startId) { if (mLiveCard == null) { // Get an instance of a live card mLiveCard = new LiveCard(this, LIVE_CARD_TAG); // Inflate a layout into a remote view mLiveCardView = new RemoteViews(getPackageName(), R.layout.main_layout); // Set up initial RemoteViews values homeScore = 0; awayScore = 0; mLiveCardView.setTextViewText(R.id.home_team_name_text_view, getString(R.string.home_team)); mLiveCardView.setTextViewText(R.id.away_team_name_text_view, getString(R.string.away_team)); mLiveCardView.setTextViewText(R.id.footer_text, getString(R.string.game_quarter)); // Set up the live card's action with a pending intent // to show a menu when tapped Intent menuIntent = new Intent(this, MenuActivity.class); menuIntent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK | Intent.FLAG_ACTIVITY_CLEAR_TASK); mLiveCard.setAction(PendingIntent.getActivity( this, 0, menuIntent, 0)); // Publish the live card mLiveCard.publish(PublishMode.REVEAL); // Queue the update text runnable mHandler.post(mUpdateLiveCardRunnable); } return START_STICKY; } @Override public void onDestroy() { if (mLiveCard != null && mLiveCard.isPublished()) { //Stop the handler from queuing more Runnable jobs mUpdateLiveCardRunnable.setStop(true); mLiveCard.unpublish(); mLiveCard = null; } super.onDestroy(); } /** * Runnable that updates live card contents */ private class UpdateLiveCardRunnable implements Runnable{ private boolean mIsStopped = false; /* * Updates the card with a fake score every 30 seconds as a demonstration. * You also probably want to display something useful in your live card. * * If you are executing a long running task to get data to update a * live card(e.g, making a web call), do this in another thread or * AsyncTask. */ public void run(){ if(!isStopped()){ // Generate fake points. homeScore += mPointsGenerator.nextInt(3); awayScore += mPointsGenerator.nextInt(3); // Update the remote view with the new scores. mLiveCardView.setTextViewText(R.id.home_score_text_view, String.valueOf(homeScore)); mLiveCardView.setTextViewText(R.id.away_score_text_view, String.valueOf(awayScore)); // Always call setViews() to update the live card's RemoteViews. mLiveCard.setViews(mLiveCardView); // Queue another score update in 30 seconds. mHandler.postDelayed(mUpdateLiveCardRunnable, DELAY_MILLIS); } } public boolean isStopped() { return mIsStopped; } public void setStop(boolean isStopped) { this.mIsStopped = isStopped; } } @Override public IBinder onBind(Intent intent) { /* * If you need to set up interprocess communication * (activity to a service, for instance), return a binder object * so that the client can receive and modify data in this service. * * A typical use is to give a menu activity access to a binder object * if it is trying to change a setting that is managed by the live card * service. The menu activity in this sample does not require any * of these capabilities, so this just returns null. */ return null; } }
Créer des cartes en direct haute fréquence
Le rendu haute fréquence vous permet de dessiner directement sur la surface de sauvegarde de la carte active.
Utilisez le rendu haute fréquence dans les cas suivants:
- Vous devez mettre à jour la fiche active régulièrement (plusieurs fois par seconde).
- Vous avez besoin de flexibilité quant à ce que vous pouvez afficher. Le rendu haute fréquence vous permet d'utiliser les vues et les mises en page Android pour les graphismes OpenGL complexes.
À noter :
- Vous devez toujours créer un service d'arrière-plan à afficher à la surface de la carte en ligne.
- Les fiches actives doivent toujours avoir un
PendingIntentdéclaré avecsetAction(). - Utilisez
GLRenderersi vous affichez OpenGL etDirectRenderingCallbackdans tous les autres cas.
Utiliser DirectRenderingCallback
Pour créer des cartes actives avec des vues Android standards et une logique de dessin:
Créez une classe qui implémente
DirectRenderingCallback. L'implémentation des rappels dans ces interfaces vous permet d'effectuer des actions lors d'événements importants du cycle de vie de la surface de la carte active.L'exemple suivant crée un thread d'arrière-plan à afficher régulièrement, mais vous pouvez mettre à jour la fiche en réponse à des événements externes (par exemple, des mises à jour de capteurs ou de localisation).
public class LiveCardRenderer implements DirectRenderingCallback { // About 30 FPS. private static final long FRAME_TIME_MILLIS = 33; private SurfaceHolder mHolder; private boolean mPaused; private RenderThread mRenderThread; @Override public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) { // Update your views accordingly. } @Override public void surfaceCreated(SurfaceHolder holder) { mPaused = false; mHolder = holder; updateRendering(); } @Override public void surfaceDestroyed(SurfaceHolder holder) { mHolder = null; updateRendering(); } @Override public void renderingPaused(SurfaceHolder holder, boolean paused) { mPaused = paused; updateRendering(); } /** * Start or stop rendering according to the timeline state. */ private void updateRendering() { boolean shouldRender = (mHolder != null) && !mPaused; boolean rendering = mRenderThread != null; if (shouldRender != rendering) { if (shouldRender) { mRenderThread = new RenderThread(); mRenderThread.start(); } else { mRenderThread.quit(); mRenderThread = null; } } } /** * Draws the view in the SurfaceHolder's canvas. */ private void draw() { Canvas canvas; try { canvas = mHolder.lockCanvas(); } catch (Exception e) { return; } if (canvas != null) { // Draw on the canvas. mHolder.unlockCanvasAndPost(canvas); } } /** * Redraws in the background. */ private class RenderThread extends Thread { private boolean mShouldRun; /** * Initializes the background rendering thread. */ public RenderThread() { mShouldRun = true; } /** * Returns true if the rendering thread should continue to run. * * @return true if the rendering thread should continue to run */ private synchronized boolean shouldRun() { return mShouldRun; } /** * Requests that the rendering thread exit at the next opportunity. */ public synchronized void quit() { mShouldRun = false; } @Override public void run() { while (shouldRun()) { draw(); SystemClock.sleep(FRAME_TIME_MILLIS); } } } }Définissez une instance de votre
DirectRenderingCallbackcomme rappel deLiveCardSurfaceHolder. Cela permet à la fiche active de savoir quelle logique utiliser pour s'afficher elle-même.// Tag used to identify the LiveCard in debugging logs. private static final String LIVE_CARD_TAG = "my_card"; // Cached instance of the LiveCard created by the publishCard() method. private LiveCard mLiveCard; private void publishCard(Context context) { if (mLiveCard == null) { mLiveCard = new LiveCard(this, LIVE_CARD_TAG); // Enable direct rendering. mLiveCard.setDirectRenderingEnabled(true); mLiveCard.getSurfaceHolder().addCallback( new LiveCardRenderer()); Intent intent = new Intent(context, MenuActivity.class); mLiveCard.setAction(PendingIntent.getActivity(context, 0, intent, 0)); mLiveCard.publish(LiveCard.PublishMode.SILENT); } else { // Card is already published. return; } } private void unpublishCard(Context context) { if (mLiveCard != null) { mLiveCard.unpublish(); mLiveCard = null; } }
Utiliser OpenGL
Créez une classe qui implémente
GlRenderer. L'implémentation des rappels dans cette interface vous permet d'effectuer des actions lors d'événements importants du cycle de vie de la surface de la carte active. Dans cet exemple, un cube coloré pivote.import com.google.android.glass.timeline.GlRenderer; import android.opengl.GLES20; import android.opengl.Matrix; import android.os.SystemClock; import java.util.concurrent.TimeUnit; import javax.microedition.khronos.egl.EGLConfig; /** * Renders a 3D OpenGL Cube on a {@link LiveCard}. */ public class CubeRenderer implements GlRenderer { /** Rotation increment per frame. */ private static final float CUBE_ROTATION_INCREMENT = 0.6f; /** The refresh rate, in frames per second. */ private static final int REFRESH_RATE_FPS = 60; /** The duration, in milliseconds, of one frame. */ private static final float FRAME_TIME_MILLIS = TimeUnit.SECONDS.toMillis(1) / REFRESH_RATE_FPS; private final float[] mMVPMatrix; private final float[] mProjectionMatrix; private final float[] mViewMatrix; private final float[] mRotationMatrix; private final float[] mFinalMVPMatrix; private Cube mCube; private float mCubeRotation; private long mLastUpdateMillis; public CubeRenderer() { mMVPMatrix = new float[16]; mProjectionMatrix = new float[16]; mViewMatrix = new float[16]; mRotationMatrix = new float[16]; mFinalMVPMatrix = new float[16]; // Set the fixed camera position (View matrix). Matrix.setLookAtM(mViewMatrix, 0, 0.0f, 0.0f, -4.0f, 0.0f, 0.0f, 0.0f, 0.0f, 1.0f, 0.0f); } @Override public void onSurfaceCreated(EGLConfig config) { // Set the background frame color GLES20.glClearColor(0.0f, 0.0f, 0.0f, 1.0f); GLES20.glClearDepthf(1.0f); GLES20.glEnable(GLES20.GL_DEPTH_TEST); GLES20.glDepthFunc(GLES20.GL_LEQUAL); mCube = new Cube(); } @Override public void onSurfaceChanged(int width, int height) { float ratio = (float) width / height; GLES20.glViewport(0, 0, width, height); // This projection matrix is applied to object coordinates in the onDrawFrame() method. Matrix.frustumM(mProjectionMatrix, 0, -ratio, ratio, -1.0f, 1.0f, 3.0f, 7.0f); // modelView = projection x view Matrix.multiplyMM(mMVPMatrix, 0, mProjectionMatrix, 0, mViewMatrix, 0); } @Override public void onDrawFrame() { GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT | GLES20.GL_DEPTH_BUFFER_BIT); // Apply the rotation. Matrix.setRotateM(mRotationMatrix, 0, mCubeRotation, 1.0f, 1.0f, 1.0f); // Combine the rotation matrix with the projection and camera view Matrix.multiplyMM(mFinalMVPMatrix, 0, mMVPMatrix, 0, mRotationMatrix, 0); // Draw cube. mCube.draw(mFinalMVPMatrix); updateCubeRotation(); } /** Updates the cube rotation. */ private void updateCubeRotation() { if (mLastUpdateMillis != 0) { float factor = (SystemClock.elapsedRealtime() - mLastUpdateMillis) / FRAME_TIME_MILLIS; mCubeRotation += CUBE_ROTATION_INCREMENT * factor; } mLastUpdateMillis = SystemClock.elapsedRealtime(); } }Créez un service qui gère la carte active et définit la classe
CubeRenderercomme moteur de rendu de la carte active.import com.google.android.glass.timeline.LiveCard; import com.google.android.glass.timeline.LiveCard.PublishMode; import android.app.PendingIntent; import android.app.Service; import android.content.Intent; import android.os.IBinder; /** * Creates a {@link LiveCard} rendering a rotating 3D cube with OpenGL. */ public class OpenGlService extends Service { private static final String LIVE_CARD_TAG = "opengl"; private LiveCard mLiveCard; @Override public IBinder onBind(Intent intent) { return null; } @Override public int onStartCommand(Intent intent, int flags, int startId) { if (mLiveCard == null) { mLiveCard = new LiveCard(this, LIVE_CARD_TAG); mLiveCard.setRenderer(new CubeRenderer()); mLiveCard.setAction( PendingIntent.getActivity(this, 0, new Intent(this, MenuActivity.class), 0)); mLiveCard.publish(PublishMode.REVEAL); } else { mLiveCard.navigate(); } return START_STICKY; } @Override public void onDestroy() { if (mLiveCard != null && mLiveCard.isPublished()) { mLiveCard.unpublish(); mLiveCard = null; } super.onDestroy(); } }
import android.opengl.GLES20;
import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;
/**
* Renders a 3D Cube using OpenGL ES 2.0.
*
* For more information on how to use OpenGL ES 2.0 on Android, see the
* <a href="//developer.android.com/training/graphics/opengl/index.html">
* Displaying Graphics with OpenGL ES</a> developer guide.
*/
public class Cube {
/** Cube vertices */
private static final float VERTICES[] = {
-0.5f, -0.5f, -0.5f,
0.5f, -0.5f, -0.5f,
0.5f, 0.5f, -0.5f,
-0.5f, 0.5f, -0.5f,
-0.5f, -0.5f, 0.5f,
0.5f, -0.5f, 0.5f,
0.5f, 0.5f, 0.5f,
-0.5f, 0.5f, 0.5f
};
/** Vertex colors. */
private static final float COLORS[] = {
0.0f, 1.0f, 1.0f, 1.0f,
1.0f, 0.0f, 0.0f, 1.0f,
1.0f, 1.0f, 0.0f, 1.0f,
0.0f, 1.0f, 0.0f, 1.0f,
0.0f, 0.0f, 1.0f, 1.0f,
1.0f, 0.0f, 1.0f, 1.0f,
1.0f, 1.0f, 1.0f, 1.0f,
0.0f, 1.0f, 1.0f, 1.0f,
};
/** Order to draw vertices as triangles. */
private static final byte INDICES[] = {
0, 1, 3, 3, 1, 2, // Front face.
0, 1, 4, 4, 5, 1, // Bottom face.
1, 2, 5, 5, 6, 2, // Right face.
2, 3, 6, 6, 7, 3, // Top face.
3, 7, 4, 4, 3, 0, // Left face.
4, 5, 7, 7, 6, 5, // Rear face.
};
/** Number of coordinates per vertex in {@link VERTICES}. */
private static final int COORDS_PER_VERTEX = 3;
/** Number of values per colors in {@link COLORS}. */
private static final int VALUES_PER_COLOR = 4;
/** Vertex size in bytes. */
private final int VERTEX_STRIDE = COORDS_PER_VERTEX * 4;
/** Color size in bytes. */
private final int COLOR_STRIDE = VALUES_PER_COLOR * 4;
/** Shader code for the vertex. */
private static final String VERTEX_SHADER_CODE =
"uniform mat4 uMVPMatrix;" +
"attribute vec4 vPosition;" +
"attribute vec4 vColor;" +
"varying vec4 _vColor;" +
"void main() {" +
" _vColor = vColor;" +
" gl_Position = uMVPMatrix * vPosition;" +
"}";
/** Shader code for the fragment. */
private static final String FRAGMENT_SHADER_CODE =
"precision mediump float;" +
"varying vec4 _vColor;" +
"void main() {" +
" gl_FragColor = _vColor;" +
"}";
private final FloatBuffer mVertexBuffer;
private final FloatBuffer mColorBuffer;
private final ByteBuffer mIndexBuffer;
private final int mProgram;
private final int mPositionHandle;
private final int mColorHandle;
private final int mMVPMatrixHandle;
public Cube() {
ByteBuffer byteBuffer = ByteBuffer.allocateDirect(VERTICES.length * 4);
byteBuffer.order(ByteOrder.nativeOrder());
mVertexBuffer = byteBuffer.asFloatBuffer();
mVertexBuffer.put(VERTICES);
mVertexBuffer.position(0);
byteBuffer = ByteBuffer.allocateDirect(COLORS.length * 4);
byteBuffer.order(ByteOrder.nativeOrder());
mColorBuffer = byteBuffer.asFloatBuffer();
mColorBuffer.put(COLORS);
mColorBuffer.position(0);
mIndexBuffer = ByteBuffer.allocateDirect(INDICES.length);
mIndexBuffer.put(INDICES);
mIndexBuffer.position(0);
mProgram = GLES20.glCreateProgram();
GLES20.glAttachShader(mProgram, loadShader(GLES20.GL_VERTEX_SHADER, VERTEX_SHADER_CODE));
GLES20.glAttachShader(
mProgram, loadShader(GLES20.GL_FRAGMENT_SHADER, FRAGMENT_SHADER_CODE));
GLES20.glLinkProgram(mProgram);
mPositionHandle = GLES20.glGetAttribLocation(mProgram, "vPosition");
mColorHandle = GLES20.glGetAttribLocation(mProgram, "vColor");
mMVPMatrixHandle = GLES20.glGetUniformLocation(mProgram, "uMVPMatrix");
}
/**
* Encapsulates the OpenGL ES instructions for drawing this shape.
*
* @param mvpMatrix The Model View Project matrix in which to draw this shape
*/
public void draw(float[] mvpMatrix) {
// Add program to OpenGL environment.
GLES20.glUseProgram(mProgram);
// Prepare the cube coordinate data.
GLES20.glEnableVertexAttribArray(mPositionHandle);
GLES20.glVertexAttribPointer(
mPositionHandle, 3, GLES20.GL_FLOAT, false, VERTEX_STRIDE, mVertexBuffer);
// Prepare the cube color data.
GLES20.glEnableVertexAttribArray(mColorHandle);
GLES20.glVertexAttribPointer(
mColorHandle, 4, GLES20.GL_FLOAT, false, COLOR_STRIDE, mColorBuffer);
// Apply the projection and view transformation.
GLES20.glUniformMatrix4fv(mMVPMatrixHandle, 1, false, mvpMatrix, 0);
// Draw the cube.
GLES20.glDrawElements(
GLES20.GL_TRIANGLES, INDICES.length, GLES20.GL_UNSIGNED_BYTE, mIndexBuffer);
// Disable vertex arrays.
GLES20.glDisableVertexAttribArray(mPositionHandle);
GLES20.glDisableVertexAttribArray(mColorHandle);
}
/** Loads the provided shader in the program. */
private static int loadShader(int type, String shaderCode){
int shader = GLES20.glCreateShader(type);
GLES20.glShaderSource(shader, shaderCode);
GLES20.glCompileShader(shader);
return shader;
}
}
Placer le curseur sur une carte active
Lorsque vous publiez une fiche active avec LiveCard.publish(), vous lui transmettez un paramètre pour déterminer si elle doit être ciblée immédiatement ou non.
Pour que la chronologie accède à la fiche immédiatement après la publication, utilisez LiveCard.PublishMode.REVEAL.
Pour publier la fiche en mode silencieux et encourager les utilisateurs à y accéder par eux-mêmes, utilisez LiveCard.PublishMode.SILENT.
En outre, la méthode LiveCard.navigate() vous permet d'accéder à la fiche une fois qu'elle a été publiée. Par exemple, si les utilisateurs tentent de lancer votre carte en direct à partir du menu vocal principal et que celle-ci a déjà démarré, vous pouvez passer à la carte active avec cette méthode.
Créer et afficher un menu
Les cartes actives ne peuvent pas afficher leur propre système de menu. Vous devez donc créer une activité afin d'afficher un menu pour la carte active.
L'activité du menu peut alors contenir des éléments permettant d'arrêter la fiche en direct, de lancer une immersion ou de réaliser toute autre action que vous souhaitez effectuer. Vous pouvez également ajouter des activités de paramétrage système, telles que le contrôle du volume, en tant qu'élément de menu. Pour en savoir plus, consultez la section Paramètres de démarrage.
Créer des ressources de menu
La création de ressources de menu est la même que sur la plate-forme Android, mais suivez ces consignes pour Glass:
- Pour chaque élément de menu, fournissez une icône de 50 × 50 pixels. L'icône de menu doit être blanche sur un fond transparent. Consultez les icônes des éléments du menu Glass pour obtenir un exemple ou les télécharger pour votre usage personnel.
- Utilisez un nom court qui décrit l'action, en majuscule au début de chaque mot. Un verbe à l'impératif fonctionne bien (par exemple, Partager ou Répondre à tous).
- Les Google Glass n'affichent pas les cartes actives sans élément de menu. Au minimum, fournissez un élément de menu Stop (Arrêter) afin que les utilisateurs puissent supprimer la carte active de la chronologie.
Le widget CheckBox n'est pas compatible.
<menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/menu_item_1" android:title="@string/Menu_Item_1" <!-- must have "Stop" menu item --> android:icon="@drawable/menu_item_1_icon" /> <!-- white on transparent icon --> </menu>
Créer une activité pour gérer les rappels de menu
Vous devez définir une activité de menu que votre carte active appelle lorsque les utilisateurs appuient dessus.
Ignorez les méthodes de rappel Activity suivantes pour créer, afficher et fermer correctement les menus dans votre activité de menu:
onCreateOptionsMenu()gonfle la ressource de menu XML.onAttachedToWindow()affiche le menu lorsque l'activité est active.onPrepareOptionsMenu()affiche ou masque les éléments de menu si nécessaire. Par exemple, vous pouvez afficher différents éléments de menu en fonction de ce que font les utilisateurs. Par exemple, vous pouvez afficher différents éléments de menu en fonction de certaines données contextuelles.onOptionsItemSelected()gère la sélection des utilisateurs.onOptionsMenuClosed()pour terminer l'activité afin qu'elle n'apparaisse plus sur la carte active.
Vous devez terminer l'activité ici pour qu'elle soit correctement terminée lorsque le menu est fermé en effectuant une sélection ou en balayant l'écran vers le bas.
/**
* Activity showing the options menu.
*/
public class MenuActivity extends Activity {
@Override
public void onAttachedToWindow() {
super.onAttachedToWindow();
openOptionsMenu();
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.stopwatch, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle item selection.
switch (item.getItemId()) {
case R.id.stop:
stopService(new Intent(this, StopwatchService.class));
return true;
default:
return super.onOptionsItemSelected(item);
}
}
@Override
public void onOptionsMenuClosed(Menu menu) {
// Nothing else to do, closing the activity.
finish();
}
}
Rendre l'activité du menu transparente
Pour être cohérent avec le style Glass, rendez l'activité du menu translucide afin que la carte active reste visible sous le menu:
Créez un fichier
res/values/styles.xmlet déclarez un style qui rend l'arrière-plan de l'activité transparent:<resources> <style name="MenuTheme" parent="@android:style/Theme.DeviceDefault"> <item name="android:windowBackground">@android:color/transparent</item> <item name="android:colorBackgroundCacheHint">@null</item> <item name="android:windowIsTranslucent">true</item> <item name="android:windowAnimationStyle">@null</item> </style> </resources>Dans votre fichier
AndroidManifest.xml, attribuez le thème à l'activité de menu:<?xml version="1.0" encoding="utf-8"?> <manifest ... > ... <application ... > ... <activity android:name=".MenuActivity" android:theme="@style/MenuTheme" ...> </activity> </application> </manifest>
Afficher le menu
Fournissez un PendingIntent pour l'action de la carte à l'aide de setAction(). L'intent en attente permet de démarrer l'activité du menu lorsque les utilisateurs appuient sur la carte:
Intent menuIntent = new Intent(this, MenuActivity.class);
mLiveCard.setAction(PendingIntent.getActivity(this, 0, menuIntent, 0));
mLiveCard.publish(LiveCard.PublishMode.REVEAL); // or SILENT
Compatibilité avec les commandes vocales contextuelles
Indiquez que votre
MenuActivityest compatible avec les commandes vocales contextuelles:// Initialize your LiveCard as usual. mLiveCard.setVoiceActionEnabled(true); mLiveCard.publish(LiveCard.PublishMode.REVEAL); // or SILENTModifiez votre
MenuActivitypour permettre l'appel via le flux vocal:/** * Activity showing the options menu. */ public class MenuActivity extends Activity { private boolean mFromLiveCardVoice; private boolean mIsFinishing; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); mFromLiveCardVoice = getIntent().getBooleanExtra(LiveCard.EXTRA_FROM_LIVECARD_VOICE, false); if (mFromLiveCardVoice) { // When activated by voice from a live card, enable voice commands. The menu // will automatically "jump" ahead to the items (skipping the guard phrase // that was already said at the live card). getWindow().requestFeature(WindowUtils.FEATURE_VOICE_COMMANDS); } } @Override public void onAttachedToWindow() { super.onAttachedToWindow(); if (!mFromLiveCardVoice) { openOptionsMenu(); } } @Override public boolean onCreatePanelMenu(int featureId, Menu menu) { if (isMyMenu(featureId)) { getMenuInflater().inflate(R.menu.stopwatch, menu); return true; } return super.onCreatePanelMenu(featureId, menu); } @Override public boolean onPreparePanel(int featureId, View view, Menu menu) { if (isMyMenu(featureId)) { // Don't reopen menu once we are finishing. This is necessary // since voice menus reopen themselves while in focus. return !mIsFinishing; } return super.onPreparePanel(featureId, view, menu); } @Override public boolean onMenuItemSelected(int featureId, MenuItem item) { if (isMyMenu(featureId)) { // Handle item selection. switch (item.getItemId()) { case R.id.stop_this: stopService(new Intent(this, StopwatchService.class)); return true; } } return super.onMenuItemSelected(featureId, item); } @Override public void onPanelClosed(int featureId, Menu menu) { super.onPanelClosed(featureId, menu); if (isMyMenu(featureId)) { // When the menu panel closes, either an item is selected from the menu or the // menu is dismissed by swiping down. Either way, we end the activity. isFinishing = true; finish(); } } /** * Returns {@code true} when the {@code featureId} belongs to the options menu or voice * menu that are controlled by this menu activity. */ private boolean isMyMenu(int featureId) { return featureId == Window.FEATURE_OPTIONS_PANEL || featureId == WindowUtils.FEATURE_VOICE_COMMANDS; } }
Pour en savoir plus, consultez le guide sur les commandes vocales contextuelles.
Utilitaires du menu
Quelques méthodes d'assistance sont disponibles pour modifier l'apparence et le comportement des menus. Pour en savoir plus, consultez MenuUtils.