Android Shadow

安卓阴影的实现

被安卓的阴影折腾了好多天, 总算有个完美的方案了. 在Github上找了很多阴影的库, 不清楚是版本问题还是兼容问题, 不能如愿

而Material自带的evaluation高度属性的阴影貌似无法定制阴影的颜色, shadowColor之类的属性不能应用于按钮

现记录下目前来说最佳解决方案

http://inloop.github.io/shadow4android/

• Round: 圆角, 需要和Button的background的圆角一直

• Shadow blur: 阴影模糊

• Shadow color:阴影颜色, 这里有个bug, #3f59ff33填上这样的RGBA颜色, 后面的透明值会自动删除, 骚操作是填上33然后立即点下载

• Shadow offset: 阴影偏移, 如果这里填了Y的值, 后面需要进行 ##对应设置##

• Box size: 这里填的是最小值, 如果这个设置不对那么在实际的机子上被压缩的时候就显示不正常了, 一般要比设计图上的小

• Padding size: 如果 X = 0 , Y=10 那么对应这里的 Top 要设置为10, 这样可以确保到时候按钮文字仍然在按钮的”中间”

目前这样的设置方法适合需要将按钮浮起的阴影效果

下载后的使用方法:

1. 拖到drawable
2. 在原来的 Button的background的drawable里加上即可
3. 根据情况调整margin, 如果显示阴影不正常, 回到那个网站跳转设置

上代码

.9.png的设置

1. Round=30 和下文的 corners的 Radius 一致
2. Shadow blur根据情况设置, 我这是20
3. Shadow color = #3f59ff33 末尾的33表示 20% 透明, 记得在下载前设置, 否则会被自动重置为6位的HEX值
4. Shadow offset: Y=10, 向下偏移10
5. Fill & Outline 不启用, 因为中央的透明用来放自己的渐变背景
6. Box size Width和Height 输入较小的值, 一定要比设计图上小
7. Padding lines放在默认两端即可, 表示可四面八方拉伸, 对于给按钮加阴影来说这样就可以
8. Side clipping边缘裁剪, 不勾
9. Padding size Top=10对应上面的Shadow offset, 这样才能保证到时候Button的文字会在”主体的中间”
10. 回到第三步加上33,点下载即可

一个按钮的背景drawable

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--第一层放.9.png-->
    <item>
        <nine-patch android:src="@drawable/shadow_14399"/>
    </item>
<!--第二层为原本的背景-->
    <item>
        <shape android:shape="rectangle">
            <gradient
                android:angle="180"
                android:endColor="#ff5e7bfe"
                android:startColor="#ff3e57fd"
                android:type="linear"
                android:useLevel="true" />
            <corners
                android:bottomLeftRadius="30dp"
                android:bottomRightRadius="30dp"
                android:topLeftRadius="30dp"
                android:topRightRadius="30dp" />
        </shape>
    </item>
</layer-list>

按钮使用的style

<style name="shadow_button" parent="Widget.AppCompat.Button">
    <item name="android:background">@drawable/shape</item>
    <item name="android:elevation">10dp</item>
    <item name="android:textColor">@color/mainwhite</item>
    <item name="android:textSize">20sp</item>
    <item name="android:stateListAnimator">@null</item>
</style>

用到的网站

1. .9图生成
2. ARGB透明度对照
3. 不要在style里使用大于25的shadowRadius

最后是效果