android - 将 ImageView 放在 Button 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 的 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的截图:

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

Answer 1

原因其实非常很简单。 :) 我们如此沉迷于 2D 的思考，以至于我们忽略了 elevation - 在 Z 中。

您的第一个布局没有任何问题。 Button 只是比 ImageView 具有更高的 elevation - 正好 1dp 更高。因此，无论你如何排列这两个 View ，Button 都会升到上面。

一点证据:

一个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 的 高度设置为相同的量 - 1dp。

另一个需要做一些工作的解决方案是删除 Button 的 高度而不是更改 ImageView 的。基于默认的 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"
    ....
    .... />

不用走景区路线!