【第22期】观点:IT 行业加班,到底有没有价值?

【Android进阶】天天动听 悬浮歌词(迷你歌词)效果解读

转载 2012年03月28日 14:11:30

天天动听, 这款Android手机上的音乐播放器,相信不少朋友都曾用过。 不知大家是否注意到,天天动听有一个迷你歌词的特效。

 

什么效果呢? 就是不管你切到什么画面, 歌词永远显示,并且可以拖动。 类型QQ音乐,在电脑上播放时显示的歌词效果。

 

下面先来看一下效果。

 

 

这个歌词是在所有界面之上的。

 

下面我们将这个效果解剖一下, 我认为主要有三个难点:

1.  歌词悬浮在所有页面之上

2.  歌词可以拖动位置

3.  歌词的播放效果 (颜色覆盖)

 

对于第一点,首先想到的就是 WindowManager , 这个类可能不少人都用过, 一般用于获取屏幕宽度、高度,那么这次就要利用这个类来让我们的歌词永远置顶。

 

通过查看API,我们看到,在WindowManager.LayoutParams类中,有好几个属性可以设置View置顶。

 

TYPE_SYSTEM_OVERLAY

 

Window type: system overlay windows, which need to be displayed on top of everything else.

TYPE_SYSTEM_ALERT

Window type: system window, such as low power alert.

TYPE_PHONE

These windows are normally placed above all applications, but behind the status bar.

 


下面我们来测试一下, 通过下面几句代码,就可以让一个View凌驾在所有View之上。

  1. WindowManager wm = (WindowManager)getApplicationContext().getSystemService(WINDOW_SERVICE);  
  2. WindowManager.LayoutParams params = new WindowManager.LayoutParams();  
  3. params.type = WindowManager.LayoutParams.TYPE_SYSTEM_OVERLAY;  
  4.   
  5. params.width = WindowManager.LayoutParams.WRAP_CONTENT;  
  6. params.height = WindowManager.LayoutParams.WRAP_CONTENT;  
  7.   
  8. TextView tv = new TextView(this);  
  9. wm.addView(tv, params);  


 

 

 

 

这边需要注意的是, WindowManager也是通过 getSystemService 来获取,但必须先 getApplicationContext, 否则就无效了。 

 

 

 

 

 

直接WindowManager wm = (WindowManager)getSystemService(WINDOW_SERVICE);  这样是无效的 !!

 

 

 

 

 

 

 

还有一点就是,别忘了在Manifest.xml中添加权限:

 

 

  1. <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>  

现在我们这样做,我们已经可以让歌词永远置顶了。 但是不要得意,现在这样,结果是我们TextView在最顶层了, 然后你就会发现,页面上什么操作都不能做了, 在TextView下面的任何东西,你都点不了。 

 

 

 

 

 

为了解决这个,我们必须加上flags参数,让当前的View失去焦点,从而让后面的页面获得焦点。代码如下:

  1. params.flags = LayoutParams.FLAG_NOT_TOUCH_MODAL | LayoutParams.FLAG_NOT_FOCUSABLE;  

加上这一句就可以了。

 

 

 

 

 

 

 

 

 

 

 

好了,下面要处理的,就是让歌词可以移动。应该如何做呢?

 

 

 

 

 

我们知道,想要让一个View对象在页面上可以移动,只要实现其onTouchEvent事件即可。

 

 

 

 

 

 


 

下面开始实现第二步: 歌词移动!

 

 

 

 

 

首先我们自定义一个TextView类:MyTextView, 该类继承自TextView, 并实现其中的onTouchEvent方法,来看一下代码:

 

 

  1. @Override  
  2. public boolean onTouchEvent(MotionEvent event) {  
  3.     //触摸点相对于屏幕左上角坐标  
  4.     x = event.getRawX();     
  5.     y = event.getRawY() - TOOL_BAR_HIGH;  
  6.     Log.d(TAG, "------X: "+ x +"------Y:" + y);  
  7.       
  8.     switch(event.getAction()) {  
  9.         case MotionEvent.ACTION_DOWN:  
  10.             startX = event.getX();  
  11.             startY = event.getY();  
  12.             break;  
  13.         case MotionEvent.ACTION_MOVE:  
  14.             updatePosition();  
  15.             break;  
  16.         case MotionEvent.ACTION_UP:  
  17.             updatePosition();  
  18.             startX = startY = 0;  
  19.             break;  
  20.     }  
  21.       
  22.     return true;  
  23. }  
  24. //更新浮动窗口位置参数  
  25.  private void updatePosition(){  
  26.      // View的当前位置  
  27.      params.x = (int)( x - startX);  
  28.      params.y = (int) (y - startY);  
  29.      wm.updateViewLayout(this, params);  
  30.  }  
 

 

 

 

 

其中getRawX、getRawY用于获取触摸点离屏幕左上角的距离。 而getX、getY用于获取触摸点离textView左上角的距离.

两者相减,就是View左上角的坐标了。

 

另外需要注意的是,在显示View这个View的时候,需要正确指定View的x,y坐标,否则拖动时会错位。

  1. WindowManager wm = (WindowManager)getApplicationContext().getSystemService(WINDOW_SERVICE);  
  2.         WindowManager.LayoutParams params = MyTextView.params;  
  3.           
  4.         params.type = WindowManager.LayoutParams.TYPE_SYSTEM_ALERT | WindowManager.LayoutParams.TYPE_SYSTEM_OVERLAY;  
  5.         params.flags = LayoutParams.FLAG_NOT_TOUCH_MODAL | LayoutParams.FLAG_NOT_FOCUSABLE;  
  6.           
  7.         params.width = WindowManager.LayoutParams.FILL_PARENT;  
  8.         params.height = WindowManager.LayoutParams.WRAP_CONTENT;  
  9.         params.alpha = 80;  
  10.           
  11.         params.gravity=Gravity.LEFT|Gravity.TOP;  
  12.         //以屏幕左上角为原点,设置x、y初始值  
  13.         params.x = 0;  
  14.         params.y = 0;  
  15.               
  16.         tv = new MyTextView(TopFrame.this);  
  17.         wm.addView(tv, params);  
 

 

其中下面三句是关键:

  1. params.gravity=Gravity.LEFT|Gravity.TOP;  
  2.    //以屏幕左上角为原点,设置x、y初始值  
  3. params.x = 0;  
  4. params.y = 0;  
 

 

现在这样的话,就可以实现View的移动了。 

 

 


 

下面实现第三步: 歌词的播放效果。

那么本例仅仅做一个循环, 实际音乐播放器要复杂些,需要根据歌剧的长度及时间间隔,来计算歌词的覆盖速度, 再根据这个速度来覆盖歌词,呈现给用户。

 

要实现歌词播放的效果,需要用到画笔Paint, 还要用到Shader, 还有一个就是UI刷新的问题。

 

一起来看下代码:

  1. @Override  
  2. protected void onDraw(Canvas canvas) {  
  3.     // TODO Auto-generated method stub  
  4.     super.onDraw(canvas);  
  5.     float1 += 0.001f;  
  6.     float2 += 0.001f;     
  7.       
  8.     if(float2 > 1.0){  
  9.         float1 = 0.0f;  
  10.         float2 = 0.01f;  
  11.     }  
  12.     this.setText("");  
  13.     float len = this.getTextSize() * text.length();  
  14.     Shader shader = new LinearGradient(00, len, 0,   
  15.             new int[] { Color.YELLOW, Color.RED },  new float[]{float1, float2},  
  16.             TileMode.CLAMP);  
  17.     Paint p = new Paint();  
  18.     p.setShader(shader);  
  19.     // 下面这句才控制歌词大小  
  20.     p.setTextSize(20f);  
  21.     p.setTypeface(Typeface.DEFAULT_BOLD);  
  22.     //此处x,y坐标也要注意,尤其是y坐标,要与字体大小协调  
  23.     canvas.drawText(text, 020, p);  
  24.           
  25. }  
 

好了,下面发一下效果图:

 

 

 


 

最后附上整个工程的代码:(一个就两个类,一个布局文件)

 

AndroidManifest.xml

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <manifest xmlns:android="http://schemas.android.com/apk/res/android"  
  3.       package="com.yfz"  
  4.       android:versionCode="1"  
  5.       android:versionName="1.0">  
  6.     <application android:icon="@drawable/icon" android:label="@string/app_name">  
  7.         <activity android:name=".TopFrame"  
  8.                   android:label="@string/app_name">  
  9.             <intent-filter>  
  10.                 <action android:name="android.intent.action.MAIN" />  
  11.                 <category android:name="android.intent.category.LAUNCHER" />  
  12.             </intent-filter>  
  13.         </activity>  
  14.     </application>  
  15.       
  16.     <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>  
  17.     <uses-sdk android:minSdkVersion="8"></uses-sdk>  
  18. </manifest>   
 

 

main.xml

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:orientation="vertical"  
  4.     android:layout_width="fill_parent"  
  5.     android:layout_height="fill_parent"  
  6.     >  
  7.     <Button   
  8.         android:id="@+id/bt"  
  9.         android:text=" 点我试试"  
  10.         android:layout_width = "wrap_content"  
  11.         android:layout_height="wrap_content"  
  12.         android:layout_gravity="center"  
  13.     />  
  14. </LinearLayout>  
 

 

TopFrame.java

  1. package com.yfz;  
  2. import com.yfz.view.MyTextView;  
  3. import android.app.Activity;  
  4. import android.graphics.Rect;  
  5. import android.os.Bundle;  
  6. import android.view.Gravity;  
  7. import android.view.View;  
  8. import android.view.WindowManager;  
  9. import android.view.View.OnClickListener;  
  10. import android.view.WindowManager.LayoutParams;  
  11. import android.widget.Button;  
  12. public class TopFrame extends Activity {  
  13.     /** Called when the activity is first created. */  
  14.     @Override  
  15.     public void onCreate(Bundle savedInstanceState) {  
  16.         super.onCreate(savedInstanceState);  
  17.         setContentView(R.layout.main);  
  18.         Button button = (Button) findViewById(R.id.bt);  
  19.           
  20.         button.setOnClickListener(onclick);  
  21.     }  
  22.       
  23.     private MyTextView tv = null;  
  24.       
  25.     OnClickListener onclick = new OnClickListener() {  
  26.           
  27.         @Override  
  28.         public void onClick(View v) {  
  29.             if(tv != null && tv.isShown()){  
  30.                 WindowManager wm = (WindowManager)getApplicationContext().getSystemService(TopFrame.this.WINDOW_SERVICE);  
  31.                 wm.removeView(tv);  
  32.             }  
  33.             show();  
  34.               
  35.         }  
  36.     };  
  37.       
  38.       
  39.     private void show(){  
  40.         Rect frame = new Rect();    
  41.         getWindow().getDecorView().getWindowVisibleDisplayFrame(frame);    
  42.         MyTextView.TOOL_BAR_HIGH = frame.top;    
  43.           
  44.         WindowManager wm = (WindowManager)getApplicationContext().getSystemService(WINDOW_SERVICE);  
  45.         WindowManager.LayoutParams params = MyTextView.params;  
  46.           
  47.         params.type = WindowManager.LayoutParams.TYPE_SYSTEM_ALERT | WindowManager.LayoutParams.TYPE_SYSTEM_OVERLAY;  
  48.         params.flags = LayoutParams.FLAG_NOT_TOUCH_MODAL | LayoutParams.FLAG_NOT_FOCUSABLE;  
  49.           
  50.         params.width = WindowManager.LayoutParams.FILL_PARENT;  
  51.         params.height = WindowManager.LayoutParams.WRAP_CONTENT;  
  52.         params.alpha = 80;  
  53.           
  54.         params.gravity=Gravity.LEFT|Gravity.TOP;  
  55.         //以屏幕左上角为原点,设置x、y初始值  
  56.         params.x = 0;  
  57.         params.y = 0;  
  58.               
  59.         tv = new MyTextView(TopFrame.this);  
  60.         wm.addView(tv, params);  
  61.     }  
  62.     @Override  
  63.     protected void onDestroy() {  
  64.         super.onDestroy();  
  65.     }     
  66. }  
 

 

MyTextView.java

  1. package com.yfz.view;  
  2. import android.content.Context;  
  3. import android.graphics.Canvas;  
  4. import android.graphics.Color;  
  5. import android.graphics.LinearGradient;  
  6. import android.graphics.Paint;  
  7. import android.graphics.Rect;  
  8. import android.graphics.Shader;  
  9. import android.graphics.Typeface;  
  10. import android.graphics.Shader.TileMode;  
  11. import android.os.Handler;  
  12. import android.os.Message;  
  13. import android.util.Log;  
  14. import android.view.MotionEvent;  
  15. import android.view.View;  
  16. import android.view.WindowManager;  
  17. import android.widget.TextView;  
  18. import android.widget.Toast;  
  19. public class MyTextView extends TextView {  
  20.     private final String TAG = MyTextView.class.getSimpleName();  
  21.       
  22.     public static int TOOL_BAR_HIGH = 0;  
  23.     public static WindowManager.LayoutParams params = new WindowManager.LayoutParams();   
  24.     private float startX;  
  25.     private float startY;  
  26.     private float x;  
  27.     private float y;  
  28.       
  29.     private String text;  
  30.       
  31.     WindowManager wm = (WindowManager)getContext().getApplicationContext().getSystemService(getContext().WINDOW_SERVICE);  
  32.    
  33.     public MyTextView(Context context) {  
  34.         super(context);  
  35.         text = "世上只有妈妈好,有妈的孩子像块宝";  
  36.         this.setBackgroundColor(Color.argb(90150150150));  
  37.         // 下面这句话在此并不是控制歌词大小,仅仅是为了控制背景大小,如果不设置的话,Paint字体大时会被遮挡  
  38.         this.setTextSize(20f);  
  39.         handler = new Handler();  
  40.         handler.post(update);  
  41.     }  
  42.     @Override  
  43.     public boolean onTouchEvent(MotionEvent event) {  
  44.         //触摸点相对于屏幕左上角坐标  
  45.         x = event.getRawX();     
  46.         y = event.getRawY() - TOOL_BAR_HIGH;  
  47.         Log.d(TAG, "------X: "+ x +"------Y:" + y);  
  48.           
  49.         switch(event.getAction()) {  
  50.             case MotionEvent.ACTION_DOWN:  
  51.                 startX = event.getX();  
  52.                 startY = event.getY();  
  53.                 break;  
  54.             case MotionEvent.ACTION_MOVE:  
  55.                 updatePosition();  
  56.                 break;  
  57.             case MotionEvent.ACTION_UP:  
  58.                 updatePosition();  
  59.                 startX = startY = 0;  
  60.                 break;  
  61.         }  
  62.           
  63.         return true;  
  64.     }  
  65.       
  66.     @Override  
  67.     protected void onDraw(Canvas canvas) {  
  68.         // TODO Auto-generated method stub  
  69.         super.onDraw(canvas);  
  70.         float1 += 0.001f;  
  71.         float2 += 0.001f;     
  72.           
  73.         if(float2 > 1.0){  
  74.             float1 = 0.0f;  
  75.             float2 = 0.01f;  
  76.         }  
  77.         this.setText("");  
  78.         float len = this.getTextSize() * text.length();  
  79.         Shader shader = new LinearGradient(00, len, 0,   
  80.                 new int[] { Color.YELLOW, Color.RED },  new float[]{float1, float2},  
  81.                 TileMode.CLAMP);  
  82.         Paint p = new Paint();  
  83.         p.setShader(shader);  
  84.         // 下面这句才控制歌词大小  
  85.         p.setTextSize(20f);  
  86.         p.setTypeface(Typeface.DEFAULT_BOLD);  
  87.         //此处x,y坐标也要注意,尤其是y坐标,要与字体大小协调  
  88.         canvas.drawText(text, 020, p);  
  89.               
  90.     }  
  91.       
  92.     private Runnable update = new Runnable() {  
  93.         public void run() {  
  94.             MyTextView.this.update();  
  95.             handler.postDelayed(update, 3);  
  96.         }  
  97.     };  
  98.       
  99.     private void update(){  
  100.         postInvalidate();  
  101.     }  
  102.       
  103.     private float float1 = 0.0f;  
  104.     private float float2 = 0.01f;  
  105.       
  106.     private Handler handler;      
  107.     //更新浮动窗口位置参数  
  108.      private void updatePosition(){  
  109.          // View的当前位置  
  110.          params.x = (int)( x - startX);  
  111.          params.y = (int) (y - startY);  
  112.          wm.updateViewLayout(this, params);  
  113.      }  
  114. }  
 

 

好了,就讲这么多。

 

如果觉得对你有用,还请留言支持一下。 


另外转载请注明出处: http://blog.csdn.net/feng88724/archive/2011/04/25/6362710.aspx 

源码下载地址:http://download.csdn.net/source/3231657

举报

相关文章推荐

【Android进阶】天天动听 悬浮歌词(迷你歌词)效果解读

转自:http://blog.csdn.net/feng88724/article/details/6362710

【Android进阶】天天动听 悬浮歌词(迷你歌词)效果解读

天天动听, 这款Android手机上的音乐播放器,相信不少朋友都曾用过。 不知大家是否注意到,天天动听有一个迷你歌词的特效。 什么效果呢? 就是不管你切到什么画面, 歌词永远显示,并且可以拖动。 类型QQ音乐,在电脑上播放时显示的歌词效果。 下面先来看一下效果。 这个歌词是在所有界面之上的...

程序员升职加薪指南!还缺一个“证”!

CSDN出品,立即查看!

【Android进阶】天天动听 悬浮歌词(迷你歌词)效果解读

天天动听, 这款Android手机上的音乐播放器,相信不少朋友都曾用过。 不知大家是否注意到,天天动听有一个迷你歌词的特效。   什么效果呢? 就是不管你切到什么画面, 歌词永远显示,并且可以拖动...

【Android进阶】天天动听 悬浮歌词(迷你歌词)效果解读

天天动听, 这款Android手机上的音乐播放器,相信不少朋友都曾用过。 不知大家是否注意到,天天动听有一个迷你歌词的特效。 什么效果呢? 就是不管你切到什么画面, 歌词永远显示,并且可以拖动。 类型QQ音乐,在电脑上播放时显示的歌词效果。 下面先来看一下效果。 这个歌词是...

【Android进阶】天天动听 悬浮歌词(迷你歌词)效果解读

天天动听, 这款Android手机上的音乐播放器,相信不少朋友都曾用过。 不知大家是否注意到,天天动听有一个迷你歌词的特效。   什么效果呢? 就是不管你切到什么画面, 歌词永远显示,并且...
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)