如何在不同顯示尺寸的大圖像上保持多個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文件，但也許任何人都可以給我一個建議，如何更容易地解決這個問題。

謝謝轉發！

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。