两个surfaceview的重叠效果类似直播效果中的视频和讲义实践

效果图

首先还是不废话，直接上一张图，有图才有真相，不然大家看半天才发现不是我想要的效果，所以这样浪费大家的时间了

实际应用场景可多了，比如后面是显示相机的数据，前面是一个画板，直播的视频和讲义展示

布局

布局就很简单了，直接让两个surfaceView重叠在一起

<?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>

添加要显示的内容

我这里为了测试就没有播放视频或者使用摄像头的数据，而是直接画了一个颜色上去，但是道理都是一样的

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. 解锁画布   更新提交屏幕显示内容                sfh.unlockCanvasAndPost(c);            }            @Override            public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {            }            @Override            public void surfaceDestroyed(SurfaceHolder holder) {            }        });

如果到这一步，这两个界面肯定是不会有上图的效果，而是第一个会覆盖第二个，下面是关键代码了

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

把最上面的那个surface设置为最上面，并且然他透明，如果不设置透明，那么只能看到顶部的那个surfaceView，其他地方是黑色的。到这里基本解决了然两个surfaceView重叠显示，下面我们来加入拖动效果

使用layout方法

@TargetApi(Build.VERSION_CODES.HONEYCOMB)@Overridepublic 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

带添加~

完整代码

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. 解锁画布   更新提交屏幕显示内容                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);        //这两个方法差不多，设置了就会浮现到顶部，但是，后面的看不见，要像下面设置为透明        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. 解锁画布   更新提交屏幕显示内容                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地址下一期会从源码的角度解析为什么会有上述问题存在，敬请期待