`

仿MIUI toast 动画效果实现

 
阅读更多

转于:http://blog.csdn.net/farmer_cc/article/details/19352563

-------------------------------------------------------------------------------------

仿MIUI toast 动画效果实现

本文中涉及两个点比较重要:一是设计一个OvershootInterpolator,并使用开源库实现的动画效果;二是使用自定义的layout ,并通过WindowManager 的addView() 添加,实现类似toast效果,并增加toast 的点击事件回调处理。

1 动画效果

用前文中讲述的动画基础,实现一个toast的动画效果并没有多少困难。就是一个Y 轴的位移动画,并加上一个overshoot 的interpolator插值器。

关心动画效果的同学,直接看这里实现动画效果的代码。

 

[java] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1.     private static Interpolator mOverShootInter = new OvershootInterpolator();  
  2.         animate(textView).translationY(ViewHelper.getTranslationY(textView) - dp2px(ctx, 200)).setDuration(  
  3.                 200).setInterpolator(mOverShootInter);  
  4.     public static float dp2px(Context cxt, float dp) {  
  5.         return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp,  
  6.                 cxt.getResources().getDisplayMetrics());  
  7.     }  
  8.   
  9.     private static class OvershootInterpolator implements Interpolator {  
  10.         @Override  
  11.         public float getInterpolation(float input) {  
  12.             if (input < 0.5f)  
  13.                 return (float) (Math.cos((input + 1) * Math.PI) / 2.0f) + 0.5f;  
  14.             else  
  15.                 return 0.5f * (o(input * 2.0f - 2.0f, 4) + 2.0f);  
  16.         }  
  17.   
  18.         private float o(float t, float s) {  
  19.             return t * t * ((s + 1) * t + s);  
  20.         }  
  21.     }  

其中函数dp2px 是为了不同分辨率屏幕兼容性而计算dp 值到px 的转换。就是写个动画的距离。

 

类OvershootInterpolator是参考系统的AnticipateOvershootInterpolator 和AccelerateDecelerateInterpolator 插值器使用分段函数拼接而成。插值器的分析和设计可以参考前文《Android 动画animation 深入分析》

 

2 可点击的toast 的实现。

实现的关键是使用WindowManager 的addView() 动态添加一个自定义的toast view,加入回调接口,在点击事件中回调即可。

 

[java] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. public static final int TOAST_LONG = 5000;  
  2. public static final int TOAST_SHORT = 3000;  
  3.   
  4. public static void showCustomToast(final Context ctx, CharSequence toastMessage,  
  5.         final OnClickListener clickCallback, int duration) {  
  6.     final WindowManager windowManager;  
  7.     windowManager = (WindowManager) ctx.getSystemService(Context.WINDOW_SERVICE);  
  8.     final RelativeLayout addedLayout = (RelativeLayout) LayoutInflater.from(ctx).inflate(  
  9.             R.layout.custom_toast_view, null);  
  10.     RelativeLayout toastHolder = (RelativeLayout) addedLayout.findViewById(R.id.toast_holder);  
  11.     toastHolder.setOnClickListener(new OnClickListener() {  
  12.   
  13.         @Override  
  14.         public void onClick(View v) {  
  15.             // TODO Auto-generated method stub  
  16.             Toast.makeText(ctx, "toast holder clicked!", Toast.LENGTH_SHORT).show();  
  17.             windowManager.removeView(addedLayout);  
  18.         }  
  19.     });  
  20.   
  21.     final ValueAnimator anim = ValueAnimator.ofInt(01);  
  22.     anim.setDuration(duration);  
  23.     anim.addListener(new AnimatorListenerAdapter() {  
  24.         @Override  
  25.         public void onAnimationEnd(Animator animation) {  
  26.             try {  
  27.   
  28.                 windowManager.removeView(addedLayout);  
  29.             } catch (Exception e) {  
  30.                 // may throw "View not attached to window" exception when  
  31.                 // "mWindowManager.mView == null" or "mWindowManager.mView.length == 0",  
  32.                 // that means no view attached to this window  
  33.             }  
  34.             Toast.makeText(ctx, "custom toast removed!", Toast.LENGTH_SHORT).show();  
  35.   
  36.         }  
  37.     });  
  38.     anim.start();  
  39.     TextView textView = (TextView) addedLayout.findViewById(R.id.toast_text);  
  40.     textView.setText(toastMessage);  
  41.     textView.setOnClickListener(new OnClickListener() {  
  42.   
  43.         @Override  
  44.         public void onClick(View v) {  
  45.             // TODO Auto-generated method stub  
  46.             anim.end();  
  47.             if (clickCallback != null) {  
  48.                 clickCallback.onClick(v);  
  49.             }  
  50.             Toast.makeText(ctx, "custom toast clicked!", Toast.LENGTH_SHORT).show();  
  51.         }  
  52.     });  
  53.     LayoutParams addedLayoutParams;  
  54.     addedLayoutParams = new WindowManager.LayoutParams(LayoutParams.MATCH_PARENT,  
  55.             LayoutParams.MATCH_PARENT, LayoutParams.TYPE_PHONE, LayoutParams.FLAG_NOT_FOCUSABLE  
  56.                     | LayoutParams.FLAG_FULLSCREEN, PixelFormat.TRANSPARENT);  
  57.     addedLayoutParams.x = 0;  
  58.     addedLayoutParams.y = 0;  
  59.     windowManager.addView(addedLayout, addedLayoutParams);  
  60.     animate(textView).translationY(ViewHelper.getTranslationY(textView) - dp2px(ctx, 200)).setDuration(  
  61.             200).setInterpolator(mOverShootInter);  
  62. }  

 

 

3 自定义的iew

 

[html] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     android:id="@+id/toast_holder"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:orientation="vertical" >  
  6.   
  7.     <TextView  
  8.         android:id="@+id/toast_text"  
  9.         android:layout_width="wrap_content"  
  10.         android:layout_height="wrap_content"  
  11.         android:layout_alignParentBottom="true"  
  12.         android:layout_centerHorizontal="true"  
  13.         android:layout_marginBottom="120dp"  
  14.         android:background="@drawable/toast_view_bg"  
  15.         android:drawableLeft="@drawable/ic_launcher"  
  16.         android:drawablePadding="8dp"  
  17.         android:gravity="center"  
  18.         android:paddingBottom="6dp"  
  19.         android:paddingLeft="8dp"  
  20.         android:paddingRight="8dp"  
  21.         android:paddingTop="6dp"  
  22.         android:text="custom toast"  
  23.         android:textColor="@color/grey"  
  24.         android:textSize="14sp" />  
  25.   
  26. </RelativeLayout>  

 

 

分享到:
评论

相关推荐

    修改Toast动画效果

    然而,开发者有时为了追求更个性化的用户体验或者符合应用设计风格,可能会希望自定义`Toast`的动画效果,例如将其改为放大缩小或者其他动态效果。本篇将详细讲解如何通过反射机制来修改`Toast`的动画效果。 首先,...

    Qt仿安卓Toast效果.zip

    在本文中,我们将深入探讨如何在Qt环境中实现一个仿安卓Toast效果的功能,这将帮助开发者在他们的Qt应用中创建类似Android系统中短暂显示信息的组件。这个功能是跨平台的,可以在Windows和Linux(如Ubuntu)等操作...

    Qt仿Android的toast控件效果

    通过以上步骤,我们就可以在Qt环境中实现一个功能完备、性能高效的仿Android toast控件。这样的控件不仅可以在桌面应用中使用,还可以方便地移植到Qt支持的其他平台,如移动设备或嵌入式系统。在实际项目中,可以...

    Android 优化加载中的Toast,实现真正的夹在过渡动画 源码

    本文将探讨一个名为"Android 优化加载中的Toast,实现真正的夹在过渡动画 源码"的项目,它旨在提供更美观、具有过渡动画的`Toast`效果。 首先,该项目的目标是改进`Toast`的视觉呈现,使其在屏幕上的出现和消失更具...

    HTML仿android的toast效果源码

    - **动画**:使用CSS的`transition`或`animation`属性可以实现Toast的出现和消失动画效果,例如淡入淡出、滑动等。 3. **JavaScript逻辑**: - **显示和隐藏**:编写JavaScript函数,控制Toast元素的显示和隐藏。...

    iOS 仿android 中的Toast实现

    你可以通过查看这些文件,了解具体的实现细节,包括如何设置样式、动画效果,以及如何管理多个`Toast`的显示和消失顺序。 总的来说,iOS中实现Android的Toast效果,可以通过自定义视图或利用现有的第三方库来完成。...

    仿网易Toast

    总的来说,"仿网易Toast"是一个涉及Android UI自定义设计、动画实现以及代码优化等多个方面知识的实践项目,对于提升开发者对Android系统的理解和应用能力有着积极的作用。通过这个项目,开发者可以深入学习Android ...

    网页端仿原生Toast提示

    5. **可扩展性**:为了使Toast更适应不同场景,可以增加更多功能,如自定义位置、支持多种类型(如警告、错误)和不同的动画效果。例如,添加一个类型参数来改变背景颜色。 ```javascript function showToast...

    安卓动画效果相关-loadtoast带动画的好看toast.rar

    在这个"loadtoast"项目中,可能使用了属性动画来实现加载中Toast的效果,因为这种动画可以更灵活地控制Toast的显示和消失过程,例如渐入渐出、旋转等复杂效果。开发者可能通过`ObjectAnimator`或`ValueAnimator`类来...

    PyQt4仿安卓toast,仿苹果确认框控件

    这个控件可能需要实现动画效果,使其从某个位置淡入、淡出,以模拟原生Toast的行为。此外,为了支持回调函数,我们可以设置信号和槽机制,当Toast显示或消失时触发相应的回调函数。 `仿苹果确认框`则是模仿了iOS中...

    toast五种效果

    标题“toast五种效果”暗示我们将探讨如何在Android应用中实现不同类型的Toast,包括默认样式、带有图片以及自定义样式的Toast。下面将详细介绍这五种效果。 1. **默认样式Toast** 默认的Toast样式是系统预设的,...

    c# winform 类似android toast消息功能

    在C# WinForm开发中,有时我们希望实现类似Android中的Toast功能,以便向用户显示短暂的通知消息。Android的Toast提供了一种轻量级的提示方式,可以在不中断用户操作的情况下展示信息。C# WinForm虽然没有内置的...

    Android仿一点资讯收藏Toast动画效果

    后来看到了一点资讯的收藏动画,感觉不错,所有自己就实现了一下。 这是效果: 附上完整的代码,其中Animation_Toast为动画: &lt;div xss=removed&gt;&lt;span xss=removed&gt;&lt;/span&gt;&lt;/div&gt;&lt;pre name=code class=java&gt;public...

    移动H5领域。js、css3仿ios toast提示。。

    1. **动画效果**:CSS3的过渡(Transition)和动画(Animation)可以帮助我们实现Toast的淡入淡出效果,通过改变透明度或高度等属性,让提示的出现和消失更加平滑自然。 2. **定位**:使用CSS的`position`属性(如`...

    移动H5领域。js、css3仿ios toast提示。

    在移动H5开发中,创建出与iOS原生体验相仿的用户体验是至关重要的,而`toast`提示就是实现这一目标的关键元素之一。`Toast`通常用于向用户展示简短的信息,比如操作成功或者失败的通知,它会在屏幕中央短暂显示后...

    miui8基于Toast实现自定义窗口,接点击事件,不需要权限

    miui8基于Toast实现自定义窗口,接点击事件,不需要权限android.permission.SYSTEM_ALERT_WINDOW,Toast的点击事件支持4.4 以上,如果想兼容4.4一下,只需要将窗口类型改为TYPE_SYSTEM_ALERT,就可以了,这个事需要...

    重写仿toast

    3. **显示和隐藏逻辑**: 在自定义的`show()`方法中,处理动画效果,如滑入滑出,以及在合适的时间点调用`hide()`方法。同时,可以添加监听器来检测系统通知栏的状态,确保即使通知栏关闭也能显示自定义的Toast。 4....

    Android Toast hook方案,解决小米手机toast问题

    小米mimu系统,会对toast进行拦截,在用户提交的toast 消息体拼接一个前缀,由于该种会导致插件工程出现资源错乱,获取appLabel异常,现我们通过hook 动态代理,对消息发送做一个劫持,修改消息信息,还原原来的消息

    自定义Toast效果5种

    下面将详细介绍五种不同的自定义`Toast`效果及其实现方法。 1. **改变文字颜色和字体** 要更改`Toast`中的文字颜色和字体,可以在创建`Toast`时使用自定义的`TextView`。首先,创建一个XML布局文件,例如`toast_...

Global site tag (gtag.js) - Google Analytics