您的位置:首页 > 移动开发 > Android开发

关于android Ripple Effect的那些事

2018-02-22 14:05 295 查看
       一直觉得android的Ripple Effect这个效果比较有意思,更好的地方在于它不需要多张图,比如以前的常规一个效果,点击后一个效果。比较坑爹的一点在于它只在v21及后面的版本可以使用,貌似有些做法是v21以下的做兼容处理。瞬间感觉好麻烦,
    然后继续找 发现了 https://stackoverflow.com/questions/26686250/material-effect-on-button-with-background-color 这个,只需要设置一个即可,关键的属性是设置style 
Widget.AppCompat.Button.Colored。看到这里高兴的像个200斤的孩子,赶紧一试发现完全没有效果。

        布局如下:
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="cn.yeagle.rippleeffect.MainActivity">

<android.support.v7.widget.AppCompatButton
android:id="@+id/btn_mobile_login"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.45"
android:text="登录"
style="@style/login_btn_style"
/>

</android.support.constraint.ConstraintLayout>
<style name="base_btn_style1" parent="@style/Widget.AppCompat.Button.Colored"> <!--parent="@style/Widget.AppCompat.Button.Borderless"-->
<item name="android:textColor">#fd8803</item>
<item name="android:textSize">16sp</item>
<item name="android:background">@drawable/btn_circle_stroke_bg</item>
</style>

<style name="login_btn_style" parent="base_btn_style1">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">40dp</item>
<item name="android:layout_marginLeft">30dp</item>
<item name="android:layout_marginRight">30dp</item>
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#01f0f0f0" />
<corners android:radius="70dp" />
<stroke android:width="1px" android:color="#fffc985e" />
</shape>

后面才发现shape的问题,针对自己设置的shape根本无效。既然这样那么我适配v21的,我也要看下效果吧

添加v21的效果

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorPrimaryDark"
>
<item>
<shape
android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#fffc985e" />
<corners android:radius="70dp" />
</shape>
</item>

</ripple>
效果是有了,但是发现四周有了一个阴影,这个倒是比较简单

parent="@style/Widget.AppCompat.Button.Borderless">
将上面的parent,改成这个就好了。其实中间还有个问题就是,我在设置shape的时候,想把solid设置成透明,结果效果也不出来,好像上面的颜色alpha跟这个alpha一致,改成不透明的里面就可以了。


样式名说明
Widget.AppCompat.Button正常
Widget.AppCompat.Button.Small小按钮
Widget.AppCompat.Button.Borderless无背景
Widget.AppCompat.Button.Borderless.Colored无背景有预设文本颜色
Widget.AppCompat.Button.Colored有预设文本颜色
另外在自定义标题栏,同样这样设置,发现好丑,哈哈。再看系统有专门的style

Widget.AppCompat.Toolbar.Button.Navigation这个只是一个圆形区域,然后可以设置
<item name="android:minWidth">35dp</item>来限制宽度,不然有时候根本不是那么宽

mark一下:ripple只是针对背景的,想imageview 设置src完全就没有效果,设置背景,就会根据背景颜色的透明度先显示区域
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  ripple