Android仿IOS系統(tǒng)懸浮窗效果

更新時(shí)間：2021年09月14日 16:32:28 作者：z軸

這篇文章主要為大家詳細(xì)介紹了Android仿IOS系統(tǒng)懸浮窗效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

在一些場(chǎng)合里，我們使用懸浮窗會(huì)有很大的便利，比如IOS系統(tǒng)的懸浮窗，360或者其他手機(jī)衛(wèi)士的懸浮窗等等。

本篇博客，我們創(chuàng)造出兩個(gè)懸浮窗，通過點(diǎn)擊小懸浮窗打開或者關(guān)閉大懸浮窗（一個(gè)播放控制器）。

代碼如下：

在這之前，我們需要在manifest中申請(qǐng)權(quán)限：

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

并且，懸浮窗這個(gè)權(quán)限我們需要手動(dòng)在手機(jī)找到應(yīng)用權(quán)限管理，允許這個(gè)權(quán)限才行

小懸浮窗的界面代碼float_normal_view.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="65dp"
    android:layout_height="65dp"
    android:id="@+id/ll_float_normal"
    android:background="@drawable/float_bg"
    android:gravity="center"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/iv_show_control_view"
        android:layout_gravity="center"
        android:background="@drawable/white_ring"
        android:layout_width="35dp"
        android:orientation="vertical"
        android:layout_height="35dp" >

    </ImageView>

</LinearLayout>

大懸浮窗的界面代碼float_control_view：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ll_float_control"
    android:layout_width="300dp"
    android:layout_height="100dp"
    android:background="@drawable/float_bg"
    android:gravity="center_horizontal|bottom"
    android:orientation="vertical">

    <SeekBar
        android:id="@+id/timeline"
        android:paddingTop="3dp"
        android:paddingBottom="3dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:focusable="true"
        android:maxHeight="5.0dip"
        android:minHeight="5.0dip"
        android:paddingLeft="16.0dip"
        android:paddingRight="16.0dip"
        android:progressDrawable="@drawable/po_seekbar"
        android:thumb="@drawable/seekbar_thumb" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:paddingBottom="10dp"
        android:paddingEnd="20dp"
        android:paddingStart="20dp"
        android:paddingTop="10dp">

        <ImageButton
            android:id="@+id/ibt_rewind"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_centerVertical="true"
            android:layout_marginEnd="20dp"
            android:layout_marginRight="20dp"
            android:layout_toLeftOf="@+id/ibt_play"
            android:layout_toStartOf="@+id/ibt_play"
            android:background="@drawable/rewind" />

        <ImageButton
            android:id="@+id/ibt_play"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_centerHorizontal="true"
            android:background="@drawable/pause" />

        <ImageButton
            android:id="@+id/ibt_forward"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_centerVertical="true"
            android:layout_marginLeft="20dp"
            android:layout_marginStart="20dp"
            android:layout_toEndOf="@+id/ibt_play"
            android:layout_toRightOf="@+id/ibt_play"
            android:background="@drawable/forward" />

    </RelativeLayout>


</LinearLayout>

入口activity（FloatActivity ）：

public class FloatActivity extends Activity {

    MyWindowManager myWindowManager;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        myWindowManager = MyWindowManager.getInstance();
        myWindowManager.createNormalView(this.getApplicationContext());
    }
}

懸浮窗管理器MyWindowManager：

/**
 * Created by shiweixian on 2017/3/7.
 * 懸浮窗管理器
 * 創(chuàng)建，移除
 * 單例模式
 */
public class MyWindowManager {

    private FloatNormalView normalView;
    private FloatControlView controlView;

    private static MyWindowManager instance;
    private WindowManager windowManager;

    private MyWindowManager() {
    }

    public static MyWindowManager getInstance() {
        if (instance == null)
            instance = new MyWindowManager();
        return instance;
    }

    private WindowManager getWindowManager(Context context) {
        if (windowManager == null)
            windowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        return windowManager;
    }

    /**
     * 判斷小懸浮窗是否存在
     *
     * @return
     */
    public boolean isNormalViewExists() {
        return normalView != null;
    }

    /**
     * 判斷播放器這個(gè)大懸浮窗是否存在
     *
     * @return
     */
    public boolean isControlViewExists() {
        return controlView != null;
    }

    /**
     * 創(chuàng)建小型懸浮窗
     */
    public void createNormalView(Context context) {
        if (normalView == null) {
            normalView = new FloatNormalView(context);
        }
    }


    /**
     * 移除懸浮窗
     *
     * @param context
     */
    public void removeNormalView(Context context) {
        if (normalView != null) {
            windowManager.removeView(normalView);
            normalView = null;
        }
    }

    /**
     * 創(chuàng)建小型懸浮窗
     */
    public void createControlView(Context context) {
        if (controlView == null)
            controlView = new FloatControlView(context);
    }

    /**
     * 移除懸浮窗
     *
     * @param context
     */
    public void removeControlView(Context context) {
        if (controlView != null) {
            WindowManager windowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
            windowManager.removeView(controlView);
            controlView = null;
        }
    }
}

小懸浮窗FloatNormalView：

/**
 * Created by shiwe on 2017/3/7.
 * 縮小的懸浮窗
 */
public class FloatNormalView extends LinearLayout {

    /**
     * 記錄小懸浮窗的寬度
     */
    public static int viewWidth;

    /**
     * 記錄小懸浮窗的高度
     */
    public static int viewHeight;

    /**
     * 記錄系統(tǒng)狀態(tài)欄的高度
     */
    private static int statusBarHeight;

    /**
     * 用于更新小懸浮窗的位置
     */
    private WindowManager windowManager;

    /**
     * 小懸浮窗的參數(shù)
     */
    private WindowManager.LayoutParams mParams;

    /**
     * 記錄當(dāng)前手指位置在屏幕上的橫坐標(biāo)值
     */
    private float xInScreen;

    /**
     * 記錄當(dāng)前手指位置在屏幕上的縱坐標(biāo)值
     */
    private float yInScreen;

    /**
     * 記錄手指按下時(shí)在屏幕上的橫坐標(biāo)的值
     */
    private float xDownInScreen;

    /**
     * 記錄手指按下時(shí)在屏幕上的縱坐標(biāo)的值
     */
    private float yDownInScreen;

    /**
     * 記錄手指按下時(shí)在小懸浮窗的View上的橫坐標(biāo)的值
     */
    private float xInView;

    /**
     * 記錄手指按下時(shí)在小懸浮窗的View上的縱坐標(biāo)的值
     */
    private float yInView;

    public FloatNormalView(Context context) {
        super(context);
        windowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        LayoutInflater.from(context).inflate(R.layout.float_normal_view, this);
        View view = findViewById(R.id.ll_float_normal);
        viewWidth = view.getLayoutParams().width;
        viewHeight = view.getLayoutParams().height;
        initLayoutParams();
    }

    /**
     * 初始化參數(shù)
     */
    private void initLayoutParams() {
        //屏幕寬高
        int screenWidth = windowManager.getDefaultDisplay().getWidth();
        int screenHeight = windowManager.getDefaultDisplay().getHeight();

        mParams = new WindowManager.LayoutParams();
        //總是出現(xiàn)在應(yīng)用程序窗口之上。
        mParams.type = WindowManager.LayoutParams.TYPE_PHONE;

        // FLAG_NOT_TOUCH_MODAL不阻塞事件傳遞到后面的窗口
        // FLAG_NOT_FOCUSABLE 懸浮窗口較小時(shí)，后面的應(yīng)用圖標(biāo)由不可長(zhǎng)按變?yōu)榭砷L(zhǎng)按,不設(shè)置這個(gè)flag的話，home頁的劃屏?xí)袉栴}
        mParams.flags = WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE
                | WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL;

        //懸浮窗默認(rèn)顯示的位置
        mParams.gravity = Gravity.START | Gravity.TOP;
        //指定位置
        mParams.x = screenWidth - viewWidth * 2;
        mParams.y = screenHeight / 2 + viewHeight * 2;
        //懸浮窗的寬高
        mParams.width = WindowManager.LayoutParams.WRAP_CONTENT;
        mParams.height = WindowManager.LayoutParams.WRAP_CONTENT;
        mParams.format = PixelFormat.TRANSPARENT;
        windowManager.addView(this, mParams);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                // 手指按下時(shí)記錄必要數(shù)據(jù),縱坐標(biāo)的值都需要減去狀態(tài)欄高度
                xInView = event.getX();
                yInView = event.getY();
                xDownInScreen = event.getRawX();
                yDownInScreen = event.getRawY() - getStatusBarHeight();
                xInScreen = event.getRawX();
                yInScreen = event.getRawY() - getStatusBarHeight();
                break;
            case MotionEvent.ACTION_MOVE:
                xInScreen = event.getRawX();
                yInScreen = event.getRawY() - getStatusBarHeight();
                // 手指移動(dòng)的時(shí)候更新小懸浮窗的位置
                updateViewPosition();
                break;
            case MotionEvent.ACTION_UP:
                // 如果手指離開屏幕時(shí)，xDownInScreen和xInScreen相等，且yDownInScreen和yInScreen相等，則視為觸發(fā)了單擊事件。
                if (xDownInScreen == xInScreen && yDownInScreen == yInScreen) {
                    openOrCloseControlView();
                }
                break;
            default:
                break;
        }
        return true;
    }

    /**
     * 將小懸浮窗的參數(shù)傳入，用于更新小懸浮窗的位置。
     *
     * @param params 小懸浮窗的參數(shù)
     */
    public void setParams(WindowManager.LayoutParams params) {
        mParams = params;
    }

    /**
     * 更新小懸浮窗在屏幕中的位置。
     */
    private void updateViewPosition() {
        mParams.x = (int) (xInScreen - xInView);
        mParams.y = (int) (yInScreen - yInView);
        windowManager.updateViewLayout(this, mParams);
    }

    /**
     * 打開或關(guān)閉大懸浮窗。
     */
    private void openOrCloseControlView() {
        MyWindowManager manager = MyWindowManager.getInstance();
        if (!manager.isControlViewExists())
            manager.createControlView(getContext());
        else
            manager.removeControlView(getContext());
    }

    /**
     * 用于獲取狀態(tài)欄的高度。
     *
     * @return 返回狀態(tài)欄高度的像素值。
     */
    private int getStatusBarHeight() {
        if (statusBarHeight == 0) {
            try {
                Class<?> c = Class.forName("com.android.internal.R$dimen");
                Object o = c.newInstance();
                Field field = c.getField("status_bar_height");
                int x = (Integer) field.get(o);
                statusBarHeight = getResources().getDimensionPixelSize(x);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
        return statusBarHeight;
    }
}

大懸浮窗FloatControlView：

/**
 * Created by shiwe on 2017/3/7.
 * 縮小的懸浮窗
 */
public class FloatNormalView extends LinearLayout {

    /**
     * 記錄小懸浮窗的寬度
     */
    public static int viewWidth;

    /**
     * 記錄小懸浮窗的高度
     */
    public static int viewHeight;

    /**
     * 記錄系統(tǒng)狀態(tài)欄的高度
     */
    private static int statusBarHeight;

    /**
     * 用于更新小懸浮窗的位置
     */
    private WindowManager windowManager;

    /**
     * 小懸浮窗的參數(shù)
     */
    private WindowManager.LayoutParams mParams;

    /**
     * 記錄當(dāng)前手指位置在屏幕上的橫坐標(biāo)值
     */
    private float xInScreen;

    /**
     * 記錄當(dāng)前手指位置在屏幕上的縱坐標(biāo)值
     */
    private float yInScreen;

    /**
     * 記錄手指按下時(shí)在屏幕上的橫坐標(biāo)的值
     */
    private float xDownInScreen;

    /**
     * 記錄手指按下時(shí)在屏幕上的縱坐標(biāo)的值
     */
    private float yDownInScreen;

    /**
     * 記錄手指按下時(shí)在小懸浮窗的View上的橫坐標(biāo)的值
     */
    private float xInView;

    /**
     * 記錄手指按下時(shí)在小懸浮窗的View上的縱坐標(biāo)的值
     */
    private float yInView;

    public FloatNormalView(Context context) {
        super(context);
        windowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        LayoutInflater.from(context).inflate(R.layout.float_normal_view, this);
        View view = findViewById(R.id.ll_float_normal);
        viewWidth = view.getLayoutParams().width;
        viewHeight = view.getLayoutParams().height;
        initLayoutParams();
    }

    /**
     * 初始化參數(shù)
     */
    private void initLayoutParams() {
        //屏幕寬高
        int screenWidth = windowManager.getDefaultDisplay().getWidth();
        int screenHeight = windowManager.getDefaultDisplay().getHeight();

        mParams = new WindowManager.LayoutParams();
        //總是出現(xiàn)在應(yīng)用程序窗口之上。
        mParams.type = WindowManager.LayoutParams.TYPE_PHONE;

        // FLAG_NOT_TOUCH_MODAL不阻塞事件傳遞到后面的窗口
        // FLAG_NOT_FOCUSABLE 懸浮窗口較小時(shí)，后面的應(yīng)用圖標(biāo)由不可長(zhǎng)按變?yōu)榭砷L(zhǎng)按,不設(shè)置這個(gè)flag的話，home頁的劃屏?xí)袉栴}
        mParams.flags = WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE
                | WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL;

        //懸浮窗默認(rèn)顯示的位置
        mParams.gravity = Gravity.START | Gravity.TOP;
        //指定位置
        mParams.x = screenWidth - viewWidth * 2;
        mParams.y = screenHeight / 2 + viewHeight * 2;
        //懸浮窗的寬高
        mParams.width = WindowManager.LayoutParams.WRAP_CONTENT;
        mParams.height = WindowManager.LayoutParams.WRAP_CONTENT;
        mParams.format = PixelFormat.TRANSPARENT;
        windowManager.addView(this, mParams);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                // 手指按下時(shí)記錄必要數(shù)據(jù),縱坐標(biāo)的值都需要減去狀態(tài)欄高度
                xInView = event.getX();
                yInView = event.getY();
                xDownInScreen = event.getRawX();
                yDownInScreen = event.getRawY() - getStatusBarHeight();
                xInScreen = event.getRawX();
                yInScreen = event.getRawY() - getStatusBarHeight();
                break;
            case MotionEvent.ACTION_MOVE:
                xInScreen = event.getRawX();
                yInScreen = event.getRawY() - getStatusBarHeight();
                // 手指移動(dòng)的時(shí)候更新小懸浮窗的位置
                updateViewPosition();
                break;
            case MotionEvent.ACTION_UP:
                // 如果手指離開屏幕時(shí)，xDownInScreen和xInScreen相等，且yDownInScreen和yInScreen相等，則視為觸發(fā)了單擊事件。
                if (xDownInScreen == xInScreen && yDownInScreen == yInScreen) {
                    openOrCloseControlView();
                }
                break;
            default:
                break;
        }
        return true;
    }

    /**
     * 將小懸浮窗的參數(shù)傳入，用于更新小懸浮窗的位置。
     *
     * @param params 小懸浮窗的參數(shù)
     */
    public void setParams(WindowManager.LayoutParams params) {
        mParams = params;
    }

    /**
     * 更新小懸浮窗在屏幕中的位置。
     */
    private void updateViewPosition() {
        mParams.x = (int) (xInScreen - xInView);
        mParams.y = (int) (yInScreen - yInView);
        windowManager.updateViewLayout(this, mParams);
    }

    /**
     * 打開或關(guān)閉大懸浮窗。
     */
    private void openOrCloseControlView() {
        MyWindowManager manager = MyWindowManager.getInstance();
        if (!manager.isControlViewExists())
            manager.createControlView(getContext());
        else
            manager.removeControlView(getContext());
    }

    /**
     * 用于獲取狀態(tài)欄的高度。
     *
     * @return 返回狀態(tài)欄高度的像素值。
     */
    private int getStatusBarHeight() {
        if (statusBarHeight == 0) {
            try {
                Class<?> c = Class.forName("com.android.internal.R$dimen");
                Object o = c.newInstance();
                Field field = c.getField("status_bar_height");
                int x = (Integer) field.get(o);
                statusBarHeight = getResources().getDimensionPixelSize(x);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
        return statusBarHeight;
    }
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: