将ImageView的按钮上的android [英] Place ImageView over Button android
问题描述
我想放置的ImageView在使用RelativeLayout的一个按钮。这里是我的xml:
I am trying to place an ImageView over a Button using RelativeLayout. Here is my 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的形象是可见的。请参考下。
As you can see, the ImageView's src image is not visible. However if i change the button at the back to an ImageView, the image of the top ImageView is visible. Please refer below..
更改的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的截图:
Changed xml's screenshot:
它是什么,我做错了在第一个布局?
What is it that i am doing wrong in the first layout?
推荐答案
究其原因,实际上的非常的简单。 :)我们太过于2D以为我们忽略了海拔
- 在Z.
The reason is actually very simple. :) We are so caught up thinking in 2D that we overlook the elevation
- in Z.
没有什么不对您的第一个布局。该按钮
只是具有更高的海拔
比的ImageView
- 正是 1DP
高。因此,无论你如何安排这两个意见,按钮
上方升起。
There is nothing wrong with your first layout. The Button
simply has a higher elevation
than the ImageView
- exactly 1dp
higher. Therefore, no matter how you arrange the two views, the Button
rises above.
证明的一点
有一个按钮,默认情况下获得的 Widget.Material.Button
风格:
A Button, by default gets the Widget.Material.Button
style:
<!-- 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>
这本介绍高程属性是安卓stateListAnimator
。 StateListAnimator
类似于 StateListDrawable
,并提供了状态变化的动画。完整的XML是在这里:<一href="http://androidxref.com/5.0.0_r2/xref/frameworks/base/core/res/res/anim/button_state_list_anim_material.xml"相对=nofollow>链接。但这里的按钮的基本状态:
The attribute that introduces this elevation is android:stateListAnimator
. StateListAnimator
is similar to StateListDrawable
, and provides state change animations. The complete xml is here: Link. But here's the base state of the button:
<!-- 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>
正如你所看到的,该按钮的高程值设置为 @扪/ button_elevation_material
:
<dimen name="button_elevation_material">1dp</dimen>
这就是今天的的ImageView
如何最终被后面/下面的按钮
。
And that's how the ImageView
ends up being behind/below the Button
.
那么,我们该怎么办?
一个简单直接的解决办法是将的ImageView
标高相同数量 - 1DP
。
A straight-forward solution would be to set the ImageView's
elevation to the same amount - 1dp
.
另一种解决方案,这将需要一些工作,就是要删除按钮的
抬高,而不是改变的ImageView
。基于默认 StateListAnimator
,我们可以创建自己的 - 并卸下提升。然后,在你的 RES /值-V21 / styles.xml
,定义一个风格,它继承自 Widget.Material.Button
:
Another solution, which will require a bit of work, is to remove the Button's
elevation rather than change ImageView's
. Based on the default StateListAnimator
, we can create our own - and remove the elevation. Then, in your res/values-v21/styles.xml
, define a style that inherits from Widget.Material.Button
:
<style name="MyDepressedButtonStyle" parent="android:Widget.Material.Button">
<item name="android:stateListAnimator">@anim/customized_state_animator</item>
</style>
现在,在你的按钮设置此样式
:
<Button
style="@style/MyDepressedButtonStyle"
....
.... />
修改
其实,我们可以使用自定义的 StateListAnimator
直接:
Actually, we can apply the customized StateListAnimator
directly:
<Button
android:stateListAnimator="@anim/customized_state_animator"
....
.... />
没有必要采取风景
航线!
这篇关于将ImageView的按钮上的android的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!