Android 将一个按钮置于两个按钮之间和上方线性布局_Android_Android Layout

Android 将一个按钮置于两个按钮之间和上方线性布局

android android-layout

Android 将一个按钮置于两个按钮之间和上方线性布局,android,android-layout,Android,Android Layout,我正在做一个有趣的小项目，我正在制作一架单八度钢琴。我试图找出如何在白键之间和白键之上添加黑键。我想我需要在我的水平线布局中使用嵌套布局（可能是相对布局）。它看起来应该与下图类似我建议您使用因为它为您提供了完全响应的UI。并根据您的要求非常轻松地管理视图。因为Sunny已经建议使用它，因为它可以处理很多事情。此外，您也可以使用比例和准则，使按钮无论在屏幕上都具有相同的形状，而不是使用固定的高度和权重如果您将这12个按钮放在各自独立的布局中，您可以在以后使用它构建一个完整的键盘。我知道这不

我正在做一个有趣的小项目，我正在制作一架单八度钢琴。我试图找出如何在白键之间和白键之上添加黑键。我想我需要在我的水平线布局中使用嵌套布局（可能是相对布局）。它看起来应该与下图类似

我建议您使用

因为它为您提供了完全响应的UI。并根据您的要求非常轻松地管理视图。

因为Sunny已经建议使用它，因为它可以处理很多事情。此外，您也可以使用比例和准则，使按钮无论在屏幕上都具有相同的形状，而不是使用固定的高度和权重

如果您将这12个按钮放在各自独立的布局中，您可以在以后使用它构建一个完整的键盘。我知道这不是一个好的、正确的归档方法。但是使用

Framelayout

和

Linearlayout

我们可以像下面这样存档

Layout.xml

文件

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

    <View
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@color/colorPrimaryDark" />

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="3">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:weightSum="9">

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

            <Button
                android:id="@+id/c_4"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1" />

            <Button
                android:id="@+id/d_4"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1" />

            <Button
                android:id="@+id/e_4"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1" />

            <Button
                android:id="@+id/f_4"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1" />

            <Button
                android:id="@+id/g_4"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1" />

            <Button
                android:id="@+id/a_4"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1" />

            <Button
                android:id="@+id/b_4"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1" />

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

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:orientation="horizontal">

            <View
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1.5" />

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="2"
                android:orientation="horizontal">

                <Button
                    android:id="@+id/black_1"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_marginEnd="2dp"
                    android:layout_weight="1"
                    android:background="#000000" />

                <Button
                    android:id="@+id/black_2"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_marginStart="2dp"
                    android:layout_weight="1"
                    android:background="#000000" />

            </LinearLayout>

            <View
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1" />

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="3"
                android:orientation="horizontal">

                <Button
                    android:id="@+id/black_3"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:background="#000000"
                    android:layout_marginEnd="2dp"
                    android:layout_weight="1" />

                <Button
                    android:id="@+id/black_4"
                    android:layout_width="0dp"
                    android:layout_marginStart="2dp"
                    android:layout_marginEnd="2dp"
                    android:layout_height="match_parent"
                    android:background="#000000"
                    android:layout_weight="1" />

                <Button
                    android:id="@+id/black_5"
                    android:layout_width="0dp"
                    android:layout_marginStart="2dp"
                    android:layout_height="match_parent"
                    android:background="#000000"
                    android:layout_weight="1" />
            </LinearLayout>

            <View
                android:layout_width="0dp"
                android:layout_height="match_parent"

                android:layout_weight="1.5" />

        </LinearLayout>

    </FrameLayout>


</LinearLayout>

输出

谢谢。

无需使用嵌套布局，您可以使用来实现这一点

使用constraintlayout可以很容易地将一个视图置于另一个视图之上，您可能需要这样做：

<?xml version="1.0" encoding="utf-8"?>


<android.support.constraint.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  android:layoutDirection="ltr">


<Button
    android:id="@+id/button"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginBottom="8dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/button2"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/button2"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="@+id/button"
    app:layout_constraintEnd_toStartOf="@+id/button3"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button"
    app:layout_constraintTop_toTopOf="@+id/button" />

<Button
    android:id="@+id/button3"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="@+id/button"
    app:layout_constraintEnd_toStartOf="@+id/button4"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button2"
    app:layout_constraintTop_toTopOf="@+id/button" />

<Button
    android:id="@+id/button4"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="@+id/button"
    app:layout_constraintEnd_toStartOf="@+id/button5"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button3"
    app:layout_constraintTop_toTopOf="@+id/button" />

<Button
    android:id="@+id/button5"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="@+id/button"
    app:layout_constraintEnd_toStartOf="@+id/button6"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button4"
    app:layout_constraintTop_toTopOf="@+id/button" />

<Button
    android:id="@+id/button6"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="@+id/button5"
    app:layout_constraintEnd_toStartOf="@+id/button7"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button5"
    app:layout_constraintTop_toTopOf="@+id/button5" />

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

<Button
    android:id="@+id/button12"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginTop="8dp"
    android:background="#000"
    app:layout_constraintEnd_toStartOf="@+id/button7"
    app:layout_constraintHeight_percent=".3"
    app:layout_constraintStart_toStartOf="@+id/button7"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintWidth_percent="0.1" />

<Button
    android:id="@+id/button15"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginTop="8dp"
    android:background="#000"
    app:layout_constraintEnd_toStartOf="@+id/button6"
    app:layout_constraintHeight_percent=".3"
    app:layout_constraintStart_toStartOf="@+id/button6"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintWidth_percent="0.1" />

<Button
    android:id="@+id/button16"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginTop="8dp"
    android:background="#000"
    app:layout_constraintEnd_toStartOf="@+id/button3"
    app:layout_constraintHeight_percent=".3"
    app:layout_constraintStart_toStartOf="@+id/button3"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintWidth_percent="0.1" />

<Button
    android:id="@+id/button18"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="18dp"
    android:layout_marginTop="8dp"
    android:background="#000"
    app:layout_constraintEnd_toStartOf="@+id/button2"
    app:layout_constraintHeight_percent=".3"
    app:layout_constraintStart_toEndOf="@+id/button"
    app:layout_constraintStart_toStartOf="@+id/button2"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintWidth_percent="0.1" />

<Button
    android:id="@+id/button14"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginTop="8dp"
    android:background="#000"
    app:layout_constraintEnd_toStartOf="@+id/button5"
    app:layout_constraintHeight_percent=".3"
    app:layout_constraintStart_toStartOf="@+id/button5"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintWidth_percent="0.1" />

</android.support.constraint.ConstraintLayout>

如果您想知道为什么会有响应：

我没有在视图上使用固定的大小值，我告诉我的视图采用屏幕高度和宽度的

xx%

，这样我的布局就保持了响应性

如果你告诉自己“这个新的布局看起来很难…” 起初，它可能看起来很难处理，但您可能想尝试一下，因为ConstraintLayout是：

使用ConstraintLayout构建UI时，它确实是用户友好的
ConstraintLayout非常简单易学，它有很好的文档和教程（和很多教程一样）
一旦你学会了它，你会发现你节省了大量的开发时间，因为你的UI制作非常快
Constraint layout旨在支持不同的屏幕大小，因此无需为每个屏幕大小构建布局（这也与之前的优点相连接，节省了开发时间）

线性布局

不允许重叠子项。您需要使用一个

视图组

；e、例如，

ConstraintLayout

，

RelativeLayout

，等等。不过，对于类似的情况，我实际上建议编写一个自定义的

视图。
<?xml version="1.0" encoding="utf-8"?>


<android.support.constraint.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  android:layoutDirection="ltr">


<Button
    android:id="@+id/button"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginBottom="8dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/button2"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/button2"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="@+id/button"
    app:layout_constraintEnd_toStartOf="@+id/button3"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button"
    app:layout_constraintTop_toTopOf="@+id/button" />

<Button
    android:id="@+id/button3"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="@+id/button"
    app:layout_constraintEnd_toStartOf="@+id/button4"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button2"
    app:layout_constraintTop_toTopOf="@+id/button" />

<Button
    android:id="@+id/button4"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="@+id/button"
    app:layout_constraintEnd_toStartOf="@+id/button5"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button3"
    app:layout_constraintTop_toTopOf="@+id/button" />

<Button
    android:id="@+id/button5"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="@+id/button"
    app:layout_constraintEnd_toStartOf="@+id/button6"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button4"
    app:layout_constraintTop_toTopOf="@+id/button" />

<Button
    android:id="@+id/button6"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="@+id/button5"
    app:layout_constraintEnd_toStartOf="@+id/button7"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button5"
    app:layout_constraintTop_toTopOf="@+id/button5" />

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

<Button
    android:id="@+id/button12"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginTop="8dp"
    android:background="#000"
    app:layout_constraintEnd_toStartOf="@+id/button7"
    app:layout_constraintHeight_percent=".3"
    app:layout_constraintStart_toStartOf="@+id/button7"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintWidth_percent="0.1" />

<Button
    android:id="@+id/button15"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginTop="8dp"
    android:background="#000"
    app:layout_constraintEnd_toStartOf="@+id/button6"
    app:layout_constraintHeight_percent=".3"
    app:layout_constraintStart_toStartOf="@+id/button6"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintWidth_percent="0.1" />

<Button
    android:id="@+id/button16"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginTop="8dp"
    android:background="#000"
    app:layout_constraintEnd_toStartOf="@+id/button3"
    app:layout_constraintHeight_percent=".3"
    app:layout_constraintStart_toStartOf="@+id/button3"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintWidth_percent="0.1" />

<Button
    android:id="@+id/button18"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="18dp"
    android:layout_marginTop="8dp"
    android:background="#000"
    app:layout_constraintEnd_toStartOf="@+id/button2"
    app:layout_constraintHeight_percent=".3"
    app:layout_constraintStart_toEndOf="@+id/button"
    app:layout_constraintStart_toStartOf="@+id/button2"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintWidth_percent="0.1" />

<Button
    android:id="@+id/button14"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginTop="8dp"
    android:background="#000"
    app:layout_constraintEnd_toStartOf="@+id/button5"
    app:layout_constraintHeight_percent=".3"
    app:layout_constraintStart_toStartOf="@+id/button5"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintWidth_percent="0.1" />

</android.support.constraint.ConstraintLayout>

app:layout_constraintHeight_percent
app:layout_constraintWidth_percent