您现在的位置是:首页 > 正文

Android阴影绘制的方式

2024-02-01 03:30:53阅读 2

Android阴影绘制的几种方式

1. 点9图

其实这个方案是最好的方案,使用起来简单,只要圆角能保证和设计一致,可以完美的复刻效果图。

缺点是如果不同形状的点9图多了之后会占用更大的空间,如果不同的圆角,就需要不同的点9图,不如自己写的好维护,每次阴影都需要去找UI。并且圆角的角度不好调节,可能会不准确需要多次修改。

2. layer-list方案

layer-list就是一个drawable的集合,把多张drawable叠起来,看起来实现了阴影的效果。

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--阴影-->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#0F000000" />
            <corners android:radius="10dp" />
        </shape>
    </item>
    <!--前景-->
    <item
        android:bottom="1dp"
        android:left="1dp"
        android:right="1dp"
        android:top="1dp">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white"/>
            <corners android:radius="10dp" />
        </shape>
    </item>
</layer-list>

缺点是阴影没有晕染的效果,没有模糊的那种感觉,就算背景层使用渐变的效果来做,效果也是差强人意。

3. translationZ方案

5.0以后才能使用 elevation 这种方案,很明显的例如CardView,大家都知道,通过修改Z轴的值,可以实现不同的阴影效果,但是阴影的颜色不能修改。

如果想修改阴影的大小轮廓还需要配合OutlineProvider来修改。

而8.0之后才有 android:outlineSpotShadowColor 这个属性才能修改阴影的颜色。总的来说兼容性不太好,使用起来太麻烦。

4. 自定义View方案

不管是自定义View也还是自定义ViewGroup,都是一样的效果,我们都是通过Paint画笔自己画出阴影,本质都是操作onDraw方法。

核心类就是 BlurMaskFilter 类,它的兼容性比较好,它通过一个模糊的遮罩来实现几个重要参数:

mMaskRadius:扩散的半径
BlurMaskFilter.Blur.NORMAL:整个图像都被模糊掉
BlurMaskFilter.Blur.SOLID:图像边界外产生一层与图像颜色一致阴影效果
BlurMaskFilter.Blur.OUTER:图像边界外产生一层阴影,并且将图像变成透明效果
BlurMaskFilter.Blur.INNER:在图像内部边沿产生模糊效果
由于文本是对自定义圆角的封装,所以我们就在此自定义View的方案上继续完善。

自定义圆角ViewGroup中加入阴影

之前我们已经定义好了自定义圆角的ViewGroup容器,我们是通过Paint自己绘制的。这不是巧了吗!我们通过另一个阴影的Paint去添加 setMaskFilter 不就可以实现阴影效果了吗?

唯一我们需要注意的就是控件大小与裁剪,与阴影的大小,内容的大小,处理好它们几个Rect绘制的范围就可以在圆角的布局里加上阴影的效果啦。

话不多说,我们开始加入我们需要的自定义属性

 <!-- 是否绘制圆形 -->
    <attr name="is_circle" format="boolean" />
    <!-- 绘制相同的圆角角度 -->
    <attr name="round_radius" format="dimension" />
    <!-- 绘制不同的圆角-左上角度 -->
    <attr name="topLeft" format="dimension" />
    <!-- 绘制不同的圆角-右上角度 -->
    <attr name="topRight" format="dimension" />
    <!-- 绘制不同的圆角-左下角度 -->
    <attr name="bottomLeft" format="dimension" />
    <!-- 绘制不同的圆角-右下角度 -->
    <attr name="bottomRight" format="dimension" />
    <!-- 绘制背景的颜色 -->
    <attr name="round_circle_background_color" format="color" />
    <!-- 绘制背景的图片 -->
    <attr name="round_circle_background_drawable" format="reference" />
    <!-- 绘制背景是否居中裁剪 -->
    <attr name="is_bg_center_crop" format="boolean" />
    <!-- 阴影大小 -->
    <attr name="round_circle_shadowSize" format="dimension" />
    <!-- 阴影颜色 -->
    <attr name="round_circle_shadowColor" format="color" />
    <!-- 阴影水平偏移 -->
    <attr name="round_circle_shadowOffsetX" format="dimension" />
    <!-- 阴影垂直偏移 -->
    <attr name="round_circle_shadowOffsetY" format="dimension" />

这里对属性的作用做了注释,很方便理解了。

接下来我们在基类中取出属性值

internal abstract class AbsRoundCirclePolicy(
    view: View,
    context: Context,
    attributeSet: AttributeSet?,
    attrs: IntArray,
    attrIndex: IntArray
) : IRoundCirclePolicy {

    ...
    var mShadowSize = 0
    var mShadowColor = 0
    var mShadowOffsetX = 0
    var mShadowOffsetY = 0

    private fun initialize(context: Context, attributeSet: AttributeSet?, attrs: IntArray, attrIndexs: IntArray) {
        val typedArray = context.obtainStyledAttributes(attributeSet, attrs)

        ...

        mShadowSize = typedArray.getDimensionPixelSize(attrIndexs[9], 0)
        mShadowColor = typedArray.getColor(attrIndexs[10], 0x10000000)
        mShadowOffsetX = typedArray.getDimensionPixelSize(attrIndexs[11], 0)
        mShadowOffsetY = typedArray.getDimensionPixelSize(attrIndexs[12], 0)
    }
}
然后我们在具体的策略裁剪类中拿到对应的值,内部我们需要在layout的时候去确定绘制内容的大小。

override fun onLayout(left: Int, top: Int, right: Int, bottom: Int) {
    setupRect()
    setupBG()
    setupShadow()
}

先确定内容的大小,阴影的大小,再初始化绘制对象,初始化阴影对象

//设置Rect
private fun setupRect() {
    val rectF = calculateBounds()
    val let: Float = rectF.left + mShadowSize
    val top: Float = rectF.top + mShadowSize
    val right: Float = rectF.right - mShadowSize
    val bottom: Float = rectF.bottom - mShadowSize

    mDrawableRect.set(let, top, right, bottom)

    //阴影的Rect
    val shadowLet: Float
    val shadowTop: Float
    val shadowRight: Float
    val shadowBottom: Float

    if (mShadowOffsetX > 0) {
        shadowLet = let + mShadowOffsetX
        shadowRight = right
    } else {
        shadowLet = let
        shadowRight = right + mShadowOffsetX
    }

    if (mShadowOffsetY > 0) {
        shadowTop = top + mShadowOffsetY
        shadowBottom = bottom
    } else {
        shadowTop = top
        shadowBottom = bottom + mShadowOffsetY
    }

    mShadowRect.set(shadowLet, shadowTop, shadowRight, shadowBottom)
}

//设置画笔和BitmapShader等
private fun setupBG() {

    if (mRoundBackgroundDrawable != null && mRoundBackgroundBitmap != null) {

        mBitmapWidth = mRoundBackgroundBitmap!!.width
        mBitmapHeight = mRoundBackgroundBitmap!!.height

        mBitmapShader = BitmapShader(mRoundBackgroundBitmap!!, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP)

        if (mRoundBackgroundBitmap!!.width != 2) {
            updateShaderMatrix()
        }

        mBitmapPaint.isAntiAlias = true
        mBitmapPaint.shader = mBitmapShader

    }

}

//阴影的设置与绘制准备
private fun setupShadow() {
    if (mShadowSize > 0) {

        mShadowPaint.color = Color.TRANSPARENT
        mShadowPaint.style = Paint.Style.STROKE
        mShadowPaint.strokeWidth = (mShadowSize / 4).toFloat()

        // 如果阴影不带透明度,强制给它设置一点透明度
        if (ColorUtils.setAlphaComponent(mShadowColor, 255) == mShadowColor) {
            mShadowColor = ColorUtils.setAlphaComponent(mShadowColor, 254)
        }
        mShadowPaint.color = mShadowColor

        mShadowPaint.maskFilter = BlurMaskFilter(mShadowSize / 1.2f, BlurMaskFilter.Blur.NORMAL)

    } else {
        mShadowPaint.clearShadowLayer()
    }
}

当我们全部的对象都初始化之后,总共是分两个步骤,一个是裁剪,一个是绘制,绘制又分背景内容的绘制和阴影的绘制。

在钩子函数中我们是在绘制完成之后再裁剪。

@TargetApi(Build.VERSION_CODES.LOLLIPOP)
    override fun beforeDispatchDraw(canvas: Canvas?) {
        //5.0版本以上,采用ViewOutlineProvider来裁剪view
        mContainer.clipToOutline = true
    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    override fun afterDispatchDraw(canvas: Canvas?) {
        //5.0版本以上,采用ViewOutlineProvider来裁剪view
        mContainer.outlineProvider = object : ViewOutlineProvider() {
            override fun getOutline(view: View, outline: Outline) {

                if (isCircleType) {
                    //如果是圆形裁剪圆形
                    val bounds = Rect()
                    calculateBounds().roundOut(bounds)
                    outline.setRoundRect(bounds, bounds.width() / 2.0f)

                } else {
                    //如果是圆角-裁剪圆角
                    if (mTopLeft > 0 || mTopRight > 0 || mBottomLeft > 0 || mBottomRight > 0) {
                        //如果是单独的圆角
                        val path = Path()
                        path.addRoundRect(
                            calculateBounds(),
                            floatArrayOf(mTopLeft, mTopLeft, mTopRight, mTopRight, mBottomRight, mBottomRight, mBottomLeft, mBottomLeft),
                            Path.Direction.CCW
                        )

                        //不支持2阶的曲线
                        outline.setConvexPath(path)

                    } else {
                        //如果是统一圆角
                        outline.setRoundRect(0, 0, mContainer.width, mContainer.height, mRoundRadius)
                    }

                }
            }
        }
    }

而绘制则是在我们onDraw的钩子函数中实现,需要注意的是我们需要先绘制阴影再绘制内容,这样才能实现阴影在底部的效果。

   override fun onDraw(canvas: Canvas?): Boolean {
        if (isCircleType) {

            if (mShadowSize > 0) {
                //阴影的绘制
                canvas?.drawOval(mShadowRect, mShadowPaint)
            }

            //绘制圆角背景图
            canvas?.drawCircle(
                mDrawableRect.centerX(), mDrawableRect.centerY(),
                Math.min(mDrawableRect.height() / 2.0f, mDrawableRect.width() / 2.0f), mBitmapPaint
            )

        } else {
            //自定义圆角
            if (mTopLeft > 0 || mTopRight > 0 || mBottomLeft > 0 || mBottomRight > 0) {

                if (mShadowSize > 0) {
                    //阴影的绘制
                    mShadowPath.reset()
                    mShadowPath.addRoundRect(
                        mShadowRect, floatArrayOf(mTopLeft, mTopLeft, mTopRight, mTopRight, mBottomRight, mBottomRight, mBottomLeft, mBottomLeft),
                        Path.Direction.CW
                    )
                    canvas?.drawPath(mShadowPath, mShadowPaint)
                }

                //使用单独的圆角背景
                val path = Path()
                path.addRoundRect(
                    mDrawableRect, floatArrayOf(mTopLeft, mTopLeft, mTopRight, mTopRight, mBottomRight, mBottomRight, mBottomLeft, mBottomLeft),
                    Path.Direction.CW
                )
                canvas?.drawPath(path, mBitmapPaint)

            } else {
                //统一圆角
                if (mShadowSize > 0) {
                    //阴影的绘制
                    canvas?.drawRoundRect(mShadowRect, mRoundRadius, mRoundRadius, mShadowPaint)
                }

                //使用统一的圆角背景
                canvas?.drawRoundRect(mDrawableRect, mRoundRadius, mRoundRadius, mBitmapPaint)

            }
        }

        //是否需要super再绘制
        return true
    }

这样我们就在之前的基础上实现了阴影的效果。

网站文章

  • Spark作业执行原理(六)——获取执行结果

    Spark作业执行原理(六)——获取执行结果

    对于Executor的计算结果,会根据结果的大小使用不同的处理策略:计算结果在(0,128MB-200KB)区间内:通过Netty直接发送给Driver终端;计算结果在[128MB, 1GB]区间内:将结果以taskId为编号存入到BlockManager中,然后通过Netty把编号发送给Driver终端;阈值可通过Netty框架传输参数设置spark.a...

    2024-02-01 03:30:47
  • python变量的内建方法3——String型

    #a=整数型变量1.a.capitalize()#此方法返回的字符串只有它的第一个字符大写的副本。例:In [40]: a=&#39;abc&#39;In [41]: a.capitalize()Ou...

    2024-02-01 03:30:40
  • JNDI注入

    JNDI注入

    JNDI(The Java Naming and Directory Interface,Java命名和目录接口)是一组在Java应用中访问命名和目录服务的API,命名服务将名称和对象联系起来,使得我们可以用名称访问对象。

    2024-02-01 03:30:12
  • ES6学习——set map数据结构 、 DOM classlist属性、创建对象 、Symbol应用

    ES6学习——set map数据结构 、 DOM classlist属性、创建对象 、Symbol应用

    对象方法就是把对象中的属性,用匿名函数的形式编程方法(之前就有)。

    2024-02-01 03:30:07
  • 如何在SQLServer中处理每天四亿三千万记录的(数据库大数据处理)

    项目背景这是给某数据中心做的一个项目,项目难度之大令人发指,这个项目真正的让我感觉到了,商场如战场,而我只是其中的一个小兵,太多的战术,太多的高层之间的较量,太多的内幕了。具体这个项目的情况,我有空再写相关的博文出来。这个项目是要求做环境监控,我们暂且把受监控的设备称为采集设备,采集设备的属性称为监控指标。项目要求:系统支持不少于10w个监控指标,每个监控指标的数据更新不大于20秒,存储延迟...

    2024-02-01 03:30:00
  • 《软件开发的201个原则》

    《软件开发的201个原则》

    作为一名从事软件开发工作的读者,深刻体会到《软件开发原则》书中的系列原则,在我开发过程中处处可见。如果遵循这些原则,那么对你的开发是十分有效的。在项目开发过程格遵守开发流程,让一切异常都有迹可循,有法可解,工作效率显著提示。

    2024-02-01 03:29:28
  • ThreadLocal 详解

    ThreadLocal 详解

    如果key使用强引用:业务代码中使用完ThreadLocal ,ThreadLocal Ref被回收了,因为ThreadLocalMap的Entry强引用了threadLocal,造成threadLo...

    2024-02-01 03:29:20
  • 【unlink】 zctf2016_note2

    【unlink】 zctf2016_note2

    【unlink】 zctf2016_note2 1.ida分析 堆溢出,unsigned int用于判断条件,导致的堆溢出 指针数组 2.思路 创建3个chunk,chunk0、chunk1、chun...

    2024-02-01 03:29:12
  • android Preference之android:dependency

    android Preference之android:dependency

    在开发软件设置界面的时候,我们可以采用android系统提供的PreferenceActivity来实现,下面给出一个简单的例子: 1、Activity 代码如下: public class ConfigActivity extends PreferenceActivity { @Override public void onCreate(Bundle save...

    2024-02-01 03:29:05
  • 衡水科技工程学校计算机房照片,衡水科技工程学校数字化校园建设经验

    衡水科技工程学校计算机房照片,衡水科技工程学校数字化校园建设经验

    S cie n ce&Te hc no l o y Vgis i o n科 技视 P.-科技探索 争鸣衡水科技工学程校字化校数园建设经验广彦杜衡(水科技程工校学。河北衡水 0 5 30 0 0)摘【要】根据校学发的展划和各规业专的特,色通“过四一个”实现了数来字化建校设,一张网:校网、一个平园台:数校园平字、台一个库:教学资源、一库制套度:各网项化络管理制度。建在过设中我校程探索出条...

    2024-02-01 03:28:35