两个surfaceView实现切换效果

2023-08-08 20:08:04 165

需求：视频通话界面，两个surfaceView一个显示本端的视图，另一个显示对端的视图，由于显示比例的问题总会存在一个覆盖另一个的问题，为保证用户体验，规定小的覆盖大的视图上面，且点击小的视图可切花为大图视图居中，达到两个视图切花的功能。简单写一个demo完成功能的测试需求，为了较少文章的篇幅，视图的内容用回执矩形代替（实际开发中显示的是本地照相采集的数据和对端经过opgl处理的数据）

简单的布局







android:layout_gravity="center"/>

具体的demo实现

publicclassMainActivityextendsActivityimplementsView.OnClickListener{
publicstaticfinalStringTAG="sssss";
//远端的视图
privateSurfaceViewremote_sv;
//本地的视图
privateSurfaceViewlocal_sv;
privateSurfaceHolderremote_holder;
privateSurfaceHolderlocal_holder;
privateRelativeLayoutremote_rl;
privateRelativeLayoutlocal_rl;

privateintscreenWidth;
privateintscreenHeight;

privateintbeforRemoteweith;
privateintbeforLocalweith;
privateintbeforRemoteheigth;
privateintbeforLocalheigth;
privateintStateAB=0;
privateintStateBA=1;
privateintmSate;
privateintdefaultLocalHeight=200;
privateintdefaultLocalwidth=400;

@Override
protectedvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
DisplayMetricsdm=getResources().getDisplayMetrics();
screenWidth=dm.widthPixels;
screenHeight=dm.heightPixels-500;
remote_sv=(SurfaceView)findViewById(R.id.remote_view);
remote_rl=(RelativeLayout)findViewById(R.id.remote_rl);
local_rl=(RelativeLayout)findViewById(R.id.local_rl);
remote_sv.setOnClickListener(this);

LayoutParamsparams=newLayoutParams(screenWidth,screenHeight);
remote_sv.setLayoutParams(params);
remote_holder=remote_sv.getHolder();
//对surfaceView进行操作
remote_holder.addCallback(newSurfaceHolder.Callback(){
@Override
publicvoidsurfaceCreated(SurfaceHolderholder){
Canvasc=remote_holder.lockCanvas();
//2.开画
Paintp=newPaint();
p.setColor(Color.RED);
Rectaa=newRect(0,0,holder.getSurfaceFrame().width(),
holder.getSurfaceFrame().height());
c.drawRect(aa,p);
//3.解锁画布更新提交屏幕显示内容
remote_holder.unlockCanvasAndPost(c);
}

@Override
publicvoidsurfaceChanged(SurfaceHolderholder,intformat,
intwidth,intheight){
/**
*
Log.d(TAG,"remote_holdersurfaceChangedwidth"+width+"height"+height);
Canvasc=remote_holder.lockCanvas();
//2.开画
Paintp=newPaint();
p.setColor(Color.RED);
Rectaa=newRect(0,0,holder.getSurfaceFrame().width(),
holder.getSurfaceFrame().height());
c.drawRect(aa,p);
//3.解锁画布更新提交屏幕显示内容
remote_holder.unlockCanvasAndPost(c);
*/}

@Override
publicvoidsurfaceDestroyed(SurfaceHolderholder){

}
});//自动运行surfaceCreated以及surfaceChanged

local_sv=(SurfaceView)findViewById(R.id.local_view);
local_sv.setOnClickListener(this);
local_sv.setOnClickListener(this);
//sv.setZOrderOnTop(false);
local_sv.setZOrderOnTop(true);
//这两个方法差不多，设置了就会浮现到顶部，但是，后面的看不见，要像下面设置为透明
//local_sv.setZOrderOnTop(true);
//local_sv.setZOrderMediaOverlay(true);

local_holder=local_sv.getHolder();

remote_holder.setFormat(PixelFormat.TRANSPARENT);
local_holder.setFormat(PixelFormat.TRANSPARENT);
LayoutParamsparams1=newLayoutParams(defaultLocalHeight,defaultLocalwidth);
local_sv.setLayoutParams(params1);
remote_holder=remote_sv.getHolder();
local_holder.addCallback(newSurfaceHolder.Callback(){
@Override
publicvoidsurfaceCreated(SurfaceHolderholder){
Canvasc=holder.lockCanvas();
//2.开画
Paintp=newPaint();
p.setColor(Color.YELLOW);
Rectaa=newRect(0,0,holder.getSurfaceFrame().width(),
holder.getSurfaceFrame().height());
c.drawRect(aa,p);
//3.解锁画布更新提交屏幕显示内容
holder.unlockCanvasAndPost(c);
}

@Override
publicvoidsurfaceChanged(SurfaceHolderholder,intformat,
intwidth,intheight){
/**
*
Log.d(TAG,"local_holdersurfaceChangedwidth"+width+"height"+height);
Canvasc=holder.lockCanvas();
//2.开画
Paintp=newPaint();
p.setColor(Color.YELLOW);
Rectaa=newRect(0,0,holder.getSurfaceFrame().width()-50,
holder.getSurfaceFrame().height()-50);
c.drawRect(aa,p);
//3.解锁画布更新提交屏幕显示内容
holder.unlockCanvasAndPost(c);

*/}

@Override
publicvoidsurfaceDestroyed(SurfaceHolderholder){

}
});
zoomOpera(local_rl,local_sv,remote_sv,remote_rl,defaultLocalwidth,
defaultLocalHeight,RelativeLayout.CENTER_IN_PARENT);
}

@Override
publicvoidonClick(Viewview){
switch(view.getId()){
caseR.id.local_view:
Log.d(TAG,"onClicklocal_view"+mSate);
if(mSate==StateAB){
zoomlocalViewout(beforRemoteweith,beforRemoteheigth,local_sv,
remote_sv);
zoomRemoteViewint(beforLocalweith,beforLocalheigth);
mSate=StateBA;
}

break;
caseR.id.remote_view:
Log.d(TAG,"onClickemote_view"+mSate);
if(mSate==StateBA){

zoomRemoteout(beforRemoteweith,beforRemoteheigth,local_sv,
remote_sv);
zoomlocalViewint(beforLocalweith,beforLocalheigth);

mSate=StateAB;
}

break;
default:
break;
}

}
//放大远端的视图
privatevoidzoomRemoteout(intweith2,intheigth2,SurfaceViewlocalView,
SurfaceViewremoteView){

beforLocalheigth=localView.getMeasuredHeight();
beforLocalweith=localView.getMeasuredWidth();
beforRemoteheigth=remoteView.getMeasuredHeight();
beforRemoteweith=remoteView.getMeasuredWidth();
Log.d(TAG,"zoomRemoteoutbeforLocalheigth"+beforLocalheigth
+"beforLocalweith"+beforLocalweith+"beforRemoteheigth"
+beforRemoteheigth+"beforRemoteweith"+beforLocalweith);
zoomOpera(local_rl,local_sv,remote_sv,remote_rl,screenWidth,
beforLocalheigth,RelativeLayout.CENTER_IN_PARENT);

}
//具体的视图操作
privatevoidzoomOpera(ViewsourcView,SurfaceViewbeforeview,
SurfaceViewafterview,ViewdetView,intbeforLocalweith,
intbeforLocalHeigth,intrule){

LayoutParamsparams1=newLayoutParams(LayoutParams.MATCH_PARENT,
LayoutParams.MATCH_PARENT);

Log.w(TAG,"beforLocalheigth="+beforLocalheigth
+";beforLocalweith="+beforLocalweith);
params1.addRule(rule,RelativeLayout.TRUE);
afterview.setLayoutParams(params1);
afterview.setBackgroundResource(android.R.color.transparent);
params1=newLayoutParams(beforLocalweith,beforLocalHeigth);
params1.addRule(rule,RelativeLayout.TRUE);
detView.setLayoutParams(params1);

}
//缩小远端的视图
privatevoidzoomRemoteViewint(intweith2,intheigth2){
RelativeLayoutparetview=(RelativeLayout)local_rl.getParent();
paretview.removeView(remote_rl);
paretview.removeView(local_rl);
zoomOpera(local_rl,local_sv,remote_sv,remote_rl,beforLocalweith,
beforLocalheigth,RelativeLayout.ALIGN_PARENT_TOP);
Log.d(TAG,"paretview"+paretview.getChildCount());
paretview.addView(local_rl);
paretview.addView(remote_rl);
remote_sv.setZOrderOnTop(true);

}
//放大本端的视图
privatevoidzoomlocalViewout(intweith2,intheigth2,
SurfaceViewlocalView,SurfaceViewremoteView){
beforLocalheigth=localView.getMeasuredHeight();
beforLocalweith=localView.getMeasuredWidth();
beforRemoteheigth=remoteView.getMeasuredHeight();
beforRemoteweith=remoteView.getMeasuredWidth();
Log.d(TAG,"zoomlocalViewoutbeforLocalheigth"+beforLocalheigth
+"beforLocalweith"+beforLocalweith+"beforRemoteheigth"
+beforRemoteheigth+"beforRemoteweith"+beforRemoteweith);
zoomOpera(remote_rl,remote_sv,local_sv,local_rl,beforRemoteweith,
beforRemoteheigth,RelativeLayout.CENTER_IN_PARENT);

}
//减小本端的视图
privatevoidzoomlocalViewint(intweith2,intheigth2){
RelativeLayoutparetview=(RelativeLayout)local_rl.getParent();
paretview.removeView(remote_rl);
paretview.removeView(local_rl);
zoomOpera(remote_rl,remote_sv,local_sv,local_rl,beforRemoteweith,
beforRemoteheigth,RelativeLayout.ALIGN_PARENT_TOP);
paretview.addView(remote_rl);
paretview.addView(local_rl);
local_sv.setZOrderOnTop(true);

}
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

两个surfaceView实现切换效果

热门推荐

随机推荐