MaterialDesign的水波纹效果
2016-12-11 本文已影响1200人
大象屁股
MaterialDesign 的动画,3D,的效果非常好;
但是也有蛋疼的地方,比如,自动把所有的按钮,加上了动画,悬浮效果;
动画也就算了,悬浮效果一加; app的风格会比较乱;
下面是修改Button的悬浮,和动画效果颜色的介绍,还有自定义 水波纹效果;
左边的是默认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