Elevation和Ripple共用的简单例子
Google给出material design以来,一直没弄明白Elevation这个效果怎么用。这次就通过下面简单的例子来实现。
drawable/circular_button_selector.xml:
1 2 3 4 5 | <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_selected="true" android:drawable="@drawable/circular_button_selected"/> <item android:drawable="@drawable/circular_button"/> </selector> |
drawabale/ripple_selector.xml
1 2 3 4 5 6 | <?xml version="1.0" encoding="utf-8"?> <ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="?android:colorControlHighlight"> <item android:id="@android:id/mask" android:drawable="@drawable/circular_button"/> <item android:drawable="@drawable/circular_button_selector"/> </ripple> |
anim/button_elevation.xml:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_enabled="true" android:state_pressed="true"> <objectAnimator android:duration="@android:integer/config_shortAnimTime" android:propertyName="translationZ" android:valueFrom="2dip" android:valueTo="8dip" android:valueType="floatType" /> </item> <item> <objectAnimator android:duration="@android:integer/config_shortAnimTime" android:propertyName="translationZ" android:valueFrom="8dip" android:valueTo="2dip" android:valueType="floatType" /> </item> </selector> |
按钮在按下后elevation的值从2到8,松开后从8回到2,这两个状态在Material Design中称为Pressed State 和 Resting State。更多控件不同状态的elevation值可参考Material Design 中的 elevation-shadows-shadows 部分。
给Button设置状态:
layout/circular_button_layout:
1 2 3 4 5 6 7 8 9 | <?xml version="1.0" encoding="utf-8"?> <Button xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="@dimen/button_size" android:layout_height="@dimen/button_size" android:background="@drawable/ripple_selector" android:textAppearance="?android:textAppearanceLarge" android:textColor="@color/button_text_selector" android:stateListAnimator="@anim/button_elevation"/> |
注:通过代码(View#setstateListAnimator()) 也可以设置stateListAnimator,但是没有找到从Resource中获取StateListAnimator对象的方法,如果您知道,可以在下边进行评论告诉我。
这样得到的效果如下:
为什么会这样呢?因为button的背景是圆形的图片,但Shadow并不会识别我们自定义的Button形状,它还是回显示方形,这样就需要我们自行指定Button的轮廓(Outline):
1 2 3 4 | int buttonSize = (int) getResources().getDimension(R.dimen.button_size); Outline circularOutline = new Outline(); circularOutline.setOval(0, 0, buttonSize, buttonSize); button.setOutline(circularOutline); |
这样我们就得到了想要的效果。
359