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

Question

你好 Stack Overflow，我是 Android!

的新手

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

Button ONE position in Android XML editor

I cannot embed photos yet!

这是按钮 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 上方=62=]，副为下面链接的照片。

When Click on Button ONE and vice

You can see in photo above that button ONE border comes above button TWO text.

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

感谢您的帮助！

Answer 1

那是因为在点击每个按钮的同时 transitionZ 发生了变化。为了克服这个问题，将你的下方按钮 (ONE) 放在一个独立的容器中（高度为零）并确保它的声明出现在之前 [=18= 中的上方按钮（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" />

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

Answer 2

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

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

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

Button comes above another button when click on each of them / Android XML

java

xml

android

layer

kotlin