网站前台的实现,wordpress切换至就编辑器,设计漂亮的网站,网站建设公司代理商点击跳转专栏Unity3D特效百例点击跳转专栏案例项目实战源码点击跳转专栏游戏脚本-辅助自动化点击跳转专栏Android控件全解手册点击跳转专栏Scratch编程案例点击跳转软考全系列点击跳转蓝桥系列点击跳转ChatGPT和AIGC
#x1f449;关于作者 专…点击跳转专栏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_width250dpandroid:layout_heightmatch_parentandroid:backgrounddrawable/common_bgandroid:elevation10dpandroid:outlineAmbientShadowColor#5509FF1Dandroid:outlineSpotShadowColorcolor/transparent//...
/androidx.constraintlayout.widget.ConstraintLayout上面代码中 elevation 就是设置偏移阴影。一般这一个属性就足够了但是设计的需求总是多种多样就引出了另外两个属性 outlineAmbientShadowColor 和 outlineSpotShadowColor outlineAmbientShadowColor这是主光源也就是发光点是什么 outlineSpotShadowColor这是环境周围的光色 还有一个很少用到的属性 环境阴影透明度ambientShadowAlpha透明度的取值为0-1可根据实际情况来调试。需要通过主题设置来实现
style nameAppTheme parentTheme...item nameandroid:ambientShadowAlpha0.5/item...
/style
这种实现方案只是很普通的阴影一般会出现一边的阴影比较浓一边的比较淡而且受限制需要API 21 以上才可用。
layer-list
产品又说了啊你这很普通啊喂能不能实现那种毛茸茸的感觉呢。 那就得使用 layer-list 。 layer-list 的方式的就一层一层绘制叠加下面的 item 总是覆盖在上面的 item 上。 这种方式是最推荐的不能性能好且实现的效果多种多样。但是因为实现上要多做不少内容所以很容易被人们抛弃。 ?xml version1.0 encodingutf-8?
layer-list xmlns:androidhttp://schemas.android.com/apk/res/android itemandroid:left2dpandroid:top2dpshape android:shaperectangle !--这里可以是梯度的值也可以是solid看实际的效果自己调测--gradientandroid:angle90android:centerX50android:centerY50android:endColor#03000000android:startColor#0F000000 /cornersandroid:bottomLeftRadius6dipandroid:bottomRightRadius6dipandroid:topLeftRadius6dipandroid:topRightRadius6dip //shape/itemitemandroid:bottom3dpandroid:right3dpshape android:shaperectangle solid android:color#FFFFFF/cornersandroid:bottomLeftRadius6dipandroid:bottomRightRadius6dipandroid:topLeftRadius6dipandroid:topRightRadius6dip //shape/item
/layer-list
如上面的代码是用两个颜色块叠加实现的从上面一看就知道代码量蹭蹭的涨。还有更复杂的是用一条条线条叠加来实现避免了中间区域无用的绘制。
?xml version1.0 encodingutf-8?
layer-list xmlns:androidhttp://schemas.android.com/apk/res/androiditemshape android:shaperectanglepaddingandroid:bottom2dpandroid:left2dpandroid:right2dpandroid:top2dp /solid android:color#0DFFFFFF /corners android:radius16dp //shape/itemitemshape android:shaperectanglepaddingandroid:bottom2dpandroid:left2dpandroid:right2dpandroid:top2dp /solid android:color#10FFFFFF /corners android:radius16dp //shape/itemitemshape android:shaperectanglepaddingandroid:bottom2dpandroid:left2dpandroid:right2dpandroid:top2dp /solid android:color#15FFFFFF /corners android:radius16dp //shape/itemitemshape android:shaperectanglepaddingandroid:bottom2dpandroid:left2dpandroid:right2dpandroid:top2dp /solid android:color#20FFFFFF /corners android:radius16dp //shape/itemitemshape android:shaperectanglepaddingandroid:bottom2dpandroid:left2dpandroid:right2dpandroid:top2dp /solid android:color#30FFFFFF /corners android:radius16dp //shape/itemitemshapesolid android:color#FFFFFF /corners android:radius16dp //shape/item
/layer-listCardView
这个实现上也挺简单需要 androidx.cardview.widget.CardView 表现效果上很不错但是也有缺点就是多嵌套了一层父类这对性能又是一层消耗。
?xml version1.0 encodingutf-8?
androidx.cardview.widget.CardView xmlns:androidhttp://schemas.android.com/apk/res/androidxmlns:apphttp://schemas.android.com/apk/res-autoxmlns:toolshttp://schemas.android.com/toolsandroid:layout_width1670mmandroid:layout_height940mmandroid:layout_centerInParenttrueapp:cardElevation10mmtools:ignoreInOrMmUsage,ContentDescription,HardcodedTextTextViewandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:textCardViewandroid:gravitycenterandroid:background#fff000/
/androidx.cardview.widget.CardView注意事项 控件必须设置背景 background且不能为透明因为透明的view是没有阴影的。 阴影是绘制于父控件上的所以控件与父控件的边界之间需有足够空间绘制出阴影才行。 有网友提出图片尽量使用.png, 防止图片过大导致 oom 或者 elevation 失效 经过本人测试除了上述原因外还有background 是图片时、background 直接设置具体颜色值时容易无效如#ffaaccbackground 是 shape 时效果最好 设置 elevation 的 View 最好是 ViewGroup 子类 今天在 Android 界面的设计中遇到一个问题我想要用 elevation 设置阴影效果也就是对某个 View 添加 android:elevation但是没有效果解决办法是必须给这个 view 设置 background 这样就会出来阴影的。就是我们说的注意事项一。 默认情况下阴影是由 background 提供的如果控件没有设置 background则需要加上 android:outlineProvider“bounds”
其他 作者小空和小芝中的小空 转载说明-务必注明来源https://zhima.blog.csdn.net/ 这位道友请留步☁️我观你气度不凡谈吐间隐隐有王者霸气日后定有一番大作为旁边有点赞收藏今日传你点了吧未来你成功☀️我分文不取若不成功⚡️也好回来找我。 温馨提示点击下方卡片获取更多意想不到的资源。
