Android修行手册 - 阴影效果的几种实现以及一些特别注意点

点击跳转专栏=>Unity3D特效百例点击跳转专栏=>案例项目实战源码
点击跳转专栏=>游戏脚本-辅助自动化点击跳转专栏=>Android控件全解手册
点击跳转专栏=>Scratch编程案例点击跳转=>软考全系列
点击跳转=>蓝桥系列点击跳转=>ChatGPT和AIGC

👉关于作者

专注于Android/Unity和各种游戏开发技巧，以及各种资源分享（网站、工具、素材、源码、游戏等）
有什么需要欢迎底部卡片私我，交流让学习不再孤单。

在这里插入图片描述

👉实践过程

😜阴影原理

我们处在一个三维空间中，有阳光的地方就有阴影，真实的阴影其实是一种光影的效果。一个有光照的角度，加上物体有厚度就会形成一个阴影层。知道了阴影的产生需要光源和高度，技术也是如此，技术的实现是基于现实生活的现象。在各种平台开发中阴影基本都是以拔高 Z 轴来实现的。
可以理解为有一束斜光投向屏幕，Z 轴值越大，离光就越近，阴影的范围就越大；Z 轴值越小，离光就越远，阴影的范围就越小。
在 Android 平台实现阴影的方式有三种。

😜elevation

android5.0 引入了Z轴的概念，于是就有着这种风格，也就是目前比较火的Material Design。

  1. android:elevation 设置该组件“浮”起来的高度，to难过过设置该属性可以让该组件呈现3D效果。
  2. 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" ><itemandroid:left="2dp"android:top="2dp"><shape android:shape="rectangle" ><!--这里可以是梯度的值，也可以是solid，看实际的效果自己调测--><gradientandroid:angle="90"android:centerX="50"android:centerY="50"android:endColor="#03000000"android:startColor="#0F000000" /><cornersandroid:bottomLeftRadius="6dip"android:bottomRightRadius="6dip"android:topLeftRadius="6dip"android:topRightRadius="6dip" /></shape></item><itemandroid:bottom="3dp"android:right="3dp"><shape android:shape="rectangle" ><solid android:color="#FFFFFF"/><cornersandroid: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"><paddingandroid: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"><paddingandroid: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"><paddingandroid: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"><paddingandroid: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"><paddingandroid: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"><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:text="CardView"android:gravity="center"android:background="#fff000"/>
</androidx.cardview.widget.CardView>

😜注意事项

  1. 控件必须设置背景 background，且不能为透明，因为透明的view是没有阴影的。

  2. 阴影是绘制于父控件上的，所以控件与父控件的边界之间需有足够空间绘制出阴影才行。

  3. 有网友提出图片尽量使用.png, 防止图片过大导致 oom 或者 elevation 失效

  4. 经过本人测试，除了上述原因外，还有：background 是图片时、background 直接设置具体颜色值时容易无效如：#ffaacc，background 是 shape 时效果最好

  5. 设置 elevation 的 View 最好是 ViewGroup 子类
    今天在 Android 界面的设计中遇到一个问题，我想要用 elevation 设置阴影效果，也就是对某个 View 添加 android:elevation，但是没有效果，解决办法是必须给这个 view 设置 background ，这样就会出来阴影的。就是我们说的注意事项一。
    默认情况下，阴影是由 background 提供的，如果控件没有设置 background，则需要加上
    android:outlineProvider=“bounds”

👉其他

📢作者：小空和小芝中的小空
📢转载说明-务必注明来源：https://zhima.blog.csdn.net/
📢这位道友请留步☁️，我观你气度不凡，谈吐间隐隐有王者霸气💚，日后定有一番大作为📝！！！旁边有点赞👍收藏🌟今日传你，点了吧，未来你成功☀️，我分文不取，若不成功⚡️，也好回来找我。

温馨提示：点击下方卡片获取更多意想不到的资源。
空名先生

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/144522.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

m1 rvm install 3.0.0 Error running ‘__rvm_make -j8‘

m1 rvm install 3.0.0 Error running ‘__rvm_make -j8‘

在使用M1 在安装cocopods 前时&#xff0c;安装 rvm install 3.0.0遇到 rvm install 3.0.0 Error running __rvm_make -j8 备注: 该图片是借用其他博客图片&#xff0c;因为我的环境解决完没有保留之前错误信息。 解决方法如下&#xff1a; 1. brew uninstall --ignore-depe…
阅读更多...
TCP协议通讯流程

TCP协议通讯流程

文章目录&#xff1a; 通讯流程全过程浏览建立连接过程数据传输过程断开连接问题 通讯流程全过程浏览 下图是基于TCP协议的客户端/服务器程序的一般流程&#xff1a; 上图就是TCP协议的通信流程&#xff0c;接下来认识初步认识以下TCP建立连接&#xff08;三次握手&#xff0…
阅读更多...
Notion汉化

Notion汉化

Notion真无语&#xff0c;汉化版都没有。真的无力吐槽。 2023.11.7汉化经历 教程链接&#xff1a;github Reamd7/notion-zh_CN at 2.4.20-handmade (github.com) 网页版&#xff1a; 油猴下载插件。 Notion中文汉化 浏览器插件下载 windows&#xff1a; github realse 这…
阅读更多...
【带头学C++】----- 六、结构体 ---- 6.7 共用体以及枚举类型

【带头学C++】----- 六、结构体 ---- 6.7 共用体以及枚举类型

6.7 共用体以及枚举类型 结构体:结构体用于组合不同类型的数据&#xff0c;每个字段占用独立的内存空间。 共用体:共用体也组合不同类型的数据&#xff0c;但所有字段共享同一块内存。 因此&#xff0c;结构体适合表示具有多个属性的对象&#xff0c;而共用体适合表示可以具…
阅读更多...
拜耳阵列（Bayer Pattern）以及常见彩色滤波矩阵（CFA）

拜耳阵列（Bayer Pattern）以及常见彩色滤波矩阵（CFA）

一、拜耳阵列的来源 图像传感器将光线转化成电流&#xff0c;光线越亮&#xff0c;电流的数值就越大&#xff1b;光线越暗&#xff0c;电流的数值就越小。图像传感器只能感受光的强弱&#xff0c;无法感受光的波长。由于光的颜色由波长决定&#xff0c;所以图像传播器无法记录…
阅读更多...
【JUC】八、阻塞队列

【JUC】八、阻塞队列

文章目录 1、阻塞队列概述2、阻塞队列分类3、 阻塞队列的四组核心方法4、Demo 队列&#xff0c;先进先出&#xff0c;类似排队栈&#xff0c;先进后出&#xff0c;用于要优先处理最近发生的事件的场景 1、阻塞队列概述 阻塞队列&#xff0c;一个生产消费模式&#xff0c;当&a…
阅读更多...
【机器学习8】采样

【机器学习8】采样

1 均匀分布随机数 均匀分布是指整个样本空间中的每一个样本点对应的概率&#xff08;密度&#xff09; 都是相等的。 根据样本空间是否连续&#xff0c; 又分为离散均匀分布和连续均匀分布。编程实现均匀分布随机数生成器一般可采用线性同余法&#xff08;Linear Congruential…
阅读更多...
防爆五参数气象仪的科技力量

防爆五参数气象仪的科技力量

WX-FBQ2 随着科技的不断进步&#xff0c;气象监测设备也在不断升级和完善。 防爆五参数气象仪是一种可以同时监测温度、湿度、压力、风速和风向五个基本气象参数的仪器。它采用了气象监测技术&#xff0c;不仅可以实时监测气象数据&#xff0c;还可以对数据进行分析和处理。 …
阅读更多...
所见即所得的动画效果：Animate.css

所见即所得的动画效果：Animate.css

我们可以在集成Animate.css来改善界面的用户体验&#xff0c;省掉大量手写css动画的时间。 官网&#xff1a;Animate.css 使用 1、安装依赖 npm install animate.css --save2、引入依赖 import animate.css;3、在项目中使用 在class类名上animate__animated是必须的&#x…
阅读更多...
轻松预览：Axure RP在线原型展示指南，快速掌握！

轻松预览：Axure RP在线原型展示指南，快速掌握！

当UI设计师想要提供功能和细节丰富的原型时&#xff0c;可以使用原型设计工具预览Axure原型。原型设计工具Axurerp作为线框图和原型制作工具的创始人&#xff0c;功能非常强大。取代Axure的国产原型设计工具即时设计&#xff0c;界面布局清新&#xff0c;非常适合复杂的原型设计…
阅读更多...
黑马程序员微服务 第五天课程 分布式搜索引擎2

黑马程序员微服务 第五天课程 分布式搜索引擎2

分布式搜索引擎02 在昨天的学习中&#xff0c;我们已经导入了大量数据到elasticsearch中&#xff0c;实现了elasticsearch的数据存储功能。但elasticsearch最擅长的还是搜索和数据分析。 所以今天&#xff0c;我们研究下elasticsearch的数据搜索功能。我们会分别使用DSL和Res…
阅读更多...
【KCC@南京】KCC南京数字经济-开源行

【KCC@南京】KCC南京数字经济-开源行

一场数字经济与开源的视听盛宴&#xff0c;即将于11月26日&#xff0c;在南京举办。本次参与活动的有&#xff1a; 庄表伟&#xff08;开源社理事执行长、天工开物开源基金会执行副秘书长&#xff09;、林旅强Richard&#xff08;开源社联合创始人、前华为开源专家&#xff09;…
阅读更多...
如何构建风险矩阵?3大注意事项

如何构建风险矩阵?3大注意事项

风险矩阵法&#xff08;RMA&#xff09;是确定威胁优先级别的最有效工具之一&#xff0c;可以帮助项目团队识别和评估项目中的风险&#xff0c;帮助项目团队对风险进行排序&#xff0c;清晰地展示风险的可能性和严重性&#xff0c;为项目团队制定风险管理策略提供依据。 如果没…
阅读更多...
Word或者WPS批量调整文中图片大小的快捷方法

Word或者WPS批量调整文中图片大小的快捷方法

文章目录 0、前言1、编写宏代码2、在文档中调用宏实现一键批量调整3、就这么简单&#xff01; 0、前言 不知道大家是不是也和我一样&#xff0c;经常需要在编写的Word&#xff08;或者WPS&#xff09;文档里插入大量的图片&#xff0c;但是这些图片的尺寸大小一般都不一样&…
阅读更多...
信创之路数据库人大金仓篇

信创之路数据库人大金仓篇

概要 信创大势所趋&#xff0c;吾等上下求索 参考文档 Linux&#xff1a;人大金仓数据库-KingBaseES V8与 php7的连接配置 laravel9适配人大金仓&#xff08;kingbase&#xff09;数据库 thinkphp6适配人大金仓&#xff08;Kingbase&#xff09;数据库 数据库选型 目前比较…
阅读更多...
Django（七、模型层）

Django（七、模型层）

文章目录 模型层模型层前期准备使用django ORM要注意 代码演示&#xff1a;切换MySQL数据库如何查看django ORM 底层原理&#xff1f; 单表操作模型层之ORM常见关键字基础的增删改查常用的关键字 常见的十几种查询基于双下滑线的查询 模型层 模型层前期准备 使用django ORM要…
阅读更多...
ATE测试工程师的薪资前景如何？能转DFT工程师吗?

ATE测试工程师的薪资前景如何？能转DFT工程师吗?

在芯片行业&#xff0c;ATE测试工程师扮演着至关重要的角色。他们不仅需要理解电路和芯片内部的工作原理&#xff0c;还需要利用各种测试工具和方法对芯片进行精确的测试和分析。那么ATE测试工程师前景如何&#xff1f;需要具备哪些技能要求呢&#xff1f; 首先来了解什么是AT…
阅读更多...
【技巧】Windows 11 如何安装日文语言包和日文系统

【技巧】Windows 11 如何安装日文语言包和日文系统

Windows 11 如何安装日文语言包和日文系统 安装日语语言第一步&#xff1a;打开系统设置第二步&#xff1a;选择【时间和语言】选项第三步&#xff1a;点击【添加语言】按钮第四步&#xff1a;输入语言&#xff0c;并选择第五步&#xff1a;安装输入法/语言包第六步&#xff1a…
阅读更多...
电池故障估计：Realistic fault detection of li-ion battery via dynamical deep learning

电池故障估计：Realistic fault detection of li-ion battery via dynamical deep learning

昇科能源、清华大学欧阳明高院士团队等的最新研究成果《动态深度学习实现锂离子电池异常检测》&#xff0c;用已经处理的整车充电段数据&#xff0c;分析车辆当前或近期是否存在故障。 思想步骤&#xff1a; 用正常电池的充电片段数据构造训练集&#xff0c;用如下的方式构造…
阅读更多...
php在线审稿系统mysql数据库web结构layUI布局apache计算机软件工程网页wamp

php在线审稿系统mysql数据库web结构layUI布局apache计算机软件工程网页wamp

一、源码特点 php在线审稿系统是一套完善的web设计系统mysql数据库 &#xff0c;对理解php编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。 php在线审稿系统 代码 https://download.csdn.net/download/qq_41221322/885…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023