将 ImageView 放在按钮上 android

Question

我正在尝试使用 RelativeLayout 将 ImageView 放置在 Button 上。这是我的 xml:

<RelativeLayout
                android:layout_width="0dip"
                android:layout_height="match_parent"
                android:layout_margin="10dp"
                android:layout_weight="0.50" >

                <Button
                    android:id="@+id/btnFindDaysInBetween"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/blue_500"
                    android:text="@string/dt_text_days" />

                <ImageView
                    android:id="@+id/imageview_find_days_in_between"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:contentDescription="@string/empty"
                    android:src="@drawable/ic_check_circle_white" />
            </RelativeLayout>

图片截图如下：

如您所见，ImageView 的源图像不可见。但是，如果我将后面的按钮更改为 ImageView，则顶部 ImageView 的图像是可见的。请参考以下..

已更改 xml：

 <RelativeLayout
                android:layout_width="0dip"
                android:layout_height="match_parent"
                android:layout_margin="10dp"
                android:layout_weight="0.50" >

                <!-- 
                <Button
                    android:id="@+id/btnFindDaysInBetween"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/blue_500"
                    android:text="@string/dt_text_days" />
                -->
                <ImageView
                    android:id="@+id/imageview_find_days"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_centerInParent="true"
                    android:contentDescription="@string/empty"
                    android:src="@drawable/ic_send_black" />

                <ImageView
                    android:id="@+id/imageview_find_days_in_between"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:contentDescription="@string/empty"
                    android:src="@drawable/ic_check_circle_white" />
            </RelativeLayout>

更改了 xml 的屏幕截图：

我在第一个布局中做错了什么？

Answer 1

android:background 存在于所有视图中。顾名思义，这就是背景中的内容。

android:src 存在于 ImageViews 及其子类中。您可以将其视为前景。因为 ImageView 是 View 的子类，所以你甚至有 android:background。

如果前景小于背景，则未被前景覆盖的背景部分将可见。此外，您可以在前景中使用透明度，在这种情况下背景将是可见的（透明的）。您可以将背景用于所有视图。但是您只能将 SRC 用于 ImageView & ImageButton.....

Answer 2

@Vamsi 我尝试了您的两种组合，但第一个组合不适用于 Button。你必须通过 ImageView. 这是我尝试使用 ImageView:

虽然我尝试用 Button 来做，看看结果是什么：

我试图更改顺序，但都是徒劳！看来你必须选择 ImageView 或 ImageButton.

最后！你可以看到我尝试了什么：

<RelativeLayout 
    android:layout_height="match_parent"
    android:layout_width="match_parent">

    <!-- <ImageView
        android:id="@+id/btnTest"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:src="@drawable/ic_launcher_web"
        android:contentDescription="@string/app_name"
        android:text="@string/app_name" /> -->

    <ImageView
        android:layout_width="wrap_content"
        android:id="@+id/imgView"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:contentDescription="@string/app_name"
        android:src="@drawable/ic_launcher" />

    <Button
        android:id="@+id/btnTest"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/imgView"
        android:layout_alignTop="@+id/imgView"
        android:text="@string/app_name" />

</RelativeLayout>

我曾用 ImageView 或 ImageButton（可能是 ImageView）做过同样的工作，并尝试过与 Button 相同的方法。

谢谢

Answer 3

使用 ImageButton 替换 Button 并设置 ImageButton 背景为透明。

<ImageButton
    android:id="@+id/btnFindDaysInBetween"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/blue_500_text"
    android:background="@android:color/transparent"  
    />

<ImageView
    android:id="@+id/imageview_find_days_in_between"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:contentDescription="@string/empty"
    android:src="@drawable/ic_check_circle_white" />

您可以制作一个具有您的 blue_500 颜色和文字的图像（这很容易创建），然后将此图像设置为您的 ImageButton。之后，您的 ImageView 将显示在 ImageButton 的顶部。

希望对您有所帮助！

Answer 4

原因其实非常简单。 :) 我们太专注于 2D 思维，以至于我们忽略了 Z 中的 elevation -

您的第一个布局没有问题。 Button 只是比 ImageView 高 elevation - 恰好 1dp 高。因此，无论怎么排列这两个视图，Button 都在上面。

一点证明:

一个按钮，默认获得 Widget.Material.Button 样式：

<!-- Bordered ink button -->
<style name="Widget.Material.Button">
    <item name="background">@drawable/btn_default_material</item>
    <item name="textAppearance">?attr/textAppearanceButton</item>
    <item name="minHeight">48dip</item>
    <item name="minWidth">88dip</item>
    <item name="stateListAnimator">@anim/button_state_list_anim_material</item>
    <item name="focusable">true</item>
    <item name="clickable">true</item>
    <item name="gravity">center_vertical|center_horizontal</item>
</style>

引入此高度的属性是android:stateListAnimator。 StateListAnimator类似于StateListDrawable，提供状态变化动画。完整的 xml 在这里：Link。但这是按钮的基本状态：

<!-- base state -->
<item android:state_enabled="true">
    <set>
        <objectAnimator android:propertyName="translationZ"
                        android:duration="@integer/button_pressed_animation_duration"
                        android:valueTo="0"
                        android:startDelay="@integer/button_pressed_animation_delay"
                        android:valueType="floatType"/>
        <objectAnimator android:propertyName="elevation"
                        android:duration="0"
                        android:valueTo="@dimen/button_elevation_material"
                        android:valueType="floatType" />
    </set>
</item>

如您所见，按钮的高度值设置为 @dimen/button_elevation_material:

<dimen name="button_elevation_material">1dp</dimen>

这就是 ImageView 最终成为 behind/below Button 的方式。

那么，我们能做什么呢？

一个直接的解决方案是将 ImageView's 高度设置为相同的量 - 1dp。

另一个需要一些工作的解决方案是删除 Button's 高度而不是更改 ImageView's。基于默认值 StateListAnimator，我们可以创建自己的 - 并删除海拔。然后，在您的 res/values-v21/styles.xml 中，定义一个继承自 Widget.Material.Button:

的样式

<style name="MyDepressedButtonStyle" parent="android:Widget.Material.Button">
    <item name="android:stateListAnimator">@anim/customized_state_animator</item>
</style>

现在，在您的 Button 上设置此样式：

<Button
    style="@style/MyDepressedButtonStyle"
    ....
    .... />

编辑:

其实我们可以直接套用自定义的StateListAnimator：

<Button
    android:stateListAnimator="@anim/customized_state_animator"
    ....
    .... />

无需走scenic路线！

Answer 5

我将 ImageView 放在了一个 Button 上，并改变了 RelativeLayout，希望对您有所帮助。

 <RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >

    <View
        android:id="@+id/tempview"
        android:layout_width="0dp"
        android:layout_height="0dp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/tempview"
        android:background="@drawable/ic_launcher" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/tempview"
        android:src="@drawable/img_cancel" />
</RelativeLayout>

Answer 6

我找到了解决办法：只需 android:elevation="2dp"

<Button
        android:id="@+id/btnAccess"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:layout_gravity="right|center"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="10dp"/>

<ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView4"
        android:background="@drawable/or"
        android:layout_alignBottom="@+id/btnRegister"
        android:layout_centerHorizontal="true"
        android:layout_margin="5dp"
        android:elevation="2dp" />

Answer 7

实际上，只需将 StateListAnimator 设置为 @null

就容易多了

<Button
    ...
    android:stateListAnimator="@null" />

来源Android 5.0 android:elevation Works for View, but not Button?

Answer 8

Button 只是一个应用了特定样式的 TextView，因此如果将 Button 替换为 TextView，则可以在其上显示一个 ImageView。这也适用于 API < 21.

Answer 9

如果你想在 Button 之上获得一个 ImageView，并且你正在开发 Android API < 21（例如，KitKat = 19），最简单的方法是不完全使用 Button 并改用 2 ImageView。你为什么想这么做？可能是因为您定义了一个可绘制的形状以使按钮看起来 "cooler"，所以您已经在使用该形状的 android:background。

例如：

<Button
    android:id="@+id/button01"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:background="@drawable/buttonshape"
    />

<ImageView
    android:id="@+id/image01"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:layout_marginTop="10dp"
    android:layout_marginStart="10dp"
    android:src="@drawable/desiredImageOnTop"
    />

其中@drawable/buttonshape.xml是：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">
<corners
    android:radius="30dp"
    />
<gradient
    android:angle="45"
    android:centerColor="#47A891"
    android:centerX="35%"
    android:endColor="#000000"
    android:startColor="#E8E8E8"
    android:type="linear"
    />
<padding
    android:bottom="0dp"
    android:left="0dp"
    android:right="0dp"
    android:top="0dp"
    />
<size
    android:width="100dp"
    android:height="100dp"
    />
<stroke
    android:width="3dp"
    android:color="#878787"
    />
</shape>

在那种情况下，您应该将 Button 替换为 ImageView，将 android:background 更改为 android:src，然后，在 java 代码中，您只需添加一个 OnClickListener，就好像它是一个 Button（两个控件都派生自 View，而 OnClickListener 是一个 View 事件）。很有魅力！

将 ImageView 放在按钮上 android

Place ImageView over Button android

android

android-layout