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>

以下是图片截图：

enter image description here

如您所见，ImageView的src图像不可见。但是，如果我将背面的按钮更改为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的屏幕截图：

enter image description here

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

Answer 1

原因实际上非常简单。 :)我们如此陷入2D思考，我们忽略了elevation - 在Z.

您的第一个布局没有任何问题。 Button只有elevation高于ImageView - 确切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最终落后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 2

我找到了一个解决方案：简单的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 3

@Vamsi我尝试了你的两种组合，第一次没有使用Button。您必须经历ImageView.这是我尝试使用 ImageView ：

enter image description here

虽然我尝试使用Button来查看结果：

enter image description here

我试图改变顺序，但一切都是徒劳的！您似乎必须使用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 4

使用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 5

实际上将StateListAnimator设置为@null

要容易得多

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

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

Answer 6

Button只是一个应用了某种样式的TextView，所以如果用TextView替换Button，你可以在它上面显示一个ImageView。这也适用于API＆lt; 21。

Answer 7

所有视图都存在

android:background。顾名思义，这就是背景中的情况。

android:src及其子类存在

ImageViews。您可以将此视为前景。由于ImageView是View的子类，因此您甚至可以使用android:background。

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

Answer 8

如果要在Button顶部获取ImageView，并且正在开发<21的Android API（例如，KitKat = 19），最简单的方法是完全不使用Button而是使用2 ImageView 。你为什么想这么做？可能是因为您定义了一个可绘制的形状，以使按钮看起来“更酷”，所以您已经在使用带有该形状的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事件）。就像魅力一样！

Answer 9

我将ImageView放在一个带有RelativeLayout转移功能的Button上，希望这会有所帮助。

 <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>

将ImageView放在Button android上

9 个答案: