Android Material Design : Ripple Effect水波波纹荡漾的视觉交互设计
Android Material Design : Ripple Effect水波波纹荡漾的视觉交互设计
Android Ripple Effect波纹荡漾效果,是Android Material Design视觉设计引入的一种交互设计效果简言之:当点击某个view时候,view会出现像水波波纹一样的荡漾传播效果。在最新版的Android如Android 5.0或以上版本中默认具有该效果,但在低版本Android中没有,如果需要向下兼容低版本设备,则需要自己写代码实现,实现步骤:
第1步:需要先引入一个名叫design的Android扩展库。在Android Studio中直接添加该库。Eclipse项目则位于Android SDK的扩展开发包库中:extras\android\support\design。
第2步:在res/目录下新建一个 drawable-v21 文件目录。
第3步:在drawable-v21目录下新建一个Android xml资源文件,名称随意,比如叫ripple_effect.xml。
第4步:在ripple_effect.xml中写入代码:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#ff21272B" > <item>
<shape android:shape="rectangle" >
<solid android:color="@android:color/white" /> <corners android:radius="10dp" />
</shape>
</item> </ripple>
注意:如果此处把ripple里面的item全部删掉,ripple效果依然有效,但是此时的ripple effect将没有边界,ripple效果将变成一个圆形超出View边界的ripple effect视觉效果,一般是一个从点击位置开始往圆周扩散的圆形渐变水波波纹荡漾效果。有些像一个往圆周发散衰减信号的“雷达”,利用这一点,可以改造ripple effect成更为复杂和精彩的视觉交互效果。
第5步:接下来就是使用。比如把一个普通的Android TextView改造成具有Ripple Effect的TextView,那么就设置该TextView的background之资源为第4步创建的ripple_effect:
<TextView
android:layout_width="300dp"
android:layout_height="wrap_content"
android:background="@drawable/ripple_effect"
android:clickable="true"
android:gravity="center"
android:padding="10dp"
android:text="zhang phil @ csdn" />
Android Material Design : Ripple Effect水波波纹荡漾的视觉交互设计的更多相关文章
- Android Material Design Ripple Effect在Android5.0(SDK=21)以下Android版本崩溃问题解决
Android Material Design Ripple Effect在Android5.0(SDK=21)以下Android版本崩溃问题解决 附录1的Android Ripple Effect水 ...
- Material Design Reveal effect(揭示效果) 你可能见过但是叫不出名字的小效果
Material Design Reveal effect(揭示效果) 你可能见过但是叫不出名字的小效果 前言: 每次写之前都会来一段(废)话.{心塞...} Google Play首页两个tab背景 ...
- Android Material Design 兼容库的使用
Android Material Design 兼容库的使用 mecury 前言:近来学习了Android Material Design 兼容库,为了把这个弄懂,才有了这篇博客,这里先推荐两篇博客: ...
- Android Material Design的FloatingActionButton,Snackbar和CoordinatorLayout
如果是为了兼容低版本的Android系统,则需要引用Android Material Design的扩展支持库,我在之前的一篇文章张,较为详细的说明了如何导入Android Material Desi ...
- Android Material Design之Toolbar与Palette
转:http://blog.csdn.net/jdsjlzx/article/details/41441083 前言 我们都知道Marterial Design是Google推出的全新UI设计规范,如 ...
- android Material Design详解
原文地址:http://blog.csdn.net/jdsjlzx/article/details/41441083/ 前言 我们都知道Marterial Design是Google推出的全新UI设计 ...
- MaterialEditText——Android Material Design EditText控件
MaterialEditText是Android Material Design EditText控件.可以定制浮动标签.主要颜色.默认的错误颜色等. 随着 Material Design 的到来, ...
- Android Material Design控件学习(三)——使用TextInputLayout实现酷市场登录效果
前言 前两次,我们学习了 Android Material Design控件学习(一)--TabLayout的用法 Android Material Design控件学习(二)--Navigation ...
- Material Design风格的水波涟漪效果(Ripple Effect)的实现
Material Design是Google在2014年Google I/O大会上推出的一套全新的设计语言,经过接近两年的发展,可谓是以燎原之势影响着整个设计交互生态,和Material Design ...
随机推荐
- HDUOJ---1236 排名(浙大考研题)
排名 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submissi ...
- IO流--文件处理
import java.io.*; public class io { public static void main(String[] args) { ListDemo(); File dir = ...
- 支持向量机的smo算法(MATLAB code)
建立smo.m % function [alpha,bias] = smo(X, y, C, tol) function model = smo(X, y, C, tol) % SMO: SMO al ...
- Google Chrome 源码下载地址 (Google Chrome Source Code Download)
1. Google Chrome 源码 SVN 地址:http://src.chromium.org/svn.包含有 Chrome.Gears.Webkit.GCC 等源码以及编译依赖工具.Chrom ...
- shell学习记录003-cat命令
cat 命令一般用于文件的查看 cat -s file #可以去除文件中多余的上下空行 cat -T file #Python编程中会用到的制表符会在该命令中体现出来 cat -n file ...
- 当进入log文件后就卡机
问题:一个目录打开,终端就卡死不动了 Ctrl+c也没用,cat一样没用? 解决办法:用的时间或用的数量删除(时间已经否决掉) ls -t |tail -1000 |xargs rm 原因: log ...
- 使用ContentProvider管理联系人------搜索联系人
此博客只实现了查询功能: import java.util.ArrayList; import android.os.Bundle;import android.provider.ContactsCo ...
- HideProcess
#ifndef CXX_HIDEPROCESS_H # include "HideProcess.h" #endif #ifdef _WIN64 #define ActivePro ...
- Windows安装配置php+memcached的方法
Windows下Memcached的安装配置方法 1.将第一个包解压放某个盘下面,比如在c:\memcached. 2.在终端(也即cmd命令界面)下输入 'c:\memcached\memcache ...
- POJ 1436 区间染色
Horizontally Visible Segments Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 4507 Ac ...