煎饼

煎饼为你分享Android有关的技术文章
不断分享,点滴积累,共同提高

关注微信公众号[developers]
更快的了解新的技术动态

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);

这样我们就得到了想要的效果。

175

分享本文:

Android开发大牛博客收集