Touch Feedback（触摸反馈）：水波纹

2023-12-23 05:18
文章标签 触摸 touch 反馈 水波纹 feedback

本文主要是介绍Touch Feedback（触摸反馈）：水波纹，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

参考：
聊聊Android5.0中的水波纹效果

Android5.0水波纹效果适配4.X

简介：

Touch Feedback（触摸反馈）：水波纹为：5.x以上自带 , 5.0以下版本可以使用同名的selector可兼容。

系统自带水波纹实现方式

水波纹效果大致上可以分为两种，一种是有界的，一种无界，

有界水波纹：

        <TextViewandroid:layout_width="match_parent"android:layout_height="56dp"android:layout_marginTop="36dp"android:background="?android:attr/selectableItemBackground"android:clickable="true"android:gravity="center"android:text="Hello World!" />

只需要给TextView设置背景即可，背景内容就为系统自带的selecttableItemBackground。这种是有界水波纹，就是水波纹会在TextView所在区域进行绘制。

注意：系统有界，向下兼容,API21以下也可以使用,点击会变色,但不会有水波纹效果.

无界水波纹：

        <TextViewandroid:layout_width="match_parent"android:layout_height="56dp"android:layout_marginTop="36dp"android:background="?android:attr/selectableItemBackgroundBorderless"android:clickable="true"android:gravity="center"android:text="Hello World!" />

所谓的无界并非完全无界，而是以控件宽高中最大的数值作为水波纹效果所在正方形的边界进行绘制。

特别注意: 此效果API21以上才能用,21以下会报错. 所以最小版本要设置为21

自定义水波纹实现方式

无界水波纹

自定义这个效果其实也很简单，需要在drawable文件夹中定义ripple节点，再设置上颜色就可以了：

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

在布局文件中将之引用为控件的背景：

        <TextViewandroid:layout_width="match_parent"android:layout_height="56dp"android:layout_marginTop="36dp"android:background="@drawable/nomaskripple"android:clickable="true"android:gravity="center"android:text="Hello World!" />

注意：在res里创建drawable-v21文件white_ripple.xml，另外需要在drawable文件里创建同名文件white_ripple.xml 适配5.0以下机型.不然会崩溃的，但是5.0以下没有水波纹效果.就是点击变色效果。

示例：

white_ripple.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"android:color="@color/ripple"><!--去掉此item内容就是无界效果--><item><shape><!-- 中间的背景色--><solid android:color="@color/white"/></shape></item></ripple>

在drawable文件里创建同名文件white_ripple.xml 适配5.0以下机型：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><!-- 没有焦点时的背景颜色 --><item android:drawable="@color/white" android:state_window_focused="false" /><!-- 非触摸模式下获得焦点并单击时的背景颜色 --><item android:drawable="@color/ripple" android:state_focused="true" android:state_pressed="true" /><!-- 触摸模式下单击时的背景颜色 --><item android:drawable="@color/ripple" android:state_focused="false" android:state_pressed="true" /><!-- 选中时的背景颜色 --><item android:drawable="@color/ripple" android:state_selected="true" /><!-- 获得焦点时的背景  颜色 --><item android:drawable="@color/ripple" android:state_focused="true" />
</selector>

以下适配5.0以下的selector省略。

有界水波纹

有界水波纹需要我们在ripple节点中定义item，
item的id要为系统id mask，
然后还要定义drawable，drawable中的颜色并没有什么卵用，

水波纹的颜色是由ripple节点中的颜色来控制的

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"android:color="@color/colorPrimary"><item
        android:id="@android:id/mask"android:drawable="@color/colorAccent" />
</ripple>

在布局文件中将之引用为控件的背景：

        <TextViewandroid:layout_width="match_parent"android:layout_height="56dp"android:layout_marginTop="36dp"android:background="@drawable/withmaskripple"android:clickable="true"android:gravity="center"android:text="Hello World!" />

带图片形状的水波纹

有的时候如果你希望水波纹不是长条形，又该如何呢？有两种解决方案，一种是使用图片，还有就是自定义shape，我们先来看看使用图片：

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"android:color="@color/colorAccent"><item
        android:id="@android:id/mask"android:drawable="@drawable/ic_launcher" />
</ripple>

在布局文件中将之引用为控件的背景：

        <TextViewandroid:layout_width="match_parent"android:layout_height="56dp"android:layout_marginTop="36dp"android:background="@drawable/picripple"android:clickable="true"android:gravity="center"android:text="Hello World!" />

自绘形状的水波纹

自绘shape，来看一个圆角矩形：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle"><corners android:radius="10dp" /><solid android:color="@color/colorPrimary" />
</shape>

在ripple中引用该矩形：

<?xml version="1.0" encoding="utf-8"?>  
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/colorAccent">  <item  android:id="@android:id/mask"  android:drawable="@drawable/custom_shape"/>  
</ripple>

设置背景：

        <TextViewandroid:layout_width="match_parent"android:layout_height="56dp"android:layout_marginTop="36dp"android:background="@drawable/shaperipple"android:clickable="true"android:gravity="center"android:text="Hello World!" />

这种方式我们在shape中定义的颜色只是用来划定水波纹显示区域，于视图显示上并没有什么用。如果你想让控件一开始就显示shape中定义的颜色，可以这样来定义ripple：

<?xml version="1.0" encoding="utf-8"?>  
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/colorAccent">  <!--<item-->  <!--android:id="@android:id/mask"-->  <!--android:drawable="@drawable/custom_shape"/>-->  <item>  <shape android:shape="rectangle">  <corners android:radius="10dp"/>  <solid android:color="@color/colorPrimary"/>  </shape>  </item>  
</ripple>

带selector效果的水波纹

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"android:color="@color/colorAccent"><item><selector><item
                android:drawable="@drawable/ic_launcher"android:state_pressed="true" /><item
                android:drawable="@drawable/bg"android:state_pressed="false" /></selector></item>
</ripple>
        <TextViewandroid:layout_width="match_parent"android:layout_height="56dp"android:layout_marginTop="36dp"android:background="@drawable/selectorripple"android:clickable="true"android:gravity="center"android:text="Hello World!" />

示例：

定义水波纹颜色：

    <color name="reveal_color">#1b000000</color>

drawable-v21：Android5.0水波纹

<?xml version="1.0" encoding="utf-8"?>  
<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/reveal_color">  <item  android:id="@android:id/mask"  android:drawable="@color/red"/>  
</ripple>

drawable：Android5.0做兼容：

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

使用：

        <TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:background="@drawable/ripple_effect"android:clickable="true"android:gravity="center"android:padding="10dp"android:text="测试"android:textColor="@color/colorAccent"android:textSize="25sp" />

这篇关于Touch Feedback（触摸反馈）：水波纹的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/526848。

相关文章

uniapp设置微信小程序的交互反馈

uniapp设置微信小程序的交互反馈

链接：uni.showToast(OBJECT) | uni-app官网 (dcloud.net.cn) 设置操作成功的弹窗： title是我们弹窗提示的文字 showToast是我们在加载的时候进入就会弹出的提示。 2.设置失败的提示窗口和标签 icon：'error'是设置我们失败的logo 设置的文字上限是7个文字，如果需要设置的提示文字过长就需要设置icon并给
阅读更多...
Adblock Plus官方规则Easylist China说明与反馈贴（2015.12.15）

Adblock Plus官方规则Easylist China说明与反馈贴（2015.12.15）

-------------------------------特别说明--------------------------------------- 视频广告问题：因Adblock Plus的局限，存在以下现象，优酷、搜狐、17173黑屏并倒数；乐视、爱奇艺播放广告。因为这些视频网站的Flash播放器被植入了检测代码，而Adblock Plus无法修改播放器。 如需同时使用ads
阅读更多...
Android触摸事件处理机制之requestDisallowInterceptTouchEvent

Android触摸事件处理机制之requestDisallowInterceptTouchEvent

一、触摸事件传递的规则 当手指触摸到屏幕时，系统就会调用相应的View的onTouchEvent，并传入一系列的action。当有多个层级的View时，在父层级允许的情况下，这个action会一直向下传递直到遇到最深层的View。所以touch事件最先调用的是最底层View的onTouchEvent，如果View的onTouchEvent接收到某个touchaction并做了相应处理，最后有两种
阅读更多...
Android 自定义View控件，实现跟随手指触摸移动的小球

Android 自定义View控件，实现跟随手指触摸移动的小球

Android UI组件是通过继承View类，然后绘制内容，比如ImageView，TextView等组件都是继承View类。 当Android系统提供的组件功能不能满足需求时，可以通过继承View类重写一个或多个方法，派生自定义的组件，View类常用重写方法： 1.构造器：View子类最基本的重写方法 protected voidonDraw(Canvas canvas) public
阅读更多...
今麦郎「日记薪·1号发」 即时反馈，激活10000+名基层员工

今麦郎「日记薪·1号发」 即时反馈，激活10000+名基层员工

本文内容整理自红海云CEO孙伟对今麦郎集团人力资源总经理王高峰、IT管理中心副总经理邹大勇的访谈。 坚持创新求变的品牌基因 过去30年，中国食品工业蓬勃发展，孕育出一批批在国际舞台上熠熠生辉的民族品牌。今麦郎作为民族品牌代表，自1994年创立以来，始终紧跟消费者需求变迁，从满足基础温饱的初心出发，逐步迈向品牌塑造、健康倡导及高端化探索的新征程，从家喻户晓的“今麦
阅读更多...
uniapp交互反馈

uniapp交互反馈

页面交互反馈可以通过:uni.showToast(object)实现,常用属性有 ioc值说明 值说明success显示成功图标，此时 title 文本在小程序平台最多显示 7 个汉字长度，App仅支持单行显示。error显示错误图标，此时 title 文本在小程序平台最多显示 7 个汉字长度，App仅支持单行显示。fail显示错误图标，此时 title 文本无长度显示。exception
阅读更多...
Cocos2dx 3.0 过渡篇（三） 触摸机制

Cocos2dx 3.0 过渡篇（三） 触摸机制

尊重原创，转载请注明来自：star特530的CSDN博客 http://blog.csdn.net/start530/article/details/18325493 本来在中午休息时间打算大展拳脚，好好写一篇新触摸机制相关的博文，结果，等真正下手的时候才发现无从下手，很多地方自己都说不清，赶紧看了下testCpp，才发现原来是这样，还可以这样，哦？这样都行？哎，我还是太年轻了。   咱也只能
阅读更多...
3.js - Water2不显示水波纹

3.js - Water2不显示水波纹

文中需要的资源，在我的资源那里能下载 【3.js 有2个水的生成方式：Water、Water2】 注意： 这个问题，是基于 Water2的 如下方式，不显示波纹 import * as THREE from 'three'import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'import { R
阅读更多...
（素材源码）猫猫学IOS（九）UI之UIScrollView代理触摸实现_图片缩放

（素材源码）猫猫学IOS（九）UI之UIScrollView代理触摸实现_图片缩放

猫猫分享，必须精品 素材代码地址：http://download.csdn.net/detail/u013357243/8531273 原文地址：http://blog.csdn.net/u013357243?viewmode=contents 先看效果 ps：新建iOS交流学习群：304570962 ps：猫猫的文章竟然被好多地方转载了，受宠若惊啊，不过转的时候请转的全一点，别
阅读更多...
猫猫学IOS（九）UI之UIScrollView代理触摸实现_图片缩放

猫猫学IOS（九）UI之UIScrollView代理触摸实现_图片缩放

猫猫分享，必须精品 素材代码地址：http://blog.csdn.net/u013357243/article/details/44619193 原文地址：http://blog.csdn.net/u013357243?viewmode=contents 先看效果 代码 //// NYViewController.m// 05-放大缩小图片UIScrollView//
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2