如何为钢琴创建布局

Question

我正在开发一款钢琴应用程序，但在布局创建方面遇到了一些问题。我希望创建一个如下所示的布局：

但是我只能创建这个。

现在我想添加所有黑色按钮，但问题是我无法在这些按钮上方添加视图。我该怎么做？我的当前布局代码如下，请建议我如何实现此目标。现在我能够点击所有的按钮，一旦我添加了所有的按钮，每个按钮都应该可以点击。

<?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> 

- varun

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);
            }
        }
    }
};

- Zielony

---

这很简单。你应该添加一些代码来确定键的数量。我不知道你想要10个、12个、50个还是尽可能多的键。 - Zielony

感谢您的指导，现在我能够通过黑白键的组合创建所需的视图了。我正在创建一个带有15个白键和10个黑键的钢琴。由于我对画布不熟悉，您能告诉我如何在每个键上播放不同的声音吗？ - varun

我猜你可以接受这个答案并添加另一个问题。这很简单，你需要将笔记录制为mp3格式。然后，你需要检测当有人按下键时。为了做到这一点，只需检查键的矩形形状是否包含用户手指下方的点即可。 - Zielony

请分享一些代码片段，如果可能的话。我现在已经有了所有的声音片段，我希望每当我按下任何键时，它都会被突出显示并播放相应的声音。 - varun

你的答案很棒，但是可以请你分享一段代码片段吗？ - arslan haktic

Answer 2

通过使用布局容器，您可以获得所需的内容，这样就可以叠加按钮和标签。

- Eveli