Codifique sua própria interface.

Published in

CGRectMake App

3 min readFeb 21, 2016

Nós costumavamos ter um caderninho perto de nossos Macbook Pro para calcular os valores dos componentes do UIKit no iOS, agora não precisamos mais dele.

Alguns desenvolvedores e designers codificam sua UI criando um arquivo .swift (uma subclasse de uma UIView), criando esses componentes com o tamanho e posição que desejam com o CGRectMake( )

Nesse artigo, vamos ensinar você a utilizar o aplicativo CGRectMake (https://goo.gl/p3zcSE) para ajudar a implementar sua UI desde do Sketch ao Xcode.

1. Faça uma UI bem organizada.

Agrupe suas camadas, dê nome a elas e delete qualquer espaço transparente desnecessário.
Confira para qual aparelho você desenhou a sua interface (nesse caso nós fizemos para iPhone 5).

2. Configure sua subclasse do UIView

Crie um arquivo <nome>View.Swift
Crie programaticamente o componente do UIKit que deseja e o adicione a view.

Crie um arquivo <nome>ViewController.Swift;
Crie uma variável chamada <nome>View que é uma instância da view criada anteriormente;
Inicialize sua view em "override func viewDidLoad";

Digite seu arquivo <nome>ViewController.swift como classe customizada da sua View Controller no arquivo Main.storyboard;

3. Ache os valores no Sketch

Você se lembra do primeiro passo? "Faça uma UI bem organizada.", se você acabou cometendo algum erro seu componente vai ser desenhado com limites diferentes do desejado.
No Inspector (área localizada no lado direito da interface do Sketch) você terá os valores que devem ser copiados para o aplicativo CGRectMake.

4. Cole os valores no aplicativo CGRectMake

Você pode baixa-lo aqui: https://goo.gl/p3zcSE

Selecione o aparelho para qual você desenhou sua interface;
Copie os valores do Sketch (ou qualquer software de criação de interfaces) e calcule;
Copie o código gerado e cole no arquivo <nome>View.swift e atribua o quadro (frame) do componente ao CGRect que você acabou de colar;