Desenhando um gráfico de barras simples com Core Graphics
Core Graphics é um framework da Apple pensado parar desenhar em Swift. Apesar de parecer simples, é uma ferramenta muito potente podendo ser usada com inúmeros propósitos diferentes. Nesse tutorial, vamos dar os primeiros passos em relação a Core Graphics enquanto desenvolvemos um gráfico simples de barras.
Caso queira acompanhar com o projeto, é possível ter acesso clicando aqui.
O primeiro passo é criar um objeto context, ele é o “ambiente” onde a magia acontece, e o desenho é criado
Um gráfico de barras, do ponto de vista visual, nada mais é do que retângulos alinhados, por isso o primeiro passo é aprender como desenhar um retângulo, que futuramente será uma barra.
Lembrando que CGRect é só um dos tipos pensados para desenho geométrico, é possível desenhar qualquer forma usando CGPoint, CGSize, CGVector dentre outros.
Gráficos são maneiras visuais de interpretar dados, por isso, por hora, um for loop simples, vai povoar o nosso array de values, que serão os dados apresentados nos gráficos.
E como cada value equivale ao valor de uma barra, vamos usar um .forEach para percorrer o vetor e construir um retângulo para cada valor. Gráficos de barra representam de maneira comparativa diferentes valores, por isso, cada value vai ser a height de uma barra. Mas se você rodar o projeto agora, seguindo só o que falei, vai perceber um grande problema, só há uma barra em tela.
Na verdade, existem várias barras, mas elas estão na mesma posição, por isso se sobrepõem. Por isso vamos alinhar as barras lado a lado. Com a variável posX, que se inicia em zero, já que queremos que os gráficos comecem no canto da tela. Para entender melhor as coordenadas na tela do iPhone, é só dar uma olhada na imagem ao lado.
Toda vez dentro do .forEach que se terminar de desenhar uma barra, a posX precisa incrementar a largura da barra(var barWidht) mais um fator para dar um espaçamento entre elas, dessa forma, elas vão se alinhar lado a lado.
Ainda pensando em como são as coordenadas no iPhone, o Y incrementa para baixo, por isso, quando rodar o projeto, o seu gráfico de barras vai estar de ponta cabeça. Por isso precisamos “empurrá-las” para baixo.
A lógica para isso é bem simples, sabemos que o tamanho da view menos a altura dos gráficos(em vermelho) é a quantidade que queremos “empurrar”para baixo, aí é só fazer a matemática.
Agora que já temos a altura de cada barra(value), a largura(barWidht), a posição em X(posX) e a posição em Y(postY) é só subtituir os valores em bar.
Agora é só rodar o projeto e o resultado vai ser esse:
Por enquanto, estamos trabalhando com values pequenos, que estão dentro das dimensões da tela do iPhone. Mas é só começar a testar valores altos, que vamos perceber o seguinte comportamento:
As barras estão tão grandes que agora elas saem da tela, por isso precisamos normalizar esses dados. E para isso vamos rebuscar um conhecimento do Ensino Médio, que é o calculo de conversão entre escalas termométricas.
Basicamente, o que precisamos é saber qual o menor e qual o maior valor dentro do array de valores, através das funções min() e max(). Isso porque vamos converter esses valores para 0 e 1, respectivamente.
Com o cálculo claro na cabeça, é só substituir no código. Por fim, para que as barras tenham o tamanho certo, é só multiplicar o valor nomalizado (normalizedValue) pelo tamanho da view, assim, independente do valor de cada barra, elas vão se ajustar proporcionalmente em tela.
Agora suas barras vão estar alinhadas, normalizadas e com a proporção certa.
Ufa, estamos quase no fim, agora é adicionar as legendas.
Mas assim que adicionamos as legendas dois problemas aparecem de cara, uma barra cujo valor é 30, esta visualmente errada, ela aparece como 0 . E a legenda do útimo valor está pulando para fora da view do gráfico.
Aqui, nós percebemos que o gráfico, para se manter normalizado, tem dois comportamentos, um quando o menor valor é zero, e um quando o menor valor é diferente de zero. Por isso, vamos reaplicar a lógica usada para normalizar o gráfico, só que agora de duas maneiras diferentes.
Agora que você sabe o básico, é só explorar mais essa framework incrementado seu gráfico com mais elementos visuais. Para isso a documentação da Apple é o melhor caminho.
Obrigada :)
