Android用户新手引导层

在用户第一次使用某些功能的时候，需要引导用户点击某些新功能，需要做一个新用户引导层，这里 我做了一个demo来实现该功能。

效果如下：

核心思路就是，获取需要引导的view，获取在屏幕中的位置，然后传给一个主题透明的activity，在这个activity中绘制一个透明的矩形框，用来展示下层view。

MainActivity跳转代码：

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        var menuView = findViewById<TextView>(R.id.tv_menu)

        menuView.post {
            enterMenuGuideAct(menuView)
        }
    }

    private fun enterMenuGuideAct(menuView: View) {
        val intent = Intent(this, NewUserGuideActivity::class.java)
        val location = IntArray(2)
        val rectPadding = 20
        menuView.getLocationInWindow(location)
        val rect = IntArray(4)
        rect[0] = location[0] - rectPadding
        rect[1] = location[1] - 130 - rectPadding
        rect[2] = location[0] + menuView.width + rectPadding
        rect[3] = location[1] + menuView.height - 130 + rectPadding
        intent.putExtra("rect", rect)
        startActivity(intent)
    }
}

新手引导透明activity，NewUserGuideActivity，这个activity的theme需要做成透明。

class NewUserGuideActivity : AppCompatActivity() {
    var rect: IntArray?= null
    private var newUserGuideView: NewUserGuideView? = null
    var clTip: ConstraintLayout?= null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_new_user_guide)

        newUserGuideView = findViewById(R.id.view_newuser_guide)
        clTip = findViewById(R.id.cl_tip)

        rect = intent.getIntArrayExtra("rect")
        setShowTipView(clTip!!)

        newUserGuideView?.setOnRectClickListener { finish() }
    }

    private fun setShowTipView(container: View) {
        with(container) {
            visibility = View.VISIBLE
            rect?.let {
                newUserGuideView?.setRectLocation(it)
                val layoutParams = layoutParams as ConstraintLayout.LayoutParams
                layoutParams.topMargin = it[3] + 30
                this.layoutParams = layoutParams
            }
        }
    }
}

新手引导蒙层view：

class NewUserGuideView@JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
    ) : FrameLayout(context, attrs, defStyleAttr) {
    private lateinit var rect: IntArray
    private var listener: OnClickListener?= null

    init {
        setBackgroundColor(resources.getColor(R.color.black_60))
    }

    fun setRectLocation(rect: IntArray) {
        this.rect = rect
        addView()
        invalidate()
    }

    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)

        //掏空一个矩形
        val paintarc = Paint(Paint.ANTI_ALIAS_FLAG)
        val porterDuffXfermode = PorterDuffXfermode(PorterDuff.Mode.CLEAR)
        paintarc.xfermode = porterDuffXfermode
        paintarc.isAntiAlias = true
        val rectF = RectF(rect[0].toFloat(), rect[1].toFloat(), rect[2].toFloat(), rect[3].toFloat())
        canvas?.drawRoundRect(rectF, 20f, 20f, paintarc)
    }

    private fun addView() {
        var rectView = View(context)
        addView(rectView)
        var layoutParams = rectView.layoutParams as LayoutParams
        layoutParams.leftMargin = rect[0]
        layoutParams.topMargin = rect[1]
        layoutParams.height = rect[3] - rect[1]
        layoutParams.width = rect[2] - rect[0]

        rectView.setOnClickListener {
            listener?.onClick(rectView)
        }
    }

    fun setOnRectClickListener(onClickListener: OnClickListener) {
        this.listener = onClickListener
    }
}

这里绘制蒙层的view要有一个点击事件，点击透明框就要退出该引导actiivty。