【CustomView】Android阴影的实现方式(ShadowLayer)

   日期:2020-11-10     浏览:140    评论:0    
核心提示:### android系统默认的阴影,对于阴影详细的说明,请参阅:3D 空间中的对象1. 系统默认的阴影2. .9-patch文件,这也是比较方便的实现方式3. 使用layer-list实现阴影4. 使用setShadowLayer()实现阴影

### android系统默认的阴影,对于阴影详细的说明,请参阅: 3D 空间中的对象

如果系统默认的阴影不满足设计的效果,我们需要手动实现:

大致有以下几种方式:

1. 系统默认的阴影:

android:elevation="2dp"  // 给View设置高度

简单,样式系统自带,但不能设置阴影方向和颜色

 

2. .9-patch文件,这也是比较方便的实现方式:

相对简单,可以由设计提供,整个应用中可以和设计稿完美契合

 

3. 使用layer-list实现阴影:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:left="0dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/shadow_color_shadow" />
            <corners android:radius="@dimen/dp_35" />
        </shape>
    </item>

    <item
        android:bottom="@dimen/dp_2"
        android:right="@dimen/dp_2">
        <shape android:shape="rectangle">
            <solid android:color="@color/shadow_color_shadow" />
            <corners android:radius="@dimen/dp_35" />
        </shape>
    </item>

    <item
        android:bottom="@dimen/dp_3"
        android:right="@dimen/dp_3">
        <shape android:shape="rectangle">
            <corners android:radius="@dimen/dp_35" />
            <solid android:color="@color/primary_purple" />
        </shape>
    </item>
</layer-list>

对于阴影的准确效果有点差强人意吧,毕竟是由一层一层堆叠起来的

 

4. 使用setShadowLayer()实现阴影:(也是这篇最主要写的)

setLayerType(LAYER_TYPE_SOFTWARE, null) // 在运行时为单个视图禁用硬件加速

paint.setShadowLayer(
            innerShadowBlur,
            innerShadowX,
            innerShadowY,
            resources.getColor(R.color.bg_shadows_color)
        )

canvas.drawRoundRect(
            frame,
            innerCornerRadius,
            innerCornerRadius,
            paint
        )

完全自定义,可以根据View自身的需求来设置阴影的颜色和形状,实现起来比较耗时且对单独的View在运行时阶段禁用硬件加速

*** 以上是主要的方法,这里贴上示例代码,自定义ShadowLayerTextView实现阴影效果:

class ShadowLayerTextView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = -1
) : androidx.appcompat.widget.AppCompatTextView(context, attrs, defStyleAttr) {

    private val innerShadowX: Float
    private val innerShadowY: Float
    private val innerShadowBlur: Float
    private val innerCornerRadius: Float

    private val innerPaddingX: Float
    private val innerPaddingY: Float

    private val paint by lazy {
        Paint().apply {
            style = Paint.Style.FILL
            strokeCap = Paint.Cap.ROUND
            isAntiAlias = true
        }
    }

    private val frame by lazy {
        RectF(0f, 0f, 0f, 0f)
    }

    init {
        setLayerType(LAYER_TYPE_SOFTWARE, null) // 在运行时为单个视图禁用硬件加速

        val attributes = context.obtainStyledAttributes(attrs, R.styleable.ShadowLayerView, 0, 0)
        val innerBackgroundColor = attributes.getResourceId(
            R.styleable.ShadowLayerView_innerBackgroundColor,
            R.color.colorPrimary
        )
        innerCornerRadius = attributes.getDimension(
            R.styleable.ShadowLayerView_innerCornerRadius,
            30.toDp()
        )
        innerShadowX = attributes.getDimension(
            R.styleable.ShadowLayerView_innerShadowX,
            2.toDp()
        )
        innerShadowY = attributes.getDimension(
            R.styleable.ShadowLayerView_innerShadowY,
            2.toDp()
        )
        innerShadowBlur = attributes.getDimension(
            R.styleable.ShadowLayerView_innerShadowBlur,
            4.toDp()
        )
        attributes.recycle()

        setInnerBackgroundColor(innerBackgroundColor)

        // 因为有额外的阴影,会影响居中的效果
        innerPaddingX = innerShadowX * 2
        innerPaddingY = innerShadowY * 2
        setPadding(
            paddingLeft + innerPaddingX.toInt(),
            paddingTop,
            paddingRight,
            paddingBottom + innerPaddingY.toInt()
        )
    }

    private fun setInnerBackgroundColor(color: Int) {
        paint.setShadowLayer(
            innerShadowBlur,
            innerShadowX,
            innerShadowY,
            if (color == R.color.transparent) {
                resources.getColor(R.color.transparent)
            } else {
                resources.getColor(R.color.bg_shadows_color)
            }
        )
        paint.color = resources.getColor(color)

        paint.setShadowLayer(
            innerShadowBlur,
            innerShadowX,
            innerShadowY,
            resources.getColor(R.color.bg_shadows_color)
        )
    }

    override fun onDraw(canvas: Canvas) {
        frame.right = canvas.width - innerPaddingX
        frame.bottom = canvas.height - innerPaddingY
        canvas.drawRoundRect(
            frame,
            innerCornerRadius,
            innerCornerRadius,
            paint
        )//需要在绘制TextView之前绘制阴影
        super.onDraw(canvas)
    }
}

 R.styleable.ShadowLayerView 文件:(ShadowLayerView.xml)

<?xml version="1.0" encoding="utf-8"?>

<resources>

    <color name="bg_shadows_color">#331e051f</color>  // View阴影颜色

    <declare-styleable name="ShadowLayerView">
        <attr name="innerBackgroundColor" format="color" />  // View背景色
        <attr name="innerCornerRadius" format="dimension" /> // View圆角
        <attr name="innerShadowX" format="dimension" />      // View阴影的X偏移量 
        <attr name="innerShadowY" format="dimension" />      // View阴影的Y偏移量 
        <attr name="innerShadowBlur" format="dimension" />   // View阴影模糊半径 
    </declare-styleable>

示例使用:

<com.finn.materialcomponents.view.ShadowLayerTextView
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:textColor="@color/colorWhite"
        android:textSize="16sp"
        android:gravity="center"
        android:layout_marginTop="34dp"
        android:layout_marginStart="50dp"
        android:paddingHorizontal="30dp"
        android:text="show shadow"
        app:innerBackgroundColor="@color/colorPrimary"
        app:innerCornerRadius="8dp"
        app:innerShadowX="2dp"
        app:innerShadowBlur="4dp"
        />

 阴影效果:

 

cc:关于阴影投影的方向也是比较有意思,因为Android的阴影模拟的是灯光打向屏幕,而最明显的就是位于屏幕左上侧和屏幕右下侧,投影方向会不一样的(这里以最明显的视觉显示)。

 

就是系统默认的阴影效果有时候不能满足设计需要的阴影效果可能,比较头疼的地方,对于不同的需求,用不同的方案来实现。

 

 

 
打赏
 本文转载自:网络 
所有权利归属于原作者,如文章来源标示错误或侵犯了您的权利请联系微信13520258486
更多>最近资讯中心
更多>最新资讯中心
0相关评论

推荐图文
推荐资讯中心
点击排行
最新信息
新手指南
采购商服务
供应商服务
交易安全
关注我们
手机网站:
新浪微博:
微信关注:

13520258486

周一至周五 9:00-18:00
(其他时间联系在线客服)

24小时在线客服