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

前言

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

布局

1. <?xml version=”1.0″ encoding=”utf-8″?>
2. <FrameLayout
3. xmlns:android=“http://schemas.android.com/apk/res/android”
4. xmlns:tools=“http://schemas.android.com/tools”
5. android:layout_width=“match_parent”
6. android:layout_height=“match_parent”
7. tools:context=“com.demo.surfaceviewdemo.MainActivity”>
9. <RelativeLayout
10. android:layout_width=“match_parent”
11. android:layout_height=“match_parent”>
13. <RelativeLayout
14. android:id=“@+id/rl_remote”
15. android:layout_width=“match_parent”
16. android:layout_height=“wrap_content”>
18. <SurfaceView
19. android:id=“@+id/surfaceview_remote”
20. android:layout_width=“match_parent”
21. android:layout_height=“match_parent”/>
22. </RelativeLayout>
24. <RelativeLayout
25. android:id=“@+id/rl_local”
26. android:layout_width=“wrap_content”
27. android:layout_height=“wrap_content”
28. android:layout_alignParentRight=“true”>
30. <SurfaceView
31. android:id=“@+id/surfaceview_local”
32. android:layout_width=“wrap_content”
33. android:layout_height=“wrap_content”/>
34. </RelativeLayout>
35. </RelativeLayout>
37. <!–通话时显示的–>
38. <LinearLayout
39. android:id=“@+id/ll_call_container”
40. android:layout_width=“match_parent”
41. android:layout_height=“wrap_content”
42. android:layout_gravity=“bottom”
43. android:layout_marginBottom=“25dp”
44. android:gravity=“center_horizontal”
45. android:orientation=“horizontal”>
47. <TextView
48. android:id=“@+id/tv_call_quiet”
49. android:layout_width=“wrap_content”
50. android:layout_height=“wrap_content”
51. android:layout_weight=“1”
52. android:drawablePadding=“10dp”
53. android:drawableTop=“@mipmap/chat_video_change_voice_img”
54. android:gravity=“center_horizontal”
55. android:text=“切到语音聊天”
56. android:textColor=“#ffffff”
57. android:textSize=“12sp”/>
59. <TextView
60. android:id=“@+id/tv_handup_call”
61. android:layout_width=“wrap_content”
62. android:layout_height=“wrap_content”
63. android:layout_weight=“1”
64. android:drawablePadding=“10dp”
65. android:drawableTop=“@mipmap/chat_video_guaduan_img_normal”
66. android:gravity=“center_horizontal”
67. android:text=“挂断”
68. android:textColor=“#ffffff”
69. android:textSize=“12sp”/>
71. <TextView
72. android:id=“@+id/tv_change_camera”
73. android:layout_width=“wrap_content”
74. android:layout_height=“wrap_content”
75. android:layout_weight=“1”
76. android:drawablePadding=“10dp”
77. android:drawableTop=“@mipmap/chat_video_change_camera_img”
78. android:gravity=“center_horizontal”
79. android:text=“转换摄像头”
80. android:textColor=“#ffffff”
81. android:textSize=“12sp”/>
82. </LinearLayout>
83. </FrameLayout>

代码

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

1. //如果判断有刘海屏不让填充到状态栏
2. if (DisplayUtil.hasNotchScreen(this)) {
3. getWindow().addFlags(
4. WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON
5. | WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN);
6. } else {
7. getWindow().addFlags(
8. WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON
9. | WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN
10. | WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
11. }

大小视图切换代码：

1. /**
2. * 大小视图切换 （小视图在前面、大视图在后面）
3. *
4. * @param sourcView 之前相对布局大小
5. * @param beforeview 之前surfaceview
6. * @param detView 之后相对布局大小
7. * @param afterview 之后surfaceview
8. */
9. private void zoomOpera(View sourcView, SurfaceView beforeview,
10. View detView, SurfaceView afterview) {
11. RelativeLayout paretview = (RelativeLayout) sourcView.getParent();
12. paretview.removeView(detView);
13. paretview.removeView(sourcView);
15. //设置远程大视图RelativeLayout 的属性
16. RelativeLayout.LayoutParams params1 = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT,
17. RelativeLayout.LayoutParams.MATCH_PARENT);
18. params1.addRule(RelativeLayout.CENTER_IN_PARENT, RelativeLayout.TRUE);
19. beforeview.setZOrderMediaOverlay(true);
20. beforeview.getHolder().setFormat(PixelFormat.TRANSPARENT);
21. sourcView.setLayoutParams(params1);
23. //设置本地小视图RelativeLayout 的属性
24. params1 = new RelativeLayout.LayoutParams(defaultLocalwidth, defaultLocalHeight);
25. params1.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, RelativeLayout.TRUE);
26. params1.setMargins(0, defaultLocalMargin, defaultLocalMargin, 0);
27. //在调用setZOrderOnTop(true)之后调用了setZOrderMediaOverlay(true) 遮挡问题
28. afterview.setZOrderOnTop(true);
29. afterview.setZOrderMediaOverlay(true);
30. afterview.getHolder().setFormat(PixelFormat.TRANSPARENT);
31. detView.setLayoutParams(params1);
33. paretview.addView(sourcView);
34. paretview.addView(detView);
35. }

效果图一

效果图二