日期:
来源:刘望舒收集编辑:点击蓝字关注☞
大家好,我是皇叔,最近开了一个安卓进阶涨薪训练营,可以帮助大家突破技术&职场瓶颈,从而度过难关,进入心仪的公司。
详情见文章:没错!皇叔开了个训练营
作者:newki
https://juejin.cn/post/7149706291261210654
1.Android阴影绘制的几种方式
<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>
mMaskRadius:扩散的半径 BlurMaskFilter.Blur.NORMAL:整个图像都被模糊掉 BlurMaskFilter.Blur.SOLID:图像边界外产生一层与图像颜色一致阴影效果 BlurMaskFilter.Blur.OUTER:图像边界外产生一层阴影,并且将图像变成透明效果 BlurMaskFilter.Blur.INNER:在图像内部边沿产生模糊效果
2. 自定义圆角ViewGroup中加入阴影
<!-- 是否绘制圆形 -->
<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)
}
}
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)
}
}
}
}
}
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
}
总结
自定义的效果并不只限于这种圆角的容器,其实只要掌握了这样的思路,我们可以用于其他的自有的一些自定义View中。
https://gitee.com/newki123456/RoundCircleLayout
implementation "com.gitee.newki123456:round_circle_layout:1.0.1"
为了防止失联,欢迎关注我防备的小号
微信改了推送机制,真爱请星标本公号