最近项目在搞音频的小窗口播放(不是类似于音乐播放器的那种高端大气上档次的货),经过一系列的挣扎和努力算是搞出和设计师要求的效果了

---

效果如下(不要在意图片的名字)

搜狗截图_看图王.png

就是这么个小东西,在app内外来回跑的那种(原谅我不能用gift,不知道公司让不让,相信这么浅白的东西,应该都能懂吧...)

---

看也看了,那就开撸吧

1,写一个小窗口的布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="@+id/ll_layout"
              xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
    >

    <LinearLayout
        android:id="@+id/ll_container"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/float_window_back"//.9 图片
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:paddingLeft="10dp"
        android:paddingRight="10dp">

        <FrameLayout
            android:layout_width="40dp"
            android:layout_height="40dp"
            >


            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:scaleType="centerCrop"
                android:src="@drawable/float_window_img"/>

            <ProgressBar
                android:layout_width="25dp"
                android:layout_height="25dp"
                android:layout_gravity="center"
                android:indeterminateDrawable="@drawable/float_window_anim"/>//动画
        </FrameLayout>


        <TextView
            android:id="@+id/text_room_id"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="8dp"
            android:layout_weight="1"
            android:ellipsize="end"
            android:gravity="center"
            android:singleLine="true"
            android:textColor="#E6E6E6"
            android:textSize="14sp"/>

        <ImageButton
            android:id="@+id/bt_close"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:background="@color/transparent"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:src="@drawable/float_window_close"
            />
    </LinearLayout>


</LinearLayout>

float_window_anim

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false" >
    <item android:drawable="@drawable/float_window_animate_01" android:duration="300"></item>
    <item android:drawable="@drawable/float_window_animate_02" android:duration="300"></item>
    <item android:drawable="@drawable/float_window_animate_03" android:duration="300"></item>
</animation-list>

2,撸一个小窗口的自定义View

public class FloatWindowView extends LinearLayout implements View.OnClickListener {
    private final TextView text_room_id;
    public final ImageButton bt_close;
    private WindowManager mManager;
    private Context mContext;
    private WindowManager.LayoutParams mParams;

    public FloatWindowView(Context context) {
        super(context);
        mContext = context;
        mManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        LayoutInflater.from(context).inflate(R.layout.dialog_video_play, this);
        text_room_id = (TextView) findViewById(R.id.text_room_id);
        bt_close = (ImageButton) findViewById(R.id.bt_close);
        bt_close.setOnClickListener(this);
    }
    
//外部传入LayoutParams 
    public void setParams(WindowManager.LayoutParams params) {
        this.mParams = params;
    }

    int lastX, lastY;
    int paramX, paramY;
    boolean isMove;

    @Override
    public boolean onTouchEvent(MotionEvent event) {

        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                lastX = (int) event.getRawX();
                lastY = (int) event.getRawY();
                paramX = mParams.x;
                paramY = mParams.y;
                break;
            case MotionEvent.ACTION_MOVE:

                int dx = (int) event.getRawX() - lastX;
                int dy = (int) event.getRawY() - lastY;
                if (Math.abs(dx) >= 50 || Math.abs(dy) >= 50) {
                    isMove = true;
                }
                mParams.x = paramX + dx;
                mParams.y = paramY + dy;
                mManager.updateViewLayout(this, mParams);
                break;
            case MotionEvent.ACTION_UP:
                if (!isMove) {
                    int x = (int) event.getRawX() - lastX;
                    int y = (int) event.getRawY() - lastY;
                    if (Math.abs(x) <= 50 || Math.abs(y) <= 50) {
                        //模拟点击事件
                      doClick();
                    }
                }
                isMove = false;
                break;
        }
        return true;

    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.bt_close:
               //关闭窗口,服务之类的东东
                break;
        }
    }
    
}

这里有个插曲,我们不能给整个小窗口的根布局设置点击事件,这样的话 mManager.updateViewLayout(this, mParams);更新小窗口位置的事件就会被拦截,导致小窗口不能跟着手指滑动,因此用了个粗鄙的办法模拟点击事件了

```基于我们项目的实现方式,我就直接说我们的方式了

3,在Application中创建,显示并记录小窗口的显示状态

//显示状态表示
 public boolean inWindowShowing = false;
 private FloatWindowView mFloatWindowView;

    public void createFloatView(Context context) {
        if (null == mFloatWindowView) {
            mFloatWindowView = new FloatWindowView(context);
//获取窗体服务
            WindowManager wm = (WindowManager) getSystemService(
                    Context.WINDOW_SERVICE);
//创建一个窗体布局参数
            WindowManager.LayoutParams params = new WindowManager.LayoutParams();
//保证背景无色
            params.format = PixelFormat.TRANSPARENT;
//设置窗体初始化的位置(这个很纠结,下文再讲)
            params.gravity = Gravity.CENTER_VERTICAL;
            params.flags = WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE;
            params.width =WindowManager.LayoutParams.WRAP_CONTENT;
            params.height =WindowManager.LayoutParams.WRAP_CONTENT;
//x坐标的位置(这个是在gravity的基础上的)
            params.x= wm.getDefaultDisplay().getWidth()/2;
//y坐标位置
            params.y=wm.getDefaultDisplay().getHeight()/2- UIUtils.dip2px(100);
//这个标识的优先级低于下拉通知栏
                params.type = WindowManager.LayoutParams.TYPE_SYSTEM_ALERT;
//这个就高于了  不推荐使用
//                params.type = WindowManager.LayoutParams.TYPE_PHONE;


        /*
         * 下面的flags属性的效果形同“锁定”。 悬浮窗不可触摸，不接受任何事件,同时不影响后面的事件响应。
         * wmParams.flags=LayoutParams.FLAG_NOT_TOUCH_MODAL |
         * LayoutParams.FLAG_NOT_FOCUSABLE | LayoutParams.FLAG_NOT_TOUCHABLE;
         */
//先给浮窗view设置参数,方便滑动时动态改变小窗口位置
            mFloatWindowView.setParams(params);
           //添加到窗体上
            wm.addView(mFloatWindowView, params);
//显示标识
            inWindowShowing = true;
        }

    }
//这个很简单,从窗体上移除
    public void reMoveFloatView() {
        if (null != mFloatWindowView) {
            WindowManager wm = (WindowManager) getSystemService(
                    Context.WINDOW_SERVICE);
            wm.removeView(mFloatWindowView);
            mFloatWindowView = null;
            inWindowShowing = false;
        }
    }

#然而然而然而,这个小窗口的初始化位置可把我整的够呛,只要把gravity设置成TOP和LEFT,
#好的可以就是在屏幕的左上角了(当然设置成CENTER就会居中),但是呢  我们的设计说要在界面的右下角
#并且距离底部导航栏高个20px,那么问题就来了  我把gravity设置成RIGHT|BOTTOM不就行了?NONONO,
#TOO羊TOO新坡,设置成Bottom  只能在底部移动了就,  设置成Right和Bottom那么就直接不能动了,
#所以才有了设置成CENTER_VERTICAL,这个位置的的X和Y都是相对于屏幕的中间的,
#所以让浮窗显示在右边就把X设置成屏幕的一半,下边就把Y设置成高度的一半加上导航栏的高度再加个20px,好吧 位置终于OK 了

这样的话就差不多实现了小窗口了

关于那些个FLOG的什么意思的直接看这个 传送门--TP

---

到此我们可以安安静静的写写文章泡泡X了,可是.....................

TMD的一些国产ROM默认是把浮窗的权限是关着的...........我曹.....

不过不要慌 还好前辈们帮我们解决了这个问题(至少90%吧)

4,浮窗权限的适配

具体做法传送门--TP

再次向前辈们致敬...........

这个实现方式目前是有缺陷的,最好能在service中创建,这样不容易被系统回收,反正问题还是有得,欢迎大家在评论区点评!