仿微信视屏悬浮窗效果实现

在项目中需要对接入的腾讯云音视频，可以悬浮窗显示，悬浮窗可拖拽，并且在悬浮窗不影响其他的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的绑定解绑所关联起来，开启服务即相当于开启我们的悬浮框，解绑服务则相当于关闭悬浮框，以此来达到更好的控制效果。

芝麻猪oo

发布了19 篇原创文章 · 获赞 3 · 访问量 1万+

私信关注

仿微信视屏悬浮窗效果实现

猜你喜欢