有没有办法在API中做一个材质样式的阴影?21(5.0棒棒糖)

材料设计非常强调"一张张纸"的隐喻。为了制作这些，阴影是必不可少的。由于材料设计是一种哲学，而不是API(尽管它被内置到L中)，这应该在任何地方完成(Windows窗体，HTML/CSS等)。如何在Android API 14到20中做到这一点?

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

如果您不担心向后兼容过去的棒棒糖，您可以直接在XML

中设置海拔属性。

    android:elevation="10dp"

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

    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 % 20浮动)

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

用LightingColorFilter(0,0) set
使用ScriptIntrisincBlur模糊
绘制形状
在形状

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

这里只是一个粗略的示例…

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

浮动动作按钮(带阴影)可以通过一个简单的java类在旧平台上模拟。

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

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

可以使用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">

相关内容

最新更新

热门标签：