Desenhando na tela do Android (programaticamente)

Olá galera do UbuntuBlogBr. Sejam bem vindos a mais um tutorial sobre desenvolvimento de apps para Android. Dessa vez vamos desenhar na tela. Desenhar formas básicas como circulo e retângulo e também desenhar na tela imagens (.png) A maneira inicial de construir apps nativos para Android e através de Java/Xml. A modelagem do sistema operacional Android foi criada para interpretar determinado tipo de Xml na criação dos layouts de aplicativos. E para aplicativos sérios (que não são jogos) esses Xmls são facilitadores. Mas para apps que precisam desenhar na tela (como jogos) esses Xml são dispensáveis. Nesse tutorial vamos desenhar objetos na tela sem usar esses Xml de layout (vamos usar apenas o Xml do manifest e desenhar na tela programaticamente).

Vamos criar uma classe ‘NossaView’ que extende a classe ‘View’. A classe ‘View’ tem um método ‘onDraw’ que nos permite desenhar na tela.

Para começar vamos criar uma nova pasta ‘TutorialDesenhando’ dentro da pasta AppProjects. Dentro dessa pasta vamos criar o arquivo ‘AndroidManifest.xml’. Esse arquivo é o mapa do app. Seu conteúdo será:

Depois disso precisamos criar a pasta ‘TutorialDesenhando/src’ e dentro dessa pasta a pasta ‘tutorial’ e dentro dessa pasta vamos criar a pasta ‘desenhando’:
Fica ‘AppProjects/TutorialDesenhando/src/tutorial/desenhando’
Dentro da pasta ‘desenhando’ vamos criar a classe ‘MainActivity.java’. Essa é a classe principal da app. Vamos torná-la uma extensão da classe ‘Activity’ que é a base dos apps. Essa classe ‘Activity’ é muito interessante e muito importante, vale a pena conhecê-la melhor. [http://developer.android.com/reference/android/app/Activity.html]

O código por enquanto fica:

Vamos precisar apagar o arquivo ‘BuidConfig.java’ que esta na pasta ‘gen’

Já temos o esqueleto de uma aplicação Java nativa pura. Já dá até para compilar/instalar/executar (apertando o play no canto superior direito). O resultado é uma tela sem nada, mas esse é o começo. Essa e a tela que vamos pintar.

Vamos começar a mexer com Java. Vamos começar a programar.

Vamos criar uma classe ‘NossaTela’ dentro da classe ‘MainActivity’, no arquivo ‘Mainctivity.java’.


Essa classe vai ser a principal desse tutorial. Nela que vamos nos focar. Ela será uma extensão da classe ‘View’ (http://developer.android.com/reference/android/view/View.html)
Para isso vamos precisar importar o pacote android.view.View.
A IDE notifica um erro porque a classe que criamos precisa ter um método construtor com uma determinada assinatura. Para resolver agente declara o método (com a assinatura correta):

Daê dá erro porque o ‘Context’ não tá importado…. Vamos importar…

O código até aqui fica:

E até agora não desenhamos nada… Mas vamos chegar lá ! Tamos quase lá. Vamos precisar sobrescrever o método ‘onCreate’ da ‘MainActivity’:

Dá erro porque precisamos importar o ‘Bundle’:


Agente precisa desse ‘onCreate’ para ‘setar’ a nossa ‘view’… setContentView(nossatela)…

Podemos começar a lidar com o método ‘onDraw’ (da classe View) que serve para desenhar na tela !

Precisamos importar o ‘canvas’…

Agora a gente já tem quase tudo para usar os métodos
drawCircle
drawRect
drawText
drawBitmap
que são os métodos que nos permitem desenha na tela. São métodos da classe ‘Canvas’ [http://developer.android.com/reference/android/graphics/Canvas.html]

Falta apenas instanciar um ‘Paint’… Todas essas funções usam um ‘Paint’ como parâmetro.

Vamos começar a desenhar na tela utilizando o método ‘DrawText’.
O ‘DrawText’ aceita 4 parametros:
1- O texto a ser desenhado na tela (String)
2- A distância x (qtos pixels a partir do canto direito da tela) (float ou int)
3- A distância y (qtos pixels a partir do alto da tela) (float ou int)
4- O ‘Paint’ (que informa sobre cor, borda, fonte e muito mais…(importante conhecer melhor…))
Se não setarmos uma cor vamos pintar de preto na tela preta…. Não vai dar pra ver… Então vamos setar a cor do ‘Paint’:

E para escrever esse ‘Hello, world’:


Vamos desenhar um círculo azul na tela:


Vamos pintar a tela inteira de verde:

Já deu pra sacar o ‘drawRect’ e o ‘drawBitmap’, né?
A drawBitmap é um pouco mais complicada. É preciso colocar a imagem a ser desenhada na pasta ‘drawable’: ‘TutorialDesenhando/res/drawable/imagem.png’
Precisa importar:

Precisa declarar um atributo da classe ‘MainActivity’:
    Bitmap imagem;
Na oncreate:

Na ondraw:

Essas funções são simples. O complicado é montar (e entender) a estrutura necessária para usá-las. E é isso que esse tutorial apresenta! São funções simples mas poderosas pois permitem que você desenhe na tela rapidamente, com pouco processamento. É baixo nível.
Muito melhor que esse tutorial é o ‘manual de instruções’ (http://developer.android.com/index.html). Mas ele é em inglês. Eu fiz esse tutorial com esmero, na esperança de que o conhecimento de como programar seja disseminado. Recomendo que haja um esforço em tentar entender o manual oficial. Recomendo muito a utilização do Google que me ajudou a conquistar o conhecimento para fazer esse tutorial (e o conhecimento para fazer meus apps). Também foram importantes os tutoriais ‘Vogella’, o site ‘stackoverflow’…
O código ‘completo’ é:


Esse meu tutorial não diz tudo sobre o assunto… Espero apenas que ele sirva como base ou como referência.
Qualquer dúvida, mande um e-mail para mim: [email protected]

Avalie esse Post