Android中不同状态的重叠按钮答案

【问题标题】：Overlapping buttons with different states in AndroidAndroid中不同状态的重叠按钮
【发布时间】：2017-03-21 16:42:06
【问题描述】：

我正在为 Android 制作 Piano 应用程序。使用 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>

【问题讨论】：

可能重复stackoverflow.com/questions/18074303/…

标签： android css xml android-layout android-button

【解决方案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 应该遵循FrameLayouts 的布局顺序，并将白键图像保持在黑键之后。

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

【讨论】：

【解决方案2】：

android:stateListAnimator="@null"

Don't bring button to foreground on click

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

【讨论】：