Android kotlin 实现列表item点击事件出现引导(带箭头和描述)功能(RecyclerView+BRVAH3.0.6+androidx)

一、实现效果

二、项目

三、引入依赖

在app的build.gradle在添加以下代码
1、implementation 'com.github.CymChad:BaseRecyclerViewAdapterHelper:3.0.6'，这个里面带的适配器，直接调用就即可

BaseRecyclerViewAdapterHelper简称BRVAH

Android SDK	是否支持BaseRecyclerViewAdapterHelper:3.0.6
android compileSdkVersion 29	是
android compileSdkVersion 30	是
android compileSdkVersion 31	是
android compileSdkVersion 32	是
android compileSdkVersion 33	是

这依赖包还需要得到要添加，在Project的build.gradle在添加以下代码，不添加就不行

allprojects {
    repositories {
        ...
        maven { url "https://jitpack.io" }//加上
    }
}

2、引导：implementation project(path: ':guideview')，下载guideview.zip

四、实现源码

1、引导工具类

GuideViewUtil.kt

package com.example.myapplication3.util

import android.app.Activity
import android.view.View
import com.blog.www.guideview.GuideBuilder

object GuideViewUtil {
    fun showGuideView(
        context: Activity?,
        view: View?,
        desc: String?,
        onDismissCallback: OnDismissCallback
    ) {
        val builder = GuideBuilder()
        builder.setTargetView(view)
            .setAlpha(150)
            .setHighTargetCorner(20)
            .setHighTargetPadding(10)
            .setOverlayTarget(false)
            .setOutsideTouchable(false)
        builder.setOnVisibilityChangedListener(object : GuideBuilder.OnVisibilityChangedListener {
            override fun onShown() {}
            override fun onDismiss() {
                onDismissCallback.onDismiss()
            }
        })
        val mutiComponent = desc?.let { MutiComponent(it) }
        builder.addComponent(mutiComponent)
        val guide = builder.createGuide()
        guide.setShouldCheckLocInWindow(true)
        guide.show(context)
    }

    interface OnDismissCallback {
        fun onDismiss()
    }
}

2、引导视图

MutiComponent.kt

package com.example.myapplication3.util

import android.view.LayoutInflater
import android.view.View
import android.widget.ImageView
import android.widget.LinearLayout
import android.widget.TextView
import com.blog.www.guideview.Component
import com.example.myapplication3.R

class MutiComponent(private val s: String) : Component {
    override fun getView(inflater: LayoutInflater): View {
        val ll = LinearLayout(inflater.context)
        val param = LinearLayout.LayoutParams(
            LinearLayout.LayoutParams.MATCH_PARENT,
            LinearLayout.LayoutParams.WRAP_CONTENT
        )
        ll.orientation = LinearLayout.HORIZONTAL
        ll.layoutParams = param
        val textView = TextView(inflater.context)
        textView.setTextColor(inflater.context.resources.getColor(R.color.white))
        textView.text = s
        textView.textSize = 20f
        val imageView = ImageView(inflater.context)
        imageView.setImageResource(R.mipmap.arrow)
        ll.removeAllViews()
        ll.addView(imageView)
        ll.addView(textView)
        return ll
    }

    override fun getAnchor(): Int {
        return Component.ANCHOR_BOTTOM
    }

    override fun getFitPosition(): Int {
        return Component.FIT_CENTER
    }

    override fun getXOffset(): Int {
        return 0
    }

    override fun getYOffset(): Int {
        return 20
    }
}

3、适配器

RvAdapter.kt

package com.example.myapplication3.adapter

import com.chad.library.adapter.base.BaseQuickAdapter
import com.chad.library.adapter.base.viewholder.BaseViewHolder
import com.example.myapplication3.R
import kotlinx.android.synthetic.main.item.view.*

class RvAdapter(layoutResId: Int = R.layout.item) : BaseQuickAdapter<String, BaseViewHolder>(layoutResId) {

    override fun convert(holder: BaseViewHolder, item: String) {

        if (mCallBack != null) {
            mCallBack!!.convert(holder, holder.layoutPosition);
        }
    }

    //回调
    private var mCallBack: ItemSelectedCallBack? = null

    fun setItemSelectedCallBack(CallBack: ItemSelectedCallBack?) {
        mCallBack = CallBack
    }

    interface ItemSelectedCallBack {
        fun convert(holder: BaseViewHolder?, position: Int)
    }
}

item布局item.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/item_layout"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@drawable/item_bg"
    android:gravity="center">

    <TextView
        android:id="@+id/tv_content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="菜单" />
LinearLayout>

item样式item_bg.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <stroke android:width="1.0px" android:color="@color/line" />

            <gradient android:angle="270.0" android:endColor="#ffe8ecef" android:startColor="#ffe8ecef" />
        shape>
    item>

    <item android:state_focused="true">
        <shape android:shape="rectangle">
            <gradient android:angle="270.0" android:endColor="#ffe8ecef" android:startColor="#ffe8ecef" />

            <stroke android:width="1.0px" android:color="@color/line" />
        shape>
    item>

    <item>
        <shape android:shape="rectangle">
            <gradient android:angle="270.0" android:endColor="#ffffffff" android:startColor="#ffffffff" />

            <stroke android:width="1.0px" android:color="@color/line" />
        shape>
    item>

selector>

4、实现视图

MainActivity.kt

package com.example.myapplication3

import android.os.Bundle
import android.view.View
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.LinearLayoutManager
import com.chad.library.adapter.base.BaseQuickAdapter
import com.chad.library.adapter.base.listener.OnItemClickListener
import com.chad.library.adapter.base.viewholder.BaseViewHolder
import com.example.myapplication3.adapter.RvAdapter
import com.example.myapplication3.util.GuideViewUtil
import kotlinx.android.synthetic.main.activity_main.*
import kotlinx.android.synthetic.main.item.view.*
import java.util.*


class MainActivity : AppCompatActivity(), OnItemClickListener {

    private val mAdapter by lazy {
        RvAdapter().apply {
            setOnItemClickListener(this@MainActivity)
        }
    }

    private val list: MutableList<String> = ArrayList()

    private var s: String? = null
    val item_position = "点击位置了"

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        init()
    }

    private fun init() {
        for (i in 0..29) {
            list.add("菜单$i")
        }
        val layoutManager = LinearLayoutManager(this@MainActivity)
        layoutManager.orientation = LinearLayoutManager.VERTICAL
        recyclerView.layoutManager = layoutManager
        recyclerView.adapter = mAdapter
        recyclerView.isNestedScrollingEnabled = true
        mAdapter.setList(list)

        mAdapter.setItemSelectedCallBack(object : RvAdapter.ItemSelectedCallBack {

            override fun convert(holder: BaseViewHolder?, position: Int) {

                holder!!.itemView.run {
                    tv_content.text = mAdapter.getItem(position)
                }

                if (s != null && s.equals(mAdapter.getItem(position))) {

                    val finalView = holder.itemView
                    finalView.post(Runnable {
                        //先等待页面选中后，在执行 避免高亮View 不显示
                        val task: TimerTask = object : TimerTask() {
                            override fun run() {
                                //需运行主线程中
                                runOnUiThread(Runnable {
                                    GuideViewUtil.showGuideView(this@MainActivity,
                                        finalView,
                                        "$item_position:$position",
                                        object : GuideViewUtil.OnDismissCallback {
                                            override fun onDismiss() {
                                                Toast.makeText(
                                                    this@MainActivity,
                                                    mAdapter.getItem(position),
                                                    Toast.LENGTH_SHORT
                                                ).show()
                                                val layoutManager: LinearLayoutManager = object :
                                                    LinearLayoutManager(this@MainActivity) {
                                                    override fun canScrollVertically(): Boolean {
                                                        return true
                                                    }
                                                }
                                                recyclerView.layoutManager = layoutManager
                                            }
                                        })
                                })
                            }
                        }
                        val timer = Timer()
                        timer.schedule(task, 300)
                        s = null
                    })
                }
            }
        })
    }

    override fun onItemClick(adapter: BaseQuickAdapter<*, *>, view: View, position: Int) {
        val item = mAdapter.getItem(position)
        s = item
        mAdapter.notifyDataSetChanged()
    }
}

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
LinearLayout>