您的位置:首页 > 教程 > Android开发 > 详解Android如何实现阴影效果

详解Android如何实现阴影效果

2022-06-20 12:50:31 来源:易采站长站 作者:

详解Android如何实现阴影效果

目录
实现形式elevationCardView属性shadow属性layer配置文件自定义实现小结

5GX站长之家-易采站长站-Easck.Com

实现形式

5GX站长之家-易采站长站-Easck.Com

elevation

Material>提供了View的阴影效果设置。主要由两个属性决定:elevation和translationZ。5GX站长之家-易采站长站-Easck.Com

Z = elevation + translationZ5GX站长之家-易采站长站-Easck.Com

PS:这种实现方式只有API21以及以上才能支持实现。5GX站长之家-易采站长站-Easck.Com

elevation属性表示View高度加上高度就会有阴影效果。 translationZ属性表示给View增加一个Z轴的变换效果。配合elevation属性一起使用阴影效果更突出。5GX站长之家-易采站长站-Easck.Com

<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"
    />

5GX站长之家-易采站长站-Easck.Com

官网介绍5GX站长之家-易采站长站-Easck.Com

image.png5GX站长之家-易采站长站-Easck.Com

5GX站长之家-易采站长站-Easck.Com

CardView属性

CardViewAndroid提供的官方控件自身支持设置阴影效果。阴影实现由cardElevationcardMaxElevation实现。5GX站长之家-易采站长站-Easck.Com

<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"
    />

5GX站长之家-易采站长站-Easck.Com

5GX站长之家-易采站长站-Easck.Com

shadow属性

若是TextView则可以通过shadow属性实现阴影效果5GX站长之家-易采站长站-Easck.Com

<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" />

5GX站长之家-易采站长站-Easck.Com

layer配置文件

通过配置xmllayer属性文件实现阴影效果。使用layer-list实现两层不同背景色实现叠加实现像是阴影的效果,但最终实现效果并不是例如CardView的渐变阴影效果。5GX站长之家-易采站长站-Easck.Com

<?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>

5GX站长之家-易采站长站-Easck.Com

5GX站长之家-易采站长站-Easck.Com

自定义实现

自定义形式是通过自定义Drawable实现,该形式实现目标View必须关闭硬件加速。自定义Drawable主要通过重写draw方法绘制矩形或圆形形状增加阴影效果。5GX站长之家-易采站长站-Easck.Com

@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);
    }
}

完整版代码5GX站长之家-易采站长站-Easck.Com

5GX站长之家-易采站长站-Easck.Com

小结

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

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

如有侵权,请联系QQ:279390809 电话:15144810328

相关文章

  • Android中RecyclerView实现多级折叠列表效果(TreeRecyclerView)

    Android中RecyclerView实现多级折叠列表效果(TreeRecyclerView)

    前言 首先不得不吐槽一下产品,尼玛为啥要搞这样的功能....搞个两级的不就好了嘛...自带控件,多好。三级,四级,听说还有六级的....这样丧心病狂的设计,后台也不好给数据吧。 先看
    2019-12-15
  • Android Viewpager实现无限循环轮播图

    Android Viewpager实现无限循环轮播图

    在网上找了很多viewpager实现图片轮播的,但是大多数通过以下方式在PagerAdapter的getCount()返回一个无限大的数,来实现 伪无限 @Override public int getCount() { return Integer.MAX_VALUE;//返回一个无限
    2019-12-22
  • AndroidStudio4.0 New Class的坑(小结)

    AndroidStudio4.0 New Class的坑(小结)

    AndroidStudio升级后, 新建类变成了下面这个样子, 并且默认还没有修饰符, 一堆大写的英文看的我一脸懵逼, 后来在 stackoverflow 上看到了这几个参数的含义: IMPORT BLOCK 说白了就是导包(谁家导
    2020-07-01
  • Android自定义View实现通讯录字母索引(仿微信通讯录)

    Android自定义View实现通讯录字母索引(仿微信通讯录)

    一、效果:我们看到很多软件的通讯录在右侧都有一个字母索引功能,像微信,小米通讯录,QQ,还有美团选择地区等等。这里我截了一张美团选择城市的图片来看看; 我们今天就来实现
    2019-12-16
  • Android个人手机通讯录开发详解

    Android个人手机通讯录开发详解

    一、Android 个人手机通讯录开发 数据存储:SQLite 数据库 开发工具:Android Studio 二、Phone Module 简介 1. 界面展示 2. 文件结构简单分析 三、个人手机通讯录代码实现 1. 清单文件 (AndroidMa
    2019-12-24
  • Android10.0实现本地音乐播放(附源码下载)

    Android10.0实现本地音乐播放(附源码下载)

    1.概述 本篇文章仅是Android小白在写一个小程序,内容仅供参考,有很多不足之处希望各位大神指出,文章末尾有整个项目的下载,不需要币,只求帮你们解决到问题的同时收获到一颗小
    2020-06-23
  • Android使用VideoView播放本地视频和网络视频的方法

    Android使用VideoView播放本地视频和网络视频的方法

    1、效果展示 2、布局文件 ?xml version=1.0 encoding=utf-8?RelativeLayout xmlns:android=http://www.easck.com/apk/res/android xmlns:tools=http://www.easck.com/tools android:layout_width=match_parent android:layout_height=match_parent
    2019-12-13
  • Android实现简易计步器功能隔天步数清零查看历史运动纪录

    Android实现简易计步器功能隔天步数清零查看历史运动纪录

    最近需要用到计步功能,这可难坏我了,iOS端倒好,有自带的计步功能,让我惊讶的是连已爬楼层都给做好了,只需要调接口便可获得数据,我有一句MMP,我很想讲。 但是抱怨归抱怨,
    2019-12-21