单击每个按钮/ Android XML时，按钮位于另一个按钮上方答案

【问题标题】：Button comes above another button when click on each of them / Android XML单击每个按钮/ Android XML时，按钮位于另一个按钮上方
【发布时间】：2021-08-18 15:02:14
【问题描述】：

您好 Stack Overflow，我是 Android 新手！

我正在设计两个按钮，其中一个在另一个按钮上方，就像 Photoshop 中的两个图层。

Button ONE position in Android XML editor

我还不能嵌入照片！

这里是按钮ONE：

<Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="84dp"
        android:background="@drawable/empty_yellow_circle"
        android:text="1"
        app:backgroundTint="@null"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent" />

Button TWO position in Android XML editor

这里是按钮TWO：

    android:id="@+id/button2"
    android:layout_width="70dp"
    android:layout_height="70dp"
    android:layout_marginStart="76dp"
    android:layout_marginTop="48dp"
    android:background="@drawable/full_yellow_circle"
    android:text="2"
    app:backgroundTint="@null"
    app:layout_constraintBottom_toBottomOf="@+id/button1"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.558"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/button1"
    app:layout_constraintVertical_bias="1.0" />

我想要什么？ 我想把这个按钮安排为上面的照片，按钮ONE 总是卡在按钮TWO 下方并且永远不会出现在按钮TWO 上方，就像两个固定层。

但在测试运行中，当我点击按钮ONE时，它会出现在按钮TWO的上方，反之为链接照片 > 下面。

When Click on Button ONE and vice

您可以在该按钮上方的照片中看到ONE 边框位于按钮TWO 文本上方。

所以它们不是固定的层，每次点击都会改变排列。 我想要一个固定的安排。

感谢您的帮助！

【问题讨论】：

标签： java android xml kotlin layer

【解决方案1】：

这是因为在点击每个按钮时 transitionZ 会发生变化。为了克服这个问题，请将您的下方按钮 (ONE) 放在一个独立的容器中（其高度为零），并确保其声明位于 XML 布局中的上方按钮 (TWO) 之前。

<FrameLayout
    android:id="@+id/button1_container"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.498"
    app:layout_constraintStart_toStartOf="parent">
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="84dp"
        android:background="@drawable/empty_yellow_circle"
        android:text="1"
        app:backgroundTint="@null" />
</FrameLayout>
<Button
    android:id="@+id/button2"
    android:layout_width="70dp"
    android:layout_height="70dp"
    android:layout_marginStart="76dp"
    android:layout_marginTop="48dp"
    android:background="@drawable/full_yellow_circle"
    android:text="2"
    app:backgroundTint="@null"
    app:layout_constraintBottom_toBottomOf="@+id/button1_container"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.558"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/button1_container"
    app:layout_constraintVertical_bias="1.0" />

这是一个有点讨厌的解决方法，但有帮助。

【讨论】：

感谢您的回复，但我还有一个问题： 1. 它适用于多按钮吗？ 2.当我像以前一样尝试在按钮ONE的右上角再次替换按钮TWO时，在android studio XML编辑器中，不可能再用鼠标做这样的事情拖动，当我努力将按钮拖动到确切位置时，按钮 TWO 突然掉入 FrameLayout 并且该按钮在那之后成为该布局的一部分。
<FrameLayout android:id="@+id/button1_container" <Button android:id="@+id/button1" <Button android:id="@+id/button2"/></FrameLayout> /// 在尝试抓住按钮 ONE 旁边的按钮 TWO 之后 ///

【解决方案2】：

作为第一个答案，您可以将您的第一个布局按钮放入<FrameLayout> ... </FrameLayout>，然后您的问题将得到解决，但这不是设计标准，正如海报所说； 有点恶心。它不适用于多按钮，通过这种方式解决问题后，您会在设计中看到问题和错误。

我解决问题的方法是添加 XML 形状而不是按钮，并在该形状上添加 0 不透明度色调按钮。所以形状是不可点击的，所以点击后它们不会出现在彼此之上。它也很讨厌，但它在设计中更具响应性。

【讨论】：