16 Jan, 2014 14:00

Adaptando o layout dos seus aplicativos para o iOS 7

Na virada deste ano, 78% dos dispositivos iOS já rodavam o iOS 7. Esse dado motivou a Apple a determinar que todos os novos aplicativos já venham adaptados a esse novo sistema operacional, dando suporte a suas novas features. Aqui no Brasil não é muito diferente, nosso aplicativo Cine Mobits, que conta com mais de 400 mil acessos por mês apenas na plataforma iOS, já possui mais de 75% desses acessos vindo do iOS 7 ou superior.

Como ninguém quer deixar seu aplicativo sem atualização, o jeito é migrar para o XCode 5 e para o iOS 7, como a Apple determina. Ao fazer isso, percebemos que os aplicativos costumam compilar facilmente (exceto se eles usam funções "deprecadas"), e rodam normalmente em dispositivos com iOS 6, como esperado. O problema ocorre quando colocamos o aplicativo em aparelhos com iOS 7. Como o iOS 7 usa barras (navigation bar e status bar) translúcidas no topo, o sistema considera como a posição 0, o topo (acima do status bar) da tela e não o ponto logo após a navigation bar, como no iOS 6. Essa diferença no cálculo reposiciona todos os elementos das suas telas, deixando-os muitas vezes atrás da navigation bar:

Navigation Bar iOS 7

Na imagem acima, a logo da Mobits fica embaixo da barra no iOS 6, porém no 7 ele fica dessa forma. A primeira tentativa que temos é ir no Xib e reposicionar o elemento mais para baixo, para que fique certo no iOS 7, contudo, isso faz com que ele fique ruim no iOS 6. Então qual a solução?

ioS 6/7 deltas

Para solucionar esse problema, a Apple criou novos campos na visualização do Xib, que permitem que os elementos fiquem em posições diferentes no iOS 6 e no iOS 7:

iOS 6/7 deltas

Além disso, ela criou diferentes visualizações para o Xib para vermos como ele fica tanto no iOS 6 como no iOS 7 sem precisarmos instalar o aplicativo no dispositivo:

Visualizações do Xib

Basta mudar essa barra para ver a diferença. Em termos práticos, colocamos no iOS 6 e ajustamos o delta que o iOS 7 terá; quando mudamos para o iOS 7, ele mudará a posição dos elementos automaticamente. Também é possível fazer o contrário (iOS 7 posicionado corretamente com deltas para o iOS 6).

Nos meus testes reparei que telas que possuem um navigation bar e um status bar ficam boas se aplicarmos um delta y, no iOS7, de todos os elementos ancorados ao topo da tela de 64 pixels (20 do status + 44 do navigation). Outro ponto importante é que também temos que aplicar um delta negativo aos elementos ancorados em baixo da tela quando a mesma possui um tab bar.

Navigation Bar iOS 7

A imagem acima já representa o app compilado no iOS 7, com os deltas aplicados.

Além dessa questão, outros pequenos ajustes precisam ser feitos no layout do seu aplicativo. Esse é o principal ponto que ocorre com a maioria, por isso deixei aqui essa dica. Espero que ajude vocês.

Ao navegar neste site, você consente o uso de cookies nossos e de terceiros, que coletam informações anônimas e são essenciais para melhorar sua experiência em nosso site.