如何在不同显示尺寸的大图像上保持多个ImageView的位置？

Question

我正在尝试创建一个显示吉他和弦的应用程序，在旋转器中选择。

因此，我制作了吉他琴颈的大图像和几个小点图像，位于颈部的音品上。为了显示不同的和弦，我只是设置了正确的点，而其他的点是不可见的。到目前为止一切都很好。

我现在的问题是如何在使用其他具有不同分辨率的设备时将点保持在大ImageView的正确位置。

在这里你可以看到问题：

http://oi48.tinypic.com/68vps5.jpg

这是我的布局文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background" >

    <ImageButton
        android:id="@+id/back"
        android:layout_width="150dp"
        android:layout_height="40dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginRight="0dp"
        android:background="@drawable/back"
        android:contentDescription="back"
        android:text="@string/Lagerfeuer" />

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="40dp"
        android:layout_alignTop="@id/back"
        android:layout_toRightOf="@id/back"
        android:background="@drawable/back2"
        android:contentDescription="back2" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="40dp"
        android:layout_alignLeft="@id/back"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="25dp"
        android:layout_marginTop="12dp"
        android:text="@string/Lagerfeuer"
        android:textColor="#b4b4b4"
        android:textSize="12dp" />

    <Spinner
        android:id="@+id/chordSpinner"
        android:layout_width="fill_parent"
        android:layout_height="40dp"
        android:layout_alignParentBottom="true" />

    <ImageView
        android:id="@+id/griffbrett"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/chordSpinner"
        android:layout_marginBottom="200dp"
        android:adjustViewBounds="true"
        android:src="@drawable/griffbrett" />

    <ImageView
        android:id="@+id/c11"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:layout_alignTop="@id/griffbrett"
        android:layout_marginLeft="13dp"
        android:src="@drawable/dot"
        android:visibility="invisible" />

    <ImageView
        android:id="@+id/c21"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:layout_alignLeft="@id/c11"
        android:layout_below="@id/c11"
        android:layout_marginTop="2dp"
        android:src="@drawable/dot"
        android:visibility="invisible" />

    <ImageView
        android:id="@+id/c31"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:layout_alignLeft="@id/c11"
        android:layout_below="@id/c21"
        android:layout_marginTop="2dp"
        android:src="@drawable/dot"
        android:visibility="invisible" />

    <ImageView
        android:id="@+id/c41"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:layout_alignLeft="@id/c11"
        android:layout_below="@id/c31"
        android:layout_marginTop="2dp"
        android:src="@drawable/dot"
        android:visibility="invisible" />

    <ImageView
        android:id="@+id/c51"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:layout_alignLeft="@id/c11"
        android:layout_below="@id/c41"
        android:layout_marginTop="2dp"
        android:src="@drawable/dot"
        android:visibility="invisible" />

    <ImageView
        android:id="@+id/c61"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:layout_alignLeft="@id/c11"
        android:layout_below="@id/c51"
        android:layout_marginTop="2dp"
        android:src="@drawable/dot"
        android:visibility="invisible" />

    <ImageView
        android:id="@+id/c12"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:layout_alignTop="@id/c11"
        android:layout_marginLeft="22dp"
        android:layout_toRightOf="@id/c11"
        android:src="@drawable/dot"
        android:visibility="invisible" />

    <ImageView
        android:id="@+id/c22"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:layout_alignLeft="@id/c12"
        android:layout_below="@id/c11"
        android:layout_marginTop="2dp"
        android:src="@drawable/dot"
        android:visibility="invisible" />

    <ImageView
        android:id="@+id/c32"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:layout_alignLeft="@id/c12"
        android:layout_below="@id/c21"
        android:layout_marginTop="2dp"
        android:src="@drawable/dot"
        android:visibility="invisible" />

    <ImageView
        android:id="@+id/c42"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:layout_alignLeft="@id/c12"
        android:layout_below="@id/c31"
        android:layout_marginTop="2dp"
        android:src="@drawable/dot"
        android:visibility="invisible" />

    <ImageView
        android:id="@+id/c52"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:layout_alignLeft="@id/c12"
        android:layout_below="@id/c41"
        android:layout_marginTop="2dp"
        android:src="@drawable/dot"
        android:visibility="invisible" />

    <ImageView
        android:id="@+id/c62"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:layout_alignLeft="@id/c12"
        android:layout_below="@id/c51"
        android:layout_marginTop="2dp"
        android:src="@drawable/dot"
        android:visibility="invisible" />

    <ImageView
        android:id="@+id/c13"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:layout_alignTop="@id/c11"
        android:layout_marginLeft="22dp"
        android:layout_toRightOf="@id/c12"
        android:src="@drawable/dot"
        android:visibility="invisible" />

    <ImageView
        android:id="@+id/c23"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:layout_alignLeft="@id/c13"
        android:layout_below="@id/c11"
        android:layout_marginTop="2dp"
        android:src="@drawable/dot"
        android:visibility="invisible" />

    <ImageView
        android:id="@+id/c33"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:layout_alignLeft="@id/c13"
        android:layout_below="@id/c21"
        android:layout_marginTop="2dp"
        android:src="@drawable/dot"
        android:visibility="invisible" />

    <ImageView
        android:id="@+id/c43"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:layout_alignLeft="@id/c13"
        android:layout_below="@id/c31"
        android:layout_marginTop="2dp"
        android:src="@drawable/dot"
        android:visibility="invisible" />

    <ImageView
        android:id="@+id/c53"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:layout_alignLeft="@id/c13"
        android:layout_below="@id/c41"
        android:layout_marginTop="2dp"
        android:src="@drawable/dot"
        android:visibility="invisible" />

    <ImageView
        android:id="@+id/c63"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:layout_alignLeft="@id/c13"
        android:layout_below="@id/c51"
        android:layout_marginTop="2dp"
        android:src="@drawable/dot"
        android:visibility="invisible" />

    <ImageView
        android:id="@+id/c14"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:layout_alignTop="@id/c11"
        android:layout_marginLeft="22dp"
        android:layout_toRightOf="@id/c13"
        android:src="@drawable/dot"
        android:visibility="invisible" />

    <ImageView
        android:id="@+id/c24"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:layout_alignLeft="@id/c14"
        android:layout_below="@id/c11"
        android:layout_marginTop="2dp"
        android:src="@drawable/dot"
        android:visibility="invisible" />

    <ImageView
        android:id="@+id/c34"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:layout_alignLeft="@id/c14"
        android:layout_below="@id/c21"
        android:layout_marginTop="2dp"
        android:src="@drawable/dot"
        android:visibility="invisible" />

    <ImageView
        android:id="@+id/c44"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:layout_alignLeft="@id/c14"
        android:layout_below="@id/c31"
        android:layout_marginTop="2dp"
        android:src="@drawable/dot"
        android:visibility="invisible" />

    <ImageView
        android:id="@+id/c54"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:layout_alignLeft="@id/c14"
        android:layout_below="@id/c41"
        android:layout_marginTop="2dp"
        android:src="@drawable/dot"
        android:visibility="invisible" />

    <ImageView
        android:id="@+id/c64"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:layout_alignLeft="@id/c14"
        android:layout_below="@id/c51"
        android:layout_marginTop="2dp"
        android:src="@drawable/dot"
        android:visibility="invisible" />

    <ImageView
        android:id="@+id/c15"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:layout_alignTop="@id/c11"
        android:layout_marginLeft="22dp"
        android:layout_toRightOf="@id/c14"
        android:src="@drawable/dot"
        android:visibility="invisible" />

    <ImageView
        android:id="@+id/c25"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:layout_alignLeft="@id/c15"
        android:layout_below="@id/c11"
        android:layout_marginTop="2dp"
        android:src="@drawable/dot"
        android:visibility="invisible" />

    <ImageView
        android:id="@+id/c35"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:layout_alignLeft="@id/c15"
        android:layout_below="@id/c21"
        android:layout_marginTop="2dp"
        android:src="@drawable/dot"
        android:visibility="invisible" />

    <ImageView
        android:id="@+id/c45"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:layout_alignLeft="@id/c15"
        android:layout_below="@id/c31"
        android:layout_marginTop="2dp"
        android:src="@drawable/dot"
        android:visibility="invisible" />

    <ImageView
        android:id="@+id/c55"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:layout_alignLeft="@id/c15"
        android:layout_below="@id/c41"
        android:layout_marginTop="2dp"
        android:src="@drawable/dot"
        android:visibility="invisible" />

    <ImageView
        android:id="@+id/c65"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:layout_alignLeft="@id/c15"
        android:layout_below="@id/c51"
        android:layout_marginTop="2dp"
        android:src="@drawable/dot"
        android:visibility="invisible" />

    <ImageView
        android:id="@+id/s1"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:layout_alignParentLeft="true"
        android:layout_alignTop="@id/c11"
        android:src="@drawable/dot"
        android:visibility="invisible" />

    <ImageView
        android:id="@+id/s2"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:layout_alignParentLeft="true"
        android:layout_below="@id/c11"
        android:layout_marginTop="2dp"
        android:src="@drawable/dot"
        android:visibility="invisible" />

    <ImageView
        android:id="@+id/s3"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:layout_alignParentLeft="true"
        android:layout_below="@id/c21"
        android:layout_marginTop="2dp"
        android:src="@drawable/dot"
        android:visibility="invisible" />

    <ImageView
        android:id="@+id/s4"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:layout_alignParentLeft="true"
        android:layout_below="@id/c31"
        android:layout_marginTop="2dp"
        android:src="@drawable/dot"
        android:visibility="invisible" />

    <ImageView
        android:id="@+id/s5"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:layout_alignParentLeft="true"
        android:layout_below="@id/c41"
        android:layout_marginTop="2dp"
        android:src="@drawable/dot"
        android:visibility="invisible" />

    <ImageView
        android:id="@+id/s6"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:layout_alignParentLeft="true"
        android:layout_below="@id/c51"
        android:layout_marginTop="2dp"
        android:src="@drawable/dot"
        android:visibility="invisible" />

</RelativeLayout>

我知道，这可能不是做这种布局的最佳解决方案，我不希望你完全浏览这个长XML文件，但也许任何人都可以给我一个建议如何更容易解决这个问题。 / p>

先谢谢你！

Answer 1

使用xml布局执行此操作需要做很多工作。 我的观点是你创建了一些自定义视图，并实现了onMeasure（）和onDraw方法。您可以在onMeasure（）中设置视图高度，并在onDraw（）方法中绘制这些点。 有一个很好的教程来实现自己的自定义视图
http://developer.android.com/training/custom-views/index.html

如果你真的想在xml布局中这样做，有一种方法： 您可以通过

获取屏幕的高度和宽度

Display display = getWindowManager().getDefaultDisplay(); 
int width = display.getWidth();  // deprecated
int height = display.getHeight();  // deprecated

通过使用屏幕的宽度和高度精确计算，相应地在布局中设置每个imageView的LayoutParams。