### 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的阴影模拟的是灯光打向屏幕,而最明显的就是位于屏幕左上侧和屏幕右下侧,投影方向会不一样的(这里以最明显的视觉效果举例)。
>>>>>>>>>>>
🌟 某些情况下,系统默认的阴影效果有时候不能满足设计需要的阴影效果,这也是比较头疼的地方,我们需要对不同的需求,用不同的方案来实现。