仿微信视频通话大小视图切换（SurfaceView实现）

前言

前一段时间做了一个即时通讯的项目，在项目中遇到很多坑，有时间一一做个总结，项目消息发送基于XMPP+Tigase，语言视频通话基于PJSIP+FreeSWITCH，项目UI仿微信。做到视频通话时，遇到本地视图与远程视图切换，网上搜了一篇相关的博客：https://blog.csdn.net/xuedaqian123/article/details/77878781，根据大神思路写了这个Demo，其中用的是第三直播源可能有点不稳定，切换过程可能存在黑屏和无响应的情况，但是用的Pjsip中切换还是很流程的；

布局

代码

为了实现跟微信一样的效果，普通屏幕全屏显示，为了不让视频内容挤到刘海屏中，添加一下代码：

        //如果判断有刘海屏不让填充到状态栏
        if (DisplayUtil.hasNotchScreen(this)) {
            getWindow().addFlags(
                    WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON
                            | WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN);
        } else {
            getWindow().addFlags(
                    WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON
                            | WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN
                            | WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
        }

大小视图切换代码：

 /**
     * 大小视图切换 （小视图在前面、大视图在后面）
     *
     * @param sourcView  之前相对布局大小
     * @param beforeview 之前surfaceview
     * @param detView    之后相对布局大小
     * @param afterview  之后surfaceview
     */
   private void zoomOpera(View sourcView, SurfaceView beforeview,
                           View detView, SurfaceView afterview) {
        RelativeLayout paretview = (RelativeLayout) sourcView.getParent();
        paretview.removeView(detView);
        paretview.removeView(sourcView);

        //设置远程大视图RelativeLayout 的属性
        RelativeLayout.LayoutParams params1 = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT,
                RelativeLayout.LayoutParams.MATCH_PARENT);
        params1.addRule(RelativeLayout.CENTER_IN_PARENT, RelativeLayout.TRUE);
        beforeview.setZOrderMediaOverlay(true);
        beforeview.getHolder().setFormat(PixelFormat.TRANSPARENT);
        sourcView.setLayoutParams(params1);

        //设置本地小视图RelativeLayout 的属性
        params1 = new RelativeLayout.LayoutParams(defaultLocalwidth, defaultLocalHeight);
        params1.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, RelativeLayout.TRUE);
        params1.setMargins(0, defaultLocalMargin, defaultLocalMargin, 0);
        //在调用setZOrderOnTop(true)之后调用了setZOrderMediaOverlay(true)  遮挡问题
        afterview.setZOrderOnTop(true);
        afterview.setZOrderMediaOverlay(true);
        afterview.getHolder().setFormat(PixelFormat.TRANSPARENT);
        detView.setLayoutParams(params1);

        paretview.addView(sourcView);
        paretview.addView(detView);
    }

效果图一

效果图二

效果图三

Github地址：https://github.com/androidneter/SurfaceViewDemo