Auto Layout e StackView no iOS9: uma comparação com Android

Ao trabalhar com layouts no Android estamos acostumados com o desafio de criá-los de forma a se adaptar ao maior número possível de telas, pois dada a diversidade de dispositivos, criar um layout que só fica bom para uma única dimensão de tela pode causar problemas para outros usuários.

Esse desafio é tão comum que o próprio Android deu uma ajudinha criando valores para usarmos nas dimensões dos nossos elementos quando queremos um comportamento mais fluido: é o caso do match_parent e wrap_content.

Então, um layout bastante familiar que deixaria um campo de inserção de texto e um botão, ambos centralizados, ocupando a largura total da tela do aparelho seria assim:

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout\_width="match\_parent" android:layout\_height="match\_parent" android:orientation="vertical" android:gravity="center">

<EditText android:layout\_width="match\_parent" android:layout\_height="wrap\_content" android:layout\_marginBotton="30dp"/>

<Button android:layout\_width="match\_parent" android:layout\_height="wrap\_content" android:text="Botão" android:background="#FF800080" android:textColor="#FFFFFFFF"/> </LinearLayout> 

Já no mundo o iOS as coisas são um pouquinho diferentes. Como no início desse sistema operacional, não haviam iPhones com dimensões diferentes de tela, layouts não-fluidos faziam bastante sentido. No máximo tínhamos que nos preocupar com a aparência da nossa aplicação quando o aparelho estivesse na horizontal, mas ainda assim seriam apenas dois tipos de layouts diferentes.

As coisas começaram a se complicar em 2012 com o lançamento do iPhone 5, que era o primeiro iPhone a ter uma tela de 4 polegadas, enquanto todos os outros até então tinham 3.5 polegadas. Juntamente com essa meia polegada a mais na tela, veio uma preocupação: se quiséssemos nossa aplicação bonita nos iPhones 4 e 5 teríamos que fazer até quatro layouts diferentes, considerando os aparelhos nas orientações vertical e horizontal!

No entanto, juntamente com esse novo aparelho, na Apple World Wide Conference (WWDC) de 2012 o iOS 6 foi anunciado com uma funcionalidade bastante interessante que existe até hoje: o Auto Layout, uma forma bem legal de criarmos layouts que se adaptam aos diferentes tamanhos de dispositivos!

Hoje em dia o Auto Layout está bastante integrado ao Xcode, tornando seu uso bastante simples. Vamos fazer uma tela parecida com a definida no Android, contendo um campo de texto e um botão ocupando a largura total da tela:

Como estamos focados somente no layout, podemos criar uma aplicação qualquer contendo já uma telinha para manipularmos. No Xcode, vamos escolher Single View Application:

Na sequência, podemos colocar um nome para a app de TesteAutoLayout:

Abrindo o arquivo Main.storyboard, podemos começar a construir nosso layout! Primeiramente, vamos arrastar os dois componentes que teremos, um Text Field e Button que estão no painel no canto inferior direito da IDE:

Com o Button selecionado, vamos selecionar o Attributes Inspector e colocar um background nele para visualizarmos suas dimensões:

Ao final, teremos uma tela com essa cara no nosso storyboard:

Porém, ao rodar essa tela num simulador qualquer (no meu caso, estou usando um simulador para o iPhone 6), olha como ela ficará:

Além disso, as coisas ficam um pouco piores quando rotacionamos a tela. Apertando CMD + seta, temos esse layout:

Vamos usar o Auto Layout para que nossos componentes se adaptem a quaisquer dimensões de tela!

Para facilitar a centralização de múltiplas views em relação a um mesmo ponto, o iOS 9 possui uma funcionalidade chamada Stack View, que nos permite criar uma view que funcionará como container e manipular suas propriedades!

Vamos criar uma Stack View selecionando o Button e o Text Field e clicando em Editor -> Embed In -> Stack View

Com isso, nosso layout ficou completamente estranho:

Com o Stack View selecionado, vamos no Attribute Inspector e colocaremos em Spacing um espaçamento entre as views filhas de 30.

Agora, podemos usar as propriedades de centralização do Auto Layout apenas clicando no nosso Stack View, apertando o CTRL, arrastando para o lado e selecionando a opção Center Vertically in Container:

Vamos fazer a mesma coisa, mas agora arrastando para o lado direito e selecionando a opção Trailing Space to Container Margin:

Por fim, vamos arrastar para o lado esquerdo e selecionaremos a propriedade Leading Space To Container Margin.

Clicando em ambas linhas-guia azuis, vamos definir essa constante para 30 pt:

Por fim, vamos clicar no último botão no canto inferior direito da nossa tela (Resolve Auto Layout Issues) e, em seguida, Update Frames:

Com isso, temos nosso layout fluido, centralizado em qualquer tela! Faça o teste e rode a aplicação!

Veja que conseguimos esse resultado bastante interessante com apenas com alguns cliques! E isso é apenas o começo para demonstrar o poder do Auto Layout juntamente com views agrupadas.

E você, já havia usado Auto Layout nas suas aplicações ou achava que era um bicho de sete cabeças?