经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 移动开发 » Android » 查看文章
详解Android如何实现阴影效果
来源:jb51  时间:2022/6/20 14:22:41  对本文有异议

实现形式

elevation

Material Design提供了View的阴影效果设置。主要由两个属性决定:elevation和translationZ。

Z = elevation + translationZ

PS:这种实现方式只有API21以及以上才能支持实现。

elevation属性表示View高度加上高度就会有阴影效果。 translationZ属性表示给View增加一个Z轴的变换效果。配合elevation属性一起使用阴影效果更突出。

  1. <androidx.appcompat.widget.LinearLayoutCompat
  2. android:layout_margin="15dp"
  3. android:layout_width="match_parent"
  4. android:layout_height="100dp"
  5. android:background="@android:color/holo_blue_bright"
  6. android:elevation="10dp"
  7. android:translationZ="10dp"
  8. android:paddingBottom="10dp"
  9. />

官网介绍

image.png

CardView属性

CardViewAndroid提供的官方控件自身支持设置阴影效果。阴影实现由cardElevationcardMaxElevation实现。

  1. <androidx.cardview.widget.CardView
  2. android:layout_margin="15dp"
  3. android:layout_width="match_parent"
  4. android:layout_height="100dp"
  5. android:outlineAmbientShadowColor="@android:color/holo_blue_bright"
  6. android:outlineSpotShadowColor="@android:color/holo_red_dark"
  7. app:cardElevation="5dp"
  8. app:cardMaxElevation="10dp"
  9. />

shadow属性

若是TextView则可以通过shadow属性实现阴影效果

  1. <TextView
  2. android:id="@+id/test_shadow"
  3. android:layout_gravity="center"
  4. android:layout_height="wrap_content"
  5. android:layout_width="wrap_content"
  6. android:shadowColor="#aa22ff22"
  7. android:shadowDx="0"
  8. android:shadowDy="0"
  9. android:shadowRadius="10"
  10. android:text="Test Shadow"
  11. android:textColor="#cc000000"
  12. android:textSize="60sp" />

layer配置文件

通过配置xmllayer属性文件实现阴影效果。使用layer-list实现两层不同背景色实现叠加实现像是阴影的效果,但最终实现效果并不是例如CardView的渐变阴影效果。

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  3. <!-- 阴影图片,android:left表示阴影图片左边到背景图片左边的距离
  4. android:top表示阴影图片上边到背景图片上边的距离-->
  5. <item android:left="5dp"
  6. android:top="5dp">
  7. <shape>
  8. <solid android:color="#60000000"/>
  9. </shape>
  10. </item>
  11. <!-- 背景图片,android:right表示阴影图片右边到背景图片右边的距离
  12. android:bottom表示阴影图片下边到背景图片下边的距离-->
  13. <item android:bottom="5dp"
  14. android:right="5dp">
  15. <shape>
  16. <solid android:color="#000000"/>
  17. </shape>
  18. </item>
  19. </layer-list>

自定义实现

自定义形式是通过自定义Drawable实现,该形式实现目标View必须关闭硬件加速。自定义Drawable主要通过重写draw方法绘制矩形或圆形形状增加阴影效果。

  1. @Override
  2. public void draw(@NonNull Canvas canvas) {
  3. if (mBgColor != null) {
  4. if (mBgColor.length == 1) {
  5. mBgPaint.setColor(mBgColor[0]);
  6. } else {
  7. mBgPaint.setShader(new LinearGradient(mRect.left, mRect.height() / 2, mRect.right,
  8. mRect.height() / 2, mBgColor, null, Shader.TileMode.CLAMP));
  9. }
  10. }
  11.  
  12. if (mShape == SHAPE_ROUND) {
  13. canvas.drawRoundRect(mRect, mShapeRadius, mShapeRadius, mShadowPaint);
  14. canvas.drawRoundRect(mRect, mShapeRadius, mShapeRadius, mBgPaint);
  15. } else {
  16. canvas.drawCircle(mRect.centerX(), mRect.centerY(), Math.min(mRect.width(), mRect.height())/ 2, mShadowPaint);
  17. canvas.drawCircle(mRect.centerX(), mRect.centerY(), Math.min(mRect.width(), mRect.height())/ 2, mBgPaint);
  18. }
  19. }

完整版代码

小结

实现方式优缺点
elevation优点:自带功能实现简单 缺点:不可自定义颜色
CardView优点:自带功能实现简单 缺点:自带圆角不一定可适配所有需求
Textshadow优点:自带功能实现简单 缺点:只可在TextView中使用
layer优点:实现形式简单 缺点:效果一般
自定义实现优点:实现效果好可配置能力高 缺点:需要开发者自行开发

到此这篇关于详解Android如何实现阴影效果的文章就介绍到这了,更多相关Android阴影效果内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号