Desarrolle esferas de reloj con la biblioteca estable de esferas de reloj Jetpack

Publicado por Alex Vanyo, ingeniero de relaciones con desarrolladores

Las caras de los relojes son una de las formas más visibles de expresarse en sus relojes inteligentes y son una de las mejores formas de mostrar su marca a sus usuarios.

Watch Face Studio de Samsung es una gran herramienta para crear esferas de reloj sin escribir ningún código. Para los desarrolladores que desean un control más preciso, presentamos recientemente la biblioteca Jetpack Watch Face, escrita desde cero en Kotlin.

La versión estable de la biblioteca Jetpack Watch Face incluye todas las características de la biblioteca de soporte para dispositivos portátiles y muchas características nuevas que facilitan la personalización en el reloj inteligente y la aplicación complementaria del sistema en dispositivos móviles, que incluyen:

• Diseño de esfera que se conserva tanto en el reloj como en el teléfono (sin necesidad de su propia base de datos o aplicación complementaria).
• Soporte para una interfaz de usuario de configuración de pantalla de reloj WYSIWYG en el teléfono.
• Bibliotecas separadas más pequeñas (que solo contienen lo que necesita).
• Mejoras de la batería mediante la promoción de buenos patrones de uso de la batería de fábrica, p. Ej. B. reducir automáticamente la velocidad de fotogramas interactivos cuando el nivel de la batería es bajo.
• Nuevas API de captura de pantalla para que los usuarios puedan obtener una vista previa de los cambios de la esfera del reloj en tiempo real tanto en el reloj como en el teléfono.

A continuación se muestra un ejemplo de cómo configurar una esfera de reloj por teléfono sin código escrito en el teléfono o para él.

Edite una esfera de reloj con la aplicación complementaria móvil Galaxy Wearable

Cuando utiliza la biblioteca de esferas del reloj Jetpack para guardar las opciones de configuración de la esfera del reloj, los valores se sincronizarán con la aplicación móvil complementaria. Esto significa que toda la comunicación entre dispositivos se gestiona por usted.

La aplicación móvil presenta automáticamente estas opciones al usuario en una interfaz sencilla e intuitiva, donde las cambia a las opciones más adecuadas a su estilo. También incluye vistas previas que se actualizan en tiempo real.

¡Sumérjase en la API con una descripción general de los componentes clave para crear una esfera de reloj personalizada!

Una subclase de WatchFaceService forma el punto de entrada para cada dial Jetpack. Implementando un WatchFaceService requiere Crea 3 objetos: A UserStyleSchema, a ComplicationSlotsManagery un WatchFace:

Diagrama con las 3 partes principales de un WatchFaceService

Estos 3 objetos se crean sobrescribiendo 3 métodos abstractos de. especificado WatchFaceService:

class CustomWatchFaceService : WatchFaceService() {

    /**
     * The specification of settings the watch face supports.
     * This is similar to a database schema.
     */
    override fun createUserStyleSchema(): UserStyleSchema = // ...

    /**
     * The complication slot configuration for the watchface.
     */
    override fun createComplicationSlotsManager(
        currentUserStyleRepository: CurrentUserStyleRepository
    ): ComplicationSlotsManager = // ...

    /**
     * The watch face itself, which includes the renderer for drawing.
     */ 
    override suspend fun createWatchFace(
        surfaceHolder: SurfaceHolder,
        watchState: WatchState,
        complicationSlotsManager: ComplicationSlotsManager,
        currentUserStyleRepository: CurrentUserStyleRepository
    ): WatchFace = // ...

}

Echemos un vistazo más de cerca a cada una de estas clases y algunas de las otras clases que la biblioteca crea en su nombre.

los UserStyleSchema define la fuente principal de información para una esfera de reloj Jetpack. los UserStyleSchema debe incluir una lista de todas las configuraciones de personalización disponibles para el usuario, así como información sobre qué hacen esas opciones y cuál es la opción predeterminada. Estas configuraciones pueden ser banderas booleanas, listas, áreas y más.

Al proporcionar este esquema, la biblioteca rastrea automáticamente los cambios en la configuración realizados por el usuario, ya sea a través de la aplicación móvil complementaria en un teléfono conectado o mediante los cambios realizados en el reloj inteligente en una actividad de editor personalizado.

    override fun createUserStyleSchema(): UserStyleSchema =
        UserStyleSchema(
            listOf(
                // Allows user to change the color styles of the watch face
                UserStyleSetting.ListUserStyleSetting(
                    UserStyleSetting.Id(COLOR_STYLE_SETTING),
                    // ...
                ),
                // Allows user to toggle on/off the hour pips (dashes around the outer edge of the watch
                UserStyleSetting.BooleanUserStyleSetting(
                    UserStyleSetting.Id(DRAW_HOUR_PIPS_STYLE_SETTING),
                    // ...
                ),
                // Allows user to change the length of the minute hand
                UserStyleSetting.DoubleRangeUserStyleSetting(
                    UserStyleSetting.Id(WATCH_HAND_LENGTH_STYLE_SETTING),
                    // ...
                )
            )
        )

El estilo de usuario actual se puede comprobar mediante el archivo. puede ser visto ​​CurrentUserStyleRepositoryque es generado por la biblioteca basada en el UserStyleSchema.

Te da un UserStyle eso es solo uno Map con claves basadas en la configuración definida en el esquema:

Mapa

Si las preferencias del usuario cambian, un MutableStateFlow de UserStyle emite las últimas opciones seleccionadas para todos los ajustes guardados en el UserStyleSchema.

currentUserStyleRepository.userStyle.collect { newUserStyle ->
    // Update configuration based on user style
}

Las complicaciones permiten que la esfera del reloj muestre información adicional de otras aplicaciones en el reloj, como: B. Eventos, datos de salud o del día.

los ComplicationSlotsManager define cuántas complicaciones admite una esfera de reloj y dónde se colocan en la pantalla. Para ayudar a cambiar la ubicación o el número de complicaciones, ComplicationSlotsManager también usa el ​​CurrentUserStyleRepository.

    override fun createComplicationSlotsManager(
        currentUserStyleRepository: CurrentUserStyleRepository
    ): ComplicationSlotsManager {
        val defaultCanvasComplicationFactory =
            CanvasComplicationFactory { watchState, listener ->
                // ...
            }
    
        val leftComplicationSlot = ComplicationSlot.createRoundRectComplicationSlotBuilder(
            id = 100,
            canvasComplicationFactory = defaultCanvasComplicationFactory,
            // ...
        )
            .setDefaultDataSourceType(ComplicationType.SHORT_TEXT)
            .build()
    
        val rightComplicationSlot = ComplicationSlot.createRoundRectComplicationSlotBuilder(
            id = 101,
            canvasComplicationFactory = defaultCanvasComplicationFactory,
            // ...
        )
            .setDefaultDataSourceType(ComplicationType.SHORT_TEXT)
            .build()

        return ComplicationSlotsManager(
            listOf(leftComplicationSlot, rightComplicationSlot),
            currentUserStyleRepository
        )
    }

los WatchFace describe el tipo de esfera y cómo dibujarlo.

A WatchFace se puede especificar como digital o analógico y, opcionalmente, puede tener un oyente de toque cuando el usuario toca la esfera del reloj.

Lo más importante, un WatchFace especifica un Rendererque la esfera del reloj realmente muestra:

    override suspend fun createWatchFace(
        surfaceHolder: SurfaceHolder,
        watchState: WatchState,
        complicationSlotsManager: ComplicationSlotsManager,
        currentUserStyleRepository: CurrentUserStyleRepository
    ): WatchFace = WatchFace(
        watchFaceType = WatchFaceType.ANALOG,
        renderer = // ...
    )

¡La parte más hermosa de la esfera de un reloj! Cada esfera de reloj crea una subclase personalizada de un renderizador que implementa todo lo necesario para dibujar la esfera del reloj en un lienzo.

El renderizador es para combinar el UserStyle (el mapa de ​​CurrentUserStyleRepository)que han favorecido la información de complicaciones de ComplicationSlotsManager, la hora actual y otra información de estado relacionada con la representación de la esfera del reloj.

class CustomCanvasRenderer(
    private val context: Context,
    surfaceHolder: SurfaceHolder,
    watchState: WatchState,
    private val complicationSlotsManager: ComplicationSlotsManager,
    currentUserStyleRepository: CurrentUserStyleRepository,
    canvasType: Int
) : Renderer.CanvasRenderer(
    surfaceHolder = surfaceHolder,
    currentUserStyleRepository = currentUserStyleRepository,
    watchState = watchState,
    canvasType = canvasType,
    interactiveDrawModeUpdateDelayMillis = 16L
) {
    override fun render(canvas: Canvas, bounds: Rect, zonedDateTime: ZonedDateTime) {
        // Draw into the canvas!
    }

    override fun renderHighlightLayer(canvas: Canvas, bounds: Rect, zonedDateTime: ZonedDateTime) {
        // Draw into the canvas!
    }
}

Además del editor WYSIWYG del sistema en el teléfono, recomendamos encarecidamente admitir la configuración en el reloj inteligente para que el usuario pueda personalizar la esfera del reloj sin la necesidad de un dispositivo complementario.

Para admitir esto, una esfera de reloj puede proporcionar una configuración Activity y permitir que el usuario cambie la configuración con una EditorSession regresó de EditorSession.createOnWatchEditorSession. Cuando el usuario realiza cambios, llama EditorSession.renderWatchFaceToBitmap ofrece una vista previa en vivo de la esfera del reloj en el editor Activity.

Para ver cómo encaja todo el rompecabezas para mostrar la hora, consulte la muestra de Watchface en GitHub. Para obtener más información sobre el desarrollo para Wear OS, visite el sitio web del desarrollador.