是否可以使用 CardView 为浮动操作按钮制作阴影？答案

【问题标题】：Is it possible to use CardView to make shadow for Floating Action Button?是否可以使用 CardView 为浮动操作按钮制作阴影？
【发布时间】：2015-03-12 09:05:55
【问题描述】：

我知道CardView 不是为此而生的，但理论上如果cardCornerRadius = view_size / 2 它应该导致圆圈。

我错过了什么吗？

【问题讨论】：

尝试使用 app:cardPreventCornerOverlap="false" 来查看卡片。不确定它是否会按您的意愿工作。 @Dmytro Danylyk
@Pooja 如您在屏幕截图中所见，该属性已设置。

标签： android shadow android-cardview floating-action-button

【解决方案1】：

绘制真实的动画阴影并不难，您可以尝试在任何 Android 上实现 Lollipop 的效果，小到 Froyo。以下是它的工作原理：

使用 LightingColorFilter(0,0) 将视图绘制到屏幕外位图
使用 ScriptIntrisincBlur 模糊该位图。将模糊半径设置为您的海拔值。
在浮动操作按钮下方绘制模糊位图。

示例实现见：

阴影生成器，模糊视图：https://github.com/ZieIony/Carbon/blob/master/carbon/src/main/java/carbon/shadow/ShadowGenerator.java
LinearLayout 支持阴影，检查 drawChild() 方法：https://github.com/ZieIony/Carbon/blob/master/carbon/src/main/java/carbon/widget/LinearLayout.java#L102

基本上，Carbon 库试图尽可能好地模仿 Lollipop 的效果。我知道导入这样的库可能有点矫枉过正，但如果您希望只复制代码中有趣的部分并在您的应用中使用它。

【讨论】：

我正在使用更简单的解决方案 setShadowLayer github.com/dmytrodanylyk/shadow-layout/blob/master/library/src/… 仅供参考：而不是 Bitmap.Config.ARGB_8888 使用 Bitmap.Config.ALPHA_8 它会将生成的 Bitmap 的大小减少 3 倍。
setShadowLayer 不适用于硬件加速，这对我来说是不可接受的。感谢 ALPHA_8 配置的提示 - 我必须检查一下:)
setShadowLayer 在视图 Canvas 内使用时不起作用。如果您从Bitmap 创建Canvas 对象，它可以工作github.com/dmytrodanylyk/shadow-layout/blob/master/library/src/…
它之所以有效，是因为由简单位图支持的 Canvas 不是硬件加速的。这意味着阴影也不是硬件加速的。我想知道该解决方案的性能如何。

【解决方案2】：

不建议这样做，这是违反模式的。 CardView 用于列表。您可以制作自己的Floating Action Button 和ImageView 的影子。

activity_layout.xml:

<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    ....
    <ImageButton
            android:id="@+id/add_courses_button"
            android:layout_width="64dp
            android:layout_height="64dp"

            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"

            android:layout_marginBottom="16dp"
            android:layout_marginRight="16dp"

            android:background="@drawable/fab"
            android:tint="@color/white"
            android:src="@drawable/add_image"/>
    ...
</LinearLayout>

fab.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <layer-list>
            <!-- Shadow -->
            <item android:top="1dp" android:right="1dp">
                <layer-list>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#08000000"/>
                            <padding
                                android:bottom="3px"
                                android:left="3px"
                                android:right="3px"
                                android:top="3px"
                                />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#09000000"/>
                            <padding
                                android:bottom="2px"
                                android:left="2px"
                                android:right="2px"
                                android:top="2px"
                                />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#10000000"/>
                            <padding
                                android:bottom="2px"
                                android:left="2px"
                                android:right="2px"
                                android:top="2px"
                                />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#11000000"/>
                            <padding
                                android:bottom="1px"
                                android:left="1px"
                                android:right="1px"
                                android:top="1px"
                                />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#12000000"/>
                            <padding
                                android:bottom="1px"
                                android:left="1px"
                                android:right="1px"
                                android:top="1px"
                                />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#13000000"/>
                            <padding
                                android:bottom="1px"
                                android:left="1px"
                                android:right="1px"
                                android:top="1px"
                                />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#14000000"/>
                            <padding
                                android:bottom="1px"
                                android:left="1px"
                                android:right="1px"
                                android:top="1px"
                                />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#15000000"/>
                            <padding
                                android:bottom="1px"
                                android:left="1px"
                                android:right="1px"
                                android:top="1px"
                                />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#16000000"/>
                            <padding
                                android:bottom="1px"
                                android:left="1px"
                                android:right="1px"
                                android:top="1px"
                                />
                        </shape>
                    </item>
                </layer-list>
            </item>

            <!-- Blue button pressed -->
            <item>
                <shape android:shape="oval">
                    <solid android:color="#0099cc"/>
                </shape>
            </item>
        </layer-list>
    </item>

    <item android:state_enabled="true">

        <layer-list>
            <!-- Shadow -->
            <item android:top="1dp" android:right="1dp">
                <layer-list>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#08000000"/>
                            <padding
                                android:bottom="3px"
                                android:left="3px"
                                android:right="3px"
                                android:top="3px"
                                />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#09000000"/>
                            <padding
                                android:bottom="2px"
                                android:left="2px"
                                android:right="2px"
                                android:top="2px"
                                />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#10000000"/>
                            <padding
                                android:bottom="2px"
                                android:left="2px"
                                android:right="2px"
                                android:top="2px"
                                />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#11000000"/>
                            <padding
                                android:bottom="1px"
                                android:left="1px"
                                android:right="1px"
                                android:top="1px"
                                />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#12000000"/>
                            <padding
                                android:bottom="1px"
                                android:left="1px"
                                android:right="1px"
                                android:top="1px"
                                />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#13000000"/>
                            <padding
                                android:bottom="1px"
                                android:left="1px"
                                android:right="1px"
                                android:top="1px"
                                />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#14000000"/>
                            <padding
                                android:bottom="1px"
                                android:left="1px"
                                android:right="1px"
                                android:top="1px"
                                />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#15000000"/>
                            <padding
                                android:bottom="1px"
                                android:left="1px"
                                android:right="1px"
                                android:top="1px"
                                />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#16000000"/>
                            <padding
                                android:bottom="1px"
                                android:left="1px"
                                android:right="1px"
                                android:top="1px"
                                />
                        </shape>
                    </item>
                </layer-list>
            </item>

            <!-- Blue button -->
            <item>
                <shape android:shape="oval">
                    <solid android:color="#33b5e5"/>
                </shape>
            </item>
        </layer-list>

    </item>

</selector>

结果是这样的：

【讨论】：

感谢您的回答，但是这样的按钮很难维护。
这种阴影在更高像素密度的设备上看起来还可以吗？我还没有尝试过，但我只是想知道如果我改用 dp 是否会起作用。

【解决方案3】：

技术上似乎可行，但实际上并非如此。

如果你想使用这样的按钮，我建议你使用这个库。它工作得很好。 https://github.com/navasmdc/MaterialDesignLibrary

【讨论】：