[英]Android Button Ripple on Lollipop and highlight on pre lollipop
Hi so I am little confused and wondering if anyone could point me in the right direction. 嗨,所以我很困惑,想知道是否有人能指出我正确的方向。
Go and use Google Play Store on Lollipop and pre-lollipop 在Lollipop和pre-lollipop上使用Google Play商店
You will see on lollipop that selectable views have the ripple effect. 您将在棒棒糖上看到可选择的视图具有涟漪效应。
On pre-lollipo, you get this highlight effect. 在pre-lollipo上,你会获得这种高光效果。
How is this done? 这是怎么做到的?
At the moment in my app, I have a drawable-v21 directory that contains this selector 在我的应用程序中,我有一个包含此选择器的drawable-v21目录
It basically does the ripple on top of my background 它基本上是在我的背景上产生涟漪
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight">
<item android:id="@android:id/mask" android:drawable="@android:color/white"/>
<item android:drawable="@color/colorAccentWith92PercentOpacity"/>
</ripple>
However, other answers say to use 但是,其他答案说要使用
android:background="?attr/selectableItemBackground"
机器人: “ATTR / selectableItemBackground” 背景=
To get the highlight effect on pre-lollipop but this overrides my background. 要获得前棒棒糖的高光效果,但这会覆盖我的背景。 How could i set this on top of my current background?
我怎么能在我目前的背景之上设置它?
Also do i have to create a ripple drawable (in drawble-v21) for every kind of button in my app? 我还需要为我的应用程序中的每种按钮创建一个波纹drawable(在drawble-v21中)吗? How would I do this for recycler view items?
我如何为回收商查看项目执行此操作?
What makes this question unique 是什么让这个问题与众不同
I do not want ripple for pre-lollipop I am asking how devs efficiently make their button do ripple on lollipop and a hight light effect on pre 我不想要预先棒棒糖的涟漪我问的是开发者如何有效地使他们的按钮在棒棒糖上产生波纹并且对前的高光效果
Define colorControlHighlight
in your theme and as long you're using default appcompat-v7 buttons the highlight color should work out-of-the-box. 在主题中定义
colorControlHighlight
,只要您使用默认的appcompat-v7按钮,高亮颜色就应该是开箱即用的。
This is an example of how I backported Material button style with a bit of crossfade animation and shadows without using external libraries. 这是一个示例,说明如何使用一些交叉渐变动画和阴影向后移植“材质”按钮样式,而不使用外部库。 May it help you on your way.
可以帮助你。
Provided the button will be white text over dark background ( @color/control_normal
) with light highlight: 如果按钮将是深色背景上的白色文本(
@color/control_normal
),并且高亮显示:
Here I'll override default button style for the whole theme: 在这里,我将覆盖整个主题的默认按钮样式:
<style name="AppTheme" parent="Base.AppTheme">
<item name="buttonStyle">@style/Widget.AppTheme.Button</item>
</style>
<!-- Some numbers pulled from material design. -->
<integer name="button_pressed_animation_duration">100</integer>
<integer name="button_pressed_animation_delay">100</integer>
Button style for Lollipop which understands theme overlays and uses ripple by default. Lollipop的按钮样式,它理解主题叠加并默认使用波纹。 Let's just have it color the ripple with appropriate paint:
让我们用适当的颜料为它涂上颜色:
<style name="Widget.AppTheme.Button" parent="Widget.AppCompat.Button">
<!-- On Lollipop you can define theme via style. -->
<item name="android:theme">@style/ThemeOverlay.AppTheme.Button</item>
</style>
<style name="ThemeOverlay.AppTheme.Button" parent="ThemeOverlay.AppCompat.Dark">
<!-- The magic is done here. -->
<item name="colorButtonNormal">@color/control_normal</item>
</style>
Before Lollipop it gets tricky. 在棒棒糖之前它变得棘手。
<style name="Widget.AppTheme.Button" parent="Widget.AppCompat.Button">
<item name="android:background">@drawable/button_normal_background</item>
</style>
Thi is the composite drawable of the whole button. 这是整个按钮的复合绘图。
<inset
xmlns:android="http://schemas.android.com/apk/res/android"
android:insetLeft="@dimen/abc_button_inset_horizontal_material"
android:insetTop="@dimen/abc_button_inset_vertical_material"
android:insetRight="@dimen/abc_button_inset_horizontal_material"
android:insetBottom="@dimen/abc_button_inset_vertical_material">
<layer-list>
<!-- Shadow. -->
<item
android:drawable="@drawable/button_shadow"
android:top="-0dp"
android:bottom="-1dp"
android:left="-0dp"
android:right="-0dp"/>
<item
android:drawable="@drawable/button_shadow_pressable"
android:top="-0dp"
android:bottom="-3dp"
android:left="-1dp"
android:right="-1dp"/>
<!-- Background. -->
<item android:drawable="@drawable/button_shape_normal"/>
<!-- Highlight. -->
<item>
<selector
android:enterFadeDuration="@integer/button_pressed_animation_duration"
android:exitFadeDuration="@integer/button_pressed_animation_duration">
<item
android:drawable="@drawable/button_shape_highlight"
android:state_focused="true"
android:state_enabled="true"/>
<item
android:drawable="@drawable/button_shape_highlight"
android:state_pressed="true"
android:state_enabled="true"/>
<item
android:drawable="@drawable/button_shape_highlight"
android:state_selected="true"
android:state_enabled="true"/>
<item android:drawable="@android:color/transparent"/>
</selector>
</item>
<!-- Inner padding. -->
<item android:drawable="@drawable/button_padding"/>
</layer-list>
</inset>
This is the shadow when not pressed. 这是未按下时的阴影。
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:bottomLeftRadius="3dp"
android:bottomRightRadius="3dp"
android:topLeftRadius="2dp"
android:topRightRadius="2dp"/>
<solid android:color="#2000"/>
</shape>
This is the extended shadow in pressed state. 这是按下状态下的扩展阴影。 The result effect will look crude when you look up close but it's good enough from distance.
结果效果会显得粗糙,当你仰望接近,但它是从距离不够好。
<selector
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:ignore="UnusedAttribute"
android:enterFadeDuration="@integer/button_pressed_animation_duration"
android:exitFadeDuration="@integer/button_pressed_animation_duration">
<item
android:state_pressed="true"
android:state_enabled="true">
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:bottomLeftRadius="5dp"
android:bottomRightRadius="5dp"
android:topLeftRadius="3dp"
android:topRightRadius="3dp"/>
<solid android:color="#20000000"/>
</shape>
</item>
<item android:drawable="@android:color/transparent"/>
</selector>
This is the main button shape. 这是主要的按钮形状。
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="@dimen/abc_control_corner_material"/>
<solid android:color="@color/control_normal"/>
</shape>
Just additional padding to be absolutely consistent with the Material button. 只需额外填充即可与“材质”按钮完全一致。
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@android:color/transparent"/>
<padding
android:left="@dimen/abc_button_padding_horizontal_material"
android:top="@dimen/abc_button_padding_vertical_material"
android:right="@dimen/abc_button_padding_horizontal_material"
android:bottom="@dimen/abc_button_padding_vertical_material"/>
</shape>
This is the highlight button shape drawn over normal button shape. 这是在正常按钮形状上绘制的高亮按钮形状。
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="@dimen/abc_control_corner_material"/>
<solid android:color="@color/control_highlight"/>
</shape>
@color/control_highlight
can point to @color/control_highlight
可以指向
@color/ripple_material_dark
- translucent white, use over dark background @color/ripple_material_dark
- 半透明白色,用于深色背景 @color/ripple_material_light
- translucent black, use over light background @color/ripple_material_light
- 半透明黑色,用于浅色背景 You can set a background of your views in this way: 您可以通过以下方式设置视图的背景:
android:background="@drawable/touch_selector"
Create a version without ripple for pre lollipop: drawable/touch_selector.xml 为pre lollipop创建一个没有涟漪的版本: drawable / touch_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- State when a row is being pressed, but hasn't yet been activated (finger down) -->
<item android:state_pressed="true"
android:drawable="@color/grey"
/>
<!-- For ListView in SINGLE_CHOICE_MODE, it flags the active row -->
<item android:state_activated="true"
android:drawable="@color/light_green" />
<!-- Default, "just hangin' out" state. -->
<item android:drawable="@android:color/transparent" />
</selector>
Now do the same for lollipop and above, but with ripple effect: 现在为棒棒糖及以上做同样的事情,但有涟漪效应:
crete drawable-v21/touch_selector.xml crete drawable-v21 / touch_selector.xml
It will look like: 它看起来像:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- State when a row is being pressed, but hasn't yet been activated (finger down) -->
<item android:state_pressed="true">
<ripple android:color="@color/grey" />
</item>
<!-- For ListView, when the view is "activated". In SINGLE_CHOICE_MODE, it flags the active row -->
<item android:state_activated="true"
android:drawable="@color/light_green" />
<!-- Default, "just hangin' out" state. -->
<item android:drawable="@android:color/transparent" />
</selector>
That's it. 而已。
Now you are having ripple effect at lollipop and above devices and highlight at pre lollipop. 现在你在棒棒糖及以上设备上有涟漪效应,并在前棒棒糖上突出显示。
Edit: 编辑:
In case of using in a ListView - use created above as a background of ListView item 如果在ListView中使用 - 使用上面创建的ListView项目的背景
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.