saber - Android: ¿cómo hacer una imagen de mapa en la que se pueda hacer clic con cada país produciendo una acción diferente?

mapa de imagen html5

Question

Necesito mostrar una imagen bonita de un mapa de Europa, y quiero que mi aplicación, por ejemplo, muestre una actividad diferente, cuando el usuario haga clic en cada país, cada país del mapa debe tener un onClickListener diferente (o equivalente).

Esencialmente, necesito poder llamar a una función diferente cuando el usuario toca Francia en lugar de España en una imagen como esta: http://commons.wikimedia.org/wiki/File:Blank_map_of_Europe_cropped.svg

¿Cuál sería la mejor manera de hacer esto en Android?

Tengo ideas, pero puede haber alguna forma simple de ignorar.

¡Muchas gracias de antemano!

Saludos, r3mo

Answer 1

Aquí es cómo resolví un problema similar.

Primero duplique la imagen que desea usar como mapa de imagen y coloree cada sección. No hace falta decir, un color diferente para cada sección: D. Luego crea dos vistas de imagen en tu diseño. Establezca el fondo del primero como la imagen que desea mostrar en pantalla y el fondo del segundo como el color en uno.

A continuación, establezca la visibilidad de la segunda ImageView en invisible. Si ejecuta el programa en este punto, debería ver la imagen que desea mostrar. Luego use un oyente OnTouch y obtenga el color del píxel donde tocó. El color corresponderá al de la imagen coloreada.

El siguiente método getColour debería pasar las coordenadas x e y del evento táctil. R.id.img2 es la imagen invisible.

private int getColour( int x, int y)
{
    ImageView img = (ImageView) findViewById(R.id.img2);
    img.setDrawingCacheEnabled(true); 
    Bitmap hotspots=Bitmap.createBitmap(img.getDrawingCache()); 
    img.setDrawingCacheEnabled(false);
    return hotspots.getPixel(x, y);
}

Espero que esto haya sido de alguna ayuda para usted :).

Answer 2

Lo hice con una máscara como Scotty indicó, pero tuve más problemas. Básicamente, los colores devueltos por getPixel fueron ligeramente diferentes que en el archivo de máscara. Lo que hice fue cargar la máscara en la memoria con la escala deshabilitada y con opciones a todo color como esta:

BitmapFactory.Options bitmapOptions = new BitmapFactory.Options();
bitmapOptions.inTargetDensity = 1;
bitmapOptions.inDensity = 1;
bitmapOptions.inDither = false;
bitmapOptions.inScaled = false;
bitmapOptions.inPreferredConfig = Bitmap.Config.ARGB_8888;
mask = BitmapFactory.decodeResource(appContext.getResources(), resMask, bitmapOptions);

Luego busqué los acordes de la imagen a escala como esta:

ImageView map = (ImageView) findViewById(R.id.image);
Drawable drawable = map.getDrawable();
Rect imageBounds = drawable.getBounds();
int scaledHeight = imageBounds.height();
int scaledWidth = imageBounds.width();
int scaledImageOffsetX = Math.round(event.getX()) - imageBounds.left;
int scaledImageOffsetY = Math.round(event.getY()) - imageBounds.top;

int origX = (scaledImageOffsetX * mask.getWidth() / scaledWidth);
int origY = (scaledImageOffsetY * mask.getHeight() / scaledHeight);

if(origX < 0) origX = 0;
if(origY < 0) origY = 0;
if(origX > mask.getWidth()) origX = mask.getWidth();
if(origY > mask.getHeight()) origY = mask.getHeight();

y luego apliqué mask.getPixel (origX, origY). Solo funciona cuando la imagen se escala con android: scaleType = "fitXY" dentro de ImageView; de lo contrario, los acordes están desactivados.

Answer 3

No lo he probado, pero this parece muy prometedor.

Estoy a punto de intentarlo en mi proyecto, espero que funcione para ustedes.

Básicamente, este tipo está tratando de emular el Mapa de Etiqueta HTML en un droide con un zoom de arrastre y pellizco.

Answer 4

Seguí la respuesta de clausundercover pero todavía tenía problemas con la consistencia del color del píxel en una región. Lo que finalmente me funcionó es asegurarme de usar una imagen PNG con un color indexado para la máscara. En mi caso, utilicé la paleta optimizada para la web (216 colores) y me aseguré de que los colores que escogiera fueran valores de esa paleta. Una vez que hice este cambio, obtuve el mismo valor de color en toda la región.