Android新增可拖動、點選的懸浮視窗

阿新 • • 發佈：2019-01-08

原文地址：http://mobile.9sssd.com/android/art/1288，貌似這個地址也不是原創不過我是看的這個。。就這個吧。。。這個例子蠻不錯，簡單易懂，註釋也很全，只是執行之後發現有個小bug，往左上角拖動的時候會執行點選事件，造成的原因也很簡單，就是判斷移動X、Y的時候相減的那個值為負數造成的，取下絕對值就好了，在下面的程式碼中已經修改。

以下是原文：

實現這種功能，主要有兩步：

1.判斷當前顯示的是為桌面。這個內容我在前面的帖子裡面已經有過介紹，如果還沒看過的趕快穩步看一下哦。

2.使用windowManager往最頂層新增一個View

這個知識點就是為本文主要講解的內容哦。在本文的講解中，我們還會講到下面的知識點：

a.如果獲取到狀態列的高度

b.懸浮視窗的拖動

c.懸浮視窗的點選事件

在開始之前，我們先來看一下效果圖：

首先FloatView的程式碼，FloatView是一個自定義的可拖動控制元件。

部分程式碼解釋：

1、int statusBarHeight = frame.top;

為獲取狀態列的高度，為什麼在event.getRawY()的時候減去狀態列的高度呢？

因為我們的懸浮視窗不可能顯示到狀態列中去，而後getRawY為獲取到螢幕原點的距離。當我們螢幕處於全屏模式時，獲取到的狀態列高度會變成0 。

2、(x - mStartX) < 5 && (y - mStartY) < 5

如果我們在觸控過程中，移動距離少於5 ,則視為點選，觸發點選的回撥。

（這個就是bug的地方，改成 Math.abs(x - mStartX) < 5 && Math.abs(y - mStartY) < 5 即可）

<span style="font-family:Comic Sans MS;font-size:18px;">public class FloatView extends ImageView {
	private float mTouchX;
	private float mTouchY;
	private float x;
	private float y;
	private float mStartX;
	private float mStartY;
	private OnClickListener mClickListener;
	private WindowManager windowManager;
	// 此windowManagerParams變數為獲取的全域性變數，用以儲存懸浮視窗的屬性
	private WindowManager.LayoutParams windowManagerParams;

	public FloatView(Context context) {
		super(context);
		windowManager = (WindowManager) getContext()
				.getApplicationContext().getSystemService(Context.WINDOW_SERVICE);
		windowManagerParams = ((MyApplication) getContext()
				.getApplicationContext()).getWindowParams();
	}

	@Override
	public boolean onTouchEvent(MotionEvent event) {
		// 獲取到狀態列的高度
		Rect frame = new Rect();
		getWindowVisibleDisplayFrame(frame);
		int statusBarHeight = frame.top;
		// 獲取相對螢幕的座標，即以螢幕左上角為原點
		x = event.getRawX();
		y = event.getRawY() - statusBarHeight; // statusBarHeight是系統狀態列的高度
		switch (event.getAction()) {
		case MotionEvent.ACTION_DOWN: // 捕獲手指觸控按下動作
			// 獲取相對View的座標，即以此View左上角為原點
			mTouchX = event.getX();
			mTouchY = event.getY();
			mStartX = x;
			mStartY = y;
			break;
		case MotionEvent.ACTION_MOVE: // 捕獲手指觸控移動動作
			updateViewPosition();
			break;
		case MotionEvent.ACTION_UP: // 捕獲手指觸控離開動作
			updateViewPosition();
			mTouchX = mTouchY = 0;
			//取絕對值
			if (Math.abs(x - mStartX) < 5 && Math.abs(y - mStartY) < 5) {
				if (mClickListener != null) {
					mClickListener.onClick(this);
				}
			}
			break;
		}
		return true;
	}

	@Override
	public void setOnClickListener(OnClickListener l) {
		this.mClickListener = l;
	}

	private void updateViewPosition() {
		// 更新浮動視窗位置引數
		windowManagerParams.x = (int) (x - mTouchX);
		windowManagerParams.y = (int) (y - mTouchY);
		windowManager.updateViewLayout(this, windowManagerParams); // 重新整理顯示
	}
}</span>

然後我們需要另外我們需要自定義一個application：

自定義application的目的是為了儲存windowParams的值，因為我們在拖動懸浮視窗的時候，如果每次都重新new一個layoutParams的話，在update的時候會在異常發現。

windowParams的值也不一定非得在自定義application裡面來儲存，只要是全域性的都行。

<span style="font-family:Comic Sans MS;font-size:18px;">public class FloatApplication extends Application {
	private WindowManager.LayoutParams windowParams = new WindowManager.LayoutParams();

	public WindowManager.LayoutParams getWindowParams() {
		return windowParams;
	}
}</span>

最後我們再來看看Activity中的實現。

在activity中我們主要是新增懸浮窗，並且設定他的位置。另外需要注意flags的應用：

<span style="font-family:Microsoft YaHei;">LayoutParams.FLAG_NOT_TOUCH_MODAL 不影響後面的事件
    LayoutParams.FLAG_NOT_FOCUSABLE  不可聚焦
    LayoutParams.FLAG_NOT_TOUCHABLE 不可觸控</span>

最後我們在onDestroy()中移除到懸浮視窗。所以，我們測試的時候，記得按Home鍵來切換到桌面。

<span style="font-family:Comic Sans MS;font-size:18px;">public class MainActivity extends Activity implements OnClickListener {
	private WindowManager windowManager = null;
	private FloatView floatView = null;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);// 取消標題欄
		getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
				WindowManager.LayoutParams.FLAG_FULLSCREEN);// 全屏
		setContentView(R.layout.activity_main);
		createView();
	}

	public void onDestroy() {
		super.onDestroy();
		// 在程式退出(Activity銷燬）時銷燬懸浮視窗
		windowManager.removeView(floatView);
	}

	private void createView() {
		floatView = new FloatView(getApplicationContext());
		floatView.setOnClickListener(this);
		floatView.setImageResource(R.drawable.ic_launcher); // 這裡簡單的用自帶的icon來做演示
		// 獲取WindowManager
		windowManager = (WindowManager) getApplicationContext()
				.getSystemService(Context.WINDOW_SERVICE);
		// 設定LayoutParams(全域性變數）相關引數
		LayoutParams windowManagerParams = ((FloatApplication) getApplication())
				.getWindowParams();
		windowManagerParams.type = LayoutParams.TYPE_PHONE; // 設定window type
		windowManagerParams.format = PixelFormat.RGBA_8888; // 設定圖片格式，效果為背景透明
		// 設定Window flag
		windowManagerParams.flags = LayoutParams.FLAG_NOT_TOUCH_MODAL
				| LayoutParams.FLAG_NOT_FOCUSABLE;
		/*
		 * 注意，flag的值可以為： LayoutParams.FLAG_NOT_TOUCH_MODAL 不影響後面的事件
		 * LayoutParams.FLAG_NOT_FOCUSABLE 不可聚焦 LayoutParams.FLAG_NOT_TOUCHABLE
		 * 不可觸控
		 */
		// 調整懸浮視窗至左上角，便於調整座標
		windowManagerParams.gravity = Gravity.LEFT | Gravity.TOP;
		// 以螢幕左上角為原點，設定x、y初始值
		windowManagerParams.x = 0;
		windowManagerParams.y = 0;
		// 設定懸浮視窗長寬資料
		windowManagerParams.width = LayoutParams.WRAP_CONTENT;
		windowManagerParams.height = LayoutParams.WRAP_CONTENT;
		// 顯示myFloatView影象
		windowManager.addView(floatView, windowManagerParams);
	}

	public void onClick(View v) {
		Toast.makeText(this, "Clicked", Toast.LENGTH_SHORT).show();
	}
}</span>

最後千萬記得，在androidManifest.xml中來申明我們需要用到的ndroid.permission.SYSTEM_ALERT_WINDOW許可權，並且記得申明我們自定義的application哦。

AndroidManifest.xml程式碼如下：

<span style="font-family:Comic Sans MS;font-size:18px;"><?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.testwindow"
    android:versionCode="1"
    android:versionName="1.0" >
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="18" />

    <application
        android:name="com.example.testwindow.FloatApplication"
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.example.testwindow.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest></span>

Android新增可拖動、點選的懸浮視窗

Android新增可拖動、點選的懸浮視窗

Android SeekBar 禁止拖動和點選的實現（可能是最簡單完美的實現）

MUI各種手勢事件：滑動、拖動、點選等

iOS自定義可拖動帶點選效果的懸浮按鈕

Android觸控事件傳遞機制實踐——可拖動、大小切換的SizeSwitchView

js按住滑鼠左鍵選中網格元素，被選中的網格位置上填充可輸入內容，插入圖片等的容器。並且網格上的容器，可拖動、改變尺寸、但互相之間不可重疊（如果重疊回到上一次的狀態）。

H5音訊樣式修改，拖拽、點選進度操作、總時長載入

【OpenLayers】ol3設定地圖可拖動、禁止拖動

Android實現可拖動的懸浮按鈕控制元件

Qt自定義標題欄詳細介紹(可拖動、放大縮小、關閉、標題欄具有漸變色)

Android—seekbar可拖動進度條

iOS懸浮、可拖動、自動吸附螢幕邊緣的按鈕製作

android實現可拖動按鈕

Android 可拖動可點選懸浮窗

android實現可自由移動、監聽點選事件的懸浮窗

可拖動的懸浮div，相容手指觸控和滑鼠點選

android自己定義進度值可拖動的seekbar

讓DIV可編輯、可拖動

android仿微信、QQ等聊天介面，實現點選輸入框彈出軟鍵盤、點選其他區域收起軟鍵盤，預設滑動至最低端

BootStrap的table技術小結：資料填充、分頁、列寬可拖動

Android新增可拖動、點選的懸浮視窗

相關推薦