Um pouco mais sobre UIBezierPath com Swift
Hoje vamos falar um pouco mais sobre UIBezierPath, provavelmente você já deve ter ouvido falar ou mesmo já feito algo com ele. A minha ideia aqui é fazer uma explicação de como funciona a lógica por trás, como criamos os pontos, como um ponto cria uma linha.
Definição
Segundo a Apple, podemos utilizar o UIBezierPath para definir formas geométricas, tais como retângulos, círculos, curvas, polígonos entre outras coisas. Traduzindo, você pode fazer o que quiser, são infinitas as possibilidades.
Caso queira dar mais uma olhada na definição e métodos disponíveis, aqui está o link: https://developer.apple.com/documentation/uikit/uibezierpath
Nesse exemplo, vamos desenhar essa seta abaixo. Parece ser simples, mas não tão simples quando estamos aprendendo a fazer nossos primeiros Path’s. e então, embarque comigo.
Ai você logo pensa, mas porque eu iria fazer algo mais trabalhoso do que somente importar uma imagem no projeto e usá-la? Então, a resposta é bem simples, com o UIBezierPath e CABasicAnimation/UIViewAnimation você pode fazer animações incríveis juntando essas poderosas API’s, deixando seu aplicativo bem mais interessante e amigável. Nesse post não vou entrar na parte de animação, mas prometo que o próximo post será sobre isso, ai você vai ver como as coisas ficam bem mais interessantes. OK, recapitulando, O passo seguinte é desenhar essa seta com UIBezierPath.
· //1 A classe é herdada de CAShapeLayer para facilitar nossa vida, mas poderia ser uma UIView.
· //2 Estamos informando que a assinatura de inicialização/instancia é informar um CGRect (PosiçãoxTamanho).
· //3 Essa classe não suporta ser usada pelo Interface Builder, ou seja, não é possível usa-lá via Xib ou Storyboard.
· //4 Um setup básico somente para informar quais características visuais nosso UIShapeLayer vai ter.
· //5 Informando a cor do shape
· //6 A cor da linha
· //7 A largura da linha
· //1 Pegamos o tamanho da view e dividimos por 2 e obtemos a posição do centro.
· //2 O Tamanho da view para ajudar na hora de criar as linhas/pontos.
//3 Criamos o UIBezierPath
Para facilitar o entendimento quando for criar seus UIBezierPaths, sempre olhe como Ponto e não como linha, acredito que essa confusão seja pela assinatura do método (addLine:to:). Acima, uma imagem com todos os pontos desenhados para facilitar o entendimento.
Na linha 4, estamos falando para o bezier que vamos iniciar nossos pontos a partir do centro da view no topo. Isso informa para o UIBezierPath que ele deve seguir a partir desses pontos. Por exemplo: como passamos o centro da view o ponto de partida, temos que pensar no próximo ponto algo que seja próximo ao ponto de partida. É possível ver que na linha 5 eu fui para o lado direito, mas nada me impediria de ir para o lado esquerdo também, porém, o que não funcionaria é pular para o passo 7 ou outros posteriores, porque o UIBezierPath sempre vai tentar conectar as linhas, e dessa maneira, acredito que não iria funcionar muito bem.
5) Adicionamos mais um ponto que seria até o final do tamanho da view no eixo X e 60 de inclinação vertical no eixo Y.
6) Já podemos pensar que, em seguida, o próximo ponto vai ter a mesma inclinação de Y do ponto anterior e uma pequena diferença no eixo X.
7) Nesse ponto, o objetivo é fazer a calda da seta. Para criarmos é bem simples, é só usar o mesmo ponto X anterior e aplicar o height da view no Ponto Y. Isso quer dizer que a calda terá a mesma altura da view.
8) Agora vamos falar da largura da view e, para isso, vamos mexer no eixo X, o segredinho aqui nesse caso é darmos o mesmo valor que usamos para fazer a diferença no passo 6 que é (size.width — 20), pegamos a diferença que nesse caso é 20 e aplicamos no eixo X, já o ponto Y continua na mesma posição do passo anterior.
9) Nesse passo vamos manter o mesmo valor do eixo X do passo anterior e alterar o eixo Y, O Y terá o mesmo valor do passo 6 para ficar alinhado à altura dos dois pontos.
10) Nesse passo vamos manter para o eixo Y o mesmo do passo anterior e alterar somente o eixo X, ao contrário do passo 5, emque passamos o tamanho (width) da view. Nesse caso, vamos passar o valor 0.
11) E para finalizarmos, vamos informar que o último ponto será o centro da view no eixo X, que não terá elevação no eixo Y. São as mesmas coordenadas do passo 4, só que nesse caso é opcional, pois o UIBezierPath sempre vai procurar uma forma de encontrar a próxima linha baseado nas anteriores e no ponto de partida.
12) Finalizamos nosso UIBezierPath e, em seguida, passamos para o UIShapeLayer renderizar os pontos.
Com UIBezierPaths não existe limite para o que se pode criar com ele, use a imaginação e divirta-se criando.
Procurei bastante conteúdo na internet sobre como funciona o UIBezierPath mas não achei muita coisa, tudo o que encontrei foram muitos códigos, mas sem explicações sem sentido.Pesquisando muito e com a ajuda do meu amigo Antônio, consegui encontrar a lógica por trás.A partir desse momento tudo fez sentido na minha cabeça, por esse motivo resolvi compartilhar esse conteúdo e realmente espero ajudar.
