返回顶部
首页 > 资讯 > 移动开发 >详解Android如何实现阴影效果
  • 241
分享到

详解Android如何实现阴影效果

2024-04-02 19:04:59 241人浏览 独家记忆
摘要

目录实现形式elevationCardView属性shadow属性layer配置文件自定义实现小结实现形式 elevation Material Design提供了View的阴影效果

实现形式

elevation

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

Z = elevation + translationZ

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

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

<Androidx.appcompat.widget.LinearLayoutCompat
    android:layout_margin="15dp"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:background="@android:color/holo_blue_bright"
    android:elevation="10dp"
    android:translationZ="10dp"
    android:paddingBottom="10dp"
    />

官网介绍

image.png

CardView属性

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

<androidx.cardview.widget.CardView
    android:layout_margin="15dp"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:outlineAmbientShadowColor="@android:color/holo_blue_bright"
    android:outlineSpotShadowColor="@android:color/holo_red_dark"
    app:cardElevation="5dp"
    app:cardMaxElevation="10dp"
    />

shadow属性

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

<TextView
android:id="@+id/test_shadow"
android:layout_gravity="center"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:shadowColor="#aa22ff22"
android:shadowDx="0"
android:shadowDy="0"
android:shadowRadius="10"
android:text="Test Shadow"
android:textColor="#cc000000"
android:textSize="60sp" />

layer配置文件

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

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="Http://schemas.android.com/apk/res/android">
    <!-- 阴影图片,android:left表示阴影图片左边到背景图片左边的距离
    android:top表示阴影图片上边到背景图片上边的距离-->
    <item android:left="5dp"
        android:top="5dp">
        <shape>
            <solid android:color="#60000000"/>
        </shape>
    </item>
    <!-- 背景图片,android:right表示阴影图片右边到背景图片右边的距离
    android:bottom表示阴影图片下边到背景图片下边的距离-->
    <item android:bottom="5dp"
        android:right="5dp">
        <shape>
            <solid android:color="#000000"/>
        </shape>
    </item>
</layer-list>

自定义实现

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

@Override
public void draw(@NonNull canvas canvas) {
    if (mBGColor != null) {
        if (mBgColor.length == 1) {
            mBgPaint.setColor(mBgColor[0]);
        } else {
            mBgPaint.setShader(new LinearGradient(mRect.left, mRect.height() / 2, mRect.right,
                    mRect.height() / 2, mBgColor, null, Shader.TileMode.CLAMP));
        }
    }

    if (mShape == SHAPE_ROUND) {
        canvas.drawRoundRect(mRect, mShapeRadius, mShapeRadius, mShadowPaint);
        canvas.drawRoundRect(mRect, mShapeRadius, mShapeRadius, mBgPaint);
    } else {
        canvas.drawCircle(mRect.centerX(), mRect.centerY(), Math.min(mRect.width(), mRect.height())/ 2, mShadowPaint);
        canvas.drawCircle(mRect.centerX(), mRect.centerY(), Math.min(mRect.width(), mRect.height())/ 2, mBgPaint);
    }
}

完整版代码

小结

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

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

--结束END--

本文标题: 详解Android如何实现阴影效果

本文链接: https://lsjlt.com/news/152032.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 详解Android如何实现阴影效果
    目录实现形式elevationCardView属性shadow属性layer配置文件自定义实现小结实现形式 elevation Material Design提供了View的阴影效果...
    99+
    2024-04-02
  • Android怎么实现阴影效果
    这篇文章主要介绍了Android怎么实现阴影效果的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Android怎么实现阴影效果文章都会有所收获,下面我们一起来看看吧。实现形式elevationMaterial D...
    99+
    2023-07-02
  • css如何实现阴影效果
    这篇文章主要介绍了css如何实现阴影效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。css的三种引入方式1.行内样式,最直接最简单的一种,直接对HTML标签使用style=...
    99+
    2023-06-14
  • Android 自定义阴影效果详解及实例
    Android 自定义阴影效果详解及实例 Android5.X中,Google为其增加了两个属性 android:elevation=” ” 与 android:transla...
    99+
    2022-06-06
    自定义 Android
  • 详解Android Material设计中阴影效果的实现方法
    View可以投下的阴影,一个View的elevation值决定了它的阴影的大小和绘制的顺序。可以设置一个视图的elevation,在布局中使用属性:android:elevat...
    99+
    2022-06-06
    方法 material Android
  • Android实现ImageView阴影和图层效果
    本文实例为大家分享了ImageView阴影和图层效果的实现代码,供大家参考,具体内容如下 import android.app.Activity; import andro...
    99+
    2022-06-06
    Android
  • css3如何实现阴影、倒影、渐变效果
    这篇文章主要介绍css3如何实现阴影、倒影、渐变效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!一、效果做:二、先是建立两个文本不做处理运行如图三、给第一个div字体加上阴影tex...
    99+
    2024-04-02
  • ps文字阴影效果如何实现
    这篇文章主要介绍了ps文字阴影效果如何实现,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。在文字的展现形式上,为了突出效果,我们可以给文字加上阴影的效果。下面我们就来一起看看,...
    99+
    2023-06-14
  • css如何实现设置阴影效果
    这篇文章将为大家详细讲解有关css如何实现设置阴影效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。css设置阴影效果:1、通过主元素和副元素的阴影效果叠加产生曲线阴影效果;2、通过添加两个副元素,并将两...
    99+
    2023-06-14
  • CSS3中如何实现图层阴影和文字阴影效果
    这篇文章给大家分享的是有关CSS3中如何实现图层阴影和文字阴影效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。box-shadow图层阴影box-shadow:阴影类型 X水平...
    99+
    2024-04-02
  • Android实现图片阴影效果的方法
    本文实例介绍了Android实现图片阴影效果,设置画布颜色,图像倾斜效果,图片阴影效果的方法,采用canvas.save(Canvas.MATRIX_SAVE_FLAG);来实...
    99+
    2022-06-06
    方法 图片 Android
  • css如何实现下边框阴影效果
    这篇文章主要介绍了css如何实现下边框阴影效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。css是什么意思css是一种用来表现HTML或XML等文件样式的计算机语言,主要是...
    99+
    2023-06-06
  • OpenGL Shader如何实现阴影遮罩效果
    小编给大家分享一下OpenGL Shader如何实现阴影遮罩效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!smoothstep另一种用法在之前Ope...
    99+
    2023-06-29
  • css如何实现div边框阴影效果
    本篇内容主要讲解“css如何实现div边框阴影效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“css如何实现div边框阴影效果”吧!代码如下:<style type="...
    99+
    2023-07-04
  • css3怎么实现阴影效果
    小编给大家分享一下css3怎么实现阴影效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! 在css中...
    99+
    2024-04-02
  • CSS怎么实现阴影效果
    这篇文章给大家分享的是有关CSS怎么实现阴影效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。box-shadow:用来添加阴影。它有四个属性:横坐标偏移量(相对于元素的左上角定点);纵坐标偏移量(相对于元素的左...
    99+
    2023-06-27
  • css阴影效果怎么实现
    这篇文章主要介绍“css阴影效果怎么实现”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“css阴影效果怎么实现”文章能帮助大家解决问题。box-shadow属性可以设置一个或多个下拉阴影的框。CSS3...
    99+
    2023-07-04
  • cssz2box-shadow实现曲边阴影与翘边阴影效果
    小编给大家分享一下cssz2box-shadow实现曲边阴影与翘边阴影效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!一、曲边...
    99+
    2024-04-02
  • css怎么实现曲边阴影与翘边阴影效果
    本篇内容主要讲解“css怎么实现曲边阴影与翘边阴影效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“css怎么实现曲边阴影与翘边阴影效果”吧!一、曲边阴影效果图如下:它不仅是四周有阴影,下部还有...
    99+
    2023-07-04
  • OpenGL Shader实现阴影遮罩效果
    目录smoothstep另一种用法遮罩效果实现效果扩展smoothstep另一种用法 在之前OpenGL Shader-抗锯齿实现文章中所介绍的那样:为了抗锯齿效果可以用smooth...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作