Lógica para simular Image Map com áreas clicáveis retangulares (exemplo Android)

Uma ideia para simular uma ImageMap utilizando a imagem em plano de fundo e botões transparentes

Boa noite, pessoal. Precisei fazer uma solução de contorno para simular um image map para uma aplicação e quero compartilhar com vocês. Pra quem não conhece, um image map é um recurso HTML para indicar, dentro de uma imagem, áreas que podem ser clicadas pelo usuário. É como inserir links invisíveis dentro da imagem, indicando a coordenada de cada link dentro da imagem.

Eu precisei fazer um image map para uma aplicação em Android, sendo que as áreas clicáveis da minha imagem eram retangulares. Então a idéia que tive foi:
 
  1. Colocar a imagem como fundo de um painel. Vamos chamar de painel pai.
  2. No painel pai, aplicar um layout compatível com a disposição das áreas clicáveis que desejo inserir.
  3. Em cada área da imagem que desejo tornar clicável, inseri um botão dentro do painel pai.
  4. Ajusto o tamanho de cada botão com a área clicável correspondente.
  5. E, por fim, tornar os botões invisível, simplesmente removendo sua cor de background (em Android: android:background=#00000000)
  6. Aí, é só atribuir ações para os seus botões e pronto. Meu usuário vai enxergar uma imagem clicável, mas na verdade teremos botões ninjas reagindo aos seus cliques/toques.

Bem simples. Bom, como os botões originalmente são retangulares, esta é uma idéia válida para áreas retangulares. Acho que a ideia é válida também para aplicativos em outras linguagens...


Um exemplo no Android:

1. Tenho aqui um tabuleiro de jogo-da-velha. Coloquei a mesma como fundo de um painel.

2. As áreas clicáveis que desejo são as nove casas do tabuleiro. Como são dispostas em linhas e colunas, estão em formato de tabela e por isso aplico o layout TableLayout.

Passo 1 e 2: imagem de fundo para meu painel TableLayout

3. Em cada local onde desejo uma área clicável, coloquei um botão. Ou seja, cada casa ganhou um botão.

Passo 3 - meus botões inseridos no painel com a imagem de fundo

4. Ajusto os botões para comportarem corretamente as áreas clicáveis.

Passo 4 - Tamanhos dos botões ajustados às áreas clicáveis da imagem

5. E, por isso, deixei os botões transparentes aplicando a propriedade de background para android:background=#00000000.

Passo 5 - Botões transparentes. Minha imagem de fundo agora é clicável.

6. Aí é só atribuir ações para os botões.
 

E pronto, tenho aqui um tabuleiro de jogo-da-velha clicável, que na verdade são botões dispostas em cima de um background.
Espero que seja uma ideia útil. Até mais!
 

0 comentários

Envie seu comentário