如何堆叠按钮视图来制作钢琴风格的键盘？
How to stack button views to make a piano style keyboard?
我正在尝试制作带按钮的钢琴风格键盘。我将底部按钮（通常在钢琴上为白色）放在三分之一高度。现在我想添加上面的按钮（在钢琴上通常是黑色的）。我想实现类似的目标：
这是我的布局XML：https://drive.google.com/file/d/13sQNbnxCIjDqENbUY17gQStqzASnOwdJ/view
这对 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>
我正在尝试制作带按钮的钢琴风格键盘。我将底部按钮（通常在钢琴上为白色）放在三分之一高度。现在我想添加上面的按钮（在钢琴上通常是黑色的）。我想实现类似的目标：
这是我的布局XML：https://drive.google.com/file/d/13sQNbnxCIjDqENbUY17gQStqzASnOwdJ/view
这对 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>