在5.0以上手机上用系统原生方式实现波纹涟漪效果

1.使用5.0以上的sdk,并设置value-21的style的AppBaseTheme为parent=”android:Theme.Material.Light”类型。
//此时假如不给textview,listview等控件添加background的话已经实现波纹效果了,但假如设计师有要求用其他颜色或者自定义波纹的颜色的话就只能按照下面的方式来写了。

2.创建drawable-v21文件夹作为只供5.0以上的系统使用的素材。

3.不同类型的控件有不同的设置方式,详情如下:
3.1:textview:设置background属性,值假设为drawable_viewclickripple,并分别放置在drawable和drawable-v21文件夹内(同名,5.0以上系统会自动调用drawable-v21里的素材,5.0以下的系统会自动调用drawable里的素材,下同):
在drawable文件夹内(即5.0以下没效果,也可自行设置点击双色效果):

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
</selector>

在drawable-v21文件夹内(color为涟漪的颜色,一般取#9ccc):

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/ripplecolor" >
</ripple>

3.2:imageview:可以支持selector(写到src属性中);background用法同textview。
3.3:button、viewgroup:由于这些控件没有src属性,所以若要实现点击变色和涟漪效果共存的话需要这样写:
设置background属性,值假设为drawable_longbuttonclickripple,并分别放置在drawable和drawable-v21文件夹内:
在drawable文件夹内:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/roundbutton_red_bg" />
</selector>

在drawable-v21文件夹内(color为涟漪的颜色,一般取#9ccc) :

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/ripplecolor" >
    <item android:drawable="@drawable/roundbutton_red_bg" /><!--不是listview的listviewSelector用这样写没问题-->
</ripple>

其中roundbutton_red_bg可以为单色selector、单双色组合selector、shape等都可以的。

3.4:listview:
3.4.1:在listview的布局文件内设置:

android:drawSelectorOnTop="true"
android:listSelector="@drawable/color_double_list_bg"

color_double_list_bg分别放置在drawable和drawable-v21文件夹内:
在drawable文件夹内(内容为空,点击变色效果有item的background实现):

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
</selector>

在drawable-v21文件夹内(ripplecolor_lvitem为波纹的颜色,一般与listview的item按下去时的颜色相同(list_txt_bg_pressed);solid处的颜色其实没有效果,但不能是透明的,为了保险起见这里写为listview的item正常显示时的颜色,即list_txt_bg_normal,默认没点击时的颜色写在listview item的background上(不会覆盖涟漪效果)):

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/ripplecolor_lvitem" >
   <!-- <item android:drawable="@color/listjijing_txt_bg_normal" />-->
   <!--这种方式有问题,会出现点击时这一item内容消失的情况-->

    <item android:id="@android:id/mask"><!--不加id或id不为mask则也会出现点击时内容消失的情况-->
        <shape android:shape="rectangle">
            <solid android:color="@color/list_txt_bg_normal" />
        </shape>
    </item>
</ripple>

3.4.2:在listview的item中写明:

android:background="@drawable/color_double_list_bg_item"

color_double_list_bg_item分别放置在drawable和drawable-v21文件夹内:
在drawable文件夹内:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/list_txt_bg_pressed" android:state_pressed="true"></item>
    <item android:drawable="@color/list_txt_bg_normal"></item>
</selector>

在drawable-v21文件夹内(内容只为item正常色,否则会有两个波纹):

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:drawable="@color/list_txt_bg_normal"></item>
</selector>

到此,listview的涟漪效果配置结束,相对比较复杂。有两点需要注意:
1.不能只在item的根viewgroup的background里用上文textview或imageview那样简单的写background,否则在某些手机里(如mx4)涟漪起始点一直为中心点而不是点击点,或导致其他一些莫名的不正确效果。
2.没有了。

3.5:android.support.v7.widget.CardView:
frameLayout有个属性为foreground,cardview继承于framelayout,所以可通过

android:foreground="?attr/selectableItemBackground"

即可设置波纹效果。
但在某些手机(小米4 nexus5等没有阴影效果,需要在application或activity中写明android:hardwareAccelerated=”true”开启硬件加速才有阴影)
若要再实现点击时卡片的吸附效果(如下)
这里写图片描述
可再这样设置:
首先,创建一个 TranslationZ 的变换动画放在 /res/anim,自己取一个名(如 touch_raise.xml),加入以下内容:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="true" android:state_pressed="true">
        <objectAnimator
        android:duration="@android:integer/config_shortAnimTime"
        android:propertyName="translationZ"
        android:valueTo="5dp"
        android:valueType="floatType" />
    </item>
    <item>
        <objectAnimator
        android:duration="@android:integer/config_shortAnimTime"
        android:propertyName="translationZ"
        android:valueTo="0dp"
        android:valueType="floatType" />
    </item>
</selector>

然后为你需要添加效果的 CardView(其他 View 同理)所在的 Layout XML 复制多一份到 /res/layout-v21(此api只能在5.0以上支持),然后在新的那份 XML 的 CardView 中加入属性 android:stateListAnimator=”@anim/touch_raise”。
这样,你的卡片按住时就会有浮起(阴影加深)的效果了。(需要为cardview设置onclicklistener)
假如给cardview设置了app:cardElevation=”5dp”属性,即纵深的深度,则还需要写上app:cardPreventCornerOverlap=”false”
app:cardUseCompatPadding=”true”防止在5.0以下和5.0以上系统中cardview自动预留的margin不一样的问题。详情参见http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/1025/3621.html

假如想在5.0以下的手机上也实现同样的效果,只能使用第三方库了,如com.balysv.materialripple.MaterialRippleLayout

  • 9
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值