Elevation和Ripple共用的简单例子

Google给出material design以来，一直没弄明白Elevation这个效果怎么用。这次就通过下面简单的例子来实现。

drawable/circular_button_selector.xml:

<?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

<?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:

<?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:

    <?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):

int buttonSize = (int) getResources().getDimension(R.dimen.button_size);
Outline circularOutline = new Outline();
circularOutline.setOval(0, 0, buttonSize, buttonSize);
button.setOutline(circularOutline);

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

2015-06-15 23:07

195

Material_Design

分享本文：