GenjiDialog
基于kotlin的通用dialog
最近忙了好几周，这周末总算花了小半天时间来填一下以前挖的坑。
关于该库的基本功能请往这边走：GenjiDialog
本次更新主要新增了MaskView控件，能够用来做用户引导页的遮罩层，目前支持一个高亮区域，之后如果又需要，则会改良为可显示多个高亮区域。
先配图
如图，这是一个很简单的遮罩+高亮区域，你可以在上面布局任意的提示语或提示图
用法如下
newGenjiDialog {
layoutId = R.layout.dialog_mask
dimAmount = 0f
isFullHorizontal = true
isFullVerticalOverStatusBar = true
gravity = DialogGravity.CENTER_CENTER
animStyle = R.style.AlphaEnterExitAnimation
convertListenerFun { holder, dialog ->
holder.getView(R.id.maskView)?.apply {
this.highlightArea = HighlightArea(RectF(
this@MaskViewActivity.btn.left.toFloat(),
this@MaskViewActivity.btn.top.toFloat(),
this@MaskViewActivity.btn.right.toFloat(),
this@MaskViewActivity.btn.bottom.toFloat()))
}
}
}.showOnWindow(supportFragmentManager)
复制代码 其实就是设置高亮区域的位置以及宽高而已，源码也很简单。
源码
class MaskView : View {
private var paint: Paint = Paint(Paint.ANTI_ALIAS_FLAG)
//MaskView的实际宽高
private var trueWidth = 0
private var trueHeight = 0
//高亮区域类型
private var highlightAreaType = HighlightAreaType.TRANSPARENT_CUBE
//高亮区域属性
var highlightArea = HighlightArea()
set(value) {
field = value
invalidate()
}
//高亮区域需要绘制的bitmap
var highlightBitmap: Bitmap? = null
set(value) {
field = value
highlightAreaType = HighlightAreaType.BITMAP
invalidate()
}
//遮罩的透明度，0-1
var maskAlpha = 0.5f
set(value) {
field = value
invalidate()
}
//背景色，固定透明，防止与遮罩层颜色冲突
private var bgColor = Color.TRANSPARENT
//整个view的rect
private val viewFullRect = Rect()
//混合模式
private val xfermode = PorterDuffXfermode(PorterDuff.Mode.DST_OUT)
constructor(context: Context) : super(context)
constructor(context: Context, attrs: AttributeSet?) : super(context, attrs) {
// 加载自定义属性集合
val a = context.obtainStyledAttributes(attrs, R.styleable.MaskView)
highlightAreaType = when (a.getInt(R.styleable.MaskView_mask_highlightAreaType, HighlightAreaType.TRANSPARENT_CUBE.value)) {
0 -> HighlightAreaType.TRANSPARENT_CUBE
1 -> HighlightAreaType.BITMAP
else -> HighlightAreaType.TRANSPARENT_CUBE
}
highlightArea.areaRect.set(
a.getDimension(R.styleable.MaskView_mask_highlightAreaLeft, 0f),
a.getDimension(R.styleable.MaskView_mask_highlightAreaTop, 0f),
a.getDimension(R.styleable.MaskView_mask_highlightAreaRight, 0f),
a.getDimension(R.styleable.MaskView_mask_highlightAreaBottom, 0f)
)
val radius = a.getDimension(R.styleable.MaskView_mask_highlightAreaRadius, 0f)
highlightArea.radiusX = radius
highlightArea.radiusY = radius
a.getResourceId(R.styleable.MaskView_mask_highlightBitmap, 0).apply {
if (this != 0) {
highlightBitmap = BitmapFactory.decodeResource(resources, this)
}
}
maskAlpha = a.getFloat(R.styleable.MaskView_mask_Alpha, 0.5f)
a.recycle()
}
override fun onDraw(canvas: Canvas) {
//设置背景色-默认透明，防止底色是黑色
setBackgroundColor(bgColor)
//开始离屏渲染
val saved = canvas.saveLayer(
viewFullRect.left.toFloat(),
viewFullRect.top.toFloat(),
viewFullRect.right.toFloat(),
viewFullRect.bottom.toFloat(), paint)
//设置画笔颜色-遮罩颜色
paint.color = Color.argb((255 * maskAlpha).toInt(), 0, 0, 0)
//在屏幕外绘制遮罩
canvas.drawRect(viewFullRect, paint)
//设置镂空的颜色-实际上可随意设置颜色
paint.color = Color.WHITE
//设置图像混合模式，这里设置的是将新图像与旧图像所重合的位置镂空
paint.xfermode = xfermode
//在屏幕外绘制需要镂空的位置
canvas.drawRoundRect(highlightArea.areaRect, highlightArea.radiusX, highlightArea.radiusY, paint)
//关闭混合
paint.xfermode = null
//结束离屏渲染
canvas.restoreToCount(saved)
//如果需要在镂空位置绘制bitmap
if (highlightAreaType == HighlightAreaType.BITMAP) {
highlightBitmap?.let {
canvas.drawBitmap(
it,
viewFullRect, highlightArea.areaRect, paint)
}
}
}
override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
super.onLayout(changed, left, top, right, bottom)
trueWidth = right - left
trueHeight = bottom - top
//设置遮罩层-大小为该 MaskView 在页面上的实际大小
viewFullRect.set(0, 0, trueWidth, trueHeight)
}
}
复制代码本文主要简单的介绍GenjiDialog库的新功能，所以篇幅不长，第一次了解GenjiDialog的朋友可以先看看第一篇文章：GenjiDialog 了解其使用方法。
当然也欢迎大家到github为该库点上一个star支持一下，谢谢！