View点击涟漪效果

方法1:
在大多数情况下,在布局XML文件中使用如下的方法去指定视图的背景:
?android:attr/selectableItemBackground (有界波纹)
?android:attr/selectableItemBackgroundBorderless (无界波纹)
注意:selectableItemBackgroundBorderless是API级别21上的新属性。

要更改默认的触摸反馈颜色,使用主题的android:colorControlHighlight属性

例如:
        <ImageView
            android:id="@+id/compare"
            android:layout_width="@dimen/menu_icon_width"
            android:layout_height="@dimen/menu_icon_height"
            android:padding="@dimen/menu_icon_padding"
            android:clickable="true"
            android:src="@drawable/ic_compare_selector"
            android:background="?android:attr/selectableItemBackgroundBorderless"/>
在style中主题下添加:<item name="colorControlHighlight">@color/gray</item>
    <style name="FaceBeautyTheme" parent="AppBaseTheme">
        <!-- All customizations that are NOT specific to a particular API-level can go here. -->
        <item name="android:windowBackground">@color/black</item>
        <item name="android:windowNoTitle">true</item>
        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="colorControlHighlight">@color/gray</item>
    </style>
        

方法二:
使用<ripple>标签,在drawable下创建一个xml:
background_ripple_gray.xml
--------------------------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/gray">
</ripple>
--------------------------------------------------------

使用
<ImageView
    android:id="@+id/fb_cancel"
    android:layout_width="@dimen/menu_icon_width"
    android:layout_height="@dimen/menu_icon_height"
    android:padding="@dimen/menu_icon_padding"
    android:src="@drawable/ic_close_selector"
    android:background="@drawable/background_ripple_gray" />

****************
ripple_red_with_pic_mask.xml 在边界内的涟漪效果
--------------------------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="#FF0000" >
    <item android:id="@android:id/mask" android:drawable="@drawable/icon_folder_r" />
</ripple>
--------------------------------------------------------
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
小程序中的 view 点击效果是指当用户点击一个 view 元素时,该元素会产生可视化的反馈效果,以指示用户已成功点击该元素。小程序支持多种点击效果,以下是一些常见的点击效果示例: 1. 设置背景色变化效果:当用户点击 view 元素时,可以通过改变该元素的背景色来实现点击效果。可以使用 CSS 的`:active`伪类或者通过给 view 元素添加特定的类名来定义点击时的背景色样式。 2. 设置边框变化效果:当用户点击 view 元素时,可以通过改变该元素的边框样式或者边框颜色来实现点击效果。类似于设置背景色变化效果,可以使用 CSS 的`:active`伪类或者给 view 元素添加特定的类名来定义点击时的边框样式。 3. 设置动画效果:当用户点击 view 元素时,可以通过添加动画效果来提供更加生动的点击反馈。可以使用小程序的动画 API,在点击事件处理函数中定义一组动画效果,并将其应用到 view 元素上,例如改变元素的位置、大小、透明度等。 4. 设置点击态图片:当用户点击 view 元素时,可以通过切换图片来实现点击效果。可以在点击事件处理函数中使用`setData`更新 view 元素的图片路径,从而达到切换点击态图片的效果。 小程序提供了丰富的样式和动画 API,开发者可以根据需求选择合适的点击效果,通过添加视觉反馈方式来提升小程序的用户体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值