仿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 plain copy

 

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 plain copy

 

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(0, 1);  
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 plain copy

 

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>