Tutorial iOS – Criando uma imagem de inicialização(launch screen) com Xcode 6

On 17 de dezembro de 2014 by Rafael Lage

Hoje aprenderemos a criar e configurar uma imagem de inicialização(launch image), essa é a imagem que aparece ao abrir o aplicativo, muitas vezes contendo o logo da empresa ou do aplicativo em si. Junto com o lançamento dos novos iPhones e da nova versão do Xcode(versão 6), vieram modificações as modificações necessárias para que o processo de desenvolvimento para telas de tamanhos diferentes sejam simplificadas. A launch screen, por exemplo, é uma dessas seções do Xcode que foram modificadas, nas versões anteriores o desenvolvedor apenas atribuía as imagens estáticas a cada tipo de tela, essa função ainda está disponível porém é mais interessante a construção de apenas uma evitando que se adicione várias imagens ao projeto. Para isso, agora desenvolvemos para uma tela de tamanho padrão e atribuímos as restrições necessárias para que os componentes sejam adaptados nos tamanhos de telas diferentes. Para conseguir tal resultado siga as seguintes instruções:

 

1 – Crie uma Single View Based Aplication:

Captura de Tela 2014-08-19 às 10.33.03

2 – Você perceberá que agora temos uma interface chamada LaunchScreen.xib:

Captura de Tela 2014-12-17 às 23.42.18

 

– Essa é justamente a interface que usaremos para criar as imagens de inicialização. Como vemos abaixo, a interface tem um tamanho padrão e se utiliza constraints  para manter a posição, tamanho e proporção em telas de tamanhos diferente. Para que isso fique mais claro rode o simulador em telas diferentes, uma de iphone e uma de ipad por exemplo.

 

Captura de Tela 2014-12-17 às 23.48.59

 

– Exemplos no simulador de iPhone e iPad, clique na imagem para ampliar:

iOS Simulator Screen Shot 17.12.2014 23.55.13

iOS Simulator Screen Shot 17.12.2014 23.54.42

 

 

 

3 – Para esse exemplo iremos adicionar uma label e imagem à nossa interface como vemos abaixo:

Captura de Tela 2014-12-18 às 00.13.29

4 – Selecione os objetos criados e adicione as constraints(restrições) utilizando a função Add Missing Contraints como vemos abaixo:

Sem Título

 

5 – Pronto! Com isso reduzimos o número de imagens no projeto para uma, o tamanho do projeto e também tempo que seria gasto criando e adaptando essas imagens. Abaixo temos o resultado:

1

2

 

Código fonte: launchscreen

 

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *