目錄

• 概述
• • 指引需求分析
  • • 入門級指引
    • 升級版指引
    • 指引需求的抽象
  • 指引的技術實現
  • • 指引的要素：Shape
    • 封裝指引步驟：GuideInfo
    • 繪制指引要素：GuideView
    • 管理指引：GuideManager
    • 承載GuideView的載體：GuideDialog
    • 接入項目
  • 關鍵技術點
  • • 定位高亮區域
    • 繪制高亮的View區域
    • 高亮區域點擊事件
  • 優缺點
  • 項目地址
  • 總結

概述

前幾周app改版，在修改老代碼的過程中發現了一個指引，讓我想起很久以前項目里指引實現是在布局文件中添加布局，并在代碼中插入很多非業務的代碼，這樣寫感覺不好。指引本只是一個不太重要，可能經常變動的功能，說不定下個版本又改了，當它和正常業務耦合在一起以后，就顯得代碼有點混亂了。有沒有一種方法，可以無縫嵌入，將指引和正常業務徹底解耦？前幾天早晨，幾個公眾號都發了同樣一篇博客來摳個圖吧~——更優雅的Android UI界面控件高亮的實現，看到這篇博客的時候有種醍醐灌頂的感覺，這不正是我想要的指引嗎？看完博客中的實現原理后，決定動手重復造一個輪子，本文簡單分析一下這個輪子是如何實現的，并分析了一下優缺點。下面先看個效果：

指引需求分析

不談技術實現，首先分析一下指引這個需求本身。

入門級指引

入門級的指引，就是最簡單的指引，在app安裝新版本或者覆蓋安裝新版本后第一時間彈出來幾張圖片。為了突出某些功能，會高亮顯示一些內容，同時還有一些指示性的箭頭，或者在高亮旁邊有文本描述。

升級版指引

升級版指引，在用戶第一次進入到個頁面的時候，告訴用戶哪幾個按鈕有是做什么的。指引內容和入門級的差不多，高亮顯示View，箭頭、文本描述，點擊高亮View后跑到下一步指引直到指引結束。

指引需求的抽象

簡單指引一般由UI切圖就好，這里以app內部的指引需求分析指引，如圖（圖片是隨便找的），指引一般包括以下內容：

滿屏幕的半透明遮罩層；

高亮顯示突出顯示底層app頁面的某個或者某些View；

在高亮顯示的View旁邊可能有一些帶文本的圖片，或者指示方向的圖片+文本；

高亮部分可以響應點擊事件，并且很有可能點擊后繼續顯示下一步指引，直到顯示完。

指引的技術實現

分析了指引的需求后，得到指引的基本元素，決定用自定義View實現，命名這個自定義View為GuideView。實現整個指引流程如下：
1.定義指引繪制要素Shape，及其派生類：Rectangle、Oval、BitmapDecoration、TextDecoration；
2.定義每一步指引的信息GuideInfo，并獲取高亮區域的坐標矩形；
3.定義GuideView繼承View，繪制指引要素：Shape；
4.定義GuideManager，管理多步驟指引；
5.定義GuideDialog承載GuideView，覆蓋在頁面上，和GuideManager

指引的要素：Shape

指引的基本要素包括：高亮顯示的View區域，圖片，文本等飾品。定義個接口，命名為Shape，那么Shape有子類：高亮的矩形(Rectangle)，高亮的圓形(Oval)，圖片(BitmapDecoration)，文本(TextDecoration)。指引要素實現代碼如下：

interface Shape {fun draw(canvas: Canvas, paint: Paint) }class Oval(private val rect: RectF) : Shape {override fun draw(canvas: Canvas, paint: Paint) {canvas.drawOval(rect, paint)} }class Rectangle(private val rect: RectF,private val xRadius: Float = 0F,private val yRadius: Float = 0F ) : Shape {override fun draw(canvas: Canvas, paint: Paint) {canvas.drawRoundRect(rect, xRadius, yRadius, paint)} } class BitmapDecoration(private val bitmap: Bitmap,private val left: Float,private val top: Float ) : Shape {override fun draw(canvas: Canvas, paint: Paint) {canvas.drawBitmap(bitmap, left, top, paint)} } class TextDecoration(protected val text: String, // 要繪制的文本protected val textSize: Float, // 字體大小protected val textColor: Int, // 字體顏色protected val startX: Float, // x軸起點(left)protected val startY: Float, // y軸七點(top)protected val bold: Boolean = false // 粗體 ) : Shape {override fun draw(canvas: Canvas, paint: Paint) {paint.color = textColorpaint.textSize = textSizepaint.typeface = if (bold) {Typeface.create(Typeface.SANS_SERIF, Typeface.BOLD)} else {Typeface.DEFAULT_BOLD}canvas.drawText(text, startX, startY, paint)} }

封裝指引步驟：GuideInfo

上面介紹了指引要素Shape，接下來需要繼續完成指引要素的封裝，命名為GuideInfo。GuideInfo封裝了一個指引頁面(或者說一幀)包含的所有顯示要素，也就是多個Shape，包括：高亮的View區域，圖片，文本等。GuideView顯示指引，也就是把一個GuideInfo對象的Shape繪制出來。

class GuideInfo(private val targetView: View, // 高亮顯示的，要指引的Viewval padding: Int = 0, // 高亮區域的padding(如果要顯示大一些時可設置padding)val isOval: Boolean = false, // 高亮區域是否時圓形val radius: Float = 0F, // 如果時矩形，那么可以設置圓角private val paddingLeft: Int = 0, // 四個方向的paddingprivate val paddingTop: Int = 0,private val paddingRight: Int = 0,private val paddingBottom: Int = 0,autoShape: Boolean = false // 是否使用自定義的高亮區域，true: 自動根據View的Background獲取Shape ) {val mShapes = mutableListOf<Shape>()var mTargetHighlightShape: Shape? = null // 這就是高亮顯示的地方val targetBound: RectF // 高亮View的矩形區域，可根據這個矩形設置其它Shape的位置 }

一個GuideInfo對象代表一個指引步驟（一幀），一個完整的指引，可能包含多個步指引

繪制指引要素：GuideView

繪制指引的大概流程如下：

繪制一個半透明遮罩層；

繪制高亮顯示的View區域；

繪制其它裝飾，如圖片，文本等。

代碼如下：

class GuideView : View, View.OnTouchListener, GestureDetector.OnGestureListener {/*** 當點擊了高亮區域時響應*/interface OnClickListener {fun onClick()}private val location = IntArray(2)private var initLocation = falseprivate val mPaint = Paint()private var mGuideInfo: GuideInfo? = nullprivate var background: Int = 0private lateinit var mGestureDetector: GestureDetectorvar mOnClickListener: OnClickListener? = nullprivate fun initView(attrs: AttributeSet) {background = getColor(context, R.color.translucent)val typedArray: TypedArray = context.obtainStyledAttributes(attrs, R.styleable.GuideView)background = typedArray.getColor(R.styleable.GuideView_background_translucent, background)typedArray.recycle()mPaint.isAntiAlias = truesetOnTouchListener(this)mGestureDetector = GestureDetector(context, this)}constructor(context: Context) : super(context)constructor(context: Context, attrs: AttributeSet) : super(context, attrs) {initView(attrs)}constructor(context: Context, attrs: AttributeSet, defStyleAttr: Int) : super(context, attrs, defStyleAttr) {initView(attrs)}override fun onDraw(canvas: Canvas) {super.onDraw(canvas)if(!initLocation) {getLocationOnScreen(location)initLocation = true}drawBackGround(canvas)drawShapes(canvas)}override fun onTouch(v: View?, event: MotionEvent?): Boolean {if (v != this || event == null || mGuideInfo == null) {return false}return mGestureDetector.onTouchEvent(event)}override fun onShowPress(e: MotionEvent?) {}override fun onSingleTapUp(event: MotionEvent?): Boolean {if (event == null || mGuideInfo == null) {return false}if (mGuideInfo!!.targetBound.contains(location[0] + event.x,location[1] + event.y)) {mOnClickListener?.onClick()return true}return false}override fun onDown(e: MotionEvent?): Boolean {return true}override fun onFling(e1: MotionEvent?,e2: MotionEvent?,velocityX: Float,velocityY: Float): Boolean {return false}override fun onScroll(e1: MotionEvent?,e2: MotionEvent?,distanceX: Float,distanceY: Float): Boolean {return false}override fun onLongPress(e: MotionEvent?) {}fun showGuide(guideStep: GuideInfo) {this.mGuideInfo = guideSteppostInvalidate()}private fun drawBackGround(canvas: Canvas) {mPaint.xfermode = nullmPaint.color = backgroundcanvas.drawRect(0F, 0F, width.toFloat(), height.toFloat(), mPaint)}private fun drawShapes(canvas: Canvas) {if (mGuideInfo == null) {return}// 先轉換一下坐標，這樣繪制得到的和底層目標View區域重疊canvas.translate(-location[0].toFloat(), -location[1].toFloat())// 1.先繪制要摳圖的部分，也就是高亮的區域mPaint.xfermode = PorterDuffXfermode(PorterDuff.Mode.DST_OUT)mGuideInfo?.mTargetHighlightShape?.draw(canvas, mPaint)// 2.再繪制其它的箭頭，文本等指示性的ShapemPaint.xfermode = nullmGuideInfo?.mShapes?.forEach {it.draw(canvas, mPaint)}}}

管理指引：GuideManager

一個GuideInfo代表一幀指引，一個完整的指引可能會包含多幀，所以，指引流程需要定義一個管理類GuideManager，作為中間層，上對接用戶，下對接GuideDialog，比較簡單，就是定義了一個GuideInfo數組和一個指向當前步驟的指針，還定義了一些回調，直接貼代碼吧：

interface GuideListener {fun onNextStep(step: Int)fun onCompleted() }class GuideManager(activity: Activity) :GuideDialog.OnNextStepListener {private val mGuideSteps = mutableListOf<GuideInfo>()private var currentStep = -1val mGuideDialog: GuideDialog =GuideDialog(activity)var mGuideListener: GuideListener? = nullvar showGuideButton = falseinit {mGuideDialog.mOnNextStepListener = thisif (!showGuideButton) {mGuideDialog.btnPreStep.visibility = View.GONEmGuideDialog.btnNextStep.visibility = View.GONE}}fun addGuideStep(guideInfo: GuideInfo) {mGuideSteps.add(guideInfo)}fun guideStepCount(): Int {return mGuideSteps.size}fun show() {mGuideDialog.show()onNextStep()}override fun onNextStep() {if (currentStep >= mGuideSteps.size - 1) {mGuideDialog.dismiss()mGuideListener?.onCompleted()return}currentStep++val guideStep: GuideInfo = mGuideSteps[currentStep]mGuideDialog.guideView.showGuide(guideStep)if (currentStep > 0 && showGuideButton) {mGuideDialog.btnPreStep.visibility = View.VISIBLE}updateNextText()}override fun onPreStep() {if (currentStep == 0) {return}currentStep -= 1val guideStep: GuideInfo = mGuideSteps[currentStep]mGuideDialog.guideView.showGuide(guideStep)if (currentStep == 0 && showGuideButton) {mGuideDialog.btnPreStep.visibility = View.GONE}updateNextText()}private fun updateNextText() {if (currentStep == mGuideSteps.size - 1) {mGuideDialog.btnNextStep.setText(R.string.end)} else {mGuideDialog.btnNextStep.setText(R.string.next_step)}mGuideListener?.onNextStep(currentStep)} }

承載GuideView的載體：GuideDialog

這個就更簡單了，直接看代碼：

class GuideDialog : BaseDialog, View.OnClickListener,GuideView.OnClickListener {var mOnNextStepListener: OnNextStepListener? = nullconstructor(context: Context): super(context, R.style.DialogFullScreenTranslucent){setContentView(R.layout.dialog_guide)btnNextStep.setOnClickListener(this)btnPreStep.setOnClickListener(this)guideView.mOnClickListener = this}override fun onClick(view: View) {if (view.id == R.id.btnNextStep) {mOnNextStepListener?.onNextStep()} else if (view.id == R.id.btnPreStep) {mOnNextStepListener?.onPreStep()}}interface OnNextStepListener {fun onNextStep()fun onPreStep()}override fun onClick() {mOnNextStepListener?.onNextStep()} }

接入項目

這里舉個栗子，自己再封裝一下，就算是一行代碼接入，代碼中的imgLogo，imgLogo2，tvName分別是頁面上的ImageView和TextView：

fun showGuide(context: Activity) {GuideManager(context).apply {addGuideStep(GuideInfo(imgLogo, isOval = true).apply {val textShape = TextDecoration("這是圓形高亮區域，點擊高亮進入下一步",sp2px(context, 12F).toFloat(),ContextCompat.getColor(context, R.color.white),targetBound.right + dip2px(context, 8F), targetBound.centerY())addShape(textShape)})addGuideStep(GuideInfo(imgLogo2, radius = 16F).apply {val textShape = TextDecoration("這是圓角矩形高亮區域，點擊高亮繼續進入下一步",sp2px(context, 12F).toFloat(),ContextCompat.getColor(context, R.color.white),targetBound.left, targetBound.bottom + dip2px(context, 24F))addShape(textShape)})addGuideStep(GuideInfo(tvName, padding = 20).apply {val bitmap = BitmapFactory.decodeResource(resources, R.mipmap.ic_add_location_white_48dp)val bitmapShape =BitmapDecoration(bitmap,targetBound.left,targetBound.top - dip2px(context, 45F))addShape(bitmapShape)val textShape = TextDecoration("點擊高亮結束指引",sp2px(context, 14F).toFloat(),ContextCompat.getColor(context, R.color.white),targetBound.centerX(),targetBound.bottom + dip2px(context, 32F))addShape(textShape)})mGuideListener = object: GuideListener {override fun onNextStep(step: Int) {Toast.makeText(context, "當前步驟：${step + 1}", Toast.LENGTH_SHORT).show()}override fun onCompleted() {tvShowGuide.visibility = View.VISIBLE}}// 如果要顯示“上一步”，“下一步”，可以設置GuideManager中的mGuideDialog，}.show() }

關鍵技術點

定位高亮區域

通過View#getLocationOnScreen()方法可以獲得目標View左上角頂點的屏幕坐標，已知目標View的寬高，然后可以得到高亮View的矩形（劃重點：是屏幕坐標，后面繪制需要根據GuideView左上角坐標做一次變換，這樣繪制出來剛好和目標View重疊）：

fun targetViewRectF(): RectF {val location = IntArray(2)targetView.getLocationOnScreen(location)val rectF = RectF(location[0].toFloat(),location[1].toFloat(),location[0].toFloat() + targetView.width,location[1].toFloat() + targetView.height)return rectF}

繪制高亮的View區域

如代碼所示，繪制高亮View實際是從半透明背景中把目標View的區域摳出來，這樣底層View就能正常顯示，對比半透明層就是高亮效果了。關鍵點一，繪制完半透明背景后，需要轉換一次坐標，xy就是GuideView左上角頂點坐標；關鍵點二，mPaint.xfermode = PorterDuffXfermode(PorterDuff.Mode.DST_OUT)，有興趣可以深入學習一下，這里不解析(自己不懂，就不要忽悠別人)。

private fun drawShapes(canvas: Canvas) {if (mGuideInfo == null) {return}// 轉換一下坐標，這樣繪制得到的和底層目標View區域重疊canvas.translate(-location[0].toFloat(), -location[1].toFloat())// 1.先繪制要摳圖的部分，也就是高亮的區域mPaint.xfermode = PorterDuffXfermode(PorterDuff.Mode.DST_OUT)mGuideInfo?.mTargetHighlightShape?.draw(canvas, mPaint)// 2.再繪制其它的箭頭，文本等指示性的ShapemPaint.xfermode = nullmGuideInfo?.mShapes?.forEach {it.draw(canvas, mPaint)}}

高亮區域點擊事件

上面已經得到了高亮View的矩形區域RectF，只要監聽onTouch，判斷事件是否落在這個矩形內即可。通過GestureDetector接管onTouch事件，可以輕松實現高亮View區域的點擊事件。
至此，指引繪制部分，GuideView基本就這么點代碼，就OK了。

override fun onTouch(v: View?, event: MotionEvent?): Boolean {if (v != this || event == null || mGuideInfo == null) {return false}return mGestureDetector.onTouchEvent(event)}override fun onSingleTapUp(event: MotionEvent?): Boolean {if (event == null || mGuideInfo == null) {return false}if (mGuideInfo!!.targetBound.contains(event.rawX, event.rawY)) {mOnClickListener?.onClick()return true}return false}

優缺點

優點：

• 封裝了指引的數據結構，支持擴展，清晰易懂；
• 流式構建流程，清晰優雅，簡潔卻不簡單，可以實現復雜的指引；
• 對現有的代碼無侵入性，封裝后，可以做到一行代碼接入指引；
• 無反射等影響性能的代碼，對性能無任何影響，同一個頁面的多個指引在一個Dialog中繪制，不會有切換感；
• 支持高亮View的點擊事件

缺點：

• 每幀指引，只有一個高亮的View，目前還不能顯示多個高亮的View；
• 給指引添加圖片時，需要找準位置，文本目前還不支持換行，也不支持方向(如果確實需要，可繼承TextDecoration，實現onDraw()，或者實現接口Shape重新定義一個新的TextDecoration)，再或者直接讓UI設計師給tu，用BitmapDecoration代替；
• 高亮的View未能自動識別形狀和屬性，需要根據View來設置屬性(雖然這些是已知的，沒太大問題，但是如果能夠自動識別確實可以再簡化代碼)

項目地址

代碼不多，三五百行，核心的就那么幾十行，下面附上項目githug地址：
GuideView

總結

• 一行代碼接入指引，無代碼侵入，無性能損耗；
• 借助kotlin的apply函數流式構建指引流程，簡介明了；
• 以屏幕坐標為參考，準確定位高亮View的矩形區域；
• 在構建流程中動態添加Bitmap和文本，可以實現復雜指引；
• 實現了高亮區域點擊事件，可以監聽并完成額外的需求；
• 不足之處在于未能根據View自動識別高亮區域，隨無大礙，但有待優化。

最后特別感謝來摳個圖吧~——更優雅的Android UI界面控件高亮的實現的作者，如果沒有他的思路我也難以實現這個指引小項目，也就沒有本文。

總結

以上是生活随笔為你收集整理的一行代码实现Android App指引的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。