如何爲鋼琴創造佈局

Question

Hello friends i am working on piano app and i am facing some problem in layout creation i want to create layout like below 

but i am able to create only this 

現在我想添加所有的黑色按鈕，但問題是，我不能夠添加上面的按鈕看法如何能我這樣做，我現在的佈局代碼如下，請告訴我如何實現這一點，現在我可以點擊所有的按鈕，一旦我添加所有的按鈕，然後每個按鈕應該可點擊。

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:background="@color/white" 
    android:orientation="horizontal" > 

    <LinearLayout 
     android:id="@+id/relativeLayout2" 
     android:layout_width="fill_parent" 
     android:layout_height="match_parent" 
     android:background="@color/white" 
     android:weightSum="1.5" > 

     <ImageView 
      android:id="@+id/bw1" 
      android:layout_width="0dip" 
      android:layout_height="match_parent" 
      android:layout_weight=".1" 
      android:background="@drawable/blacknew" /> 

     <ImageView 
      android:id="@+id/bw2" 
      android:layout_width="0dip" 
      android:layout_height="match_parent" 
      android:layout_weight=".1" 
      android:background="@drawable/blacknew" /> 

     <ImageView 
      android:id="@+id/bw3" 
      android:layout_width="0dip" 
      android:layout_height="match_parent" 
      android:layout_weight=".1" 
      android:background="@drawable/blacknew" /> 

     <ImageView 
      android:id="@+id/bw4" 
      android:layout_width="0dip" 
      android:layout_height="match_parent" 
      android:layout_weight=".1" 
      android:background="@drawable/blacknew" /> 

     <ImageView 
      android:id="@+id/bw5" 
      android:layout_width="0dip" 
      android:layout_height="match_parent" 
      android:layout_weight=".1" 
      android:background="@drawable/blacknew" /> 

     <ImageView 
      android:id="@+id/bw6" 
      android:layout_width="0dip" 
      android:layout_height="match_parent" 
      android:layout_weight=".1" 
      android:background="@drawable/blacknew" /> 

     <ImageView 
      android:id="@+id/bw7" 
      android:layout_width="0dip" 
      android:layout_height="match_parent" 
      android:layout_weight=".1" 
      android:background="@drawable/blacknew" /> 

     <ImageView 
      android:id="@+id/bw8" 
      android:layout_width="0dip" 
      android:layout_height="match_parent" 
      android:layout_weight=".1" 
      android:background="@drawable/blacknew" /> 

     <ImageView 
      android:id="@+id/bw9" 
      android:layout_width="0dip" 
      android:layout_height="match_parent" 
      android:layout_weight=".1" 
      android:background="@drawable/blacknew" /> 

     <ImageView 
      android:id="@+id/bw10" 
      android:layout_width="0dip" 
      android:layout_height="match_parent" 
      android:layout_weight=".1" 
      android:background="@drawable/blacknew" /> 

     <ImageView 
      android:id="@+id/bw11" 
      android:layout_width="0dip" 
      android:layout_height="match_parent" 
      android:layout_weight=".1" 
      android:background="@drawable/blacknew" /> 

     <ImageView 
      android:id="@+id/bw12" 
      android:layout_width="0dip" 
      android:layout_height="match_parent" 
      android:layout_weight=".1" 
      android:background="@drawable/blacknew" /> 

     <ImageView 
      android:id="@+id/bw13" 
      android:layout_width="0dip" 
      android:layout_height="match_parent" 
      android:layout_weight=".1" 
      android:background="@drawable/blacknew" /> 

     <ImageView 
      android:id="@+id/bw14" 
      android:layout_width="0dip" 
      android:layout_height="match_parent" 
      android:layout_weight=".1" 
      android:background="@drawable/blacknew" /> 

     <ImageView 
      android:id="@+id/bw15" 
      android:layout_width="0dip" 
      android:layout_height="match_parent" 
      android:layout_weight=".1" 
      android:background="@drawable/blacknew" /> 
    </LinearLayout> 

</RelativeLayout> 

Answer 1

我建議借鑑自己的這些白色和黑色的按鍵。使用View類，重寫draw（）方法並繼續。當然，您可以嘗試使用RelativeLayout，但稍後您會遇到更多問題（如多點觸摸和幻燈片檢測）。

class Piano extends View { 
    public Piano(Context context) { 
     super(context); 
     // TODO Auto-generated constructor stub 
    } 

    Bitmap whiteKey, blackKey; 
    Paint paint = new Paint(); 

    public void draw(Canvas canvas) { 
     if (whiteKey == null) { 
      whiteKey = BitmapFactory.decodeResource(getResources(), R.drawable.whiteKey); 
     } 
     if (blackKey == null) { 
      blackKey = BitmapFactory.decodeResource(getResources(), R.drawable.blackKey); 
     } 

     int keys = 10; 

     // draw white keys 
     for (int i = 0; i < keys; i++) { 
      canvas.drawBitmap(whiteKey, i * whiteKey.getWidth(), 0, paint); 
     } 
     // draw black keys 
     for (int i = 0; i < keys; i++) { 
      if (i != 3 && i != 7) { 
       canvas.drawBitmap(blackKey, i * blackKey.getWidth()+blackKey.getWidth()*0.5f, 0, paint); 
      } 
     } 
    } 
}; 

Answer 2

你可以得到你想要的東西通過使用佈局容器，有了這個就可以覆蓋按鈕和標貼

Answer 3

任何尋找其顯示了鋼琴可以檢查出我的庫項目視圖：AndroidPianoView