zoukankan      html  css  js  c++  java

  • Android 悬浮歌词(迷你歌词)效果解读 (转)

    先来看一下效果。

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

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

    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之上。

     

    [java] view plaincopyprint?
    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中添加权限：

     

    [xhtml] view plaincopyprint?
    1. <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>  

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

     

     

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

    [java] view plaincopyprint?
    1. params.flags = LayoutParams.FLAG_NOT_TOUCH_MODAL | LayoutParams.FLAG_NOT_FOCUSABLE;  

    加上这一句就可以了。

     

     

     

     

     

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

     

     

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

     

     

     

    下面开始实现第二步： 歌词移动！

     

     

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

     

    [java] view plaincopyprint?
    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坐标，否则拖动时会错位。

    [java] view plaincopyprint?
    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);  

    其中下面三句是关键：

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

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

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

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

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

    一起来看下代码：

    [java] view plaincopyprint?
    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(0, 0, 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, 0, 20, p);  
    24.           
    25. }  

    好了，下面发一下效果图：

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

    AndroidManifest.xml

    [xhtml] view plaincopyprint?
    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

    [java] view plaincopyprint?
    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

    [java] view plaincopyprint?
    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

    [java] view plaincopyprint?
    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(90, 150, 150, 150));  
    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(0, 0, 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, 0, 20, 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. }  
  • 相关阅读:
    「UVA12293」 Box Game
    「CF803C」 Maximal GCD
    「CF525D」Arthur and Walls
    「CF442C」 Artem and Array
    LeetCode lcci 16.03 交点
    LeetCode 1305 两棵二叉搜索树中的所有元素
    LeetCode 1040 移动石子直到连续 II
    LeetCode 664 奇怪的打印机
    iOS UIPageViewController系统方法崩溃修复
    LeetCode 334 递增的三元子序列
  • 原文地址：https://www.cnblogs.com/weixiao870428/p/3569798.html
Copyright © 2011-2022 走看看