`

带动画效果的简单Tips显示

阅读更多
项目地址:https://github.com/nhaarman/supertooltips

我比较懒,懒得以后重新写了,所以直接copy了。



用法:
package com.haarman.supertooltips;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.view.LayoutInflater;
import android.view.View;

import com.mobovip.views.ToolTip;
import com.mobovip.views.ToolTipRelativeLayout;
import com.mobovip.views.ToolTipView;

public class MainActivity extends Activity implements View.OnClickListener, ToolTipView.OnToolTipViewClickedListener {

    private ToolTipView mRedToolTipView;
    private ToolTipView mGreenToolTipView;
    private ToolTipView mBlueToolTipView;
    private ToolTipView mPurpleToolTipView;
    private ToolTipView mOrangeToolTipView;
    private ToolTipRelativeLayout mToolTipFrameLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mToolTipFrameLayout = (ToolTipRelativeLayout) findViewById(R.id.activity_main_tooltipframelayout);
        findViewById(R.id.activity_main_redtv).setOnClickListener(MainActivity.this);
        findViewById(R.id.activity_main_greentv).setOnClickListener(MainActivity.this);
        findViewById(R.id.activity_main_bluetv).setOnClickListener(MainActivity.this);
        findViewById(R.id.activity_main_purpletv).setOnClickListener(MainActivity.this);
        findViewById(R.id.activity_main_orangetv).setOnClickListener(MainActivity.this);


        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                addRedToolTipView();
            }
        }, 500);

        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                addGreenToolTipView();
            }
        }, 700);

        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                addOrangeToolTipView();
            }
        }, 900);

        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                addBlueToolTipView();
            }
        }, 1100);

        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                addPurpleToolTipView();
            }
        }, 1300);

    }

    private void addRedToolTipView() {
        mRedToolTipView = mToolTipFrameLayout.showToolTipForView(
                new ToolTip()
                        .withText("A beautiful Button")
                        .withColor(getResources().getColor(R.color.holo_red))
                        .withShadow(true),
                findViewById(R.id.activity_main_redtv));
        mRedToolTipView.setOnToolTipViewClickedListener(MainActivity.this);
    }

    private void addGreenToolTipView() {
        mGreenToolTipView = mToolTipFrameLayout.showToolTipForView(
                new ToolTip()
                        .withText("Another beautiful Button!")
                        .withColor(getResources().getColor(R.color.holo_green)),
                findViewById(R.id.activity_main_greentv));
        mGreenToolTipView.setOnToolTipViewClickedListener(MainActivity.this);
    }

    private void addBlueToolTipView() {
        mBlueToolTipView = mToolTipFrameLayout.showToolTipForView(
                new ToolTip()
                        .withText("Moarrrr buttons!")
                        .withColor(getResources().getColor(R.color.holo_blue))
                        .withAnimationType(ToolTip.ANIMATIONTYPE_FROMTOP),
                findViewById(R.id.activity_main_bluetv));
        mBlueToolTipView.setOnToolTipViewClickedListener(MainActivity.this);
    }

    private void addPurpleToolTipView() {
        mPurpleToolTipView = mToolTipFrameLayout.showToolTipForView(
                new ToolTip()
                        .withContentView(LayoutInflater.from(this).inflate(R.layout.custom_tooltip, null))
                        .withColor(getResources().getColor(R.color.holo_purple)),
                findViewById(R.id.activity_main_purpletv));
        mPurpleToolTipView.setOnToolTipViewClickedListener(MainActivity.this);
    }

    private void addOrangeToolTipView() {
        mOrangeToolTipView = mToolTipFrameLayout.showToolTipForView(
                new ToolTip()
                        .withText("Tap me!")
                        .withColor(getResources().getColor(R.color.holo_orange)),
                findViewById(R.id.activity_main_orangetv));
        mOrangeToolTipView.setOnToolTipViewClickedListener(MainActivity.this);
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.activity_main_redtv:
                if (mRedToolTipView == null) {
                    addRedToolTipView();
                } else {
                    mRedToolTipView.remove();
                    mRedToolTipView = null;
                }
                break;
            case R.id.activity_main_greentv:
                if (mGreenToolTipView == null) {
                    addGreenToolTipView();
                } else {
                    mGreenToolTipView.remove();
                    mGreenToolTipView = null;
                }
                break;
            case R.id.activity_main_bluetv:
                if (mBlueToolTipView == null) {
                    addBlueToolTipView();
                } else {
                    mBlueToolTipView.remove();
                    mBlueToolTipView = null;
                }
                break;
            case R.id.activity_main_purpletv:
                if (mPurpleToolTipView == null) {
                    addPurpleToolTipView();
                } else {
                    mPurpleToolTipView.remove();
                    mPurpleToolTipView = null;
                }
                break;
            case R.id.activity_main_orangetv:
                if (mOrangeToolTipView == null) {
                    addOrangeToolTipView();
                } else {
                    mOrangeToolTipView.remove();
                    mOrangeToolTipView = null;
                }
                break;
        }
    }

    @Override
    public void onToolTipViewClicked(ToolTipView toolTipView) {
        if (mRedToolTipView == toolTipView) {
            mRedToolTipView = null;
        } else if (mGreenToolTipView == toolTipView) {
            mGreenToolTipView = null;
        } else if (mBlueToolTipView == toolTipView) {
            mBlueToolTipView = null;
        } else if (mPurpleToolTipView == toolTipView) {
            mPurpleToolTipView = null;
        } else if (mOrangeToolTipView == toolTipView) {
            mOrangeToolTipView = null;
        }
    }
}


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:baselineAligned="false"
    tools:context=".MainActivity" >

    <Button
        android:id="@+id/activity_main_redtv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/red" />

    <Button
        android:id="@+id/activity_main_greentv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:text="@string/green" />

    <Button
        android:id="@+id/activity_main_bluetv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="@string/blue" />

    <Button
        android:id="@+id/activity_main_purpletv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:text="@string/purple" />

    <Button
        android:id="@+id/activity_main_orangetv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="@string/orange" />

    <com.mobovip.views.ToolTipRelativeLayout
        android:id="@+id/activity_main_tooltipframelayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>
  • 大小: 89.2 KB
分享到:
评论

相关推荐

    jQuery带Tips动画提示通用表单验证插件下载(jquery validate),动画效果漂亮

    jQuery Validate插件正是这样一个强大的工具,它提供了一种优雅的方式来实现表单验证,而且具备动态提示的动画效果,使得用户界面更加友好。本文将深入探讨jQuery Validate插件的使用方法、功能特性以及如何创建带...

    JS实现简单实用的自动动态tips提示信息框(小的气泡框)效果

    如果你想要更复杂的功能,例如动画效果或者自定义触发事件,可以进一步扩展这个基础框架。 在提供的压缩包文件`texiao7268_1560680892`中,可能包含了完整的HTML、CSS和JavaScript代码示例,你可以下载并运行以查看...

    Tips基于jQuery的提示框插件可自动消失可手动消失

    此外,Tips插件通常支持更多的配置选项和回调函数,例如自定义样式、位置调整、动画效果等。你可以通过查阅Tips插件的官方文档或源码来获取更详细的信息,以满足项目的特定需求。 总的来说,基于jQuery的Tips插件...

    jquery_tips,JQ实现的冒泡提示

    除了基本的提示功能,我们还可以进一步定制提示框,比如添加动画效果、设置提示内容的延迟显示、响应不同类型的提示信息等。此外,可以结合其他jQuery插件,如jQuery UI,以实现更丰富的提示样式和交互效果。 总结...

    JS实现简单实用的自动动态tips提示信息框(小的气泡框)效果.zip

    CSS可以用来控制这个元素的位置、大小、动画效果等。 接着,我们使用JavaScript来监听用户事件,如鼠标悬停或点击。这里,我们可能会使用`addEventListener`函数来添加事件监听器。例如,当鼠标悬停在一个元素上时...

    微信小程序tips消息滚动轮播

    当然,还可以根据实际需求增加更多功能,比如添加动画效果、动态加载消息、手势控制滚动等。微信小程序提供了丰富的API和组件,使得开发者能够构建出功能丰富且用户体验优秀的应用。记得在实际开发中,要充分利用...

    jQuery_Tips_插件

    jQuery_Tips插件为开发者提供了一种便捷的方式来增强网站的交互性,通过简单的API调用即可实现美观的提示效果。其高度的自定义性使开发者可以根据项目需求调整提示的样式和行为,从而提升用户体验。无论是在大型项目...

    纯CSS实现tips帮助提示框代码.zip

    此外,可能还会涉及到CSS的过渡(transition)和动画(animation)效果,以实现平滑的显示和隐藏动画。过渡可以改变一个属性值从一种状态到另一种状态的过程,而动画则可以按照预定义的关键帧序列控制元素的多个属性...

    js工具提示条Tips

    除了这种基础实现,我们还可以考虑其他高级功能,例如动画效果、自定义位置、支持多行文本、响应式设计等。对于更复杂的场景,可以使用现有的JavaScript库,如Bootstrap的Tooltip插件,或者使用Vue.js、React.js等...

    jquery随机头像TIPS.

    在随机头像TIPS中,CSS可能包括对头像容器的样式定义,如大小、边距、背景颜色等,以及任何动画效果。 `images`文件夹通常存储所有的头像图片,这些图片的文件名可能根据需求设计,例如:`avatar1.jpg`、`avatar2....

    jQuery图片标注提示插件.zip

    jQuery通过封装JavaScript的DOM操作,使得开发者能够更简单地选取元素、添加事件监听器、修改CSS样式以及创建动画效果。例如,使用`$()`选择器可以快速定位到页面上的特定元素,`click()`函数可以为元素绑定点击事件...

    仿IOS风格操作提示插件tips alert confirm

    但对于更复杂的需求,可能需要扩展其功能,例如添加自定义样式、多按钮选项或者动画效果等。 至于项目中的`index.html`、`css`和`js`文件,它们分别代表了插件的主入口文件、样式表和JavaScript代码。`index.html`...

    mootools tips

    MooTools是一个强大的JavaScript库,它提供了一系列工具和方法,帮助开发者更轻松地处理DOM操作、事件处理、动画效果以及Ajax交互。在"Mootools Tips"这个主题中,我们将聚焦于如何利用MooTools实现文本框的提示信息...

    JavaScript实现简单Tip提示框效果

    在介绍如何利用JavaScript实现简单Tip提示框效果之前,首先要明确什么是Tip提示框。Tip提示框是一种常见的用户界面元素,当用户将鼠标悬停在某个链接或者图标上时,它会显示一些额外的信息,以帮助用户理解该链接或...

    The JavaScript Anthology 101 Essential Tips, Tricks

    教授如何结合JavaScript和CSS来增强网页效果,如动态样式更改、动画效果等。 13. **Basic Dynamic HTML(基本动态HTML)** 展示了如何使用JavaScript制作简单的动态效果,如弹出窗口、滑动面板等。 14. **Time ...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    6.jQuery带Tips动画提示通用表单验证插件下载(jquery validate),动画效果漂亮 7.jQuery鼠标移到下载地址滑出气泡提示效果的插件 8.又一款jquery实现链接Tip演示下载 9.常用jQuery弹出式链接提示效果Tooltip...

    CSS Tips

    它控制了网页的布局和视觉呈现,包括字体、颜色、大小、位置以及更复杂的动画和交互效果。本文将深入探讨一些实用的CSS技巧,这些技巧可以显著提升开发效率并优化用户体验。 首先,让我们了解一些基本的CSS选择器...

Global site tag (gtag.js) - Google Analytics