安卓悬浮窗口, 丝滑双指缩放视频窗口

最重要的事情说前面: demo源码:

https://github.com/5800LDW/ProjectFloatingWindow

前言:

1.跨应用的浮动窗口在网上很多资料, 就不细说了。

2.双指缩放View 也很多资料, 可参考:

https://blog.csdn.net/zxq614/article/details/88873729

正文

下面进入正题, 如何把上述结合起来, 下面在前言2 的ZoomView 上进行改造。

下面帖一下原始ZoomView的代码:

      public class ZoomView extends RelativeLayout {// 属性变量private float translationX; // 移动Xprivate float translationY; // 移动Yprivate float scale = 1; // 伸缩比例private float rotation; // 旋转角度// 移动过程中临时变量private float actionX;private float actionY;private float spacing;private float degree;private int moveType; // 0=未选择，1=拖动，2=缩放public ZoomView(Context context) {this(context, null);}public ZoomView(Context context, AttributeSet attrs) {this(context, attrs, 0);}public ZoomView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);setClickable(true);}@Overridepublic boolean onInterceptTouchEvent(MotionEvent ev) {getParent().requestDisallowInterceptTouchEvent(true);return super.onInterceptTouchEvent(ev);}@Overridepublic boolean onTouchEvent(MotionEvent event) {switch (event.getAction() & MotionEvent.ACTION_MASK) {case MotionEvent.ACTION_DOWN:moveType = 1;actionX = event.getRawX();actionY = event.getRawY();break;case MotionEvent.ACTION_POINTER_DOWN:moveType = 2;spacing = getSpacing(event);degree = getDegree(event);break;case MotionEvent.ACTION_MOVE:if (moveType == 1) {translationX = translationX + event.getRawX() - actionX;translationY = translationY + event.getRawY() - actionY;setTranslationX(translationX);setTranslationY(translationY);actionX = event.getRawX();actionY = event.getRawY();} else if (moveType == 2) {scale = scale * getSpacing(event) / spacing;setScaleX(scale);setScaleY(scale);rotation = rotation + getDegree(event) - degree;if (rotation > 360) {rotation = rotation - 360;}if (rotation < -360) {rotation = rotation + 360;}setRotation(rotation);}break;case MotionEvent.ACTION_UP:case MotionEvent.ACTION_POINTER_UP:moveType = 0;}return super.onTouchEvent(event);}// 触碰两点间距离private float getSpacing(MotionEvent event) {//通过三角函数得到两点间的距离float x = event.getX(0) - event.getX(1);float y = event.getY(0) - event.getY(1);return (float) Math.sqrt(x * x + y * y);}// 取旋转角度private float getDegree(MotionEvent event) {//得到两个手指间的旋转角度double delta_x = event.getX(0) - event.getX(1);double delta_y = event.getY(0) - event.getY(1);double radians = Math.atan2(delta_y, delta_x);return (float) Math.toDegrees(radians);}}

具体思路

下面具体讲思路, 具体代码在文首:

1.首先

我们不需要旋转, 所以注释掉

//setRotation(rotation);

2.我们要解决平移问题。

上文的setTranslationX是相对于父布局来实现的, 但是我们悬浮窗不会充满全屏, 而且后面我们要缩小/放大, 父布局的大小是要变化的, 所以上文的setTranslationX和translationY都要注释掉。

悬浮窗移动是通过WindowManager的updateViewLayout方法来实现的。所以我们加入一个内部接口, 提供给WindowManager进行调用updateViewLayout, 修改后的代码如下:

ZoomView的修改如下:

          case MotionEvent.ACTION_MOVE:if (moveType == 1) {translationX = translationX + event.getRawX() - actionX;;translationY = translationY + event.getRawY() - actionY;//父view先变换位置就行了;if (translationListener != null) {translationListener.translation(translationX, translationY);}//setTranslationX(translationX);//setTranslationY(translationY);actionX = event.getRawX();actionY = event.getRawY();} 

接口TranslationListener的translation方法的具体实现:

    @Overridepublic void translation(float actionX, float actionY) {wmParams.x = (int) actionX;wmParams.y = (int) actionY;wm.updateViewLayout(view, wmParams);}

3.解决缩放的问题。

ZoomView的setScaleX(scale); setScaleY(scale); 是需要保留的, 同时, 父view也要进行缩放/放大。

所以我们同样引入一个接口方法提供给Params进行修改 width 和 height ,然后调用WindowManager的updateViewLayout。

ZoomView的修改如下:

 else if (moveType == 2) {scale = scale * getSpacing(event) / spacing;//核心是先改变父类的位置, 然后再缩小子类if (translationListener != null) {translationListener.scale(scale);}setScaleX(scale);setScaleY(scale);

接口TranslationListener的scale方法的具体实现:

...
@Override
public void scale(float scale) {//因为我把悬浮窗默认的宽是300， 所以这里就直接拿300作为宽高的初始值， 后面的缩放、放大都是在这个初始值上进行float normalPx = dp2px(300f);Log.e("TAG ", " normalPx = " + normalPx);wmParams.width = (int) (normalPx * scale);wmParams.height = (int) (normalPx * scale);wm.updateViewLayout(view, wmParams);}
...

到这一步的时候, 能平移也能缩小/放大了, 但是, 会有个问题, 就是ZoomView不会在父view居中了, 经测试, 使用ConstraintLayout包裹ZoomView, 并设置ZoomView居中, 在缩放ZoomView后能居中在父布局中显示。这里可能跟约束布局的实现有关, 有了解的同学可以说一下...

4.视频播放。

下面我们就放入视频播放的view被ZoomView包裹 , 看看视频播放是否卡顿。

源码里面使用的是GSYVideoPlayer的播放控件。 图就不截图了, 具体看源码就OK。

5.视频播放后引入的问题。

视频播放的控件也是会获取触控事件的, 会导致ZoomView的onTouchEvent不生效, 所以这里涉及到事件分发的问题。但是, ZoomView处理View的位置、大小变化, 本身不跟播放的View的触摸事件有冲突的, 所以我们把ZoomView的onTouchEvent的变化位置、大小的代码改到onInterceptTouchEvent里面实现即可。

题外话: demo是基础实现, 具体很多细节, 例如设定最大的放大数值, 设定最小的缩小数值等等, 还得需要进行处理的。

感谢并推荐阅读：

https://blog.csdn.net/zxq614/article/details/88873729

https://github.com/CarGuo/GSYVideoPlayer