最近公司来了新UX总监, 很喜欢给设计添加浓重的, 而且是好几层的阴影. 这下就苦了我们Android开发了. 因为是Android不支持啊, 巧妇也难为无米之炊啊. *(折中方法也不是没有, 就是自己把阴影做个view, 但它的blur这些比较麻烦, 做过Android的都知道这个Blur要用到BlurScript之类, 做起来不容易)* # Android的shadow之痛以下图中一个矩形有阴影为例, 它的shadow是有多种参数的, 主要就是: offsetX, offsetY, blur, spread, color & alpha. Ux在figma等软件上设计好的样子如下: ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b7f91c9486274834a9fd5e9c0ae70a02~tplv-k3u1fbpfcp-watermark.image#?w=498\&h=326\&s=27196\&e=png\&b=fafafa) 而UX与PO天天挂嘴边的: "为什么人家iOS可以, 为什么人家web可以, 就你Android不行?", 这个是因为人家有支持啊. * web用css: `filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.3));` * iOS的view的layer也支持 (iOS的绘制也是有一层一层的, 类似Android中的FrameLayout一样, 可以一层层堆叠): ```swift let yourView = UIView() yourView.layer.shadowColor = UIColor.black.cgColor yourView.layer.shadowOpacity = 1 yourView.layer.shadowOffset = .zero yourView.layer.shadowRadius = 10 ``` 但我们Android确实对shadow的支持从来就弱. 若是对文字的阴影, 那TextView确实有部分支持, 但blur效果就不支持: ```xml ``` 原因是: **Android中你的View得有一个背景, 颜色或图片都可以, 那你才会有阴影**. 当我上面的view没有背景, 那Android根本就不会为它生成背景, 因为它把这个view当成透明的了, 一个透明的东西在光照下自然是没有阴影的. 解决办法: ```xml ``` ## 坑2: 下载的图片素材做bg, 但仍没有阴影我有一个view, 其是有背景的. 我去figma上下载这个背景, ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2adea18c29c94ffdb4c7bde9b07fee65~tplv-k3u1fbpfcp-watermark.image#?w=232\&h=134\&s=6311\&e=png\&b=fefefe) 并导入到Android Studio后, 命名为`bg_pink_polygon`, 但下面的代码仍是没有阴影. ```xml ``` : 原因其实是Android要求你的view有bg, 才可能会有阴影但前提是这个bg, 不能是SVG形成的`` xml, 不然Android也不会为它生成阴影. 也就是说, 你的bg可以是这样的: * 纯color值, 如 `#ff00cc` * 纯png, jpg图片, 如`bg_abc.png` * 或为点9图片, 如`bg_abc.9.png` * 或是``的drawable xml, * 或是item为``的``的drawable xml 但是, 唯独有一点, 你的bg不能是``的drawable, 不然就没有阴影. ## 坑3: 阴影需要额外空间吗? 比如说我们的View的宽高是100x100, 而UX要求阴影的offsetX, offestY为20dp, 我换算成elevation为多少dp后, 假设阴影占20x20的空间, 那最终UI效果要这样吗? ```xml ``` : 一般来说不需要. 这一点Android做得还是可以的, 你只要考虑你的View的尺寸就行了, 阴影的空间Android会自动画出来, 不用你担心. 但是现实生活中更复杂些, 比如要求一个view有阴影, 而这个view在另外的其它自定义View中, 那这时就不好讲. 可能这时的阴影就被cut off了. 我就碰到过这样的实例. 至于原因则可能是为android中默认是child view不能超过parent view group的边界, 超出了的部分会不被绘制出来. 这也包括了阴影. 所以阴影也被截断了. 这里你可能就要做额外一层layout. *(这一点蛮恶心了, 牺牲了性能就为了个阴影, 所以我也不喜欢过多的阴影设计)* ```xml .... ``` 现在为了给这个constraint layout添加阴影, 并不被截断, 就得外加一层layout ```xml ``` 这个FrameLayout存在的唯一目的就是留出空间, 来给constraitLayout提供绘制阴影的空间. # 更多阴影设置 ## 前言: 为什么view一定要有bg, 才会有阴影的可能? 其实我们上面的话不太对, 即这句: "光源对view照下来, 形成了阴影" 而上一节中, 我们修正了这句话, 即应该是: "光源对view的背景照下来, 形成了阴影". 其实这次的修正仍是不对的, 正确的说法是"**光源对View的outline provider照下来, 形成了阴影**". Android中View是自带了outline provider的, 默认值就是background. 其它的可选值如下: ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ecc8162d032346fe97e9ab2ba53f9f64~tplv-k3u1fbpfcp-watermark.image#?w=627\&h=180\&s=24704\&e=png\&b=c6eccb) 这下其实也就解释了, 为什么要有bg, 才会有shadow : 因为默认就是background的outline provider啊. 要是view没有background, 就没了outline provider, 那就自然就没了阴影. ## outline provider 那是不是说当我把outline provider设置了非background的其它值, 那即使这个view没有bg, 只要有elevation就会有阴影? : 是的, 答对了. ## 自定义shadow的形状 outline provider的另一作用, 就是可以让你自定义shadow的shape, 比如说不再是矩形, 可以变成圆形, 五角星形, ... 你所需要做的, 就是自定义一个outline provider ```kotlin class MyShadowOutlineProvider( val cornerRadius: Float = 0f, var offsetX: Int = 0 var offsetY: Int = 0 ) : ViewOutlineProvider() { private val rect: Rect = Rect() override fun getOutline(view: View?, outline: Outline?) { view?.background?.copyBounds(rect) rect.offset(offsetX, offsetY) outline?.setRoundRect(rect, cornerRadius) } } ``` 然后view中指明使用这个outline provider: ```kotlin outlineProvider = MyShadowOutlineProvider(14f.dpToPx(), 1f, 1f, 0) btnShadowDemo.outlineProvider = outlineProvider btnShadowDemo.elevation = 30f //elevation仍是需要的! ``` # 最佳实践推荐 ## theme中设置alpha为1 因为theme中把ambientShadowAlpha, spotShadowAlpha给定死了. "定死了"就是无法在代码中修改这两个的alpha值, 就不太灵活. 一个取巧的办法则是: ```xml ``` 1\). theme中把这两个alpha全设为1 2\). 然后阴影color就可以加上alpha了, 如 ```kotlin // 原来是: setSpotShadowColor(0x000000) //颜色是 rgb // 现在则要给color加上alpha setSpotShadowColor(0x88000000) //变成了 argb ``` 这样一来我们就能灵活更改shadow的颜色与透明度了. ## 若无定制shadow形状的要求那就是: 1\). 给view添加非svg的bg 2\). 再加上elevation 3\). (可选) 可修改ambient/spot shadow的color 阴影就出来了 ## 若有定制shadow形式的要求那就要: 1\). 自定义一个outline provider 2\). `view.outlineProvider = myOutlineProvider` 3\). 再加上elevation 阴影也同样出来了, 还是你自己定制的shape. # 另一种阴影的思路这一种思路, 其实就是完全抛弃了`ambient, spot shadow + elevation + outline provider`的体系, 走自己的阴影, 而且还蛮符合figma上的UX设计的. 这思路的主要思想就是利用: ```kotlin paint.setShadowLayer(radius, offsetX, offsetY, shadowColor) ``` 你可以把这个逻辑放到你的ViewGroup里, 或是放到一个Drawable里, 或是放到自己的自定义View里. 效果算还行.我个人感觉麻烦了点, 要额外多做些工作. 不过网上有不少三方库了, 要么抽象到Layout里, 要么抽象到Drawable里, 方便大家使用. 备注: Android8及以下的硬件加速都不支持对view画阴影的`Paint # setShadowLayer`的, 偏偏手机是默认打开硬件加速的, 所以这个方法也只能对Android P (Android 9.0)及以上的硬件加速才有效 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/44bba6fb0af44baa9d36121362152a42~tplv-k3u1fbpfcp-watermark.image#?w=772\&h=247\&s=36483\&e=png\&b=f3f3f3) p.s. 当然也可以用`myView.setLayerType(View.LAYER_TYPE_SOFTWARE, null)`来给View强制禁止硬件加速. # 一个实例教你如何设置阴影现在来一个案例哦. 如给下图的按钮添加"0000ff"(蓝色)的阴影 : ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/dcc56556c8f7465fa0b1c1a15cfd08fa~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgc253cmtpbmc=:q75.awebp?rk3s=f64ab15b&x-expires=1759623958&x-signature=cpZKIBLUQiUdxwsrn4flEOmwoc8%3D) ## 1. res/values, res/values-v28 ```xml // res/values/themes.xml ``` 因为上方所讲, 阴影是在Android 9上才有, 所以得有一个`res/values-v28`目录: ```xml ``` 注意, 这两个alpha属性是在theme中才有. 也就是说, View可以设置`outlineAmbientShadowColor`, 但它不能设置`outlineAmbientShadowAlpha` ## 2. 这个按钮得有个background, 且这个background不能是vector 背景就是上面的灰色圆角矩形 ```xml // res/drawable/bg_grey_round_corner.xml ``` ## 3. 给button添加阴影色与z高在Android中一定要有z轴上的高度(也就是elevation), 才会产生阴影. 上面理论部分讲过了. 所以这里就要设置: ```xml