The overlapping effect of the two surfaceviews is similar to the video and handout practice in the live effect

效果图

First off, no bullshit,直接上一张图,有图才有真相,Otherwise, it takes a long time for everyone to see that it is not the effect I want,So it's a waste of everyone's time

There are many practical application scenarios,For example, the back is to display the data of the camera,In the front is an artboard,Live video and handout presentations

布局

The layout is simple,Just let twosurfaceView重叠在一起

<?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" android:background="#00f" tools:context="cn.woblog.testsurfaceview.MainActivity">

    <SurfaceView  android:id="@+id/sv" android:layout_width="match_parent" android:layout_height="400dp" />

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

        <SurfaceView  android:id="@+id/sv_mini" android:layout_width="200dp" android:layout_height="200dp" android:clickable="false" android:focusable="false" />
    </RelativeLayout>
</RelativeLayout>

Add content to display

I didn't play video or use camera data for testing purposes,Instead, just paint it with a color,但是道理都是一样的

sv = (SurfaceView) findViewById(R.id.sv);
sfh = sv.getHolder();
        //对 surfaceView 进行操作
        sfh.addCallback(new SurfaceHolder.Callback() {
            @Override
            public void surfaceCreated(SurfaceHolder holder) {
                Canvas c = sfh.lockCanvas(new Rect(0, 0, 600, 600));
                //2.开画
                Paint p = new Paint();
                p.setColor(Color.RED);
                Rect aa = new Rect(0, 0, 600, 600);
                c.drawRect(aa, p);
                //3. 解锁画布 Update the submission screen display
                sfh.unlockCanvasAndPost(c);
            }

            @Override
            public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {

            }

            @Override
            public void surfaceDestroyed(SurfaceHolder holder) {

            }
        });

如果到这一步,These two interfaces will definitely not have the effect of the above picture,Instead the first will overwrite the second,Below is the key code

sv_mini.setZOrderOnTop(true);
holder.setFormat(PixelFormat.TRANSPARENT);

Put the top onesurfaceSet to top,And of course he is transparent,If not set transparent,Then only the one at the top can be seensurfaceView,Elsewhere it is black.Here are basically two solutionssurfaceView重叠显示,Now let's add the drag effect

使用layout方法

@TargetApi(Build.VERSION_CODES.HONEYCOMB)
@Override
public boolean onTouch(View v, MotionEvent event) {
    int ea = event.getAction();
    switch (ea) {
        case MotionEvent.ACTION_DOWN:
            lastX = (int) event.getRawX();
            lastY = (int) event.getRawY();
            break;
        /** * layout(l,t,r,b) * l Left position, relative to parent t Top position, relative to parent r Right position, relative to parent b Bottom position, relative to parent * */
        case MotionEvent.ACTION_MOVE:
            int dx = (int) event.getRawX() - lastX;
            int dy = (int) event.getRawY() - lastY;

            int left = v.getLeft() + dx;
            int top = v.getTop() + dy;
            int right = v.getRight() + dx;
            int bottom = v.getBottom() + dy;

            if (left < 0) {
                left = 0;
                right = left + v.getWidth();
            }

            if (right > screenWidth) {
                right = screenWidth;
                left = right - v.getWidth();
            }

            if (top < 0) {
                top = 0;
                bottom = top + v.getHeight();
            }

            if (bottom > screenHeight) {
                bottom = screenHeight;
                top = bottom - v.getHeight();
            }

            v.layout(left, top, right, bottom);

            Log.i("", "position：" + left + ", " + top + ", " + right + ", " + bottom);

            lastX = (int) event.getRawX();
            lastY = (int) event.getRawY();

            break;
        case MotionEvent.ACTION_UP:
            break;
    }
    return true;
}

使用margin

band add~

完整代码

package cn.woblog.testsurfaceview;

import android.annotation.TargetApi;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PixelFormat;
import android.graphics.Rect;
import android.os.Build;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.SurfaceHolder;
import android.view.SurfaceView;
import android.view.View;
import android.view.ViewGroup;
import android.widget.RelativeLayout;

public class MainActivity extends AppCompatActivity implements View.OnTouchListener {
    
    public static final String TAG = "TAG";
    private SurfaceView sv;
    private SurfaceView sv_mini;
    private SurfaceHolder sfh;
    private SurfaceHolder holder;
    private RelativeLayout rl;
    private int lastX;
    private int lastY;
    private int screenWidth;
    private int screenHeight;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        DisplayMetrics dm = getResources().getDisplayMetrics();
        screenWidth = dm.widthPixels;
        screenHeight = dm.heightPixels - 50;
        getSupportActionBar().hide();
        sv = (SurfaceView) findViewById(R.id.sv);
        rl = (RelativeLayout) findViewById(R.id.rl);


        rl.setOnTouchListener(this);

        sfh = sv.getHolder();
        //对 surfaceView 进行操作
        sfh.addCallback(new SurfaceHolder.Callback() {
            @Override
            public void surfaceCreated(SurfaceHolder holder) {
                Canvas c = sfh.lockCanvas(new Rect(0, 0, 600, 600));
                //2.开画
                Paint p = new Paint();
                p.setColor(Color.RED);
                Rect aa = new Rect(0, 0, 600, 600);
                c.drawRect(aa, p);
                //3. 解锁画布 Update the submission screen display
                sfh.unlockCanvasAndPost(c);
            }

            @Override
            public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {

            }

            @Override
            public void surfaceDestroyed(SurfaceHolder holder) {

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

        sv_mini = (SurfaceView) findViewById(R.id.sv_mini);

// sv.setZOrderOnTop(false);

        //这两个方法差不多,The settings will appear to the top,但是,The back is invisible,To be transparent like below
        sv_mini.setZOrderOnTop(true);
        sv_mini.setZOrderMediaOverlay(true);

        holder = sv_mini.getHolder();

        holder.setFormat(PixelFormat.TRANSPARENT);
        sfh.setFormat(PixelFormat.TRANSPARENT);

        holder.addCallback(new SurfaceHolder.Callback() {
            @Override
            public void surfaceCreated(SurfaceHolder holder) {
                Canvas c = holder.lockCanvas(new Rect(0, 0, 400, 400));
                //2.开画
                Paint p = new Paint();
                p.setColor(Color.BLUE);
                Rect aa = new Rect(0, 0, 400, 400);
                c.drawRect(aa, p);
                //3. 解锁画布 Update the submission screen display
                holder.unlockCanvasAndPost(c);
            }

            @Override
            public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {

            }

            @Override
            public void surfaceDestroyed(SurfaceHolder holder) {

            }
        });
    }

    @TargetApi(Build.VERSION_CODES.HONEYCOMB)
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        int ea = event.getAction();
        switch (ea) {
            case MotionEvent.ACTION_DOWN:
                lastX = (int) event.getRawX();
                lastY = (int) event.getRawY();
                break;
            /** * layout(l,t,r,b) * l Left position, relative to parent t Top position, relative to parent r Right position, relative to parent b Bottom position, relative to parent * */
            case MotionEvent.ACTION_MOVE:
                int dx = (int) event.getRawX() - lastX;
                int dy = (int) event.getRawY() - lastY;

                int left = v.getLeft() + dx;
                int top = v.getTop() + dy;
                int right = v.getRight() + dx;
                int bottom = v.getBottom() + dy;

                if (left < 0) {
                    left = 0;
                    right = left + v.getWidth();
                }

                if (right > screenWidth) {
                    right = screenWidth;
                    left = right - v.getWidth();
                }

                if (top < 0) {
                    top = 0;
                    bottom = top + v.getHeight();
                }

                if (bottom > screenHeight) {
                    bottom = screenHeight;
                    top = bottom - v.getHeight();
                }

                v.layout(left, top, right, bottom);

                Log.i("", "position：" + left + ", " + top + ", " + right + ", " + bottom);

                lastX = (int) event.getRawX();
                lastY = (int) event.getRawY();

                break;
            case MotionEvent.ACTION_UP:
                break;
        }
        return true;
    }


}

Demo地址The next issue will analyze why the above problems exist from the perspective of source code,敬请期待