android - 有没有办法在 API < 21 (5.0 Lollipop) 中做一个 Material 风格的阴影？

Question

材料设计非常强调“纸”的隐喻。要制作这些，阴影是必不可少的。由于 Material design 是一种哲学而不是 API（尽管它被内置在 L 中），因此应该在任何地方（Windows 窗体、HTML/CSS 等）完成。如何在 Android API 14 到 20 中执行此操作？

请注意，预制的 PNG 对于圆形和其他非方形形状并不实用。

Answer 1

如果您不担心过去 Lollipop 的向后兼容性，您可以直接在 XML 中设置海拔属性

    android:elevation="10dp"

否则，您必须使用 support.v4.ViewCompat 库在 Java 中设置它。

    ViewCompat.setElevation(myView, 10);

并将其添加到您的 build.gradle

    compile 'com.android.support:support-v4:21.+'

http://developer.android.com/reference/android/support/v4/view/ViewCompat.html#setElevation(android.view.View,%20float)

Answer 2

这里只是一个粗略的样本......

<?xml version="1.0" encoding="utf-8"?>

<!-- Drop Shadow Stack -->
<item>
    <shape android:shape="oval">
        <corners android:radius="64dp"/>
        <solid android:color="#009A3D"/>
        <size
            android:width="64dp"
            android:height="64dp"/>
        <padding
            android:top="1dp"
            android:right="1dp"
            android:bottom="1dp"
            android:left="1dp"/>
        <solid android:color="#00CCCCCC"/>
    </shape>
</item>
<item>
    <shape android:shape="oval">
        <corners android:radius="64dp"/>
        <solid android:color="#009A3D"/>
        <size
            android:width="64dp"
            android:height="64dp"/>
        <padding
            android:top="1dp"
            android:right="1dp"
            android:bottom="1dp"
            android:left="1dp"/>
        <solid android:color="#10CCCCCC"/>
    </shape>
</item>
<item>
    <shape android:shape="oval">
        <corners android:radius="64dp"/>
        <solid android:color="#009A3D"/>
        <size
            android:width="64dp"
            android:height="64dp"/>
        <padding
            android:top="1dp"
            android:right="1dp"
            android:bottom="1dp"
            android:left="1dp"/>
        <solid android:color="#20CCCCCC"/>
    </shape>
</item>
<item>
    <shape android:shape="oval">
        <corners android:radius="64dp"/>
        <solid android:color="#009A3D"/>
        <size
            android:width="64dp"
            android:height="64dp"/>
        <padding
            android:top="1dp"
            android:right="1dp"
            android:bottom="1dp"
            android:left="1dp"/>
        <solid android:color="#30CCCCCC"/>
    </shape>
</item>
<item>
    <shape android:shape="oval">
        <corners android:radius="64dp"/>
        <solid android:color="#009A3D"/>
        <size
            android:width="64dp"
            android:height="64dp"/>
        <padding
            android:top="1dp"
            android:right="1dp"
            android:bottom="1dp"
            android:left="1dp"/>
        <solid android:color="#50CCCCCC"/>
    </shape>

</item>

<!-- Background -->
<item>
    <shape android:shape="oval">

        <corners android:radius="64dp"/>
        <solid android:color="#009A3D"/>
        <size
            android:width="64dp"
            android:height="64dp"/>
    </shape>
</item>

在您的布局文件中，您可以使用它...

<Button
        android:id="@+id/add_btn"

        android:text="+"
        android:textColor="#FFFDFC"
        android:textSize="44sp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginRight="50dp"
        android:layout_marginBottom="40dp"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:clickable="true"
        android:enabled="true"
        android:singleLine="false"
        android:layout_alignParentTop="false"
        android:background="@drawable/round_button"/>

Answer 3

在 pre-Lollipop 上渲染阴影并不容易，但可能。诀窍是阴影只是视图的黑色模糊形状。你可以自己做。

1. 设置 LightingColorFilter(0,0) 将阴影投射视图绘制到位图
2. 使用 ScriptIntrisincBlur 对其进行模糊处理
3. 画出形状
4. 在形状顶部绘制视图

听起来好像要编写很多代码，但它适用于所有情况，因此您可以轻松涵盖所有视图。

Answer 4

您可以使用 android.support.v7.widget.CardView。

也许不是完美的解决方案，但对我来说正在做我想要的。因此，例如，这是我在我的应用程序中使用的技巧……在矩形形状上，我对结果感到满意。

private View.OnTouchListener touch = new View.OnTouchListener() {

    @Override
    public boolean onTouch(View v, MotionEvent event) {

        final android.support.v7.widget.CardView card_view = (android.support.v7.widget.CardView) ((View) v.getParent()).findViewById(R.id.card_view);


        switch (event.getAction()) {

            case MotionEvent.ACTION_DOWN:

                card_view.setCardElevation(6);
                card_view.setScaleX(1.007f);
                card_view.setScaleY(1.007f);
                break;
            case MotionEvent.ACTION_CANCEL:
            case MotionEvent.ACTION_UP:

                card_view.setCardElevation(3);
                card_view.setScaleX(1f);
                card_view.setScaleY(1f);
                break;
        }
        return false;
    }
};

在我使用的 xml 文件中：

<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"

android:id="@+id/card_view"
android:layout_width="match_parent"
android:layout_height="match_parent"

card_view:cardCornerRadius="2dp"
card_view:cardMaxElevation="6dp"
card_view:cardElevation="3dp">

Answer 5

浮动操作按钮（带阴影）可以在旧平台上使用简单的 java 类进行模拟。

我在这里使用 Faiz Malkani 的版本： https ://github.com/FaizMalkani/FloatingActionButton

[注意，为了让它与 Gingerbread 兼容，您需要在他的代码中围绕动画和透明度调用进行一些 SDK 版本检查。]