Construindo Splash Screen Nativamente, Android 12, Kotlin
Neste artigo, exploraremos e aprenderemos como construir uma tela inicial com a API SplashScreen, que foi introduzida no Android 12.
É a primeira visualização mostrada a um usuário assim que você clica no ícone do aplicativo. Se você notar uma tela branca em branco (por um breve momento) depois de tocar em seu aplicativo favorito, significa que ele não possui uma tela inicial.
Muitas vezes, a tela inicial é vista como um diferenciador entre aplicativos normais e profissionais. Alguns casos de uso em que uma tela inicial se encaixa perfeitamente são:
- Quando queremos baixar dados antes que os usuários comecem a usar o aplicativo.
- Se quisermos promover a marca do aplicativo e exibir seu logotipo por um longo período de tempo, ou apenas ter uma experiência mais imersiva que leve você facilmente do momento em que você toca no ícone até o que o aplicativo tem a oferecer.
Até agora, criar uma tela inicial nunca foi simples e sempre exigiu a adição de uma certa quantidade de código padronizado ao aplicativo, como criar SplashActivity sem visualização, adicionar um cronômetro para fins de promoção de marca etc. Com a API SplashScreen, tudo isso está definido para Go.
Mesmo para a nova API
SplashScreen, precisamos criar um tema, mas na pastavalue-v31, pois alguns parâmetros são suportados somente no Android 12. Portanto, crie uma pasta denominada value-v31 na pastares e adicione theme.xml a ela.E antes disso, vamos dividir nossa tela inicial em pedaços para simplificar.
- O ponto 1 representa o ícone da tela.
- O ponto 2 representa a cor de fundo do ícone da tela inicial.
- O ponto 3 representa a cor de fundo da tela inicial.
- O ponto 4 representa o espaço para o logotipo da marca, se necessário.
Agora, vamos atribuir alguns valores às chaves correspondentes que descrevem as diferentes partes da tela inicial.
1 <style name="SplashActivity" parent="Theme.AppCompat.NoActionBar"> 2 3 <!-- Point 3--> 4 <item name="android:windowSplashScreenBackground">#FFFFFF</item> 5 6 <!-- Point 2--> 7 <item name="android:windowSplashScreenIconBackgroundColor">#000000</item> 8 9 <!-- Point 1--> 10 <item name="android:windowSplashScreenAnimatedIcon">@drawable/ic_realm_logo_250</item> 11 12 <!-- Point 4--> 13 <item name="android:windowSplashScreenBrandingImage">@drawable/relam_horizontal</item> 14 </style>
Caso queira usar um ícone de aplicativo (ou não tenha um ícone separado) como `WindowsPlashScreenAnimatedIcon`, ignore esse parâmetro e, por padrão, ele usará o ícone do seu aplicativo.
Dicas e truques: se o ícone de empate estiver sendo cortado na tela inicial, crie um ícone de aplicativo a partir da imagem e substitua o conteúdo de
windowSplashScreenAnimatedIcon pelo ic_launcher_foreground.xml.Para
windowSplashScreenBrandingImage, não consegui encontrar nenhuma alternativa. Compartilhe nos comentários se você encontrar um.Abra o arquivo AndroidManifest e adicione um tema à atividade.
1 <activity 2 android:theme="@style/SplashActivity"> 3 </activity>
Na minha opinião, não há necessidade de uma nova
activity classe para a tela inicial, que tradicionalmente era necessária. E agora estamos prontos para a nova tela inicial doAndroid .12
Adicionar animação à tela inicial também é muito fácil. Basta atualizar o drawable do ícone com
AnimationDrawable e AnimatedVectorDrawable drawable e parâmetros personalizados para a duração da animação.1 <item name="android:windowSplashScreenAnimationDuration">1000</item>
Anteriormente, mencionei que a nova API ajuda no caso de uso inicial de download de dados do aplicativo, então vamos ver isso em ação.
Na atividade da tela inicial, podemos registrar para
addOnPreDrawListener ouvinte, o que ajudará a adiar o primeiro empate na tela, até que os dados estejam prontos.1 private val viewModel: MainViewModel by viewModels() 2 3 override fun onCreate(savedInstanceState: Bundle?) { 4 super.onCreate(savedInstanceState) 5 addInitialDataListener() 6 loadAppView() 7 } 8 9 private fun addInitialDataListener() { 10 val content: View = findViewById(android.R.id.content) 11 // This would be called until true is not returned from the condition 12 content.viewTreeObserver.addOnPreDrawListener { 13 return@addOnPreDrawListener viewModel.isAppReady.value ?: false 14 } 15 } 16 17 private fun loadAppView() { 18 binding = ActivityMainBinding.inflate(layoutInflater) 19 setContentView(binding.root)
Dicas e truques: ao desenvolver a tela inicial, você pode retornar
false para addOnPreDrawListener, para que a próxima tela não seja renderizada e você possa validar a tela inicial facilmente.Eu realmente gostaria da nova API do
SplashScreen, que é muito limpa e fácil de usar, eliminando completamente a atividade do SplashScreen. No entanto, há algumas coisas que não apreciei.- A tela inicial de fundo suporta apenas uma cor. Estamos aguardando suporte para backgrounds de chamarizes vetoriais.
- Não há especificações de design disponíveis para imagens de ícones e marcas, o que o torna mais um jogo de sucesso e teste. Ainda não conseguir corrigir a imagem de bandas, no meu exemplo.
- Por último, mas não menos importante, o recurso lateral da interface do usuário do SplashScreen (
theme.xml) só é compatível com o Android 12 e superior, portanto, não podemos nos desfazer do código antigo por enquanto.
Você também pode conferir o exemplo completo em funcionamento no meu repositório do GitHub. Observação: apenas executar o código no dispositivo mostrará você em branco. Para ver o exemplo, feche a bandeja recente do aplicativo e clique novamente no ícone do aplicativo.
Espero que isso tenha sido informativo e tenha gostado de lê-lo.
Avalie esse exemplo de código