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

Publicado por Alex Vanyo, ingeniero de relaciones con desarrolladores

Las esferas del reloj son una de las formas más visibles en que las personas se expresan en sus relojes inteligentes y son una de las mejores formas de mostrar su marca a sus usuarios.

Ver 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, recientemente lanzamos el Biblioteca Jetpack Watch Face escrito desde cero en Kotlin.

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

• Estilo de la esfera del reloj que persiste tanto en el reloj como en el teléfono (no se necesita una base de datos o una aplicación complementaria).
• Soporte para un WYSIWYG interfaz de usuario de configuración de la esfera del reloj en su teléfono.
• Bibliotecas separadas más pequeñas (que solo incluyen lo que necesita).
• Mejoras en la batería al fomentar buenos patrones de uso de batería listos para usar, como la reducción automática interactiva de la velocidad de fotogramas cuando la batería está baja.
• Nueva API de captura de pantalla para que los usuarios puedan ver vistas previas 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 desde el teléfono sin ningún código escrito en o para el teléfono.

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

Si usa la biblioteca Jetpack Watch Face para guardar las opciones de configuración de la esfera del reloj, los valores se sincronizan con la aplicación complementaria móvil. Es decir, toda la comunicación entre dispositivos se gestiona por usted.

La aplicación móvil presentará automáticamente estas opciones al usuario en una interfaz de usuario simple e intuitiva donde las modificará en función de lo que funcione mejor para su estilo. También incluye vistas previas que se actualizan en tiempo real.

¡Entremos en la API con una descripción general de los componentes más importantes para crear una esfera de reloj personalizada!

Una subclase de WatchFaceService forma el punto de entrada a cualquier esfera de reloj Jetpack. Implementación de un WatchFaceService requiere crea 3 objetos: A UserStyleSchema, a ComplicationSlotsManager, está en WatchFace:

Diagrama que muestra las 3 partes principales de un WatchFaceService

Estos 3 objetos se especifican anulando 3 métodos abstractos de 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 detallado a cada uno de estos a su vez y algunas de las otras clases que la biblioteca crea en su nombre.

los UserStyleSchema define la fuente de información principal para una esfera de reloj Jetpack. los UserStyleSchema debe contener una lista de todas las configuraciones de personalización disponibles para el usuario, así como información sobre lo que hacen estas opciones y cuál es la opción predeterminada. Estos ajustes pueden ser banderas booleanas, liza, intervalos, Y es más.

Al proporcionar este patrón, la biblioteca rastreará automáticamente los cambios de configuración del usuario, a través de la aplicación complementaria móvil en un teléfono conectado, o mediante los cambios realizados en el reloj inteligente en una tarea de edición personalizada.

    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 del usuario actual se puede observar a través de la ​​CurrentUserStyleRepository, que es creado por la biblioteca basada en el UserStyleSchema.

te da un UserStyle que es solo un Map con claves según la configuración definida en el esquema:

Mapa

Cuando cambian las preferencias del usuario, MutableStateFlow de UserStyle generará las últimas opciones seleccionadas para todas las configuraciones definidas en el UserStyleSchema.

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

complicaciones permitir que la esfera del reloj muestre información adicional de otras aplicaciones en el reloj, como eventos, datos de salud o el día.

los ComplicationSlotsManager define cuántas complicaciones admite una esfera de reloj y dónde se ubican en la pantalla. Para apoyar el cambio de ubicación o número de complicaciones, el 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 táctil para cuando el usuario toca la esfera del reloj.

Lo más importante, un WatchFace específico a Renderer, que en realidad hace que la esfera del reloj:

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

¡La parte más genial de la esfera de un reloj! Cada cuadrante creará una subclase personalizada de un renderizador que implementa todo lo necesario para dibujar realmente el cuadrante en un lienzo.

El renderizador se encarga de combinar el UserStyle (el mapa de ​​CurrentUserStyleRepository), información sobre la complicación de ComplicationSlotsManager, la hora actual y otra información de estado para representar 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 permitir al usuario personalizar la esfera del reloj sin 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 usando un EditorSession regresó de EditorSession.createOnWatchEditorSession. Cuando el usuario realiza cambios llamando EditorSession.renderWatchFaceToBitmap proporciona una vista previa en vivo de la esfera del reloj en el editor Activity.

Para ver cómo encaja todo el rompecabezas para decir la hora, eche un vistazo a la ejemplo de esfera de reloj en GitHub. Para obtener más información sobre el desarrollo para Wear OS, consulte sitio web del desarrollador.