Android中的TooltipPopupWord

在本文中，在Android中添加了ToolTipopupWord。基本上，这是一个弹出窗口，当长按单词或某些文本或将鼠标悬停在其上时会出现。任何消息都可以添加到单词中，以向用户提供更多详细信息。此弹出窗口是非常可定制的。当应用程序使用图标表示动作或一条信息以节省布局中的空间时，此功能很有用。如果必须创建一个Book Reading应用程序，并且开发人员希望，如果用户点击某个单词，它将向用户显示有关所选单词的简短描述，则可以使用此视图。同样，工具提示可用于查看有关单词的简短信息，但无法向其添加自定义布局，并且用户必须长按屏幕以显示工具提示，这可能会激怒用户。这是TooltipPopupWord的默认布局的样子。

好处：

• 可以从文本中选择任何单词。
• 显示基于所选单词的PopupWindow。
• 可以自定义布局的各种功能，如文本大小，字体，颜色，背景和对齐方式
• 可以自定义ToolPopupWindows和Arrow。

方法：

步骤1：在根build.gradle文件(而不是模块build.gradle文件)中添加支持库。这个库jitpack是一个新颖的软件包存储库。它是为JVM设计的，因此github和bigbucket中存在的任何库都可以直接在应用程序中使用。

XML

allprojects {           
 repositories {           
        maven { url 'https://jitpack.io' }           
     }          
}

步骤2：在build.gradle文件中添加支持库，并在“依赖项”部分中添加依赖项。它允许开发人员直接在XML文件中添加ToolTipopupWord。

XML格式

dependencies {           
  implementation 'com.github.EusebiuCandrea:ToolTipPopupWordTV:1.0.1'          
}          

步骤3：在activity_main.xml文件中添加以下代码。在此文件中，两个textviews和TooltipPopupWord视图被添加到布局中。

步骤4：在custom_layout.xml文件中添加以下代码。在此文件中，为custom_layout_tooltip设计一个布局，以便每当用户点击任何单词时都会出现此布局。

步骤5：在MainActivity.kt文件中添加以下代码。在此文件中，将侦听器添加到两个工具提示中，以便每当用户点击这些单词时，这些侦听器都会自动被调用。一个工具箱的布局是默认布局，而另一个则使用custom_layout。还要在ToolKit中添加各种属性，例如文本颜色，背景颜色，持续时间等。

MainActivity.kt

package org.geeksforgeeks.tooltippopupword          
  
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.TextView
import android.widget.Toast
import androidx.core.content.ContextCompat
import com.ecandrea.library.tooltipopwordtv
               .listeners.SelectableWordListeners
import com.ecandrea.library.tooltipopwordtv
               .tooltipopupWindows.ArrowCustomizer
import com.ecandrea.library.tooltipopwordtv
               .tooltipopupWindows.ToolPopupWindows
import kotlinx.android.synthetic.main.activity_main.*
import kotlinx.android.synthetic.main.custom_layout.view.*
  
class MainActivity : AppCompatActivity() {
  
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        DefaultTooltip()
        CustomTooltip()
    }
  
    private fun DefaultTooltip() {
        default_layout_tooltip.apply {
            text = text1
            setToolTipListener(object : SelectableWordListeners {
                override fun onWordSelected(anchorView: TextView,
                    wordSelected: String, lineNumber: Int,
                                          width: Int) {
                    val toolPopupWindows = ToolPopupWindows
                        .ToolTipBuilder(this@MainActivity)
                         // here you will set an action to tooltip  
                         // according to requirement
                        .setToolTipListener { 
                            Toast.makeText(applicationContext,
                            "Cancel", Toast.LENGTH_SHORT).show() }
                        .setTitleTextColor(ContextCompat
                            .getColor(this@MainActivity,
                                     R.color.colorAccent))
                        .setTitleTextSize(20f)
                        // tooltip will not hide if 
                        // user touch outside.
                        .setIsOutsideTouchable(false)
                        .setArrowCustomizer(
                            ArrowCustomizer.Builder(this@MainActivity)
                            .setArrowSize(14)
                            .build())
                        .build()
                 
              // It will show the default tooltip 
              // window to the user.
              default_layout_tooltip.showToolTipWindow(anchorView,
                   wordSelected, lineNumber, width, toolPopupWindows)
                }
            })
        }
        // Here we change the background color of 
        // selected word so that it can be easily 
        // differentiated from other words.
        default_layout_tooltip.setBackgroundWordColor(ContextCompat
            .getColor(this, R.color.colorAccent))
    }
  
    private fun CustomTooltip() {
        custom_layout_tooltip.apply {
            text = text1
            setToolTipListener(object : SelectableWordListeners {
                override fun onWordSelected(anchorView: TextView,
                    wordSelected: String, lineNumber: Int,
                                          width: Int) {
                    val toolPopupWindows = ToolPopupWindows
                        .ToolTipBuilder(this@MainActivity)
                         // here we add our custom_layout to tooltip.
                        .setCustomLayout(R.layout.custom_layout)
                        // tooltip will hide if user touch outside.
                        .setIsOutsideTouchable(true)
                        .setWidthPercentsFromScreen(0.7)  
                        .setAutoDismissDuration(3000)
                        // we can also cutsomize the arrow of 
                        // toltip window like arrowDrawable,
                        // arrowColor, arrowSize 
                        // and many more.
                        .setArrowCustomizer(ArrowCustomizer
                            .Builder(this@MainActivity)
                            .setArrowColor(ContextCompat
                            .getColor(this@MainActivity,
                                      R.color.arrow))
                            .setArrowSize(25)
                            .build())
                        .build()
  
                    // here we add the selected word and a 
                    // description to our TextView added 
                    // in the custom layout.
                    val inflatedView = toolPopupWindows
                                       .getCustomInflatedView()
                    inflatedView?.let {
                        it.selected_word.text 
                                        = wordSelected
                        it.description.text 
                                      = "This is Custom Layout!"
                    }
            // It will show the custom tooltip window to the user.
            custom_layout_tooltip.showToolTipWindow(anchorView,
                    wordSelected, lineNumber, width, toolPopupWindows)
                }
            })
        }
        // Here we change the background color of 
        // selected word so that it can be easily 
        // differentiated from other words.
        custom_layout_tooltip.setBackgroundWordColor(ContextCompat
               .getColor(this, R.color.colorPrimaryDark))
    }
  
    companion object {
        const val text1 = "GeeksForGeeks -
               A Computer Science Portal for geeks"
    }
}

输出：

参考： https://github.com/EusebiuCandrea/ToolTipPopupWord

想要一个节奏更快，更具竞争性的环境来学习Android的基础知识吗?

单击此处前往由我们的专家精心策划的指南，以使您立即做好行业准备！