两个surfaceView切换的demo

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

一,简单的布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >


    <RelativeLayout
        android:id="@+id/remote_rl"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"

         >

        <SurfaceView
            android:id="@+id/remote_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"


</RelativeLayout>        android:layout_gravity="center" />

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/local_rl"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

      >

        <SurfaceView
            android:id="@+id/local_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </RelativeLayout>

具体的demo实现

public class MainActivity extends Activity implements View.OnClickListener {
    public static final String TAG = "sssss";
    //远端的视图
    private SurfaceView remote_sv;
    // 本地的视图
    private SurfaceView local_sv;
    private SurfaceHolder remote_holder;
    private SurfaceHolder local_holder;
    private RelativeLayout remote_rl;
    private RelativeLayout local_rl;

    private int screenWidth;
    private int screenHeight;

    private int beforRemoteweith;
    private int beforLocalweith;
    private int beforRemoteheigth;
    private int beforLocalheigth;
    private int StateAB = 0;
    private int StateBA = 1;
    private int mSate;
    private int defaultLocalHeight=200;
    private  int  defaultLocalwidth=400;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        DisplayMetrics dm = 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);

        LayoutParams params = new LayoutParams(screenWidth, screenHeight);
        remote_sv.setLayoutParams(params);
        remote_holder = remote_sv.getHolder();
        // 对 surfaceView 进行操作
        remote_holder.addCallback(new SurfaceHolder.Callback() {
            @Override
            public void surfaceCreated(SurfaceHolder holder) {
                Canvas c = remote_holder.lockCanvas();
                // 2.开画
                Paint p = new Paint();
                p.setColor(Color.RED);
                Rect aa = new Rect(0, 0, holder.getSurfaceFrame().width(),
                        holder.getSurfaceFrame().height());
                c.drawRect(aa, p);
                // 3. 解锁画布 更新提交屏幕显示内容
                remote_holder.unlockCanvasAndPost(c);
            }

            @Override
            public void surfaceChanged(SurfaceHolder holder, int format,
                    int width, int height) {/*
                Log.d(TAG,"remote_holder surfaceChanged width"+ width+"height"+height);
                Canvas c = remote_holder.lockCanvas();
                // 2.开画
                Paint p = new Paint();
                p.setColor(Color.RED);
                Rect aa = new Rect(0, 0, holder.getSurfaceFrame().width(),
                        holder.getSurfaceFrame().height());
                c.drawRect(aa, p);
                // 3. 解锁画布 更新提交屏幕显示内容
                remote_holder.unlockCanvasAndPost(c);
            */}

            @Override
            public void surfaceDestroyed(SurfaceHolder holder) {

            }
        });// 自动运行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);
        LayoutParams params1 = new LayoutParams(defaultLocalHeight, defaultLocalwidth);
        local_sv.setLayoutParams(params1);
        remote_holder = remote_sv.getHolder();
        local_holder.addCallback(new SurfaceHolder.Callback() {
            @Override
            public void surfaceCreated(SurfaceHolder holder) {
                Canvas c = holder.lockCanvas();
                // 2.开画
                Paint p = new Paint();
                p.setColor(Color.YELLOW);
                Rect aa = new Rect(0, 0, holder.getSurfaceFrame().width(),
                        holder.getSurfaceFrame().height());
                c.drawRect(aa, p);
                // 3. 解锁画布 更新提交屏幕显示内容
                holder.unlockCanvasAndPost(c);
            }

            @Override
            public void surfaceChanged(SurfaceHolder holder, int format,
                    int width, int height) {/*
             Log.d(TAG,"local_holder surfaceChanged width"+ width+"height"+height);
                Canvas c = holder.lockCanvas();
                // 2.开画
                Paint p = new Paint();
                p.setColor(Color.YELLOW);
                Rect aa = new Rect(0, 0, holder.getSurfaceFrame().width()-50,
                        holder.getSurfaceFrame().height()-50);
                c.drawRect(aa, p);
                // 3. 解锁画布 更新提交屏幕显示内容
                holder.unlockCanvasAndPost(c);

            */}

            @Override
            public void surfaceDestroyed(SurfaceHolder holder) {

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

    @Override
    public void onClick(View view) {
        switch (view.getId()) {
        case R.id.local_view:
            Log.d(TAG, " onClick local_view" + mSate);
            if (mSate == StateAB) {
                zoomlocalViewout(beforRemoteweith, beforRemoteheigth, local_sv,
                        remote_sv);
                zoomRemoteViewint(beforLocalweith, beforLocalheigth);
                mSate = StateBA;
            }

            break;
        case R.id.remote_view:
            Log.d(TAG, " onClick emote_view" + mSate);
            if (mSate == StateBA) {

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

                mSate = StateAB;
            }

            break;
        default:
            break;
        }

    }
//放大远端的视图
    private void zoomRemoteout(int weith2, int heigth2, SurfaceView localView,
            SurfaceView remoteView) {

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

    }
//具体的视图操作
    private void zoomOpera(View sourcView, SurfaceView beforeview,
            SurfaceView afterview, View detView, int beforLocalweith,
            int beforLocalHeigth, int rule) {

        LayoutParams params1 = new LayoutParams(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 = new LayoutParams(beforLocalweith, beforLocalHeigth);
        params1.addRule(rule, RelativeLayout.TRUE);
        detView.setLayoutParams(params1);

    }
//缩小远端的视图
    private void zoomRemoteViewint(int weith2, int heigth2) {
        RelativeLayout paretview = (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);

    }
//放大本端的视图
    private void zoomlocalViewout(int weith2, int heigth2,
            SurfaceView localView, SurfaceView remoteView) {
        beforLocalheigth = localView.getMeasuredHeight();
        beforLocalweith = localView.getMeasuredWidth();
        beforRemoteheigth = remoteView.getMeasuredHeight();
        beforRemoteweith = remoteView.getMeasuredWidth();
        Log.d(TAG, "zoomlocalViewout beforLocalheigth" + beforLocalheigth
                + "beforLocalweith" + beforLocalweith + "beforRemoteheigth"
                + beforRemoteheigth + "beforRemoteweith" + beforRemoteweith);
        zoomOpera(remote_rl, remote_sv, local_sv, local_rl, beforRemoteweith,
                beforRemoteheigth, RelativeLayout.CENTER_IN_PARENT);

    }
//减小本端的视图
    private void zoomlocalViewint(int weith2, int heigth2) {
        RelativeLayout paretview = (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);

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