Sua primeira tela splash screen para IOS

Richard Leandro
3 min readApr 5, 2019

--

Nesse tutorial vamos aprender a criar uma tela splash para nosso app IOS, será uma tela splash igual a do app do twitter, se você leu o artigo de hello world que eu fiz que está nesse https://medium.com/@richardleandro/tutorial-hello-world-meu-primeiro-app-ios-ecc76a08ce64

Você pode usar o mesmo projeto para esse artigo, então vamos lá

Do que vamos precisar?

* Conhecimento básico em criação de um projeto no Xcode.

* Imagem do logo do twitter que se encontra para download nesse site https://www.flaticon.com/free-icon/twitter_124021

Inserindo a imagem do nossa tela no projeto

Primeiro vamos criar um novo projeto, caso tenha dúvida de como criar um projeto ou seja seu primeiro contato com o Xcode, fiz um artigo de como fazer um hello world e testar seu primeiro app nesse link https://medium.com/@richardleandro/tutorial-hello-world-meu-primeiro-app-ios-ecc76a08ce64

Apos a criação do projeto devemos abrir o arquivo LaunchScreen.storyboard como mostrado a baixo

Agora vamos fazer o download da imagem nesse link https://www.flaticon.com/free-icon/twitter_124021 . depois de localizar a imagem, iremos clicar e arrastar até a pasta do nosso projeto no Xcode.

Para linkar nossa imagem baixada do logo do twitter na tela do nosso app, precisamos ir na biblioteca de objetos e procurar pelo objeto ImageView segue a imagem a baixo com as instruções numeradas, quando abrir a caixa de dialogo, só digitar Image View

Então é só clicar em cima do objeto Image View e arrastar até o centro, após isso iremos selecionar novamente o objeto Image View e iremos até ao lado direto da tela em inspetor de atributos, agora iremos selecionar o campo image e colocaremos o nome da imagem, que no exemplo se chama twitter.png, assim como no campo image fazer o mesmo no campo highlighted, vamos perceber que a imagem do logo do twitter agora aparecer como na imagem a baixo

Mudando a cor do background

A parte mais fácil é agora vamos desselecionar o nosso objeto Image View e vamos selecionar nossa View, agora é só ir para o lado direito e escolher a cor azul mais parecida com a cor do twitter clicando na opção custom do background, lembrando que se não aparecer essa opção que está na imagem deve ser porque você não está no inspetor de atributos na imagem está indicada com o número 1.

Testando no simulador

Se você chegou até aqui, agora vem o frio na barriga, vamos vê como ficou?

Selecione o dispositivo que você quer fazer o teste e clique no botão de play no xcode como foi ensinado no artigo passado de Hello World, o resultado é esse aqui, como é um splash screen ela não ficara por muito tempo, então se tiver problemas rebuilda de novo, isso é tudo pessoal para mais artigos sobre IOS e mundo UNIX só me seguir, valeu

--

--