📜  如何在 Android Studio 中实现 Tooltip?

📅  最后修改于: 2022-05-13 01:54:27.853000             🧑  作者: Mango

如何在 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();
        }
    }
}

这是我们应用程序的最终输出。

输出: