Android原生实现控件阴影方案（API28及以上）

2023-10-09 05:12
文章标签 实现 android 控件 以上 方案 原生 阴影 api28

本文主要是介绍Android原生实现控件阴影方案（API28及以上），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Android控件的阴影效果的实现方式有很多种，这里介绍一下另一种Android原生的阴影实现方案（API28及以上）。

我们利用elevation、outlineAmbientShowColor、outlineSpotShadowColor来实现一个带阴影的Button。

实现效果如下图，阴影宽度分别为2dp、10dp、30dp：
在这里插入图片描述

阴影原理

阴影效果的实现采用的是Android原生的View的属性，拔高Z轴。Z轴会让View产生阴影的效果。

阴影的效果由Z轴（elevation）、光源（shadowColor）和环境阴影透明度（ambientShadowAlpha）三者综合决定的。所以我们需要对这三者进行合理的设置。环境阴影透明度是通过主题theme设置的，一般为1，因此起决定性作用的是Z轴（elevation）和光源（shadowColor）。

光源又分为主光源（outlineSpotShadowColor）和环境光源（outlineAmbientShowColor）。

阴影原理
在这里插入图片描述

实现

属性

在attrs.xml文件中，创建Button的自定义属性：

    <declare-styleable name="shape_button"><attr name="android:background" /><attr name="android:textColor" /><!-- shadow 相关--><attr name="carbon_elevation" /><attr name="carbon_elevationShadowColor" /><attr name="carbon_elevationAmbientShadowColor" /><attr name="carbon_elevationSpotShadowColor" /><attr name="android:textStyle" /><attr name="android:textAppearance" /><attr name="android:singleLine" /><attr name="android:maxLines" /><attr name="android:textAllCaps" /></declare-styleable>

另外，创建一个styles_button.xml

<resources xmlns:tools="http://schemas.android.com/tools"><style name="carbon_Button" parent="@android:style/Widget.Button"><item name="android:gravity">center_vertical|center_horizontal</item><item name="android:paddingTop">0dp</item><item name="android:paddingBottom">0dp</item><item name="android:paddingLeft">@dimen/carbon_paddingHalf</item><item name="android:paddingRight">@dimen/carbon_paddingHalf</item><item name="android:minHeight">36dp</item><item name="android:minWidth">88dp</item><item name="carbon_elevation">@dimen/carbon_elevationButton</item><item name="android:textColor">@null</item><item name="android:textAppearance">?attr/carbon_textAppearanceButton</item><item name="android:maxLines">1</item><item name="android:background">@color/carbon_defaultColorControl</item></style>
</resources>

自定义ShapeButton

创建一个阴影接口，这样所有需要阴影的控件实现这个接口就好了：

/*** 阴影相关*/
public interface ShadowView {/*** The elevation value. There are useful values of elevation defined in xml as* carbon_elevationFlat, carbon_elevationLow, carbon_elevationMedium, carbon_elevationHigh,* carbon_elevationMax.*/float getElevation();void setElevation(float elevation);float getTranslationZ();void setTranslationZ(float translationZ);ColorStateList getElevationShadowColor();void setElevationShadowColor(ColorStateList color);void setElevationShadowColor(int color);int getOutlineAmbientShadowColor();void setOutlineAmbientShadowColor(int color);void setOutlineAmbientShadowColor(ColorStateList color);int getOutlineSpotShadowColor();void setOutlineSpotShadowColor(int color);void setOutlineSpotShadowColor(ColorStateList color);}

创建ShapeButton.java 实现ShadowView：

public class ShapeButton extends AppCompatButton implements ShadowView{public ShapeButton(@NonNull Context context) {super(context);initButton(null, android.R.attr.buttonStyle, R.style.carbon_Button);}public ShapeButton(@NonNull Context context, @Nullable AttributeSet attrs) {super(context, attrs);initButton(attrs, android.R.attr.buttonStyle, R.style.carbon_Button);}public ShapeButton(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);initButton(attrs, defStyleAttr, R.style.carbon_Button);}public ShapeButton(Context context, String text, OnClickListener listener) {super(context);initButton(null, android.R.attr.buttonStyle, R.style.carbon_Button);setText(text);setOnClickListener(listener);}private static int[] elevationIds = new int[]{R.styleable.shape_button_carbon_elevation,R.styleable.shape_button_carbon_elevationShadowColor,R.styleable.shape_button_carbon_elevationAmbientShadowColor,R.styleable.shape_button_carbon_elevationSpotShadowColor};// 重点就是利用下面的属性：// 拔高Z轴可以通过控制elevation和translationZ。区别：// elevation：一般是写在 xml 文件中做静态配置，单纯的控制Z轴；// translateZ：除了控制Z轴，还可以用来控制动画效果，比如我们点击按钮时希望它有一个弹起的效果。// 由于我们只需要实现阴影效果，所以我们只关注elevation即可。private float elevation = 0;private float translationZ = 0;// 表示光源的颜色private ColorStateList ambientShadowColor, spotShadowColor;private void initButton(AttributeSet attrs, @AttrRes int defStyleAttr, @StyleRes int defStyleRes) {TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.shape_button, defStyleAttr, defStyleRes);// todo-获取自定义属性的初始化//  Carbon.initElevation(this, a, elevationIds);a.recycle();}@Overridepublic float getElevation() {return elevation;}@Overridepublic void setElevation(float elevation) {// todo-设置elevation的值}@Overridepublic float getTranslationZ() {return translationZ;}public void setTranslationZ(float translationZ) {// todo-设置translationZ的值}@Overridepublic ColorStateList getElevationShadowColor() {return ambientShadowColor;}@Overridepublic void setElevationShadowColor(ColorStateList shadowColor) {// todo-设置ElevationShadowColor的值，这个光源值表示统一主光源和环境光源的颜色}@Overridepublic void setElevationShadowColor(int color) {// todo-设置ElevationShadowColor的值，这个光源值表示统一主光源和环境光源的颜色}@Overridepublic void setOutlineAmbientShadowColor(ColorStateList color) {// todo-设置OutlineAmbientShadowColor的值}@Overridepublic void setOutlineAmbientShadowColor(int color) {// todo-设置OutlineAmbientShadowColor的值}@Overridepublic int getOutlineAmbientShadowColor() {return ambientShadowColor.getDefaultColor();}@Overridepublic void setOutlineSpotShadowColor(int color) {// todo-设置OutlineSpotShadowColor的值}@Overridepublic void setOutlineSpotShadowColor(ColorStateList color) {// todo-设置OutlineSpotShadowColor的值}@Overridepublic int getOutlineSpotShadowColor() {return ambientShadowColor.getDefaultColor();}
}

属性初始化

public class Carbon {public static final boolean IS_LOLLIPOP_OR_HIGHER = Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP;public static final boolean IS_PIE_OR_HIGHER = Build.VERSION.SDK_INT >= Build.VERSION_CODES.P;private Carbon() {}public static void initElevation(ShadowView view, TypedArray a, int[] ids) {int carbon_elevation = ids[0];int carbon_shadowColor = ids[1];int carbon_ambientShadowColor = ids[2];int carbon_spotShadowColor = ids[3];// 获取xml设置的elevation属性的值，并设置给Viewfloat elevation = a.getDimension(carbon_elevation, 0);view.setElevation(elevation);// 获取xml设置的shadowColor属性的值，并设置给ViewColorStateList shadowColor = a.getColorStateList(carbon_shadowColor);view.setElevationShadowColor(shadowColor != null ? shadowColor.withAlpha(255) : null);//如果有设置环境光源 ambientShadowColor，则设置给Viewif (a.hasValue(carbon_ambientShadowColor)) {ColorStateList ambientShadowColor = a.getColorStateList(carbon_ambientShadowColor);view.setOutlineAmbientShadowColor(ambientShadowColor != null ? ambientShadowColor.withAlpha(255) : null);}//如果有设置主光源spotShadowColor，则设置给Viewif (a.hasValue(carbon_spotShadowColor)) {ColorStateList spotShadowColor = a.getColorStateList(carbon_spotShadowColor);view.setOutlineSpotShadowColor(spotShadowColor != null ? spotShadowColor.withAlpha(255) : null);}}
}

设置阴影相关属性

设置Elevation

@Overridepublic void setElevation(float elevation) {// 针对API=28以上if (Carbon.IS_PIE_OR_HIGHER) {super.setElevation(elevation);super.setTranslationZ(translationZ);} else if (Carbon.IS_LOLLIPOP_OR_HIGHER) {if (ambientShadowColor == null || spotShadowColor == null) {super.setElevation(elevation);super.setTranslationZ(translationZ);} else {super.setElevation(0);super.setTranslationZ(0);}} else if (elevation != this.elevation && getParent() != null) {((View) getParent()).postInvalidate();}this.elevation = elevation;}

设置translationZ

public void setTranslationZ(float translationZ) {if (translationZ == this.translationZ)return;if (Carbon.IS_PIE_OR_HIGHER) {super.setTranslationZ(translationZ);} else if (Carbon.IS_LOLLIPOP_OR_HIGHER) {if (ambientShadowColor == null || spotShadowColor == null) {super.setTranslationZ(translationZ);} else {super.setTranslationZ(0);}} else if (translationZ != this.translationZ && getParent() != null) {((View) getParent()).postInvalidate();}this.translationZ = translationZ;}

设置主光源和环境光源

@Overridepublic void setElevationShadowColor(ColorStateList shadowColor) {ambientShadowColor = spotShadowColor = shadowColor;setElevation(elevation);setTranslationZ(translationZ);}@Overridepublic void setElevationShadowColor(int color) {ambientShadowColor = spotShadowColor = ColorStateList.valueOf(color);setElevation(elevation);setTranslationZ(translationZ);}// 设置环境光源
@Overridepublic void setOutlineAmbientShadowColor(ColorStateList color) {ambientShadowColor = color;if (Carbon.IS_PIE_OR_HIGHER) {super.setOutlineAmbientShadowColor(color.getColorForState(getDrawableState(), color.getDefaultColor()));} else {setElevation(elevation);setTranslationZ(translationZ);}}# 设置主光源
@Overridepublic void setOutlineSpotShadowColor(ColorStateList color) {spotShadowColor = color;if (Carbon.IS_PIE_OR_HIGHER) {super.setOutlineSpotShadowColor(color.getColorForState(getDrawableState(), color.getDefaultColor()));} else {setElevation(elevation);setTranslationZ(translationZ);}}@Overridepublic void draw(Canvas canvas) {if (Carbon.IS_PIE_OR_HIGHER) {if (spotShadowColor != null)super.setOutlineSpotShadowColor(spotShadowColor.getColorForState(getDrawableState(), spotShadowColor.getDefaultColor()));if (ambientShadowColor != null)super.setOutlineAmbientShadowColor(ambientShadowColor.getColorForState(getDrawableState(), ambientShadowColor.getDefaultColor()));}super.draw(canvas);}

怎样使用

<com.chinatsp.demo1.shadow.ShapeButtonandroid:layout_width="56dp"android:layout_height="56dp"android:layout_margin="@dimen/carbon_padding"android:background="#ffffff"android:stateListAnimator="@null"android:text="TOM"android:elevation="20dp"app:carbon_elevationShadowColor="@color/carbon_amber_700" />

完整代码：

public class ShapeButton extends AppCompatButton implements ShadowView{public ShapeButton(@NonNull Context context) {super(context);initButton(null, android.R.attr.buttonStyle, R.style.carbon_Button);}public ShapeButton(@NonNull Context context, @Nullable AttributeSet attrs) {super(context, attrs);initButton(attrs, android.R.attr.buttonStyle, R.style.carbon_Button);}public ShapeButton(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);initButton(attrs, defStyleAttr, R.style.carbon_Button);}public ShapeButton(Context context, String text, OnClickListener listener) {super(context);initButton(null, android.R.attr.buttonStyle, R.style.carbon_Button);setText(text);setOnClickListener(listener);}private static int[] elevationIds = new int[]{R.styleable.shape_button_carbon_elevation,R.styleable.shape_button_carbon_elevationShadowColor,R.styleable.shape_button_carbon_elevationAmbientShadowColor,R.styleable.shape_button_carbon_elevationSpotShadowColor};private float elevation = 0;private float translationZ = 0;private ColorStateList ambientShadowColor, spotShadowColor;private void initButton(AttributeSet attrs, @AttrRes int defStyleAttr, @StyleRes int defStyleRes) {TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.shape_button, defStyleAttr, defStyleRes);Carbon.initElevation(this, a, elevationIds);a.recycle();}@Overridepublic float getElevation() {return elevation;}@Overridepublic void setElevation(float elevation) {if (Carbon.IS_PIE_OR_HIGHER) {super.setElevation(elevation);super.setTranslationZ(translationZ);} else if (Carbon.IS_LOLLIPOP_OR_HIGHER) {if (ambientShadowColor == null || spotShadowColor == null) {super.setElevation(elevation);super.setTranslationZ(translationZ);} else {super.setElevation(0);super.setTranslationZ(0);}} else if (elevation != this.elevation && getParent() != null) {((View) getParent()).postInvalidate();}this.elevation = elevation;}@Overridepublic float getTranslationZ() {return translationZ;}public void setTranslationZ(float translationZ) {if (translationZ == this.translationZ)return;if (Carbon.IS_PIE_OR_HIGHER) {super.setTranslationZ(translationZ);} else if (Carbon.IS_LOLLIPOP_OR_HIGHER) {if (ambientShadowColor == null || spotShadowColor == null) {super.setTranslationZ(translationZ);} else {super.setTranslationZ(0);}} else if (translationZ != this.translationZ && getParent() != null) {((View) getParent()).postInvalidate();}this.translationZ = translationZ;}@Overridepublic ColorStateList getElevationShadowColor() {return ambientShadowColor;}@Overridepublic void setElevationShadowColor(ColorStateList shadowColor) {ambientShadowColor = spotShadowColor = shadowColor;setElevation(elevation);setTranslationZ(translationZ);}@Overridepublic void setElevationShadowColor(int color) {ambientShadowColor = spotShadowColor = ColorStateList.valueOf(color);setElevation(elevation);setTranslationZ(translationZ);}@Overridepublic void setOutlineAmbientShadowColor(ColorStateList color) {ambientShadowColor = color;if (Carbon.IS_PIE_OR_HIGHER) {super.setOutlineAmbientShadowColor(color.getColorForState(getDrawableState(), color.getDefaultColor()));} else {setElevation(elevation);setTranslationZ(translationZ);}}@Overridepublic void setOutlineAmbientShadowColor(int color) {setOutlineAmbientShadowColor(ColorStateList.valueOf(color));}@Overridepublic int getOutlineAmbientShadowColor() {return ambientShadowColor.getDefaultColor();}@Overridepublic void setOutlineSpotShadowColor(int color) {setOutlineSpotShadowColor(ColorStateList.valueOf(color));}@Overridepublic void setOutlineSpotShadowColor(ColorStateList color) {spotShadowColor = color;if (Carbon.IS_PIE_OR_HIGHER) {super.setOutlineSpotShadowColor(color.getColorForState(getDrawableState(), color.getDefaultColor()));} else {setElevation(elevation);setTranslationZ(translationZ);}}@Overridepublic int getOutlineSpotShadowColor() {return ambientShadowColor.getDefaultColor();}@Overridepublic void draw(Canvas canvas) {if (Carbon.IS_PIE_OR_HIGHER) {if (spotShadowColor != null)super.setOutlineSpotShadowColor(spotShadowColor.getColorForState(getDrawableState(), spotShadowColor.getDefaultColor()));if (ambientShadowColor != null)super.setOutlineAmbientShadowColor(ambientShadowColor.getColorForState(getDrawableState(), ambientShadowColor.getDefaultColor()));}super.draw(canvas);}
}

这篇关于Android原生实现控件阴影方案（API28及以上）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/170590。

相关文章

Python实现自动化Word文档样式复制与内容生成

Python实现自动化Word文档样式复制与内容生成

《Python实现自动化Word文档样式复制与内容生成》在办公自动化领域,高效处理Word文档的样式和内容复制是一个常见需求,本文将展示如何利用Python的python-docx库实现... 目录一、为什么需要自动化 Word 文档处理二、核心功能实现：样式与表格的深度复制1. 表格复制（含样式与内容）2
阅读更多...
python获取cmd环境变量值的实现代码

python获取cmd环境变量值的实现代码

《python获取cmd环境变量值的实现代码》：本文主要介绍在Python中获取命令行（cmd）环境变量的值,可以使用标准库中的os模块,需要的朋友可以参考下... 前言全局说明在执行py过程中，总要使用到系统环境变量一、说明1.1 环境:Windows 11 家庭版 24H2 26100.4061
阅读更多...
Python中bisect_left 函数实现高效插入与有序列表管理

Python中bisect_left 函数实现高效插入与有序列表管理

《Python中bisect_left函数实现高效插入与有序列表管理》Python的bisect_left函数通过二分查找高效定位有序列表插入位置,与bisect_right的区别在于处理重复元素时... 目录一、bisect_left 基本介绍1.1 函数定义1.2 核心功能二、bisect_left 与
阅读更多...
VSCode设置python SDK路径的实现步骤

VSCode设置python SDK路径的实现步骤

《VSCode设置pythonSDK路径的实现步骤》本文主要介绍了VSCode设置pythonSDK路径的实现步骤,包括命令面板切换、settings.json配置、环境变量及虚拟环境处理,具有一定... 目录一、通过命令面板快速切换（推荐方法）二、通过 settings.json 配置（项目级/全局）三、
阅读更多...
pandas实现数据concat拼接的示例代码

pandas实现数据concat拼接的示例代码

《pandas实现数据concat拼接的示例代码》pandas.concat用于合并DataFrame或Series,本文主要介绍了pandas实现数据concat拼接的示例代码,具有一定的参考价值,... 目录语法示例：使用pandas.concat合并数据默认的concat：参数axis=0，join=
阅读更多...
Android学习总结之Java和kotlin区别超详细分析

Android学习总结之Java和kotlin区别超详细分析

《Android学习总结之Java和kotlin区别超详细分析》Java和Kotlin都是用于Android开发的编程语言,它们各自具有独特的特点和优势,：本文主要介绍Android学习总结之Ja... 目录一、空安全机制真题 1：Kotlin 如何解决 Java 的 NullPointerExceptio
阅读更多...
java中BigDecimal里面的subtract函数介绍及实现方法

java中BigDecimal里面的subtract函数介绍及实现方法

《java中BigDecimal里面的subtract函数介绍及实现方法》在Java中实现减法操作需要根据数据类型选择不同方法,主要分为数值型减法和字符串减法两种场景,本文给大家介绍java中BigD... 目录Java中BigDecimal里面的subtract函数的意思？一、数值型减法（高精度计算）1.
阅读更多...
C#代码实现解析WTGPS和BD数据

C#代码实现解析WTGPS和BD数据

《C#代码实现解析WTGPS和BD数据》在现代的导航与定位应用中,准确解析GPS和北斗（BD）等卫星定位数据至关重要,本文将使用C#语言实现解析WTGPS和BD数据,需要的可以了解下... 目录一、代码结构概览1. 核心解析方法2. 位置信息解析3. 经纬度转换方法4. 日期和时间戳解析5. 辅助方法二、L
阅读更多...
使用Python和Matplotlib实现可视化字体轮廓(从路径数据到矢量图形)

使用Python和Matplotlib实现可视化字体轮廓(从路径数据到矢量图形)

《使用Python和Matplotlib实现可视化字体轮廓(从路径数据到矢量图形)》字体设计和矢量图形处理是编程中一个有趣且实用的领域,通过Python的matplotlib库,我们可以轻松将字体轮廓... 目录背景知识字体轮廓的表示实现步骤1. 安装依赖库2. 准备数据3. 解析路径指令4. 绘制图形关键
阅读更多...
C/C++中OpenCV 矩阵运算的实现

C/C++中OpenCV 矩阵运算的实现

《C/C++中OpenCV矩阵运算的实现》本文主要介绍了C/C++中OpenCV矩阵运算的实现,包括基本算术运算（标量与矩阵）、矩阵乘法、转置、逆矩阵、行列式、迹、范数等操作,感兴趣的可以了解一下... 目录矩阵的创建与初始化创建矩阵访问矩阵元素基本的算术运算 ➕➖✖️➗矩阵与标量运算矩阵与矩阵运算 (逐元
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2