仿微信視屏懸浮窗效果實現

在項目中需要對接入的騰訊雲音視頻,可以懸浮窗顯示,懸浮窗可拖拽,並且在懸浮窗不影響其他的activity的焦點。

這個大神的文章https://blog.csdn.net/oYuDaBaJiao/article/details/99998985,他講的是視頻通話時,將遠端視頻以懸浮窗形式展示,根據他的代碼我進行了部分簡化

1.懸浮窗效果:點擊縮小按鈕,將當前遠端視屏加載進懸浮窗,且懸浮窗可拖拽,不影響其他界面焦點;點擊懸浮窗可返回原來的Activity

2.實現懸浮窗需要:

在androidManifest中申請懸浮窗權限<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

在androidManifest中註冊FloatWindowService

 3.視屏activity實現:
-將activity置於後臺關鍵代碼:moveTaskToBack(true);//將activity置於後臺
-開啓懸浮窗

/**
     * 定義服務綁定的回調 開啓視頻通話服務連接
     */
    private ServiceConnection mVideoCallServiceConnection = new ServiceConnection() {

        @Override
        public void onServiceConnected(ComponentName name, IBinder service) {
            // 獲取服務的操作對象
            FloatWindowService.MyBinder binder = (FloatWindowService.MyBinder) service;
            binder.getService();
        }

        @Override
        public void onServiceDisconnected(ComponentName name) {

        }
    };

/*
     * 開啓懸浮Video服務
     */
    private void startVideoService() {
        //最小化Activity
        moveTaskToBack(true);//將activity置於後臺
        //開啓服務顯示懸浮框
        Intent serviceVideoIntent = new Intent(this, FloatWindowService.class);
        mServiceBound = bindService(serviceVideoIntent, mVideoCallServiceConnection, Context.BIND_AUTO_CREATE);//綁定Service
    }

-懸浮窗結束時

//在onDestroy()與onReStart()中解綁並銷燬相關內容
if (mServiceBound) {
            unbindService(mVideoCallServiceConnection);//解綁
            mServiceBound = false;
        }

4.懸浮窗實現相關代碼: 


/**
 * 視頻懸浮窗服務
 */
public class FloatVideoWindowService extends Service implements View.OnTouchListener {
    private WindowManager mWindowManager;
    private WindowManager.LayoutParams wmParams;
    private LayoutInflater inflater;
    private String currentBigUserId;
    private String remoteUserId;
    //浮動佈局view
    private View mFloatingLayout;
    //容器父佈局
    private TXCloudVideoView mTXCloudVideoView;


    //開始觸控的座標,移動時的座標(相對於屏幕左上角的座標)
    private int mTouchStartX, mTouchStartY, mTouchCurrentX, mTouchCurrentY;
    //開始時的座標和結束時的座標(相對於自身控件的座標)
    private int mStartX, mStartY, mStopX, mStopY;
    //判斷懸浮窗口是否移動,這裏做個標記,防止移動後鬆手觸發了點擊事件
    private boolean isMove;


    @Override
    public void onCreate() {
        super.onCreate();
        initWindow();//設置懸浮窗基本參數(位置、寬高等)

    }

    @Nullable
    @Override
    public IBinder onBind(Intent intent) {
        currentBigUserId = intent.getStringExtra("localUserId");
        remoteUserId = intent.getStringExtra("remoteUserId");
        initFloating();//懸浮框點擊事件的處理
        return new MyBinder();
    }

    public class MyBinder extends Binder {
        public FloatVideoWindowService getService() {
            return FloatVideoWindowService.this;
        }
    }


    @Override
    public int onStartCommand(Intent intent, int flags, int startId) {
        return super.onStartCommand(intent, flags, startId);
    }

    @Override
    public void onDestroy() {
        super.onDestroy();
        if (mFloatingLayout != null) {
            // 移除懸浮窗口
            mWindowManager.removeView(mFloatingLayout);
            mFloatingLayout = null;
        }
    }

    /**
     * 設置懸浮框基本參數(位置、寬高等)
     */
    private void initWindow() {
        mWindowManager = (WindowManager) getApplicationContext().getSystemService(Context.WINDOW_SERVICE);
        //設置好懸浮窗的參數
        wmParams = getParams();
        // 懸浮窗默認顯示以左上角爲起始座標
        wmParams.gravity = Gravity.RIGHT | Gravity.TOP;
        //懸浮窗的開始位置,因爲設置的是從左上角開始,所以屏幕左上角是x=0;y=0
        wmParams.x = 10;
        wmParams.y = 120;
        //得到容器,通過這個inflater來獲得懸浮窗控件
        inflater = LayoutInflater.from(getApplicationContext());
        // 獲取浮動窗口視圖所在佈局
        mFloatingLayout = inflater.inflate(R.layout.dlg_floatview, null);
        // 添加懸浮窗的視圖
        mWindowManager.addView(mFloatingLayout, wmParams);
    }


    private WindowManager.LayoutParams getParams() {
        wmParams = new WindowManager.LayoutParams();
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
            wmParams.type = WindowManager.LayoutParams.TYPE_APPLICATION_OVERLAY;
        } else {
            wmParams.type = WindowManager.LayoutParams.TYPE_PHONE;
        }
        //設置可以顯示在狀態欄上
        wmParams.flags = WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE | WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL |
                WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN | WindowManager.LayoutParams.FLAG_LAYOUT_INSET_DECOR |
                WindowManager.LayoutParams.FLAG_WATCH_OUTSIDE_TOUCH;

        //設置懸浮窗口長寬數據
        wmParams.width = WindowManager.LayoutParams.WRAP_CONTENT;
        wmParams.height = WindowManager.LayoutParams.WRAP_CONTENT;
        return wmParams;
    }

    //加載遠端視屏
    private void initFloating() {
        mTXCloudVideoView = mFloatingLayout.findViewById(R.id.trtc_video_view_layout_float);
        TRTCVideoLayoutManager mTRTCVideoLayout = RTCConfig.mVideoViewLayout;
        TXCloudVideoView renderView = mTRTCVideoLayout.findCloudViewView(remoteUserId, TRTCCloudDef.TRTC_VIDEO_STREAM_TYPE_BIG);
        if (renderView == null) {
            renderView = mTRTCVideoLayout.allocCloudVideoView(remoteUserId, TRTCCloudDef.TRTC_VIDEO_STREAM_TYPE_BIG);
        }
        if (remoteUserId == currentBigUserId) {
            TXCGLSurfaceView mTXCGLSurfaceView = renderView.getGLSurfaceView();
            if (mTXCGLSurfaceView != null && mTXCGLSurfaceView.getParent() != null) {
                ((ViewGroup) mTXCGLSurfaceView.getParent()).removeView(mTXCGLSurfaceView);
                mTXCloudVideoView.addVideoView(mTXCGLSurfaceView);
            }
        } else {
            TextureView mTextureView = renderView.getVideoView();
            if (mTextureView != null && mTextureView.getParent() != null) {
                ((ViewGroup) mTextureView.getParent()).removeView(mTextureView);
                mTXCloudVideoView.addVideoView(mTextureView);
            }
        }
        //懸浮框觸摸事件,設置懸浮框可拖動
        mTXCloudVideoView.setOnTouchListener(this::onTouch);
        //懸浮框點擊事件
        mTXCloudVideoView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //在這裏實現點擊重新回到Activity
                Intent intent = new Intent(FloatVideoWindowService.this, RtcActivity.class);
                intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
                startActivity(intent);
            }
        });

    }

    //觸摸事件
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        int action = event.getAction();
        switch (action) {
            case MotionEvent.ACTION_DOWN:
                isMove = false;
                mTouchStartX = (int) event.getRawX();
                mTouchStartY = (int) event.getRawY();
                mStartX = (int) event.getX();
                mStartY = (int) event.getY();
                break;
            case MotionEvent.ACTION_MOVE:
                mTouchCurrentX = (int) event.getRawX();
                mTouchCurrentY = (int) event.getRawY();
                wmParams.x += mTouchStartX - mTouchCurrentX;
                wmParams.y += mTouchCurrentY - mTouchStartY;
                ALog.dTag("FloatingListener() onTouch",mTouchCurrentX,mTouchStartX,mTouchCurrentY,mTouchStartY);
                mWindowManager.updateViewLayout(mFloatingLayout, wmParams);

                mTouchStartX = mTouchCurrentX;
                mTouchStartY = mTouchCurrentY;
                break;
            case MotionEvent.ACTION_UP:
                mStopX = (int) event.getX();
                mStopY = (int) event.getY();
                if (Math.abs(mStartX - mStopX) >= 1 || Math.abs(mStartY - mStopY) >= 1) {
                    isMove = true;
                }
                break;
            default:
                break;
        }
        //如果是移動事件不觸發OnClick事件,防止移動的時候一放手形成點擊事件
        return isMove;
    }

}

ps:使用Service做懸浮窗的載體是爲了,將懸浮框的開啓關閉與服務Service的綁定解綁所關聯起來,開啓服務即相當於開啓我們的懸浮框,解綁服務則相當於關閉懸浮框,以此來達到更好的控制效果。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章