如何堆叠按钮视图以制作钢琴风格的键盘？答案

【问题标题】：How to stack button views to make a piano style keyboard?如何堆叠按钮视图以制作钢琴风格的键盘？
【发布时间】：2019-11-01 21:00:53
【问题描述】：

我正在尝试制作带有按钮的钢琴风格键盘。我把底部的按钮（通常是钢琴上的白色）放在三分之一的高度。现在我想添加上面的按钮（在钢琴上通常是黑色的）。我想达到以下目标：

这是我的布局 XML：https://drive.google.com/file/d/13sQNbnxCIjDqENbUY17gQStqzASnOwdJ/view

【问题讨论】：

问题过于宽泛，请专注于您面临的具体问题。见How To Ask
我还是初学者，但我首先想到的是我不知道如何将 LinearLayout 放在 LinearLayout 上。
请尝试编写代码，如果在编码过程中出现任何问题，我们将很乐意为您提供帮助。我认为最好从一个简单的教程开始，然后尝试通过课程或教程来学习 android。
@Soroosh 我看了大约 8 小时的 30 小时课程，但我需要的东西并没有全部涵盖。

标签： android android-layout android-linearlayout

【解决方案1】：

这对ConstraintLayout 来说似乎是一项好任务。有了它，您可以实现没有嵌套的 flat 布局。布局中的主要概念是约束。你可以在https://developer.android.com/training/constraint-layout阅读更多关于它们的信息。

在ConstraintLayout 中，您可以使用约束来组织视图。也就是说，您可以说白键都应该被限制在父级的底部，而它们的顶部应该被限制在屏幕高度 2/3 处的指南中。然后你可以说第一个按钮应该最靠近屏幕的开头，在第二个按钮旁边，第三个按钮旁边等等。布局会自动将它们均匀分布。

之后，您将黑键放在上面。您可以使用百分比值（即父宽度的百分比）来指定它们的宽度。最后，你会得到这样的结果：

// Layout
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/darker_gray">

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/topGuideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.67" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/blackKeysGuideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.85" />

    <!-- White buttons -->

    <Button
        android:id="@+id/button1"
        style="@style/KeyboardKeyWhite"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/button2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/topGuideline" />

    <Button
        android:id="@+id/button2"
        style="@style/KeyboardKeyWhite"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/button3"
        app:layout_constraintStart_toEndOf="@id/button1"
        app:layout_constraintTop_toTopOf="@id/topGuideline" />

    <Button
        android:id="@+id/button3"
        style="@style/KeyboardKeyWhite"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/button4"
        app:layout_constraintStart_toEndOf="@id/button2"
        app:layout_constraintTop_toTopOf="@id/topGuideline" />

    <Button
        android:id="@+id/button4"
        style="@style/KeyboardKeyWhite"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/button5"
        app:layout_constraintStart_toEndOf="@id/button3"
        app:layout_constraintTop_toTopOf="@id/topGuideline" />

    <Button
        android:id="@+id/button5"
        style="@style/KeyboardKeyWhite"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/button6"
        app:layout_constraintStart_toEndOf="@id/button4"
        app:layout_constraintTop_toTopOf="@id/topGuideline" />

    <Button
        android:id="@+id/button6"
        style="@style/KeyboardKeyWhite"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/button7"
        app:layout_constraintStart_toEndOf="@id/button5"
        app:layout_constraintTop_toTopOf="@id/topGuideline" />

    <Button
        android:id="@+id/button7"
        style="@style/KeyboardKeyWhite"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/button6"
        app:layout_constraintTop_toTopOf="@id/topGuideline" />

    <!-- Black buttons -->

    <Button
        android:id="@+id/blackButton1"
        style="@style/KeyboardKeyBlack"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="@id/blackKeysGuideline"
        app:layout_constraintEnd_toEndOf="@id/button2"
        app:layout_constraintStart_toStartOf="@id/button1"
        app:layout_constraintTop_toTopOf="@id/topGuideline" />

    <Button
        android:id="@+id/blackButton2"
        style="@style/KeyboardKeyBlack"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="@id/blackKeysGuideline"
        app:layout_constraintEnd_toEndOf="@id/button3"
        app:layout_constraintStart_toStartOf="@id/button2"
        app:layout_constraintTop_toTopOf="@id/topGuideline" />

    <Button
        android:id="@+id/blackButton3"
        style="@style/KeyboardKeyBlack"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="@id/blackKeysGuideline"
        app:layout_constraintEnd_toEndOf="@id/button5"
        app:layout_constraintStart_toStartOf="@id/button4"
        app:layout_constraintTop_toTopOf="@id/topGuideline" />

    <Button
        android:id="@+id/blackButton4"
        style="@style/KeyboardKeyBlack"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="@id/blackKeysGuideline"
        app:layout_constraintEnd_toEndOf="@id/button6"
        app:layout_constraintStart_toStartOf="@id/button5"
        app:layout_constraintTop_toTopOf="@id/topGuideline" />

    <Button
        android:id="@+id/blackButton5"
        style="@style/KeyboardKeyBlack"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="@id/blackKeysGuideline"
        app:layout_constraintEnd_toEndOf="@id/button7"
        app:layout_constraintStart_toStartOf="@id/button6"
        app:layout_constraintTop_toTopOf="@id/topGuideline" />

</androidx.constraintlayout.widget.ConstraintLayout>

// Styles
<style name="KeyboardKeyWhite" parent="Widget.AppCompat.Button">
        <item name="android:background">@android:color/white</item>
        <item name="android:layout_margin">2dp</item>
    </style>

<style name="KeyboardKeyBlack" parent="Widget.AppCompat.Button">
    <item name="android:background">@android:color/black</item>
    <item name="android:layout_margin">2dp</item>
    <item name="layout_constraintWidth_percent">0.08</item>
</style>

【讨论】：