【第21期】观点:人工智能到底用 GPU?还是用 FPGA?

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

转载 2012年03月26日 12:35:26

转自:http://mobile.51cto.com/android-266613.htm

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

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

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

2.  歌词可以拖动位置

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

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

加权限:

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



  1. <pre name="code" class="html">WindowManager wm = (WindowManager)getApplicationContext().getSystemService(Context.WINDOW_SERVICE);  
  2.         LayoutInflater mInflater = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);  
  3.         View view = mInflater.inflate(R.layout.main, null);  
  4.         WindowManager.LayoutParams params = new WindowManager.LayoutParams();        
  5.         params.type = WindowManager.LayoutParams.TYPE_SYSTEM_OVERLAY;       
  6.         params.width = WindowManager.LayoutParams.WRAP_CONTENT;        
  7.         params.height = WindowManager.LayoutParams.WRAP_CONTENT;     
  8.         wm.addView(view, params);  



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

首先我们自定义一个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.     switch(event.getAction()) {      
  8.         case MotionEvent.ACTION_DOWN:      
  9.             startX = event.getX();      
  10.             startY = event.getY();      
  11.             break;      
  12.         case MotionEvent.ACTION_MOVE:      
  13.            updatePosition();      
  14.            break;      
  15.         case MotionEvent.ACTION_UP:      
  16.            updatePosition();      
  17.            startX = startY = 0;      
  18.            break;      
  19.     }      
  20.    return true;      
  21. }      
  22. //更新浮动窗口位置参数      
  23. private void updatePosition(){      
  24.      // View的当前位置      
  25.      params.x = (int)( x - startX);      
  26.      params.y = (int) (y - startY);      
  27.      wm.updateViewLayout(this, params);      
  28. }     

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

那么本例仅仅做一个循环, 实际音乐播放器要复杂些,需要根据歌剧的长度及时间间隔,来计算歌词的覆盖速度, 再根据这个速度来覆盖歌词,呈现给用户。要实现歌词播放的效果,需要用到画笔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.     if(float2 > 1.0){      
  8.         float1 = 0.0f;      
  9.         float2 = 0.01f;      
  10.     }      
  11.     this.setText("");      
  12.     float len = this.getTextSize() * text.length();      
  13.     Shader shader = new LinearGradient(0, 0, len, 0,       
  14.             new int[] { Color.YELLOW, Color.RED },  new float[]{float1, float2},      
  15.             TileMode.CLAMP);      
  16.     Paint p = new Paint();      
  17.     p.setShader(shader);      
  18.     // 下面这句才控制歌词大小      
  19.     p.setTextSize(20f);      
  20.     p.setTypeface(Typeface.DEFAULT_BOLD);      
  21.     //此处x,y坐标也要注意,尤其是y坐标,要与字体大小协调      
  22.     canvas.drawText(text, 0, 20, p);      
  23. }     

让他每隔3毫秒画一次, 就有了这个歌词播放的效果。

  1. private Runnable update = new Runnable() {      
  2.        public void run() {      
  3.         MyTextView.this.update();      
  4.         handler.postDelayed(update, 3);      
  5.        }      
  6.    };      
  7. private void update(){      
  8.     postInvalidate();      
  9. }     
举报

相关文章推荐

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

转自:http://mobile.51cto.com/android-266613.htm 天天动听, 这款Android手机上的音乐播放器,相信不少朋友都曾用过。 不知大家是否注意到,天天...
  • GEOLO
  • GEOLO
  • 2012-02-23 16:40
  • 865

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

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

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

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

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

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

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

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

天天动听 悬浮歌词(迷你歌词)效果解读

天天动听, 这款Android手机上的音乐播放器,相信不少朋友都曾用过。 不知大家是否注意到,天天动听有一个迷你歌词的特效。 什么效果呢? 就是不管你切到什么画面, 歌词永远显示,并且可以拖动。 类型QQ音乐,在电脑上播放时显示的歌词效果。 下面先来看一下效果。 [img]http://dl.iteye.com/upload/attachment/473914/51630739-f523-34f9-9d15-6fb705713ce8.gif[/img] 这个歌词是在所有界面之上的。 下面我们将这个效果解剖一下, 我认为主要有三个难点: 1. 歌词悬浮在所有

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

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

Android 悬浮Activity并可拖动(访悬浮歌词)

<div class="postbody clearfix" style="display: block; padding-top: 20px; padding-right: 0px; padding-bottom: 1px; padding-left: 0px; font-family: Helvetica,Tahoma,Arial,sans-

我的项目7 js 实现歌词同步(额,小小的效果)

js 实现歌词同步(额,小小的效果)

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

转自:http://mobile.51cto.com/android-266613.htm <p style="margin-top: 10px; margin-bottom: 10px; padding-top: 0px; padding-bottom: 0px; color: rgb(51,51,51); background-color: rgb(248,248,248); text-indent: 28px; font-family: 宋体
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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