Suporte a telas conectadas

As telas conectadas estendem a experiência do modo janela para computador a smartphones padrão, permitindo que os usuários acessem telas grandes em dispositivos móveis. Esse recurso abre novas possibilidades para a interação com o app e a produtividade do usuário.

Todos os recursos exclusivos do modo janela para computador se aplicam às telas conectadas. Quando você conecta um smartphone a uma tela, o estado do smartphone permanece inalterado e uma sessão de área de trabalho em branco é iniciada na tela conectada. O dispositivo e a tela funcionam como dois sistemas individuais, com apps específicos para cada tela.

Figura 1. Smartphone conectado a uma tela externa, com uma sessão de área de trabalho na tela enquanto o smartphone mantém o próprio estado.

Se você conectar um dispositivo com o modo janela para computador ativado, como um tablet, a um monitor externo, a sessão do computador será estendida para as duas telas. As duas telas funcionam como um sistema contínuo. Essa configuração permite que janelas, conteúdo e o cursor se movam livremente entre as duas telas.

Figura 2. Tablet conectado a um monitor externo, estendendo a sessão de área de trabalho nas duas telas.

Para oferecer suporte eficaz a telas conectadas, é preciso prestar atenção a vários aspectos do design e da implementação do app. As práticas recomendadas a seguir garantem uma experiência do usuário tranquila e produtiva.

Processar mudanças dinâmicas na tela

Muitos apps são criados com base na suposição de que o objeto Display e as características dele não vão mudar durante o ciclo de vida do app. No entanto, quando um usuário conecta ou desconecta um monitor externo ou até mesmo move uma janela de app entre telas, o objeto Display associado ao contexto ou à janela do app pode mudar. As propriedades da tela, como tamanho, resolução, taxa de atualização, suporte a HDR e densidade, podem ser diferentes. Se você codificar valores com base na tela do smartphone, por exemplo, é provável que os layouts sejam corrompidos em uma tela externa.

As telas externas também podem ter densidades de pixels muito diferentes. É preciso garantir que o app responda corretamente às mudanças de densidade. Isso envolve o uso de pixels independentes de densidade (dp) para layouts, o fornecimento de recursos específicos de densidade e a garantia de que a interface seja dimensionada adequadamente.

Se uma atividade estiver em execução em uma tela externa quando ela for desconectada, o sistema vai mover a atividade para a tela principal. A mudança aciona mudanças de configuração, como mudanças no tamanho e na densidade da tela, que podem fazer com que a atividade seja recriada. Seu app precisa processar a mudança de configuração salvando e restaurando o estado da interface para evitar a perda de dados ou uma experiência do usuário confusa.

Use o contexto certo

Usar o contexto certo é crucial em ambientes com várias telas. Ao acessar recursos, o contexto da atividade (que é exibido) é diferente do contexto do aplicativo (que não é exibido).

O contexto da atividade contém informações sobre a tela e é sempre ajustado para a área da tela em que a atividade aparece. Isso permite que você receba as informações corretas sobre a densidade de exibição ou as métricas de janela do app. Sempre use o contexto da atividade (ou outro contexto baseado na interface) para receber informações sobre a janela ou tela atual. Isso também afeta algumas APIs do sistema que usam informações do contexto.

No Jetpack Compose, é possível acessar informações específicas da tela usando objetos CompositionLocal, como LocalConfiguration.current e LocalDensity.current. Quando uma atividade ou janela se move entre telas, a configuração do dispositivo muda, acionando a recomposição com novas métricas de tela. Os objetos CompositionLocal permitem que a interface se adapte sem problemas.

Receber informações de exibição

Use a classe Display para receber informações como tamanho, densidade ou flags da tela. Use o serviço do sistema DisplayManager para acessar as telas disponíveis. Para identificar telas externas, filtre o Display.DEFAULT_DISPLAY, que normalmente é a tela integrada do smartphone ou tablet:

val displayManager = getSystemService(Context.DISPLAY_SERVICE) as DisplayManager
val displays = displayManager.getDisplays()
// The default display is 0. External displays have other IDs.
val externalDisplays = displays.filter { it.displayId != Display.DEFAULT_DISPLAY }
SupportConnectedDisplays.kt

Gerenciar o lançamento e a configuração de atividades

Com telas conectadas, os apps podem especificar em qual tela devem ser executados quando são iniciados ou quando criam outra atividade. Esse comportamento depende do modo de inicialização da atividade definido no arquivo de manifesto e das flags e opções de intent definidas pela entidade que inicia a atividade.

Quando uma atividade é movida para uma tela secundária, seu app pode passar por uma atualização de contexto, redimensionamento de janela e mudanças de configuração e recursos. Se a atividade processar a mudança de configuração, ela será notificada em onConfigurationChanged(). Caso contrário, a atividade será reiniciada.

Se o modo de inicialização selecionado para uma atividade permitir várias instâncias, a inicialização em uma tela secundária poderá criar uma nova instância da atividade. As duas atividades são retomadas ao mesmo tempo, o que pode ser útil para determinados cenários de multitarefa.

É possível iniciar uma atividade em uma tela específica usando ActivityOptions. O launchDisplayId requer o Android 8 (nível 26 da API) ou mais recente.

// Get DisplayManager and find the first external display.
val displayManager = getSystemService(Context.DISPLAY_SERVICE) as DisplayManager
val externalDisplayId = displayManager.displays
    .firstOrNull { it.displayId != Display.DEFAULT_DISPLAY }
    ?.displayId

// If an external display is found, launch the activity on it.
if (externalDisplayId != null) {
    val intent = Intent(this, MySecondaryActivity::class.java)
    val options = ActivityOptions.makeBasic()
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
        options.launchDisplayId = externalDisplayId
    }
    startActivity(intent, options.toBundle())
} else {
    // Optionally, handle the case where no external display is connected.
}
SupportConnectedDisplays.kt

Evite listas de permissões de dispositivos

Às vezes, os apps restringem a interface e os recursos de tela grande a dispositivos selecionados usando uma lista de permissões ou verificando BUILD.MODEL e o tamanho de tela integrado. Essa abordagem não é eficaz para telas conectadas, porque praticamente qualquer dispositivo pode ser conectado a uma tela grande, e o modelo do dispositivo não muda quando uma tela externa é conectada.

Em vez de usar listas de permissões ou verificar BUILD.MODEL e o tamanho de tela integrado, verifique as métricas da janela ou os recursos do dispositivo no momento da execução para tomar decisões de interface. Use as APIs Jetpack WindowManager ou as classes de tamanho de janela para criar layouts responsivos e adaptáveis para vários tamanhos e densidades de tela.

Suporte a periféricos externos

Quando os usuários se conectam a uma tela externa, eles geralmente criam um ambiente mais parecido com o de um computador. Isso geralmente envolve o uso de teclados, mouses, trackpads, webcams, microfones e alto-falantes externos. É preciso garantir que o app funcione perfeitamente com esses periféricos. Isso inclui lidar com atalhos de teclado, gerenciar interações com o ponteiro do mouse, oferecer suporte correto a câmeras ou microfones externos e respeitar o roteamento de saída de áudio. Para mais detalhes, consulte Compatibilidade de entrada em telas grandes.

Aumente a produtividade do usuário

As telas conectadas oferecem uma oportunidade significativa de melhorar a produtividade do usuário. Agora você tem as ferramentas para criar apps para dispositivos móveis que oferecem experiências comparáveis às de aplicativos para computadores. Considere implementar os recursos a seguir para aumentar a produtividade do usuário:

• Permita que os usuários abram várias instâncias do mesmo app. Isso é muito útil para tarefas como comparar documentos, gerenciar conversas diferentes ou visualizar vários arquivos ao mesmo tempo.
• Permita que os usuários compartilhem dados avançados dentro e fora do app com o recurso de arrastar e soltar.
• Ajude os usuários a manter o fluxo de trabalho durante as mudanças de configuração implementando um sistema de gerenciamento de estado robusto.

Seguindo essas diretrizes e usando os exemplos de código fornecidos, você pode criar apps que se adaptam perfeitamente a telas conectadas, oferecendo aos usuários uma experiência mais rica e produtiva.