Desenvolva mostradores de relógio com a biblioteca Jetpack Watch Face estável

Postado por Alex Vanyo, engenheiro de relações com desenvolvedores

Os mostradores de relógio são uma das maneiras mais visíveis pelas quais as pessoas se expressam em seus smartwatches e são uma das melhores maneiras de exibir sua marca para seus usuários.

Estúdio Mostrador da Samsung é uma ótima ferramenta para criar mostradores de relógio sem escrever nenhum código. Para desenvolvedores que desejam um controle mais ajustado, lançamos recentemente o Biblioteca Jetpack Watch Face escrito do 0 em Kotlin.

A versão estável da biblioteca Jetpack Watch Face inclui todas as funcionalidades da Biblioteca de Suporte Wearable e muitos novos recursos que facilitam o suporte à personalização no smartwatch e no aplicativo complementar do sistema em dispositivos móveis, incluindo:

• Estilo do mostrador do relógio que persiste no relógio e no telefone (sem necessidade de seu próprio banco de dados ou aplicativo complementar).
• Suporte para um WYSIWYG assista a interface do usuário de configuração do mostrador no telefone.
• Bibliotecas menores e separadas (que incluem apenas o que você precisa).
• Melhorias na bateria incentivando bons padrões de uso da bateria prontos para uso, como a redução automática da taxa de quadros interativa quando a bateria está fraca.
• Novas APIs de captura de tela para que os usuários possam visualizar as alterações do mostrador do relógio em pace actual no relógio e no telefone.

Abaixo está um exemplo de configuração de um mostrador de relógio a partir do telefone sem nenhum código escrito no ou para o telefone.

Editando um mostrador de relógio usando o aplicativo complementar móvel Galaxy Wearable

Se você usar a biblioteca Jetpack Watch Face para salvar as opções de configuração do mostrador do relógio, os valores serão sincronizados com o aplicativo complementar móvel. Ou seja, toda a comunicação entre dispositivos é tratada para você.

O aplicativo móvel apresentará automaticamente essas opções ao usuário em uma interface de usuário simples e intuitiva, onde eles as alterarão para o que funcionar melhor para seu estilo. Também inclui visualizações que são atualizadas em pace actual.

Vamos mergulhar na API com uma visão geral dos componentes mais importantes para criar um mostrador de relógio personalizado!

Uma subclasse de WatchFaceService forma o ponto de entrada de qualquer mostrador de relógio Jetpack. Implementando um WatchFaceService requer criando 3 objetos: UMA UserStyleSchemauma ComplicationSlotsManagere um WatchFace:

Diagrama mostrando as 3 partes principais de um WatchFaceService

Esses 3 objetos são especificados substituindo 3 métodos abstratos de WatchFaceService:

elegance CustomWatchFaceService : WatchFaceService() 

    /**
     * The specification of settings the watch face helps.
     * That is very similar to a database schema.
     */
    override a laugh createUserStyleSchema(): UserStyleSchema = // ...

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

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

Vamos dar uma olhada mais detalhada em cada uma delas e em algumas das outras categories que a biblioteca cria em seu nome.

O UserStyleSchema outline a fonte de informações primária para um mostrador de relógio Jetpack. O UserStyleSchema deve conter uma lista de todas as configurações de personalização disponíveis para o usuário, bem como informações sobre o que essas opções fazem e qual é a opção padrão. Essas configurações podem ser bandeiras booleanas, listas, gamase mais.

Ao fornecer esse esquema, a biblioteca acompanhará automaticamente as alterações nas configurações feitas pelo usuário, seja por meio do aplicativo complementar móvel em um telefone conectado ou por meio de alterações feitas no smartwatch em uma atividade personalizada do editor.

    override a laugh createUserStyleSchema(): UserStyleSchema =
        UserStyleSchema(
            listOf(
                // Permits consumer to switch the colour kinds of the watch face
                UserStyleSetting.ListUserStyleSetting(
                    UserStyleSetting.Identity(COLOR_STYLE_SETTING),
                    // ...
                ),
                // Permits consumer to toggle on/off the hour pips (dashes across the outer fringe of the watch
                UserStyleSetting.BooleanUserStyleSetting(
                    UserStyleSetting.Identity(DRAW_HOUR_PIPS_STYLE_SETTING),
                    // ...
                ),
                // Permits consumer to switch the period of the minute hand
                UserStyleSetting.DoubleRangeUserStyleSetting(
                    UserStyleSetting.Identity(WATCH_HAND_LENGTH_STYLE_SETTING),
                    // ...
                )
            )
        )

O estilo do usuário atual pode ser observado através do ​​CurrentUserStyleRepositoryque é criado pela biblioteca com base no UserStyleSchema.

Dá-lhe um UserStyle que é apenas um Map com chaves com base nas configurações definidas no esquema:

Map

À medida que as preferências do usuário mudam, um MutableStateFlow de UserStyle irá emitir as últimas opções selecionadas para todas as configurações definidas no UserStyleSchema.

currentUserStyleRepository.userStyle.gather  newUserStyle ->
    // Replace configuration in keeping with consumer taste

Complicações permitir que um mostrador do relógio exiba informações adicionais de outros aplicativos no relógio, como eventos, dados de saúde ou o dia.

O ComplicationSlotsManager outline quantas complicações um mostrador de relógio suporta e onde elas são posicionadas na tela. Para apoiar a alteração da localização ou do número de complicações, o ComplicationSlotsManager também united states of america o ​​CurrentUserStyleRepository.

    override a laugh createComplicationSlotsManager(
        currentUserStyleRepository: CurrentUserStyleRepository
    ): ComplicationSlotsManager 
        val defaultCanvasComplicationFactory =
            CanvasComplicationFactory  watchState, listener ->
                // ...
            
    
        val leftComplicationSlot = ComplicationSlot.createRoundRectComplicationSlotBuilder(
            identification = 100,
            canvasComplicationFactory = defaultCanvasComplicationFactory,
            // ...
        )
            .setDefaultDataSourceType(ComplicationType.SHORT_TEXT)
            .construct()
    
        val rightComplicationSlot = ComplicationSlot.createRoundRectComplicationSlotBuilder(
            identification = 101,
            canvasComplicationFactory = defaultCanvasComplicationFactory,
            // ...
        )
            .setDefaultDataSourceType(ComplicationType.SHORT_TEXT)
            .construct()

        go back ComplicationSlotsManager(
            listOf(leftComplicationSlot, rightComplicationSlot),
            currentUserStyleRepository
        )
    

O WatchFace descreve o tipo de mostrador do relógio e como desenhá-lo.

UMA WatchFace pode ser especificado como virtual ou analógico e, opcionalmente, pode ter um ouvinte de toque para quando o usuário tocar no mostrador do relógio.

Mais importante ainda, um WatchFace especifica um Rendererque na verdade renderiza o mostrador do relógio:

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

A parte mais bonita de um mostrador de relógio! Cada mostrador do relógio criará uma subclasse personalizada de um renderizador que implementa tudo o que é necessário para realmente desenhar o mostrador do relógio em uma tela.

O renderizador é responsável por combinar o UserStyle (o mapa de ​​CurrentUserStyleRepository)as informações de complicação de ComplicationSlotsManagera hora atual e outras informações de estado para renderizar o mostrador do relógio.

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

    override a laugh renderHighlightLayer(canvas: Canvas, bounds: Rect, zonedDateTime: ZonedDateTime) 
        // Draw into the canvas!
    

Além do editor WYSIWYG do sistema no telefone, recomendamos o suporte à configuração no smartwatch para permitir que o usuário personalize o mostrador do relógio sem a necessidade de um dispositivo complementar.

Para suportar isso, um mostrador de relógio pode fornecer uma configuração Process e permitir que o usuário altere as configurações usando um EditorSession voltou de EditorSession.createOnWatchEditorSession. À medida que o usuário faz alterações, chamando EditorSession.renderWatchFaceToBitmap fornece uma visualização ao vivo do mostrador do relógio no editor Process.

Para ver como todo o quebra-cabeça se encaixa para contar as horas, confira o amostra watchface no GitHub. Para saber mais sobre como desenvolver para Put on OS, confira o web site do desenvolvedor.