【自定义View】洋葱数学同款阴影布局-ShadowLayout

开箱即用的源码地址

洋葱数学同款阴影布局-ShadowLayout

支持自定义属性：

• sl_shadowRadius：阴影的发散距离
• sl_shadowColor：阴影的颜色
• sl_dx：阴影左右偏移量
• sl_dy：阴影上下偏移量
• sl_cornerRadius：布局圆角
• sl_borderWidth：布局边框宽度
• sl_borderColor：布局边框颜色
• sl_shadowSides：在某条边或多条边显示阴影

起源

近几个月来我司画家们（设计大佬）愈来愈多的开始使用阴影，因此也就不能再使用.9.png的实现方式了，而后就有了此次封装的ShadowLayout，其主要特色是：

1. 提取Layout的自定义属性，对使用者来说可快速上手
2. UI表现细腻，还原度高

但依然有个避不过的缺点，就是阴影区域占用了Layout的Padding区域，须要使用者心算Layout的实际宽高，虽然计算很简单...

头图是此次Demo演示了三种场景，而后结合局部UI稿，你们能够对比看下。

思考分析

咱们先来思考下实现的关键点：

• 为了write once use everywhere咱们就写成一个布局，这样能够想包裹什么包什么，因此定义一个继承FrameLayout的布局，取名ShadowLayout
• 核心在于实现阴影效果，查资料了解到可使用Paint的setShadowLayer()API
• 圆角的处理，咱们可使用xfermode的相关模式，对画布上的子View进行一个去圆角合成
• 边框的处理很容易，使用Canvas的drawRoundRect画就能够
• 控制某条边或多条边显示阴影，这个使用自定义属性的flags类型实现（恰如其分的符合咱们的需求）

思路框架：

1. 定义、初始化属性
2. 设置padding为阴影留出空间
3. 绘制内容区域大小的阴影（内容区域==子View占用的区域==Layout大小-padding）
4. 绘制内容区域、处理圆角
5. 绘制边框

技术点、思路理好了，就着手开始代码了，其中仍是有一些细节知识点的，Go ahead！

绘制过程

NOTE：由于常常要自定义View因此把经常使用的工具方法，使用Kotlin的扩展方法抽取了出来，在DrawUtil.kt文件。

好比mPaint.utilReset()，是扩展出来的方法，而不是Paint类的API。

源码地址-DrawUtil.kt

1. 定义、初始化属性

第一步比较基础，在attrs.xml中定义咱们的属性，在Layout中声明变量，并作初始化。

其中着重说下sl_shadowSides：

1. 它的类型是flags而且是复数形式，因此这个能够用来为某个属性设置多个标志位
2. 具体在xml布局中的使用方式是app:sl_shadowSides="TOP|RIGHT|BOTTOM"，经过|(逻辑或)链接多个标志位（这种方式其实咱们常常用）
3. 定义的value值一、二、四、八、15是有规律的，不是随便设的
4. 在代码中使用时会涉及到
   • 判断flag集是否包含某个flag（本次用到）
   • 在flag集中添加新flag
   • 在flag集中去除某flag

因此也在DrawUtil中扩展了相关方法，便于复用。

而关于这部分的原理，我在拜读的文章中给出了连接，你们自行食用。

贴一大波初始化相关代码，以下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="ShadowLayout">
        <attr name="sl_cornerRadius" format="dimension" />
        <attr name="sl_shadowRadius" format="dimension" />
        <attr name="sl_shadowColor" format="color" />
        <attr name="sl_dx" format="dimension" />
        <attr name="sl_dy" format="dimension" />
        <attr name="sl_borderColor" format="color" />
        <attr name="sl_borderWidth" format="dimension" />
        <attr name="sl_shadowSides" format="flags">
            <flag name="TOP" value="1" />
            <flag name="RIGHT" value="2" />
            <flag name="BOTTOM" value="4" />
            <flag name="LEFT" value="8" />
            <flag name="ALL" value="15" />
        </attr>
    </declare-styleable>
</resources>
复制代码

//********************************
//* 自定义属性部分
//********************************

/** * 阴影颜色 */
@ColorInt
private var mShadowColor: Int = 0
/** * 阴影发散距离 blur */
private var mShadowRadius: Float = 0f
/** * x轴偏移距离 */
private var mDx: Float = 0f
/** * y轴偏移距离 */
private var mDy: Float = 0f
/** * 圆角半径 */
private var mCornerRadius: Float = 0f
/** * 边框颜色 */
@ColorInt
private var mBorderColor: Int = 0
/** * 边框宽度 */
private var mBorderWidth: Float = 0f
/** * 控制四边是否显示阴影 */
private var mShadowSides: Int = default_shadowSides

//********************************
//* 绘制使用的属性部分
//********************************

/** * 全局画笔 */
private var mPaint: Paint = createPaint(color = Color.WHITE)
private var mHelpPaint: Paint = createPaint(color = Color.RED)

/** * 全局Path */
private var mPath = Path()
/** * 合成模式 */
private var mXfermode: PorterDuffXfermode by Delegates.notNull()
/** * 视图内容区域的RectF实例 */
private var mContentRF: RectF by Delegates.notNull()
/** * 视图边框的RectF实例 */
private var mBorderRF: RectF? = null
复制代码

init {
    initAttributes(context, attrs)
    initDrawAttributes()
    processPadding()
    //设置软件渲染类型
    setLayerType(View.LAYER_TYPE_SOFTWARE, null)
}
复制代码

companion object {
    const val debug = true

    private const val FLAG_SIDES_TOP = 1
    private const val FLAG_SIDES_RIGHT = 2
    private const val FLAG_SIDES_BOTTOM = 4
    private const val FLAG_SIDES_LEFT = 8
    private const val FLAG_SIDES_ALL = 15

    const val default_shadowColor = Color.BLACK
    const val default_shadowRadius = 0f
    const val default_dx = 0f
    const val default_dy = 0f
    const val default_cornerRadius = 0f
    const val default_borderColor = Color.RED
    const val default_borderWidth = 0f
    const val default_shadowSides = FLAG_SIDES_ALL
}
复制代码

private fun initAttributes(context: Context, attrs: AttributeSet?) {
    val a = context.obtainStyledAttributes(attrs, R.styleable.ShadowLayout)
    try {
        a?.run {
            mShadowColor = getColor(R.styleable.ShadowLayout_sl_shadowColor, default_shadowColor)
            mShadowRadius =
                getDimension(R.styleable.ShadowLayout_sl_shadowRadius, context.dpf2pxf(default_shadowRadius))
            mDx = getDimension(R.styleable.ShadowLayout_sl_dx, default_dx)
            mDy = getDimension(R.styleable.ShadowLayout_sl_dy, default_dy)

            mCornerRadius =
                getDimension(R.styleable.ShadowLayout_sl_cornerRadius, context.dpf2pxf(default_cornerRadius))
            mBorderColor = getColor(R.styleable.ShadowLayout_sl_borderColor, default_borderColor)
            mBorderWidth =
                getDimension(R.styleable.ShadowLayout_sl_borderWidth, context.dpf2pxf(default_borderWidth))

            mShadowSides = getInt(R.styleable.ShadowLayout_sl_shadowSides, default_shadowSides)
        }
    } finally {
        a?.recycle()
    }
}
复制代码

/** * 初始化绘制相关的属性 */
private fun initDrawAttributes() {
    //使用xfermode在图层上进行合成，处理圆角
    mXfermode = PorterDuffXfermode(PorterDuff.Mode.DST_OUT)
}
复制代码

2. 设置padding为阴影留出空间

private fun processPadding() {
    val xPadding = (mShadowRadius + mDx.absoluteValue).toInt()
    val yPadding = (mShadowRadius + mDy.absoluteValue).toInt()

    setPadding(
        if (mShadowSides.containsFlag(FLAG_SIDES_LEFT)) xPadding else 0,
        if (mShadowSides.containsFlag(FLAG_SIDES_TOP)) yPadding else 0,
        if (mShadowSides.containsFlag(FLAG_SIDES_RIGHT)) xPadding else 0,
        if (mShadowSides.containsFlag(FLAG_SIDES_BOTTOM)) yPadding else 0
    )
}
复制代码

这里是倒推出使用者须要在布局时心算一下布局实际大小的地方。

NOTE：

• ShadowLayout实际宽度=内容区域宽度+（mShadowRadius + Math.abs(mDx)）*2
• ShadowLayout实际高度=内容区域高度+（mShadowRadius + Math.abs(mDy)）*2
• 只设置一边显示阴影时，阴影部分占用的大小是（mShadowRadius + Math.abs(mDx、mDy)）

这里能够抛两个小疑问：

1. 为何要占用Layout的padding呢？而不使用去除padding后的区域空间
2. 为何在上下或左右都显示阴影的状况时，上下或左右都要设置（mShadowRadius + Math.abs(mDx)的padding距离？（由于偏移量的存在，向一边偏移时，另外一边并不须要那么大的空间）

其实缘由就是：为了让使用者更简单的计算布局实际大小，同时也省去了需计算传给子View的Canvas大小的麻烦

Tips：Android的View系统中dispatchDraw(canvas: Canvas?)(仅以该方法作表明)，canvas的宽高是不包含父View的padding的区域的。

3. 绘制内容区域大小的阴影

这里之因此叫作「绘制内容区域大小的阴影」，是由于咱们要根据内容区域的大小结合Paint的setShadowLayer()、Canvas的drawRoundRect()来绘制出一个带阴影的圆角矩形。

而后子View是绘制在该矩形之上，且贴合内容区域大小，视觉上就仿佛子View有了阴影同样。

前文提到setLayerType(View.LAYER_TYPE_SOFTWARE, null)，为何咱们要设置为软件渲染类型呢？看下该方法的源码便知。

Tips：关于setLayerType()更多知识，见我拜读的文章

/** * This draws a shadow layer below the main layer, with the specified * offset and color, and blur radius. If radius is 0, then the shadow * layer is removed. * 该方法使用指定的偏移值、颜色和发散距离在主图层下绘制一个阴影图层。 * 若是发散距离为0，就不绘制该图层。 * <p> * Can be used to create a blurred shadow underneath text. Support for use * with other drawing operations is constrained to the software rendering * pipeline. * 能够用来在文本下方建立模糊阴影。 * 也支持其余的绘图操做，但必须设置为软件渲染类型。 * <p> * The alpha of the shadow will be the paint's alpha if the shadow color is * opaque, or the alpha from the shadow color if not. * 若是shadowColor是不透明的（alpha通道值为255）， * 那么就使用画笔的不透明度，不然就使用该值做为透明度。 */
public void setShadowLayer(float radius, float dx, float dy, int shadowColor) {
  mShadowLayerRadius = radius;
  mShadowLayerDx = dx;
  mShadowLayerDy = dy;
  mShadowLayerColor = shadowColor;
  nSetShadowLayer(mNativePaint, radius, dx, dy, shadowColor);
}
复制代码

绘制阴影相关的代码以下：

//计算内容区域的大小
override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
    super.onSizeChanged(w, h, oldw, oldh)
    mContentRF = RectF(
        paddingLeft.toFloat(),
        paddingTop.toFloat(),
        (w - paddingRight).toFloat(),
        (h - paddingBottom).toFloat()
    )
    
    //以边框宽度的三分之一，微调边框绘制位置，以在边框较宽时获得更好的视觉效果
    val bw = mBorderWidth / 3
    if (bw > 0) {
        mBorderRF = RectF(
            mContentRF.left + bw,
            mContentRF.top + bw,
            mContentRF.right - bw,
            mContentRF.bottom - bw
        )
    }
}
复制代码

override fun dispatchDraw(canvas: Canvas?) {
    if (canvas == null) return

    canvas.helpGreenCurtain(debug)

    //绘制阴影
    drawShadow(canvas)

    //绘制子View，后边会说
    drawChild(canvas) {
        super.dispatchDraw(it)
    }

    //绘制边框，后边会说
    drawBorder(canvas)
}
复制代码

private fun drawShadow(canvas: Canvas) {
    canvas.save()

    mPaint.setShadowLayer(mShadowRadius, mDx, mDy, mShadowColor)
    canvas.drawRoundRect(mContentRF, mCornerRadius, mCornerRadius, mPaint)
    mPaint.utilReset()

    canvas.restore()
}
复制代码

贴张图看下效果：

布局中属性值为app:sl_shadowRadius="12dp"

4. 绘制内容区域、处理圆角

这里先看代码再作解释，以下：

override fun dispatchDraw(canvas: Canvas?) {
    ...//略去代码
    
    //绘制子View
    drawChild(canvas) {
        super.dispatchDraw(it)
    }
    
    ...//略去代码
}
复制代码

private fun drawChild(canvas: Canvas, block: (Canvas) -> Unit) {
    canvas.saveLayer(0f, 0f, canvas.width.toFloat(), canvas.height.toFloat(), mPaint, Canvas.ALL_SAVE_FLAG)

    //先绘制子控件
    block.invoke(canvas)

    //使用path构建四个圆角
    mPath = mPath.apply {
        addRect(
            mContentRF,
            Path.Direction.CW
        )
        addRoundRect(
            mContentRF,
            mCornerRadius,
            mCornerRadius,
            Path.Direction.CW
        )
        fillType = Path.FillType.EVEN_ODD
    }

    //使用xfermode在图层上进行合成，处理圆角
    mPaint.xfermode = mXfermode
    canvas.drawPath(mPath, mPaint)
    mPaint.utilReset()
    mPath.reset()

    canvas.restore()
}
复制代码

绘制过程是：

1. 开启一个新的图层
2. 将子View绘制上去，做为xfermode合成模式的目标
3. 使用Path构建四个圆角，做为合成模式的源
4. 用DST_OUT(去除目标)模式合成

再来张效果图，以下：

布局中属性值为app:sl_cornerRadius="10dp"

5. 绘制边框

这一步也就简单了，上代码：

override fun dispatchDraw(canvas: Canvas?) {
    ...//略去代码

    //绘制边框
    drawBorder(canvas)
}
复制代码

private fun drawBorder(canvas: Canvas) {
    mBorderRF?.let {
        canvas.save()

        mPaint.strokeWidth = mBorderWidth
        mPaint.style = Paint.Style.STROKE
        mPaint.color = mBorderColor
        canvas.drawRoundRect(it, mCornerRadius, mCornerRadius, mPaint)
        mPaint.utilReset()

        canvas.restore()
    }
}
复制代码

最后的效果图，以下：

布局中属性值为app:sl_borderWidth="2dp"

文末

我的能力有限，若有不正之处欢迎你们批评指出，我会虚心接受并第一时间修改，以不误导你们。

拜读的文章

• 细谈 Android 中的 attributes 属性标志
• Android 自定义 View 1-8 硬件加速

个人其它文章

• 【自定义View】抖音网红文字时钟-上篇
• 【自定义View】洋葱数学同款阴影布局-ShadowLayout
• 【自定义View】洋葱数学同款雷达图深刻解析-RadarView
• 【自定义View】洋葱数学同款Banner的进化-BannerView