如何在 Android Studio 中实现 Tooltip?
工具提示是当光标位于图标、图像、超链接或任何其他 GUI 组件上时出现的消息。在这个应用程序中,我们将使用 EditText 从用户那里获取消息,然后将该消息显示为视图上的工具提示。这是我们将要构建的应用程序的示例视频。请注意,我们将用Java语言实现这个项目。
分步实施
步骤 1:创建一个新项目
- 打开一个新项目。
- 我们将使用Java语言开发 Empty Activity。保持所有其他选项不变。
- 您可以在方便时更改项目的名称。
- 将有两个名为 activity_main.xml 和 MainActivity 的默认文件。Java
如果您不知道如何在 Android Studio 中创建新项目,可以参考如何在 Android Studio 中创建/启动新项目?
第 2 步:导航到 Build scripts -> build.gradle(module) 文件并添加以下依赖项
implementation 'com.tomergoldst.android:tooltips:1.0.10'
单击立即同步以保存更改。
第 3 步:使用 activity_main.xml 文件
导航到app > res > layout > activity_main.xml并将以下代码添加到该文件。下面是activity_main.xml文件的代码。
XML
Java
package com.example.tooltip;
import androidx.appcompat.app.AppCompatActivity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;
import com.tomergoldst.tooltips.ToolTip;
import com.tomergoldst.tooltips.ToolTipsManager;
public class MainActivity extends AppCompatActivity implements ToolTipsManager.TipListener, View.OnClickListener {
// Initialize variable
RelativeLayout relativeLayout;
EditText etMessage;
Button btAbove,btRight,btLeft,btBelow;
TextView textView;
ToolTipsManager toolTipsManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// assign variable
relativeLayout=findViewById(R.id.relative_layout);
etMessage=findViewById(R.id.et_message);
btAbove=findViewById(R.id.bt_above);
btBelow=findViewById(R.id.bt_below);
btLeft=findViewById(R.id.bt_left);
btRight=findViewById(R.id.bt_right);
textView=findViewById(R.id.text_view);
// Initialize tooltip manager
toolTipsManager=new ToolTipsManager(this);
btRight.setOnClickListener(this);
btLeft.setOnClickListener(this);
btAbove.setOnClickListener(this);
btBelow.setOnClickListener(this);
textView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// Dismiss tooltip
toolTipsManager.dismissAll();
}
});
}
@Override
public void onTipDismissed(View view, int anchorViewId, boolean byUser) {
// check condition
if(byUser)
{
// when user dismiss the tooltip
// display toast
Toast.makeText(getApplicationContext(), "Dismissed", Toast.LENGTH_SHORT).show();
}
}
@Override
public void onClick(View v) {
// check condition
switch(v.getId())
{
case R.id.bt_above:
// when above button clicked
// define position
int position= ToolTip.POSITION_ABOVE;
// define alignment
int align=ToolTip.ALIGN_RIGHT;
// create method
displayToolTip(position,align);
break;
case R.id.bt_right:
// when right button is clicked
displayToolTip(ToolTip.POSITION_RIGHT_TO,ToolTip.ALIGN_CENTER);
break;
case R.id.bt_below:
// when below button clicked
displayToolTip(ToolTip.POSITION_BELOW,ToolTip.ALIGN_LEFT);
break;
case R.id.bt_left:
// when left button is clicked
displayToolTip(ToolTip.POSITION_LEFT_TO,ToolTip.ALIGN_CENTER);
break;
}
}
private void displayToolTip(int position, int align) {
// get message from edit text
String sMessage=etMessage.getText().toString().trim();
// set tooltip on text view
toolTipsManager.findAndDismiss(textView);
// check condition
if(!sMessage.isEmpty())
{
// when message is not equal to empty
// create tooltip
ToolTip.Builder builder=new ToolTip.Builder(this,textView,relativeLayout,sMessage,position);
// set align
builder.setAlign(align);
// set background color
builder.setBackgroundColor(Color.BLUE);
// show tooltip
toolTipsManager.show(builder.build());
}
else
{
// when message is empty
// display toast
Toast.makeText(getApplicationContext(), "Type a Message", Toast.LENGTH_SHORT).show();
}
}
}
执行上述代码后,activity_main.xml 文件的设计如下所示。
第 4 步:使用 MainActivity。Java
转到MainActivity。 Java文件并参考以下代码。下面是MainActivity 的代码。 Java文件。代码中添加了注释以更详细地理解代码。
Java
package com.example.tooltip;
import androidx.appcompat.app.AppCompatActivity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;
import com.tomergoldst.tooltips.ToolTip;
import com.tomergoldst.tooltips.ToolTipsManager;
public class MainActivity extends AppCompatActivity implements ToolTipsManager.TipListener, View.OnClickListener {
// Initialize variable
RelativeLayout relativeLayout;
EditText etMessage;
Button btAbove,btRight,btLeft,btBelow;
TextView textView;
ToolTipsManager toolTipsManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// assign variable
relativeLayout=findViewById(R.id.relative_layout);
etMessage=findViewById(R.id.et_message);
btAbove=findViewById(R.id.bt_above);
btBelow=findViewById(R.id.bt_below);
btLeft=findViewById(R.id.bt_left);
btRight=findViewById(R.id.bt_right);
textView=findViewById(R.id.text_view);
// Initialize tooltip manager
toolTipsManager=new ToolTipsManager(this);
btRight.setOnClickListener(this);
btLeft.setOnClickListener(this);
btAbove.setOnClickListener(this);
btBelow.setOnClickListener(this);
textView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// Dismiss tooltip
toolTipsManager.dismissAll();
}
});
}
@Override
public void onTipDismissed(View view, int anchorViewId, boolean byUser) {
// check condition
if(byUser)
{
// when user dismiss the tooltip
// display toast
Toast.makeText(getApplicationContext(), "Dismissed", Toast.LENGTH_SHORT).show();
}
}
@Override
public void onClick(View v) {
// check condition
switch(v.getId())
{
case R.id.bt_above:
// when above button clicked
// define position
int position= ToolTip.POSITION_ABOVE;
// define alignment
int align=ToolTip.ALIGN_RIGHT;
// create method
displayToolTip(position,align);
break;
case R.id.bt_right:
// when right button is clicked
displayToolTip(ToolTip.POSITION_RIGHT_TO,ToolTip.ALIGN_CENTER);
break;
case R.id.bt_below:
// when below button clicked
displayToolTip(ToolTip.POSITION_BELOW,ToolTip.ALIGN_LEFT);
break;
case R.id.bt_left:
// when left button is clicked
displayToolTip(ToolTip.POSITION_LEFT_TO,ToolTip.ALIGN_CENTER);
break;
}
}
private void displayToolTip(int position, int align) {
// get message from edit text
String sMessage=etMessage.getText().toString().trim();
// set tooltip on text view
toolTipsManager.findAndDismiss(textView);
// check condition
if(!sMessage.isEmpty())
{
// when message is not equal to empty
// create tooltip
ToolTip.Builder builder=new ToolTip.Builder(this,textView,relativeLayout,sMessage,position);
// set align
builder.setAlign(align);
// set background color
builder.setBackgroundColor(Color.BLUE);
// show tooltip
toolTipsManager.show(builder.build());
}
else
{
// when message is empty
// display toast
Toast.makeText(getApplicationContext(), "Type a Message", Toast.LENGTH_SHORT).show();
}
}
}
这是我们应用程序的最终输出。
输出: