android - Android dynamic arrangement layout

Question

I'm developing a harmonica playing android app, in which a harmonica instrument is displayed and some part of it are clickable.

I want to show a full width picture of instrument (the height is adjusted accordingly) which some parts of it are clickable and they must be located dynamically according to the picture size.

The problem is I don't know how to use layout elements to achieve this so it's renderable on device with different screen size. What layout to use?

Show the instrument as an ImageView or background of a layout and how to make it fit?

Is there anyway to put the button relative to the width and height of the picture? or it must be done programmatically? and also they width and height must change as holes get bigger or smaller.

I don't have much experience with android layouts and I am totally stuck on how to do this.

This is a sample picture of instrument:

I want make holes clickable although the picture size change in different devices.

Any suggestion would help me so much.

Answer 1

有ImageView一个内部Matrix控制图像的缩放方式。

我们可以得到这个矩阵并将其反转，这样我们就可以将缩放图像上的触摸转换为原始图像中的坐标。

float[] xy = new float[]{x, y}; // the xy from the touch event
Matrix inverse = new Matrix();
imageView.getImageMatrix().inverse(inverse);
inverse.mapPoints(xy); // xy now contains the coordinates of the click in the original image

现在您需要做的就是匹配xy每个音符位置的一些保存值。