Как составить вид кнопок, чтобы сделать клавиатуру в стиле пианино? - PullRequest
Новая
       53

Как составить вид кнопок, чтобы сделать клавиатуру в стиле пианино?

0 голосов
/ 02 ноября 2019

Я пытаюсь сделать клавиатуру в стиле пианино с кнопками. Я поставил нижние кнопки (обычно белые на пианино) на одну треть высоты. Теперь я хочу добавить верхние кнопки (обычно черные на пианино). Я хочу добиться чего-то вроде:

enter image description here

Это мой макет XML: https://drive.google.com/file/d/13sQNbnxCIjDqENbUY17gQStqzASnOwdJ/view

1 Ответ

2 голосов
/ 02 ноября 2019

Это похоже на хорошую задачу для ConstraintLayout. С его помощью вы можете получить плоский макет, где у вас нет вложенности. Основными понятиями в макете являются ограничения. Вы можете прочитать о них больше на 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>

The end result

...