MaterialDesign的水波纹效果

MaterialDesign 的动画,3D,的效果非常好;
但是也有蛋疼的地方,比如,自动把所有的按钮,加上了动画,悬浮效果;
动画也就算了,悬浮效果一加; app的风格会比较乱;
下面是修改Button的悬浮,和动画效果颜色的介绍,还有自定义 水波纹效果;

1.png

左边的是默认Button效果,右边是我改了颜色的;
如果你需要MD风格的水波纹效果,那就不能给Button加background;
加了之后,只有3D的悬浮悬浮效果了;
如果你要改变Button的默认背景颜色,和按下去的水波纹颜色,
只需要这么做

<!--  style代码-->
 <style name="AppTheme.Button" parent="Widget.AppCompat.Button">
        <item name="colorButtonNormal">@color/white</item>//按钮默认颜色
        <item name="colorControlHighlight">@color/red</item>//按钮按下的水波纹改变颜色
    </style>
<!--Button的代码-->
 <Button
  android:id="@+id/app_dialog_buttonleft"
  android:layout_width="0dp"
  android:layout_height="wrap_content"
  android:layout_weight="1"
  android:text="Button"
  android:theme="@style/AppTheme.Button" />
<!--注意使用【主题】而不是style-->

引入MD后,会默认给所有的Button加上悬浮效果,如果你不需要怎么办?
那么需要这样:

<Button
  android:id="@+id/app_dialog_buttonleft"
  android:layout_width="0dp"
  android:layout_height="wrap_content"
  android:layout_weight="1"
  android:background="?attr/selectableItemBackground"
  android:text="Button"
  android:theme="@style/AppTheme.Button" />

android:background="?android:attr/selectableItemBackground"
//如果你是用的v7,写成
android:background="?attr/selectableItemBackground"
%G{UE6){V~SVLQB1}}ET{E7.png

这就是去掉了悬浮的效果的button

MD的水波纹效果很好,但是只有按钮上面有,你可能不会满足,
你很可能需要在 LinearLayout,RelativeLayout,textview等View使用
那么你可以这样

通过引入原生的Style的方式使用,当然这种方式的坏处是,背景默认是透明的,好处是,自己不需要做兼容;
如果需要需要背景色,那么文章后面的自定义
<style name="AppLayoutTheme" parent="AppTheme">
//这里更改水波纹颜色
        <item name="colorControlHighlight">@color/red</item>
    </style>

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="?attr/selectableItemBackground"
        android:clickable="true"
        android:gravity="center"
        android:theme="@style/AppLayoutTheme">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="点这里看线性布局的水波纹效果"/>
    </LinearLayout>

示例:


3066171-eceea81a5176c552.png
  这里需要注意一点:
不过是上面的Button和(LinearLayout)布局,如果使用了这个水波纹效果
android:background="?attr/selectableItemBackground"
那么他是无法设置默认的颜色的;
通过看源码,可以知道他的默认效果是透明的

这是源码:


3066171-9254cd088e97bef4 (1).png

----------------------自定义------------------
如果需要自己自定义效果 比如背景色需要自定义,圆角需要自定义,那么手撸一个,不用系统的
在res目录建立一个drawable-v21的文件夹(因为水波纹效果的属性,只能在5.0+才能使用);
如果你的App需要兼容到5.0以下,就需要在默认的 drawabe目录建立一个一样的文件(test_md.xml) ;
不然app会在5.0以下的手机出错;

--------------文件名------test_md.xml
    <ripple xmlns:android="http://schemas.android.com/apk/res/android"
      //水波纹颜色
        android:color="@color/colorPrimary"
        //点击中心点的大小,不建议使用,不然在6.0+上面会导致,点击哪里 水波纹都是在中心
        android:radius="5dp">   
//给item设置系统maskId,限制水波纹不越界,
   <item android:id="@android:id/mask">
           //如果需要改变使用水波纹控件的圆角,需要用到shape
            <shape android:shape="rectangle">
                  //圆角度
                <corners android:radius="8dp" />
                //默认的背景颜色
                <solid android:color="?android:attr/colorAccent" />
            </shape>
        </item>
    </ripple>
     <TextView
                android:id="@+id/adi_delete"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:layout_marginRight="20dp"
                android:layout_marginTop="10dp"
                android:background="@drawable/test_md"
                android:gravity="center"
                android:paddingBottom="10dp"
                android:paddingTop="10dp"
                android:text="删除并退出讨论组"
                android:textColor="@color/white"
                android:textSize="14sp" />

Look Image


222.png
333.png
这里是使用TextView,带有水波纹效果,但是没有悬浮效果,如果需要悬浮效果的话, 那么
    <TextView
                android:id="@+id/adi_delete"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:layout_marginRight="20dp"
                android:layout_marginTop="10dp"
                android:background="@drawable/test_md"
                android:gravity="center"
                android:paddingBottom="10dp"
                android:paddingTop="10dp"
                android:text="删除并退出讨论组"
                android:textColor="@color/white"
                android:theme="@style/AppTheme.Button"
                android:textSize="14sp" />
//继承兼容包的Button样式,就会有悬浮效果了
<style name="AppTheme.Button" parent="Widget.AppCompat.Button">
      
    </style>
image.png

能完成此效果,在这里要感谢 QJar的指点;
QJar的博客地址 http://blog.csdn.net/qJay_Dev

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,922评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,591评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,546评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,467评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,553评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,580评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,588评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,334评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,780评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,092评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,270评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,925评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,573评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,194评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,437评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,154评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,127评论 2 352

推荐阅读更多精彩内容