Fundo

Há uma semana, identificamos um problema estranho em que nosso aplicativo Naukri para iOS estava se comportando inesperadamente no modo Zoom em alguns dispositivos.

A interface do usuário estava ficando distorcida e escurecida aleatoriamente na barra de navegação superior e na barra inferior da guia.

Problema

Depois de passar por várias soluções e artigos sobre o estado de zoom, observamos que, quando o estado de zoom é ativado, o aplicativo começa a ser exibido no modo dimensionado e, como nossa tela de inicialização não foi otimizada para telas maiores, estávamos tendo problemas de interface do usuário.

O que é a tela inicial?

Aparece quando o aplicativo é iniciado pela primeira vez e dá a impressão de que seu aplicativo é rápido e responsivo. Depois que seu aplicativo for carregado, ele será substituído pela primeira tela do seu aplicativo.

Quando verificamos a lógica de implementação da imagem de inicialização em nosso projeto, descobrimos que os diferentes tamanhos de imagens de inicialização foram adicionados em nosso arquivo xcassets.

Pensamos em excluí-los e adicionar imagens diferentes apenas para tentar algumas coisas e, em seguida, observamos que adicionar a tela de inicialização do xcassets foi preterido.

Solução

Então, depois de passar pela documentação da Apple, aprendemos as maneiras corretas de adicionar uma tela de inicialização em seu aplicativo iOS.

https://developer.apple.com/documentation/xcode/specifying-your-apps-launch-screen/

Como adicionar uma tela de inicialização?

Antes do Xcode 6, a única opção que tínhamos era fornecer imagens estáticas dentro de um catálogo de recursos. Mais tarde, com o iOS 8, o Xcode nos permitiu substituir a imagem estática por um arquivo de storyboard. Com o tempo e novas atualizações, várias opções e recursos continuaram sendo adicionados à tela inicial.

Para o Xcode 12 e superior, existem duas maneiras de obter a tela de inicialização:

1. Usando um storyboard (padrão), adicionado quando você cria um novo projeto
2. Usando uma plistconfiguração

Usando uma plistconfiguração, você pode definir:

• Uma imagem
• Se a imagem de lançamento deve respeitar as inserções de área segura
• Uma cor de fundo
• Visibilidade da barra de navegação
• Visibilidade da barra de guias
• Visibilidade da barra de ferramentas
• Configuração da tela de inicialização por esquema de URL

1. Nas configurações do seu destino, selecione a guia Informações.
2. Na seção Custom iOS Target Properties, expanda a tecla Launch Screen.
3. Clique no botão Adicionar (+), digite UILaunchScreen, e pressione Return para adicionar a tecla da tela inicial à lista de propriedades. Se a UILaunchScreenchave já estiver presente, você pode pular esta etapa.
4. Selecione a UILaunchScreenchave, clique no botão Adicionar (+) e adicione chaves adicionais para especificar opções de configuração para sua tela inicial.

Usando um arquivo de storyboard

Se você criar seu aplicativo iOS a partir de um modelo de storyboard, o Xcode adicionará um arquivo de tela de inicialização padrão, chamado LaunchScreen.storyboard, ao seu projeto. Edite LaunchScreen.storyboardpara configurar sua tela inicial.

Se seu projeto não contiver um arquivo de tela de inicialização padrão, adicione um arquivo de tela de inicialização e defina o arquivo de tela de inicialização para o destino no editor de projeto.

1. Escolha Arquivo > Novo > Arquivo.
2. Em Interface do usuário, selecione Tela de inicialização e clique em Avançar.
3. Dê um nome ao arquivo da tela de inicialização, escolha um local, selecione o destino ao qual deseja adicionar o arquivo e clique em Criar.
4. Nas configurações do seu destino, selecione a guia Geral e localize a seção “Ícones de aplicativos e imagens de inicialização”.
5. No menu pop-up Arquivo da tela de inicialização, escolha o novo arquivo da tela de inicialização.

As telas de inicialização são armazenadas em cache no iOS para melhorar o desempenho. Portanto, para fins de desenvolvimento e teste, você precisa excluir seu aplicativo e reiniciar o dispositivo (ou simulador).

Além disso, você pode adicionar sleep(5) em didFinishLaunchingWithOptions durante o desenvolvimento de sua tela de inicialização, um atraso pode ser útil para dar uma olhada mais longa em seu design implementado.

Muito obrigado pela leitura…!

Referências:

https://developer.apple.com/documentation/xcode/specifying-your-apps-launch-screen/