| 点击跳转专栏=>Unity3D特效百例 | 点击跳转专栏=>案例项目实战源码 |
|---|---|
| 点击跳转专栏=>游戏脚本-辅助自动化 | 点击跳转专栏=>Android控件全解手册 |
| 点击跳转专栏=>Scratch编程案例 | 点击跳转=>软考全系列 |
| 点击跳转=>蓝桥系列 | 点击跳转=>ChatGPT和AIGC |
👉关于作者
专注于Android/Unity和各种游戏开发技巧，以及各种资源分享（网站、工具、素材、源码、游戏等）
有什么需要欢迎底部卡片私我，交流让学习不再孤单。
👉实践过程
😜阴影原理
我们处在一个三维空间中，有阳光的地方就有阴影，真实的阴影其实是一种光影的效果。一个有光照的角度，加上物体有厚度就会形成一个阴影层。知道了阴影的产生需要光源和高度，技术也是如此，技术的实现是基于现实生活的现象。在各种平台开发中阴影基本都是以拔高 Z 轴来实现的。
可以理解为有一束斜光投向屏幕，Z 轴值越大，离光就越近，阴影的范围就越大；Z 轴值越小，离光就越远，阴影的范围就越小。
在 Android 平台实现阴影的方式有三种。
😜elevation
android5.0 引入了Z轴的概念，于是就有着这种风格，也就是目前比较火的Material Design。
- android:elevation 设置该组件“浮”起来的高度，to难过过设置该属性可以让该组件呈现3D效果。
- android:translationZ 设置该组件在Z方向（垂直屏幕方向）上的位移。
说起 Z 轴， translateZ 一般用来控制的弹起效果或其他动画效果。
而阴影直接使用的是 elevation 属性，是写在 xml 文件中的静态配置。
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="250dp"
android:layout_height="match_parent"
android:background="@drawable/common_bg"
android:elevation="10dp"
android:outlineAmbientShadowColor="#5509FF1D"
android:outlineSpotShadowColor="@color/transparent">
//...
</androidx.constraintlayout.widget.ConstraintLayout>
上面代码中 elevation 就是设置偏移阴影。一般这一个属性就足够了，但是设计的需求总是多种多样，就引出了另外两个属性 outlineAmbientShadowColor 和 outlineSpotShadowColor
outlineAmbientShadowColor：这是主光源，也就是发光点是什么
outlineSpotShadowColor：这是环境周围的光色
还有一个很少用到的属性 环境阴影透明度（ambientShadowAlpha），透明度的取值为0-1，可根据实际情况来调试。需要通过主题设置来实现：
<style name="AppTheme" parent="Theme">
...
<item name="android:ambientShadowAlpha">0.5</item>
...
</style>
这种实现方案只是很普通的阴影，一般会出现一边的阴影比较浓，一边的比较淡，而且受限制，需要API 21 以上才可用。
😜layer-list
产品又说了：啊，你这很普通啊喂，能不能实现那种毛茸茸的感觉呢。
那就得使用 layer-list 。
layer-list 的方式的就一层一层绘制叠加，下面的 item 总是覆盖在上面的 item 上。
这种方式是最推荐的，不能性能好且实现的效果多种多样。但是因为实现上要多做不少内容所以很容易被人们抛弃。
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:left="2dp"
android:top="2dp">
<shape android:shape="rectangle" >
<!--这里可以是梯度的值，也可以是solid，看实际的效果自己调测-->
<gradient
android:angle="90"
android:centerX="50"
android:centerY="50"
android:endColor="#03000000"
android:startColor="#0F000000" />
<corners
android:bottomLeftRadius="6dip"
android:bottomRightRadius="6dip"
android:topLeftRadius="6dip"
android:topRightRadius="6dip" />
</shape>
</item>
<item
android:bottom="3dp"
android:right="3dp">
<shape android:shape="rectangle" >
<solid android:color="#FFFFFF"/>
<corners
android:bottomLeftRadius="6dip"
android:bottomRightRadius="6dip"
android:topLeftRadius="6dip"
android:topRightRadius="6dip" />
</shape>
</item>
</layer-list>
如上面的代码是用两个颜色块叠加实现的，从上面一看就知道代码量蹭蹭的涨。还有更复杂的是用一条条线条叠加来实现，避免了中间区域无用的绘制。
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<padding
android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="2dp" />
<solid android:color="#0DFFFFFF" />
<corners android:radius="16dp" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<padding
android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="2dp" />
<solid android:color="#10FFFFFF" />
<corners android:radius="16dp" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<padding
android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="2dp" />
<solid android:color="#15FFFFFF" />
<corners android:radius="16dp" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<padding
android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="2dp" />
<solid android:color="#20FFFFFF" />
<corners android:radius="16dp" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<padding
android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="2dp" />
<solid android:color="#30FFFFFF" />
<corners android:radius="16dp" />
</shape>
</item>
<item>
<shape>
<solid android:color="#FFFFFF" />
<corners android:radius="16dp" />
</shape>
</item>
</layer-list>
😜CardView
这个实现上也挺简单，需要 androidx.cardview.widget.CardView ，表现效果上很不错，但是也有缺点就是多嵌套了一层父类，这对性能又是一层消耗。
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="1670mm"
android:layout_height="940mm"
android:layout_centerInParent="true"
app:cardElevation="10mm"
tools:ignore="InOrMmUsage,ContentDescription,HardcodedText">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="CardView"
android:gravity="center"
android:background="#fff000"/>
</androidx.cardview.widget.CardView>
😜注意事项
-
控件必须设置背景 background，且不能为透明，因为透明的view是没有阴影的。
-
阴影是绘制于父控件上的，所以控件与父控件的边界之间需有足够空间绘制出阴影才行。
-
有网友提出图片尽量使用.png, 防止图片过大导致 oom 或者 elevation 失效
-
经过本人测试，除了上述原因外，还有：background 是图片时、background 直接设置具体颜色值时容易无效如：#ffaacc，background 是 shape 时效果最好
-
设置 elevation 的 View 最好是 ViewGroup 子类
今天在 Android 界面的设计中遇到一个问题，我想要用 elevation 设置阴影效果，也就是对某个 View 添加 android:elevation，但是没有效果，解决办法是必须给这个 view 设置 background ，这样就会出来阴影的。就是我们说的注意事项一。
默认情况下，阴影是由 background 提供的，如果控件没有设置 background，则需要加上
android:outlineProvider=“bounds”
👉其他
📢作者：小空和小芝中的小空
📢转载说明-务必注明来源：https://zhima.blog.csdn.net/
📢这位道友请留步☁️，我观你气度不凡，谈吐间隐隐有王者霸气💚，日后定有一番大作为📝！！！旁边有点赞👍收藏🌟今日传你，点了吧，未来你成功☀️，我分文不取，若不成功⚡️，也好回来找我。
温馨提示：点击下方卡片获取更多意想不到的资源。
