[Android] 如何達到物件Overlay的效果並使用TouchMode拖移半透明的Button

如何讓兩個View達到Overlay的效果呢? 這篇要做的是讓一個Button overlay VideoView , 並且可以使用滑鼠移動Button(實機上是使用手指觸控移動) , 至於VideoView我們根據之前文章提到的方式來建構 , 

[Android] 如何使用VideoView播放影片 , 接下來我們要使用FrameLayout來達成物件Overlay的效果 , Layout如下

Layout檔案裡面使用了FrameLayout來使裡面的物件達到Overlay的效果 , 所以放了ViedoView和Button在裡面(擺放的順序是有關係的) , 但是只有如此的話會發現當我們移動Button走出一定範圍之後 , Button會消失 , 所以又放了一個LinearLayout , 再把Button擺了進去 , 想當然的LinearLayout必須是透明的 , 不然根本看不到VideoView的影像 , 所以在LinearLayout的屬性宣告上加了這行android:background="@+drawable/transparent_background , 所以我們必須事先宣告@+drawable/transparent_background , 他擺放的位置是在res/values/colors.xml 內容如下

    #e0000000
    
    #00000000
    

至於要移動Button , 要先實作OnTouchListener , 而且為了不要讓Button超出螢幕 , 我們還要取得顯示螢幕的長和寬的資料 , 程式碼如下

import android.app.Activity;
import android.net.Uri;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.view.WindowManager;
import android.widget.Button;
import android.widget.MediaController;

public class CustomVideoViewTest extends Activity implements OnTouchListener
{
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
     super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
        //隱藏 notification bar
        
        dm = getResources().getDisplayMetrics();
        //取得螢幕顯示的資料
        ScreenWidth = dm.widthPixels;  
        ScreenHeight = dm.heightPixels; 
        //螢幕寬和高的Pixels當作界線
        
        MoveButton = (Button) findViewById(R.id.Button);
        MoveButton.setOnTouchListener(this);
        
        CVView = (CustomVideoView)findViewById(R.id.VideoView);        
        MediaController controller = new MediaController(this); 
        CVView.setMediaController(controller); 
        //CVView.setVideoPath("android.resource://com.android/"+R.raw.video);
        //播放Local端的影音資源 , SD Card or res/raw 裡的影音檔
        CVView.setVideoURI(Uri.parse("http://www.dubblogs.cc:8751/Android/Test/Media/mp4/test.mp4"));
        //播放遠端的影音資源 , 影音串流
        CVView.requestFocus();
        CVView.start();
    }
    
    CustomVideoView CVView;
    DisplayMetrics dm;
    int lastX , lastY;
    int ScreenWidth , ScreenHeight;
    Button MoveButton;
    
    @Override
 public boolean onTouch(View view, MotionEvent event)
 {
  // TODO Auto-generated method stub
  
     int events = event.getAction();
     
     switch(events)
        {
         case MotionEvent.ACTION_DOWN:           
         
         lastX = (int)event.getRawX();
         lastY = (int)event.getRawY();
         
         break;
        
         //layout(Left,Top,Right,Bottom)
         //     Left position, relative to parent 
         //      Top position, relative to parent 
         //    Right position, relative to parent 
         //  Bottom position, relative to parent  
         
         case MotionEvent.ACTION_MOVE:
         int Movex=(int)event.getRawX()-lastX;
         int Movey=(int)event.getRawY()-lastY;           
         
         int Left=view.getLeft()+ Movex; 
         int Bottom=view.getBottom()+ Movey;
         int Right=view.getRight()+ Movex;
         int Top=view.getTop()+ Movey;
         
         if(Left<0)
         {
          Left=0;    
          Right=Left+view.getWidth();
         }
         
         if(Top<0)
         {
          Top=0;
          Bottom=Top+view.getHeight();
         }
         
         if(Right > ScreenWidth)
         {
         Right = ScreenWidth;
          Left=Right-view.getWidth();
         }
        
         if(Bottom > ScreenHeight-50)
         {
         Bottom = ScreenHeight-50;
            Top = Bottom - view.getHeight();
         }
         view.layout(Left, Top, Right, Bottom);
         lastX =(int)event.getRawX();
         lastY =(int)event.getRawY();
   view.postInvalidate();
                
         break; 
 
        }
     
     return false;
 }    
}

執行的效果如下

Button還可以加上背景圖 , 更棒的是Button的形狀會依照圖片做變更 , 只要稍作修改就可以

如果想對圖片的透明度的改變 , 只要加入下面那段程式碼

MoveButton = (Button) findViewById(R.id.Button);        
MoveButton.getBackground().setAlpha(100);

先讓他回傳一個Drawable物件 , 接著對他的透明度進行改變 setAlpha 的參數越小透明化的效果越明顯

public Drawable getBackground ()

Since: API Level 1

Gets the background drawable

Returns

• The drawable used as the background for this view, if any.

public abstract void setAlpha (int alpha)

Since: API Level 1

Specify an alpha value for the drawable. 0 means fully transparent, and 255 means fully opaque.