Tamanhos de tela inicial para Android
e, ao mesmo tempo, para Cordova (também conhecido como Phonegap), React-Native e todas as outras plataformas de desenvolvimento
Format : 9-Patch PNG (recommended)
Dimensions
- LDPI:
- Portrait: 200x320px
- Landscape: 320x200px
- MDPI:
- Portrait: 320x480px
- Landscape: 480x320px
- HDPI:
- Portrait: 480x800px
- Landscape: 800x480px
- XHDPI:
- Portrait: 720px1280px
- Landscape: 1280x720px
- XXHDPI
- Portrait: 960x1600px
- Landscape: 1600x960px
- XXXHDPI
- Portrait: 1280x1920px
- Landscape: 1920x1280px
Nota: A preparação de XXXHDPI não é necessária e também talvez do tamanho XXHDPI por causa das áreas de repetição de imagens de 9 patch. Por outro lado, se apenas tamanhos de retrato forem usados, o tamanho do aplicativo pode ser menor. Mais fotos significam que é necessário mais espaço.
Preste atenção
Acho que não existe um tamanho exato para todos os dispositivos. Eu uso Xperia Z 5" . Se você desenvolver um aplicativo multiplataforma-webview você deve considerar um monte de coisas (se a tela tem botões de navegação das teclas virtuais ou não, etc). Por isso, acho que só há uma solução adequada. A solução é a prepare uma tela inicial de 9 patches (veja o How to design a new splash screencabeçalho abaixo).
- Crie telas iniciais para os tamanhos de tela acima como 9 patch . Dê nomes aos seus arquivos com sufixos .9.png
- Adicione as linhas abaixo em seu arquivo config.xml
- Adicione o plug-in da tela inicial, se necessário.
- Execute seu projeto.
É isso aí!
Código específico do Cordova
a ser adicionado a linhas no config.xml para telas iniciais de 9 patch
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="6000" />
<platform name="android">
<splash src="res/screen/android/ldpi.9.png" density="ldpi"/>
<splash src="res/screen/android/mdpi.9.png" density="mdpi"/>
<splash src="res/screen/android/hdpi.9.png" density="hdpi"/>
<splash src="res/screen/android/xhdpi.9.png" density="xhdpi"/>
</platform>
Para adicionar linhas ao config.xml ao usar telas iniciais que não sejam de 9 patch
<platform name="android">
<splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi"/>
<splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi"/>
<splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi"/>
<splash src="res/screen/android/splash-land-xhdpi.png" density="land-xhdpi"/>
<splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi"/>
<splash src="res/screen/android/splash-port-ldpi.png" density="port-ldpi"/>
<splash src="res/screen/android/splash-port-mdpi.png" density="port-mdpi"/>
<splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi"/>
</platform>
Como criar uma nova tela inicial
Eu descreveria uma maneira simples de criar uma tela inicial adequada usando essa maneira. Suponha que estejamos projetando uma tela de 1280dp x 720dp - xhdpi (x-grande). Escrevi a título de exemplo o seguinte;
No Photoshop: Arquivo -> Novo em uma nova janela de diálogo defina suas telas
Largura: 720 pixels Altura: 1280 pixels
Eu acho que os tamanhos acima significam que a resolução é 320 pixels / polegada. Mas, para garantir, você pode alterar o valor da resolução para 320 na janela de diálogo. Neste caso Pixels / Inch = DPI
Parabéns ... Você tem um modelo de tela inicial de 720dp x 1280dp.
Como gerar uma tela inicial de 9 patch
Depois de projetar sua tela inicial, se quiser projetar a tela inicial de 9 Patches, você deve inserir uma lacuna de 1 pixel para cada lado. Por esse motivo, você deve aumentar a largura e a altura do tamanho da tela em +2 pixels (agora os tamanhos das imagens são 722 x 1282).
Eu deixei a lacuna de 1 pixel em branco em todos os lados conforme indicado a seguir.
Alterando o tamanho da tela usando o Photoshop:
- Abra um arquivo png da tela inicial no Photoshop
- Clique no ícone de cadeado próximo ao nome do 'Plano de Fundo' no campo Camadas (para deixar em branco em vez de outra cor como o branco) se houver abaixo: - Altere o tamanho da tela no menu Imagem (Largura: 720 pixels a 722 pixels e Altura: 1280 pixels a 1282 pixels). Agora, deve haver um intervalo de 1 pixel em cada lado da imagem da tela inicial.
Em seguida, você pode usar C: \ Arquivos de programas (x86) \ Android \ android-studio \ sdk \ tools \ draw9patch.bat para converter um arquivo de 9 patch. Para isso, abra sua tela inicial no app draw9patch. Você deve definir seu logotipo e áreas expansíveis. Observe a linha preta na tela inicial de exemplo a seguir. A espessura da linha preta é de apenas 1 px;) As linhas pretas dos lados esquerdo e superior definem a área de exibição obrigatória da tela inicial. Exatamente como seu projetado. As linhas direita e inferior definem a área adicionável e removível (áreas de repetição automática).
Basta fazer isso:
amplie a borda superior da sua imagem no aplicativo draw9patch. Clique e arraste o mouse para desenhar uma linha. E pressione shift + clique e arraste o mouse para apagar a linha.
Se você desenvolver um aplicativo de plataforma cruzada (como Cordova / PhoneGap), poderá encontrar o seguinte endereço de quase todos os tamanhos de tela inicial do mabile OS. Clique para obter os tamanhos de tela inicial do Windows Phone , WebOS , BlackBerry , Bada-WAC e Bada .
https://github.com/phonegap/phonegap/wiki/App-Splash-Screen-Sizes
E se você precisar de tamanhos de ícones de aplicativos IOS, Android etc., você pode visitar aqui .
IOS
Format : PNG (recommended)
Dimensions
- Tablet (iPad)
- Non-Retina (1x)
- Portrait: 768x1024px
- Landscape: 1024x768px
- Retina (2x)
- Portrait: 1536x2048px
- Landscape: 2048x1536px
- Handheld (iPhone, iPod)
- Non-Retina (1x)
- Portrait: 320x480px
- Landscape: 480x320px
- Retina (2x)
- Portrait: 640x960px
- Landscape: 960x640px
- iPhone 5 Retina (2x)
- Portrait: 640x1136px
- Landscape: 1136x640px
- iPhone 6 (2x)
- Portrait: 750x1334px
- Landscape: 1334x750px
- iPhone 6 Plus (3x)
- Portrait: 1242x2208px
- Landscape: 2208x1242px