Android

2 ago, 2018

Dando suporte para recortes de exibição em telas de ponta a ponta

Publicidade

Artigo de Megan Potoski, publicado originalmente pelo Android Developers Blog. A tradução foi feita pela Redação iMasters com autorização.

***

Os smartphones estão se movendo rapidamente em direção a molduras menores e proporções maiores. Nesses dispositivos, os recortes de exibição são uma maneira popular de obter uma experiência de ponta a ponta, fornecendo espaço para sensores importantes na parte frontal do dispositivo.

Existem, atualmente, 16 dispositivos de recorte de 11 OEMs já lançados, incluindo vários dispositivos beta Android P, com mais a caminho.

Essas telas impressionantes apresentam uma ótima oportunidade para você mostrar seu app. Elas também significam que é mais importante do que nunca garantir que seu aplicativo forneça uma experiência consistentemente ótima em todos os dispositivos com um ou dois recortes de exibição, bem como dispositivos com proporções de 18:9 e maiores.

Exemplos de dispositivos de recorte: Essential PH-1 (esquerda) e Huawei P20 (direita).

Torne seu app compatível com recortes de exibição

Com muitos dispositivos populares e futuros com recortes de exibição, o que você pode fazer para garantir que seu app esteja pronto para o recorte?

A boa notícia é que, na maioria das vezes, seu aplicativo deve funcionar como pretendido, mesmo em um dispositivo de recorte. Por padrão, no modo retrato, sem sinalizadores especiais definidos, a barra de status será redimensionada para ser pelo menos tão alta quanto o recorte, e seu conteúdo será exibido na janela abaixo.

No modo paisagem ou tela cheia, a janela do app ficará em formato de caixa de correio para que nenhum conteúdo seja exibido na área de recorte. No entanto, existem algumas áreas em que seu aplicativo pode ter problemas em dispositivos de recorte.

  • Cuidado com qualquer tipo de codificação de altura da barra de status – isso provavelmente causará problemas. Se possível, use WindowInsetsCompat para obter a altura da barra de status.
  • Em tela cheia, tenha cuidado ao considerar quando usar coordenadas de janela versus tela, pois o app não ocupará a tela inteira quando estiver no modo caixa de correio. Por exemplo, se você usar MotionEvent.getRawX/Y() para obter coordenadas de tela para eventos de toque, certifique-se de transformá-los em coordenadas de vista usando getLocationOnScreen().
  • Preste atenção especial às transições dentro e fora do modo de tela cheia.

Aqui estão algumas diretrizes descrevendo quais problemas devem ser observados e como corrigi-los.

Aproveite a área de recorte

A renderização do conteúdo do seu app na área de recorte pode ser uma ótima maneira de fornecer uma experiência mais imersiva e de ponta a ponta para os usuários, especialmente para conteúdo como vídeos, fotos, mapas e jogos.

Um exemplo de um aplicativo que solicitou layout no recorte de exibição.

No Android P, adicionamos APIs para permitir que você gerencie como seu app usa a área de recorte de exibição, além de verificar a presença de recortes e obter suas posições.

Você pode usar o layoutInDisplayCutoutMode, um novo modo de layout de janela, para controlar como seu conteúdo é exibido em relação ao recorte. Por padrão, a janela do app pode se estender até a área de recorte se o recorte estiver totalmente contido em uma barra do sistema. Caso contrário, a janela é colocada de tal forma que não se sobreponha ao recorte.

Você também pode definir layoutInDisplayCutoutMode para sempre ou nunca renderizar no recorte. Usar o modo SHORT_EDGES para renderizar sempre no recorte é uma ótima opção se você quiser aproveitar a exibição completa e não se importar se um pouco de o conteúdo ficar obscurecido pelo recorte.

Se você está renderizando no recorte, você pode usar getDisplayCutout() para recuperar um DisplayCutout que tenha inserções seguras e caixas delimitadoras do recorte. Estes, permitem verificar se o seu conteúdo se sobrepõe ao recorte e reposicionar as coisas, se necessário.

Atributo para definir layoutInDisplayCutoutMode do tema Activity:

<style name="ActivityTheme">
  <item name="android:windowLayoutInDisplayCutoutMode">
    default/shortEdges/never
  </item>
</style>

Para dispositivos rodando o Android 8.1 (API 27), também fizemos o backport do atributo de tema de atividade layoutInDisplayCutoutMode para que você possa controlar a exibição do seu conteúdo na área de recorte. Observe que o suporte em dispositivos rodando o Android 8.1 ou inferior é de responsabilidade do fabricante do dispositivo.

Para facilitar o gerenciamento da sua implementação de recorte em todos os níveis da API, também adicionamos o DisplayCutoutCompat à biblioteca AndroidX, que agora está disponível por meio do gerente do SDK.

Para mais informações sobre as APIs de recorte de exibição, dê uma olhada na documentação.

Teste seu app com recorte

É altamente recomendável testar todas as telas e experiências do seu aplicativo para garantir que elas funcionem bem em dispositivos de recorte. Recomendamos o uso de um dos dispositivos Android P Beta que apresentam um recorte, como o Essential PH-1.

Se você não tiver um dispositivo, também poderá testar usando um recorte simulado em qualquer dispositivo que esteja rodando o Android P ou no Android Emulator. Isso deve ajudar você a descobrir problemas que seu app pode gerar em dispositivos com recortes, estejam eles rodando o Android 8.1 ou o Android P.

O que esperar de dispositivos com recortes de exibição

O Android P apresenta suporte oficial para plataformas para recortes de exibição, com APIs que você pode usar para exibir seu conteúdo dentro ou fora do recorte. Para garantir a consistência e a compatibilidade do apps, estamos trabalhando com nossos parceiros fabricantes de dispositivos para exigir alguns requisitos.

Primeiro, os dispositivos devem garantir que seus recortes não afetem negativamente os aplicativos. Existem dois requisitos principais:

Na orientação de retrato, sem qualquer sinalizador especial definido, a barra de status deve se estender para pelo menos a altura do recorte.

Na orientação de tela cheia ou paisagem, toda a área de recorte deve estar no formato de caixa de correio.

Em segundo lugar, os dispositivos podem ter apenas um recorte em cada borda curta do dispositivo. Isso significa que:

  • Você não verá múltiplos recortes em uma única borda ou mais de dois recortes em um dispositivo.
  • Você não verá um recorte na borda longa esquerda ou direita do dispositivo.
  • Dentro dessas restrições, os dispositivos podem colocar recortes onde quiserem.

Modo especial

Alguns dispositivos rodando o Android 8.1 (nível de API 27) ou versões anteriores podem, opcionalmente, oferecer suporte para um “modo especial”, que permite aos usuários estenderem um aplicativo de tela cheia em formato de caixa de correio ou paisagem na área de recorte. Normalmente, os dispositivos oferecem esse modo por meio de uma alternância na barra de navegação, o que então abre uma caixa de diálogo de confirmação antes de estender a tela.

Os dispositivos que oferecem “modo especial” permitem que os usuários estendam aplicativos na área de recorte, se suportados pelo app.

Se o targetSdkVersion do seu aplicativo for 27 ou superior, você poderá definir o atributo do tema de atividade layoutInDisplayCutoutMode para desativar o modo especial, se necessário.

Não esqueça: proporções maiores também!

Enquanto você está trabalhando em suporte para recortes, também é um ótimo momento para garantir que seu app funcione bem em dispositivos com proporções de 18:9 ou maiores, especialmente porque esses dispositivos estão se tornando cada vez mais comuns e podem apresentar recortes de exibição.

É altamente recomendável que você ofereça suporte para taxas de proporção flexíveis para que seu aplicativo possa aproveitar a área de exibição completa, independentemente do dispositivo. Você deve testar seu app em diferentes proporções de exibição para garantir que ele funcione corretamente e tenha boa aparência.

Aqui estão algumas diretrizes sobre o suporte para telas para manter em mente enquanto você está desenvolvendo. Consulte também esse artigo sobre proporções maiores para obter dicas sobre como otimizar. Se o seu aplicativo não puder se adaptar às proporções em telas longas, você poderá optar por declarar uma proporção máxima para solicitar o formato de caixa de correio nessas telas.

Obrigado pela leitura, e esperamos que isso ajude você a oferecer uma experiência agradável a todos os seus usuários, seja qual for a exibição que eles possam ter!

***

Este artigo é do Android Developers Blog. Ele foi escrito por Megan Potoski. A tradução foi feita pela Redação iMasters com autorização. Você pode acessar o original em: https://android-developers.googleblog.com/2018/07/supporting-display-cutouts-on-edge-to.html