在$ P $连锁反应pssed状态+透明度处于正常状态 [英] Ripple effect in pressed state + transparency in normal state

查看:260
本文介绍了在$ P $连锁反应pssed状态+透明度处于正常状态的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想在ViewGroup中的ImageView的,当pressed,绘制纹波和的这是工作的!但是,当一个ViewGroup为pressed,它里面的ImageView的,应保持透明,否则ImageView的背景是可见的:(即彩色字母橙色,你实际看到的,是纹波的时pressed)。

这只是发生与设备API 21+。随着设备的API< 21我用一个选择器和图像背景保持在一个ViewGroup为pressed通缉透明

layout.xml

 < LinearLayout中的xmlns:机器人=htt​​p://schemas.android.com/apk/res/android
    机器人:ID =@ + ID / item_detail_field
    机器人:layout_width =match_parent
    机器人:layout_height =WRAP_CONTENT
    机器人:paddingLeft =@扪/ margin_left
    机器人:paddingStart =@扪/ margin_left
    机器人:paddingTop =@扪/ margin_top_item_field
    机器人:paddingBottom会=@扪/ margin_bottom
    机器人:baselineAligned =假
    机器人:背景=@绘制/布局
    机器人:stateListAnimator =@动画/ touch_raise
    机器人:方向=横向>...    < ImageView的
        机器人:ID =@ + ID / item_detail_showfield_icon
        机器人:layout_width =match_parent
        机器人:layout_height =match_parent
        机器人:背景=@绘制/ button_mini_oval
        机器人:stateListAnimator =@动画/ touch_raise
        机器人:可点击=真
        机器人:contentDescription =@空
        机器人:scaleType =中心
        机器人:知名度=隐形
        机器人:SRC =@绘制/ show_button/>...< / LinearLayout中>

绘制/ button_mini_oval.xml

 <选择的xmlns:机器人=htt​​p://schemas.android.com/apk/res/android>
    <项目的android:STATE_ pressed =真正的>
        <形状机器人:形状=椭圆形>
            [固体机器人:色=@色/ primary_highlight/>
        < /形状>
    < /项目>
    <项目>
        <形状机器人:形状=椭圆形>
            [固体机器人:色=@机器人:彩色/透明/>
        < /形状>
    < /项目>
< /选择>

绘制-V21 / button_mini_oval.xml

 <纹波的xmlns:机器人=htt​​p://schemas.android.com/apk/res/android
    机器人:exitFadeDuration =@安卓整数/ config_shortAnimTime
    机器人:颜色=机器人:colorControlHighlight>    <项目的android:STATE_ pressed =真正的>
        <形状机器人:形状=椭圆形>
            [固体机器人:色=@机器人:彩色/白/>
        < /形状>
    < /项目>
    <项目>
        <彩色机器人:颜色=@机器人:彩色/透明/>
    < /项目>
< /纹波>

我试图在波动的xml许多配置,加入了<选择> 它的工作原理(见下图),但如果你只需轻按该ImageView的,纹波是不可见的(纹波似乎动画切),只要你保持pressed看到涟漪......

什么是在pressed状态纹波和透明处于正常状态组合?

 <纹波的xmlns:机器人=htt​​p://schemas.android.com/apk/res/android
    机器人:exitFadeDuration =@安卓整数/ config_shortAnimTime
    机器人:颜色=机器人:colorControlHighlight>    <项目>
        <选择>
            <项目的android:STATE_ pressed =真正的>
                <形状机器人:形状=椭圆形>
                    [固体机器人:色=@机器人:彩色/白/>
                < /形状>
            < /项目>
            <项目>
                <彩色机器人:颜色=@机器人:彩色/透明/>
            < /项目>
        < /选择>
    < /项目>
< /纹波>


解决方案

删除安卓STATE_ pressed =真正的,我发现2解决方案,但在这两种情况下我失去了的 touch_raise 的动画(为什么?):

随着蒙面纹波:

 <纹波的xmlns:机器人=htt​​p://schemas.android.com/apk/res/android
    机器人:exitFadeDuration =@安卓整数/ config_shortAnimTime
    机器人:颜色=机器人:colorControlHighlight>    <项目机器人:ID =@机器人:ID /掩码>
        <选择>
            <项目>
                <形状机器人:形状=椭圆形>
                    [固体机器人:色=@机器人:彩色/白/>
                < /形状>
            < /项目>
            <项目>
                <彩色机器人:颜色=@机器人:彩色/透明/>
            < /项目>
        < /选择>
    < /项目>
< /纹波>

随着东窗事发纹波小(比更好1):

 <纹波的xmlns:机器人=htt​​p://schemas.android.com/apk/res/android
    机器人:exitFadeDuration =@安卓整数/ config_shortAnimTime
    机器人:颜色=机器人:colorControlHighlight>    <选择>
        <项目>
            <彩色机器人:颜色=@机器人:彩色/透明/>
        < /项目>
    < /选择>
< /纹波>

我不知道为什么它足以增加<选择> 来有一个透明的背景涟漪!很多人试图实现这一点,但它不是谷歌的意图,相反,它是非常有用的是这样的情况。

I would like the ImageView in the ViewGroup, when pressed, draws the ripple and this is working! But when the ViewGroup is pressed, the ImageView inside it, should remain transparent otherwise the ImageView background is visible: (that color alpha-orange, you actually see, is the ripple when pressed).

This happens only with devices API 21+. With devices API <21 I use a selector and the image background remains transparent as wanted when the ViewGroup is pressed.

layout.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/item_detail_field"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingLeft="@dimen/margin_left"
    android:paddingStart="@dimen/margin_left"
    android:paddingTop="@dimen/margin_top_item_field"
    android:paddingBottom="@dimen/margin_bottom"
    android:baselineAligned="false"
    android:background="@drawable/layout"
    android:stateListAnimator="@anim/touch_raise"
    android:orientation="horizontal">

...

    <ImageView
        android:id="@+id/item_detail_showfield_icon"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/button_mini_oval"
        android:stateListAnimator="@anim/touch_raise"
        android:clickable="true"
        android:contentDescription="@null"
        android:scaleType="center"
        android:visibility="invisible"
        android:src="@drawable/show_button"/>

...

</LinearLayout>

drawable/button_mini_oval.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="oval">
            <solid android:color="@color/primary_highlight" />
        </shape>
    </item>
    <item>
        <shape android:shape="oval">
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
</selector>

drawable-v21/button_mini_oval.xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:exitFadeDuration="@android:integer/config_shortAnimTime"
    android:color="?android:colorControlHighlight">

    <item android:state_pressed="true">
        <shape android:shape="oval">
            <solid android:color="@android:color/white" />
        </shape>
    </item>
    <item>
        <color android:color="@android:color/transparent" />
    </item>
</ripple>

I tried many configurations in the ripple xml, adding a <selector> it works (see below), but if you just tap the ImageView, the ripple is not visible (the ripple animation seems cut), only if you keep pressed you see the ripple...

What is the combination to have ripple in pressed state and transparent in normal state?

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:exitFadeDuration="@android:integer/config_shortAnimTime"
    android:color="?android:colorControlHighlight">

    <item>
        <selector>
            <item android:state_pressed="true">
                <shape android:shape="oval">
                    <solid android:color="@android:color/white" />
                </shape>
            </item>
            <item>
                <color android:color="@android:color/transparent" />
            </item>
        </selector>
    </item>
</ripple>

解决方案

Removing android:state_pressed="true", I've found 2 solutions but in both cases I lost the touch_raise animation (why?):

With masked ripple:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:exitFadeDuration="@android:integer/config_shortAnimTime"
    android:color="?android:colorControlHighlight">

    <item android:id="@android:id/mask">
        <selector>
            <item>
                <shape android:shape="oval">
                    <solid android:color="@android:color/white" />
                </shape>
            </item>
            <item>
                <color android:color="@android:color/transparent" />
            </item>
        </selector>
    </item>
</ripple>

With unmasked little ripple (nicer than 1):

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:exitFadeDuration="@android:integer/config_shortAnimTime"
    android:color="?android:colorControlHighlight">

    <selector>
        <item>
            <color android:color="@android:color/transparent" />
        </item>
    </selector>
</ripple>

I don't know why it is sufficient to add <selector> to have a ripple on a transparent background!!! a lot of people were trying to achieve this but it wasn't the intention of Google, instead it is very useful is such situations.

这篇关于在$ P $连锁反应pssed状态+透明度处于正常状态的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆