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.rhkb.cn/news/193086.html

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

相关文章

3D造型渲染软件DAZ Studio mac中文版介绍

3D造型渲染软件DAZ Studio mac中文版介绍

DAZ Studio mac是一款3D造型和渲染软件&#xff0c;由 Daz 3D 公司开发。它允许用户创建、编辑、动画化并渲染精美的数字图像与动画。DAZ Studio 还提供了一个虚拟的3D艺术家工作室环境&#xff0c;让用户可以轻松地设置场景、布置角色和应用材质。 用户可以通过 DAZ Studio 中…
阅读更多...
8.查询数据

8.查询数据

一、单表查询 MySQL从数据表中查询数据的基本语为SELECT语。SELECT语的基本格式是: SELECT {* | <字段列名>} [ FROM <表 1>, <表 2>… [WHERE <表达式> [GROUP BY <group by definition> [HAVING <expression> [{<operator>…
阅读更多...
032-从零搭建微服务-定时服务（一）

032-从零搭建微服务-定时服务（一）

写在最前 如果这个项目让你有所收获&#xff0c;记得 Star 关注哦&#xff0c;这对我是非常不错的鼓励与支持。 源码地址&#xff08;后端&#xff09;&#xff1a;mingyue: &#x1f389; 基于 Spring Boot、Spring Cloud & Alibaba 的分布式微服务架构基础服务中心 源…
阅读更多...
C语言不可不敲系列：跳水比赛排名问题

C语言不可不敲系列：跳水比赛排名问题

目录 1题干&#xff1a; 2解题思路&#xff1a; 3代码: 4运行结果: 5总结: 1题干&#xff1a; 5位运动员参加了10米台跳水比赛&#xff0c;有人让他们预测比赛结果 A选手说&#xff1a;B第二&#xff0c;我第三&#xff1b; B选手说&#xff1a;我第二&#xff0c;E第四&am…
阅读更多...
十九章总结

十九章总结

Graphics类 Graphics类是所有图形上下文的抽象基类&#xff0c;封装了Java支持的基本绘图操作所需的状态信息&#xff0c;主要包括颜色、字体、画笔 Graphics2D类 Graphics2D类继承Graphics类实现功能更加强大的绘图操作集合 绘制图形 在项目中创建一个类&#xff0c;是该…
阅读更多...
nginx安装搭建

nginx安装搭建

下载 免费开源版的官方网站&#xff1a;nginx news Nginx 有 Windows 版本和 Linux 版本&#xff0c;但更推荐在 Linux 下使用 Nginx&#xff1b; 下载nginx-1.14.2.tar.gz的源代码文件&#xff1a;wget http://nginx.org/download/nginx-1.14.2.tar.gz 我的习惯&#xff0…
阅读更多...
【Linux进阶之路】一文吃透文件

【Linux进阶之路】一文吃透文件

前言 先来谈一下文件的共识 文件 内容 属性。 解释&#xff1a;文件在创建时就有基本属性&#xff0c;比如权限&#xff0c;文件名&#xff0c;文件的创建时间等基本信息。文件分为打开的文件与未被打开的文件。 解释&#xff1a;打开的文件由操作系统进行管理。未打开的文件…
阅读更多...
JZ22：链表中倒数第k个结点

JZ22：链表中倒数第k个结点

JZ22&#xff1a;链表中倒数第k个结点 题目描述&#xff1a; 输入一个链表&#xff0c;输出该链表中倒数第k个结点。 示例1 输入&#xff1a; 1,{1,2,3,4,5} 返回值&#xff1a; {5} 分析&#xff1a; 快慢指针思想&#xff1a; 需要两个指针&#xff0c;快指针fast&…
阅读更多...
云课五分钟-03第一个开源游戏复现-贪吃蛇

云课五分钟-03第一个开源游戏复现-贪吃蛇

前篇 云课五分钟-02第一个代码复现-终端甜甜圈C 视频 云课五分钟-03第一个开源游戏复现-贪吃蛇 一个终端的动态字符显然很难调动编程的积极性&#xff0c;那么更有趣的开源的游戏也许是一种更好的启发。 文本 蓝桥ROS机器人之绚丽贪吃蛇 如何在Linux下使用 DungeonRush-mast…
阅读更多...
【java学习—十四】反射机制调用指定方法、指定属性（5）

【java学习—十四】反射机制调用指定方法、指定属性（5）

文章目录 1. 调用指定方法2. 调用指定属性 1. 调用指定方法 通过反射&#xff0c;调用类中的方法&#xff0c;通过 Method 类完成。步骤&#xff1a;     ①通过 Class 类的 getMethod(String name,Class...parameterTypes) 方法取得一个 Method 对象&#xff0c;并设置此…
阅读更多...
C#使用时序数据库 InfluxDB

C#使用时序数据库 InfluxDB

一、安装 https://docs.influxdata.com/influxdb/v2/install/?tWindows 解压后使用cmd运行 访问 localhost:8086 配置 第一次登入会初始化 配置登入账号 保存TOKEN 这个TOKEN用于后期代码链接访问数据库&#xff0c;忘记了只能删除重新生成 点击QUCK START进入管理页面 …
阅读更多...
【vue实战项目】通用管理系统：api封装、404页

【vue实战项目】通用管理系统：api封装、404页

前言 本文为博主的vue实战小项目系列中的第三篇&#xff0c;很适合后端或者才入门的小伙伴看&#xff0c;一个前端项目从0到1的保姆级教学。前面的内容&#xff1a; 【vue实战项目】通用管理系统&#xff1a;登录页-CSDN博客 【vue实战项目】通用管理系统&#xff1a;封装to…
阅读更多...
Android抓包工具—Fiddler详解

Android抓包工具—Fiddler详解

前言 平时和其他大佬交流时&#xff0c;总会出现这么些话&#xff0c;“抓个包看看就知道哪出问题了”&#xff0c;“抓流量啊&#xff0c;payload都在里面”&#xff0c;“这数据流怎么这么奇怪”。 &#x1f449;这里出现的名词&#xff0c;其实都是差不多的意思啊&#xf…
阅读更多...
ElementUI表格el-table自适应高度（表头表尾固定不动）

ElementUI表格el-table自适应高度（表头表尾固定不动）

ElementUI表格el-table自适应高度&#xff08;表头表尾固定不动&#xff09;&#xff0c;内容只在中间滚动&#xff0c;效果如图&#xff1a; 实现代码 <div class"mt-10" :style"{height:tableHeight}"><div class"operation-bar">…
阅读更多...
PyCharm 安装库时显示连接超时

PyCharm 安装库时显示连接超时

在setting->python Interpreter 中用“” 安装库时&#xff0c;出现一个弹窗&#xff0c;提示信息如下&#xff1a; Error updating package list: Connect timed out 通过查阅资料&#xff0c;发现是镜像源的问题&#xff0c;具体的解决方案如下&#xff1a; 1. 更新一下…
阅读更多...
电源电压范 围宽、功耗小、抗干扰能力强的国产芯片GS069适用于电动工具等产品中，采用SOP8的封装形式封装

电源电压范 围宽、功耗小、抗干扰能力强的国产芯片GS069适用于电动工具等产品中，采用SOP8的封装形式封装

GS069电动工具直流调速电路是CMOS专用集成电路&#xff0c;具有电源电压范 围宽、功耗小、抗干扰能力强等特点。通过外接电阻网络&#xff0c;改变与之相接 的VMOS 管的输出&#xff0c;达到控制电动工具转速的作用。该电路输出幅值宽&#xff0c; 频率变化小&#xff0c;占空比…
阅读更多...
云原生下GIS服务规划与设计

云原生下GIS服务规划与设计

作者&#xff1a;lisong 目录 背景云原生环境下GIS服务的相关概念GIS服务在云原生环境下的规划调度策略GIS服务在云原生环境下的调度手段GIS服务在云原生环境下的服务规划调度实践 背景 作为云原生GIS系统管理人员&#xff0c;在面对新建的云GIS系统时&#xff0c;通常需要应对…
阅读更多...
2023-2024-2 高级语言程序设计-二维数组

2023-2024-2 高级语言程序设计-二维数组

7-1 矩阵运算 给定一个nn的方阵&#xff0c;本题要求计算该矩阵除副对角线、最后一列和最后一行以外的所有元素之和。副对角线为从矩阵的右上角至左下角的连线。 输入格式: 输入第一行给出正整数n&#xff08;1<n≤10&#xff09;&#xff1b;随后n行&#xff0c;每行给出…
阅读更多...
uniapp——项目day05

uniapp——项目day05

购物车页面 结算区域 把结算区域封装为组件 1. 在 components 目录中&#xff0c;新建 my-settle 结算组件&#xff1a; 2. 初始化 my-settle 组件的基本结构和样式&#xff1a; <template><view class"my-settle-container">结算组件</view> …
阅读更多...
【中间件篇-Redis缓存数据库05】Redis集群高可用高并发

【中间件篇-Redis缓存数据库05】Redis集群高可用高并发

Redis集群 Redis Cluster是Redis的分布式解决方案&#xff0c;在3.0版本正式推出&#xff0c;有效地解决了Redis分布式方面的需求。当遇到单机内存、并发、流量等瓶颈时&#xff0c;可以采用Cluster架构方案达到负载均衡的目的。之前,Redis分布式方案一般有两种: 1、客户端分…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023