Android 中具有不同状态的重叠按钮

Question

我正在为 Android 制作钢琴应用程序。使用 xml，我制作了两个矩形按钮，一个白键和一个黑键。我需要黑键像普通钢琴一样重叠两个白键。

我创建了两个不同的可绘制 xml 文件的按钮有两种不同的状态（按下和未按下）。按黑键时，它工作正常。但是，当我按下白键时，新的可绘制形状会与黑键重叠。

正常

白压

据我所知，默认情况下，黑键位于其他两个白键之上，因为我在 XML 中最后定义了它。也许因为我在按下按钮时正在访问一个新的可绘制文件作为按钮的源，所以它在顶部绘制视图？有什么办法可以防止这种情况发生吗？我在下面提供了每个 XML 文件的代码。感谢您的帮助！

主要XML:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"      android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
android:background="#ffcccccc"
android:gravity="top|center"
tools:context=".MainActivity">
<Button
    android:layout_width="45dp"
    android:layout_height="150dp"
    android:layout_marginTop="100dp"
    android:background="@drawable/wselector"
    android:id="@+id/button1"


    />

<Button
    android:layout_width="45dp"
    android:layout_height="150dp"
    android:layout_marginTop="100dp"
    android:background="@drawable/wselector"
    android:id="@+id/button2"
    android:layout_toRightOf="@id/button1"

    />
<Button
    android:layout_width="40dp"
    android:layout_height="100dp"
    android:layout_marginTop="100dp"
    android:background="@drawable/selector"
    android:id="@+id/button3"
    android:layout_toRightOf="@id/button1"
    android:layout_marginLeft="-20dp"
    android:onClick="soundmmm"
    />

选择器XML:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="@drawable/wpressed"
    android:paddingTop="10sp"></item>
<item android:drawable="@drawable/wnormal" android:layout_marginTop="50dp">
</item>
</selector>

未按下XML:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/shadow" />

<item android:bottom="@dimen/layer_padding">
    <shape android:shape="rectangle">
        <corners android:radius="@dimen/corner_radius" />
        <solid android:color="#ffffffff"/>
    </shape>
</item>
</layer-list>

按下 XML:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <solid android:color="#00000000"/>
    </shape>
</item>
<item android:top="@dimen/layer_padding">
    <shape android:shape="rectangle">
        <corners android:radius="@dimen/corner_radius" />
        <solid android:color="#ffffffff" />
    </shape>
</item>
</layer-list>

Answer 1

取每个 Button 并将其包装在 FrameLayout 中，如下所示：

    <FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toRightOf="@id/button1">

    <Button
        android:id="@+id/button2"
        android:layout_width="45dp"
        android:layout_height="150dp"
        android:layout_marginTop="100dp"
        android:background="@drawable/wselector"
        android:onClick="soundmmm" />
</FrameLayout>

（这仅是右白键的演示。）Android 应遵循 FrameLayout 的布局顺序并将白键图像保持在黑键之后。

此解决方案的缺点是会使您的布局复杂化。如果您能找到避免额外布局的解决方案，我会选择它；否则，这应该对您有用。

Answer 2

android:stateListAnimator="@null"

这对我有用。事实证明它与按钮状态根本无关，而是默认的 Android 按钮动画。

Android 中具有不同状态的重叠按钮

Overlapping buttons with different states in Android

css

xml

android

android-layout

android-button