Android 懸浮窗

AnRFDev發表於2022-01-04

懸浮窗是一種比較常見的需求。例如把視訊通話介面縮小成一個懸浮窗，然後使用者可以在其他介面上處理事情。

本文給出一個簡單的懸浮窗實現。可縮小activity和還原大小。可懸浮在其他activity上。使用TouchListener監聽觸控事件，拖動懸浮窗。

縮放方法

縮放activity需要使用WindowManager.LayoutParams，控制window的寬高

在activity中呼叫

android.view.WindowManager.LayoutParams p = getWindow().getAttributes();
p.height = 480; // 高度
p.width = 360;  // 寬度
p.dimAmount = 0.0f; // 不讓下面的介面變暗
getWindow().setAttributes(p);

dim:
adj. 暗淡的; 昏暗的; 微弱的; 不明亮的; 光線暗淡的;
v. (使)變暗淡，變微弱，變昏暗; (使)減弱，變淡漠，失去光澤;

修改了WindowManager.LayoutParams的寬高，activity的window大小會發生變化。

要變回預設大小，在activity中呼叫

getWindow().setLayout(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);

如果縮小時改變了位置，需要把window的位置置為0

WindowManager.LayoutParams lp = getWindow().getAttributes();
lp.x = 0;
lp.y = 0;
getWindow().setAttributes(lp);

activity變小時，後面可能是黑色的背景。這需要進行下面的操作。

懸浮樣式

在styles.xml裡新建一個MeTranslucentAct。

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="windowNoTitle">true</item>
    </style>

    <style name="TranslucentAct" parent="AppTheme">
        <item name="android:windowBackground">#80000000</item>
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowAnimationStyle">@android:style/Animation.Translucent</item>
    </style>
</resources>

主要style是AppCompat的。

指定一個window的背景android:windowBackground
使用的Activity繼承自androidx.appcompat.app.AppCompatActivity

activity縮小後，背景是透明的，可以看到後面的其他頁面

點選穿透空白

activity縮小後，點選旁邊空白處，其他元件能接到點選事件

在onCreate方法的setContentView之前，給WindowManager.LayoutParams新增標記FLAG_LAYOUT_NO_LIMITS和FLAG_NOT_TOUCH_MODAL

WindowManager.LayoutParams layoutParams = getWindow().getAttributes();
layoutParams.flags = WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS |
        WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL;

mBinding = DataBindingUtil.setContentView(this, R.layout.act_float_scale);

移動懸浮窗

監聽觸控事件，計算出手指移動的距離，然後移動懸浮窗。

private boolean mIsSmall = false; // 當前是否小視窗
private float mLastTx = 0; // 手指的上一個位置x
private float mLastTy = 0;
// ....

    mBinding.root.setOnTouchListener((v, event) -> {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                Log.d(TAG, "down " + event);
                mLastTx = event.getRawX();
                mLastTy = event.getRawY();
                return true;
            case MotionEvent.ACTION_MOVE:
                Log.d(TAG, "move " + event);
                float dx = event.getRawX() - mLastTx;
                float dy = event.getRawY() - mLastTy;
                mLastTx = event.getRawX();
                mLastTy = event.getRawY();
                Log.d(TAG, "  dx: " + dx + ", dy: " + dy);
                if (mIsSmall) {
                    WindowManager.LayoutParams lp = getWindow().getAttributes();
                    lp.x += dx;
                    lp.y += dy;
                    getWindow().setAttributes(lp);
                }

                break;
            case MotionEvent.ACTION_UP:
                Log.d(TAG, "up " + event);
                return true;
            case MotionEvent.ACTION_CANCEL:
                Log.d(TAG, "cancel " + event);
                return true;
        }
        return false;
    });

mIsSmall用來記錄當前activity是否變小（懸浮）。

在觸控監聽器中返回true，表示消費這個觸控事件。

event.getX()和event.getY()獲取到的是當前View的觸控座標。
event.getRawX()和event.getRawY()獲取到的是螢幕的觸控座標。即觸控點在螢幕上的位置。

例子的完整程式碼

啟用了databinding

android {
    dataBinding {
        enabled = true
    }
}

styles.xml

新建一個樣式

    <style name="TranslucentAct" parent="AppTheme">
        <item name="android:windowBackground">#80000000</item>
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowAnimationStyle">@android:style/Animation.Translucent</item>
    </style>

layout

act_float_scale.xml裡面放一些按鈕，控制放大和縮小。
ConstraintLayout拿來監聽觸控事件。

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/root"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#555555">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical"
            app:layout_constraintTop_toTopOf="parent">

            <Button
                android:id="@+id/to_small"
                style="@style/NormalBtn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="變小" />

            <Button
                android:id="@+id/to_reset"
                style="@style/NormalBtn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="12dp"
                android:text="還原" />
        </LinearLayout>
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

activity

FloatingScaleAct

import android.os.Bundle;
import android.util.Log;
import android.view.Display;
import android.view.MotionEvent;
import android.view.ViewGroup;
import android.view.WindowManager;

import androidx.appcompat.app.AppCompatActivity;
import androidx.databinding.DataBindingUtil;

import com.rustfisher.tutorial2020.R;
import com.rustfisher.tutorial2020.databinding.ActFloatScaleBinding;

public class FloatingScaleAct extends AppCompatActivity {
    private static final String TAG = "rfDevFloatingAct";

    ActFloatScaleBinding mBinding;

    private boolean mIsSmall = false; // 當前是否小視窗
    private float mLastTx = 0; // 手指的上一個位置
    private float mLastTy = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        WindowManager.LayoutParams layoutParams = getWindow().getAttributes();
        layoutParams.flags = WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS |
                WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL;

        mBinding = DataBindingUtil.setContentView(this, R.layout.act_float_scale);

        mBinding.toSmall.setOnClickListener(v -> toSmall());
        mBinding.toReset.setOnClickListener(v -> {
            WindowManager.LayoutParams lp = getWindow().getAttributes();
            lp.x = 0;
            lp.y = 0;
            getWindow().setAttributes(lp);
            getWindow().setLayout(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
            mIsSmall = false;
        });

        mBinding.root.setOnTouchListener((v, event) -> {
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    Log.d(TAG, "down " + event);
                    mLastTx = event.getRawX();
                    mLastTy = event.getRawY();
                    return true;
                case MotionEvent.ACTION_MOVE:
                    Log.d(TAG, "move " + event);
                    float dx = event.getRawX() - mLastTx;
                    float dy = event.getRawY() - mLastTy;
                    mLastTx = event.getRawX();
                    mLastTy = event.getRawY();
                    Log.d(TAG, "  dx: " + dx + ", dy: " + dy);
                    if (mIsSmall) {
                        WindowManager.LayoutParams lp = getWindow().getAttributes();
                        lp.x += dx;
                        lp.y += dy;
                        getWindow().setAttributes(lp);
                    }

                    break;
                case MotionEvent.ACTION_UP:
                    Log.d(TAG, "up " + event);
                    return true;
                case MotionEvent.ACTION_CANCEL:
                    Log.d(TAG, "cancel " + event);
                    return true;
            }
            return false;
        });
    }

    private void toSmall() {
        mIsSmall = true;

        WindowManager m = getWindowManager();
        Display d = m.getDefaultDisplay();
        WindowManager.LayoutParams p = getWindow().getAttributes();
        p.height = (int) (d.getHeight() * 0.35);
        p.width = (int) (d.getWidth() * 0.4);
        p.dimAmount = 0.0f;
        getWindow().setAttributes(p);
    }
}

manifest裡註冊這個activity

<activity
    android:name=".act.FloatingScaleAct"
    android:theme="@style/TranslucentAct" />

執行效果

在紅米9A（Android 10，MIUI 12.5.1 穩定版）和榮耀（Android 5.1）上執行OK

小結

為實現懸浮窗效果，思路是改變activity大小，將activity所在window的背景設定透明，監聽觸控事件改變window的位置。
主要使用的類 WindowManager.LayoutParams

本文連結

懸浮窗的一種實現 | Android懸浮窗Window應用
2019-12-19
Android
Android 懸浮窗 System Alert Window
2022-01-06
Android
Android懸浮窗的學習
2018-10-14
Android
Android 攝像頭預覽懸浮窗
2022-01-05
Android
Android仿微信文章懸浮窗效果
2018-10-09
Android
【轉載】使用WindowManage實現Android懸浮窗
2018-12-20
Android
Android 輔助許可權與懸浮窗
2019-01-21
Android
Android中的懸浮框
2020-11-06
Android
下沉式通知的一種實現 | Android懸浮窗Window應用
2020-01-06
Android
懸浮窗開發設計實踐
2022-11-22
QPM 之懸浮窗設定資訊
2019-01-03
QPM 之懸浮窗助力效能優化
2019-01-03
優化
Android懸浮框的實現
2018-08-13
Android
Android：會呼吸的懸浮氣泡
2018-07-02
Android
直播平臺製作，Android 懸浮窗延時5秒返回APP問題
2023-03-01
AndroidAPP
小米 TYPE_TOAST 懸浮窗無效的原因
2021-09-09
AST
Android懸浮框的適配問題
2020-12-20
Android
Android通過WindowManager實現懸浮框
2020-12-06
Android
直播原始碼，懸浮窗滾動漸變色效果
2022-03-01
原始碼
百度地圖新增懸浮窗搜尋功能
2018-12-14
地圖
Android懸浮窗怎麼簡單實現？這樣用 kotlin編寫輕鬆搞定！
2020-01-15
AndroidKotlin
Android 攝像頭預覽懸浮窗，可拖動，可顯示在其他app上方
2022-01-07
AndroidAPP
[轉]Android輕鬆實現RecyclerView懸浮條
2019-01-04
AndroidView
Android RecyclerView實現頭部懸浮吸頂效果
2019-03-04
AndroidView
如何獲取Vivo系統的懸浮窗許可權狀態
2021-09-09
記一次懸浮窗的上線以及坑點總結
2019-11-12
ALaunch 0.8 := 懸浮提示
2024-04-10
非侵入式無許可權應用內懸浮窗的實現
2018-08-12
Fluid Browser for Mac(多工懸浮透明視窗瀏覽器)1.6啟用版
2023-11-06
UIMac瀏覽器
電商直播主圖設計素材，輕鬆搞定直播懸浮窗設計！
2023-04-11
直播app開發，推出語音聊天室時保持懸浮窗存在狀態
2022-01-13
APP
css做個波浪懸浮球？
2019-05-10
CSS
底部導航欄懸浮效果
2018-07-24
直播軟體原始碼，設定懸浮窗並可進行任意位置的移動
2022-05-17
原始碼
短視訊app原始碼，連麥時最小化出現可移動懸浮窗
2022-01-24
APP原始碼
jQuery滑鼠懸浮翻牌效果詳解
2018-11-24
jQuery
jQuery滑鼠懸浮聚焦效果詳解
2018-12-11
jQuery
css滑鼠懸浮下拉選單效果
2018-08-13
CSS