如何在LinearLayout中添加位于白键间上方的黑键（单八度钢琴）

嘿，你这个趣味项目挺有意思的！关于在白键之间添加黑键的问题，你考虑用LinearLayout嵌套RelativeLayout的思路完全可行，甚至可以更直接一点——把放白键的水平LinearLayout放到一个RelativeLayout里，然后在同一个RelativeLayout中直接添加黑键View，让它们叠在白键上方，这样就能完美模拟钢琴的键位布局了。

我帮你调整了布局代码，你可以参考一下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:weightSum="100">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="66"
        android:background="@color/colorPrimaryDark" />

    <!-- 用RelativeLayout作为父容器，同时容纳白键和黑键 -->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="34">

        <!-- 白键容器：保持你原来的水平LinearLayout结构 -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:weightSum="100">

            <TextView
                android:id="@+id/leftRail"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="15"
                android:background="@color/colorPrimary" />

            <Button
                android:id="@+id/c_4"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="10"
                android:background="#FFFFFF" />

            <Button
                android:id="@+id/d_4"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="10"
                android:background="#FFFFFF" />

            <Button
                android:id="@+id/e_4"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="10"
                android:background="#FFFFFF" />

            <Button
                android:id="@+id/f_4"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="10"
                android:background="#FFFFFF" />

            <Button
                android:id="@+id/g_4"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="10"
                android:background="#FFFFFF" />

            <Button
                android:id="@+id/a_4"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="10"
                android:background="#FFFFFF" />

            <Button
                android:id="@+id/b_4"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="10"
                android:background="#FFFFFF" />

            <TextView
                android:id="@+id/rightRail"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="15"
                android:background="@color/colorPrimary" />
        </LinearLayout>

        <!-- 黑键部分：叠放在白键上方 -->
        <!-- C# 键：位于C和D白键之间 -->
        <Button
            android:id="@+id/c_sharp_4"
            android:layout_width="7%"
            android:layout_height="70%"
            android:layout_marginStart="18%"
            android:background="#000000" />

        <!-- D# 键：位于D和E白键之间 -->
        <Button
            android:id="@+id/d_sharp_4"
            android:layout_width="7%"
            android:layout_height="70%"
            android:layout_marginStart="28%"
            android:background="#000000" />

        <!-- F# 键：位于F和G白键之间 -->
        <Button
            android:id="@+id/f_sharp_4"
            android:layout_width="7%"
            android:layout_height="70%"
            android:layout_marginStart="48%"
            android:background="#000000" />

        <!-- G# 键：位于G和A白键之间 -->
        <Button
            android:id="@+id/g_sharp_4"
            android:layout_width="7%"
            android:layout_height="70%"
            android:layout_marginStart="58%"
            android:background="#000000" />

        <!-- A# 键：位于A和B白键之间 -->
        <Button
            android:id="@+id/a_sharp_4"
            android:layout_width="7%"
            android:layout_height="70%"
            android:layout_marginStart="68%"
            android:background="#000000" />

    </RelativeLayout>

</LinearLayout>

关键思路说明： #

• 层级结构：RelativeLayout作为父容器，先放置白键的LinearLayout（占据整个底部空间），再添加黑键View。因为RelativeLayout的子View会按添加顺序堆叠，所以黑键会自动覆盖在白键上方，符合钢琴的视觉效果。
• 黑键定位：通过layout_marginStart调整黑键的水平位置，让它们刚好卡在对应白键的中间；设置layout_height="70%"让黑键比白键短，宽度设为7%（比白键的10%窄），更贴近真实钢琴的比例。
• 点击交互：黑键在白键上方，所以点击黑键时会优先触发黑键的点击事件，完全不影响白键的交互逻辑。

如果需要更精准的定位，你还可以根据实际显示效果微调layout_marginStart的百分比数值，或者改用ConstraintLayout来实现更灵活的约束定位，但当前的方案已经能满足你的基础需求啦！

内容的提问来源于stack exchange，提问作者axesspwns