Android ImageButton没有在RelativeLayout中强制透明

Question

我正在尝试将两个图像按钮和一些文本放在一行上。这是布局的 XML：

<?xml version="1.0" encoding="utf-8"?>
<mycompany xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout 
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="28dp"
        android:layout_marginTop="5dp"
        android:orientation="horizontal">

        <ImageButton
            android:id="@+id/sectionDelete"
            android:layout_width="35dp"
            android:layout_height="28dp"
            android:layout_alignParentLeft="true"
            android:src="@drawable/button_delete" />

        <TextView
            android:id="@+id/header"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/sectionDelete"
            android:text="test"
            android:textAllCaps="true"
            android:textColor="@color/navigation_bar"
            android:textSize="16sp"
            android:textStyle="bold" />

        <ImageButton
            android:id="@+id/sectionAdd"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:background="@drawable/button_add" />

    </RelativeLayout>

    <View
        android:id="@+id/line"
        android:layout_marginTop="8dp"
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:background="@android:color/darker_gray" />

</LinearLayout>
</mycompany>

drawable 中每个按钮的选择器 XML：

button_delete.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/delete_button_pressed"
      android:state_pressed="true" />
    <item android:drawable="@drawable/delete_button"
      android:state_focused="true" />
     <item android:drawable="@drawable/delete_button" />
</selector>

button_add.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/button_add_pressed"
      android:state_pressed="true" />
    <item android:drawable="@drawable/button_add_normal"
      android:state_focused="true" />
     <item android:drawable="@drawable/button_add_normal" />
</selector>

在构建器中一切看起来都很好：

但在应用程序中，灰色背景会丢失，图像的边缘（透明）会显示出来，但仅适用于第一张图像：

奇怪的是，第一个图像按钮无法识别图像的透明背景。此外，我需要弄乱RelativeLayout 和第一个ImageButton 的宽度和高度，以使其接近正确的大小。第二次我不需要做任何事情。第一张图没什么特别的。

以下是目录中的图片：

最后一个问题 - 如果空间太长，如何让第二张图片之前的文本换行？现在它在包装之前写在第二张图片下：

这里是所有删除的图像。似乎有透明的背景，但我远非 Gimp 专家。也不确定 StackOverflow 是否保留原版..

更新

我已验证图像是透明的。图像仍然具有白色背景。我还将 XML 更新为如下所示：

<?xml version="1.0" encoding="utf-8"?>
<mycompany xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout 
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:orientation="horizontal">

        <ImageButton
            android:id="@+id/sectionDelete"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:background="@drawable/button_delete" />

        <TextView
            android:id="@+id/header"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/sectionDelete"
            android:layout_toEndOf="@+id/sectionDelete"
            android:layout_toLeftOf="@+id/sectionAdd"
            android:text="test"
            android:textAllCaps="true"
            android:textColor="@color/navigation_bar"
            android:textSize="16sp"
            android:textStyle="bold" />

        <ImageButton
            android:id="@+id/sectionAdd"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true"
            android:background="@drawable/button_add" />

    </RelativeLayout>

    <View
        android:id="@+id/line"
        android:layout_marginTop="8dp"
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:background="@android:color/darker_gray" />

</LinearLayout>
</mycompany>

Answer 1

你应该使用：

    <ImageButton
                android:id="@+id/sectionDelete"
                android:layout_width="35dp"
                android:layout_height="28dp"
                android:layout_alignParentLeft="true"
                android:src="@drawable/button_delete"
                android:background="@android:color/transparent"/>

Answer 2

在 ImageButton 上使用类似“@null”的背景：

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@drawable/bkash"
    android:id="@+id/bid1"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:background="@null" />

Answer 3

您还没有包含您使用的实际 PNG 文件作为删除按钮的图标（Windows 资源管理器的屏幕截图显示您磁盘上的该文件还不够），但我几乎可以肯定该文件缺少阿尔法通道。相反，您希望将 Alpha 通道值设置为零的每个像素都有一个白色。

在某些图像编辑器中打开您的图形并将这些白色像素更改为透明将解决您的问题，但至于您的布局在构建器中与您的设备上“看起来不同”的原因是因为应用了默认主题系统适用于每个应用程序，您可以在此处阅读更多信息：https://developer.android.com/guide/topics/ui/look-and-feel/themes.html

这组默认的、操作系统和设备特定的值决定了应用作者无法确定的事情。

就您的设备而言，其操作系统将应用的背景颜色确定为灰色，而您的构建器并非如此。您的构建器选择背景为白色。您的删除按钮的图形从来都不是透明的，但在您的构建器的白色背景上看起来就像是透明的。

为了使它看起来像在构建器上，您需要自己专门将背景应用到视图的根。在这种情况下，它是一个 LinearLayout，应该如下所示：

<LinearLayout 
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#ffffff">

Answer 4

1) @DimDim 有正确的解决方案，如果它不起作用，删除按钮可能在图像中有白色背景，请使用 png 查看器进行交叉检查。

2) 为了防止文本溢出，试试这个

<TextView
            android:id="@+id/header"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/sectionDelete"
            android:layout_toLeftOf="@+id/sectionAdd"
            android:text="test"
            android:textAllCaps="true"
            android:textColor="@color/navigation_bar"
            android:textSize="16sp"
            android:textStyle="bold" />

并将sectionAdd Image按钮放在XML中这个textview的上方，因为这个textview需要引用sectionAdd。