Android仿微信文章悬浮窗效果

Android仿微信文章悬浮窗效果

序言  (转载

阅读公众号文章如果有人给你发微信你可以把这篇文章当作悬浮窗悬浮起来,方便你聊完天不用找继续阅读,听完是不是觉得这叫啥啊,我大Android微信版不是早就有这个功能了吗,我看文章的时候看到过有这个悬浮按钮,但是我一直没有使用过,试了一下还是挺方便的,就想着自己实现一下这个功能,下面看图,大家都习惯了无图言X

原理

看完动图我们来分析一下,如何在每个页面上都存在一个View呢,有些人可能会说,写在base里面,这样每次启动一个新的Activity都要往页面上addView一次,性能不好,再说了,我们作为一个优秀的程序员能干这种重复的事吗,这种方案果断打回去;既然这样的话那我们肯定要在全局加了,那么全局是哪呢?相信了解过Activity源码的朋友肯定知道,全局可以在Window层加啊,这样既能一次性搞定,又不影响性能,说干就干。

实现

1、权限

首先我们要考虑的一个问题就是权限问题,因为要适配Android 7.0 8.0,添加悬浮窗是需要申请权限的,这里参考了 Android 悬浮窗权限各机型各系统适配大全这篇文章,适配的比较全,可以直接拿来用。这里需要注意的是,为了适配Android 8.0,Window的类型需要配置一下:


 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {

    //Android 8.0

   mLayoutParams.type = WindowManager.LayoutParams.TYPE_APPLICATION_OVERLAY;

  } else {

  //其他版本

mLayoutParams.type = WindowManager.LayoutParams.TYPE_PHONE;

}


2、添加ViewGroup到Window

判断好权限之后,直接添加就可以了


@SuppressLint("CheckResult")

private void showWindow(Context context) {

    mWindowManager = (WindowManager) context.getSystemService(WINDOW_SERVICE);

    mView = LayoutInflater.from(context).inflate(R.layout.article_window, null);

    ImageView ivImage = mView.findViewById(R.id.aw_iv_image);

    String imageUrl = SPUtil.getStringDefault(ARTICLE_IMAGE_URL, "");

    RequestOptions requestOptions = RequestOptions.circleCropTransform();

    requestOptions.placeholder(R.mipmap.ic_launcher_round).error(R.mipmap.ic_launcher_round);

    Glide.with(context).load(imageUrl).apply(requestOptions).into(ivImage);

    initListener(context);

    mLayoutParams = new WindowManager.LayoutParams();

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {

        mLayoutParams.type = WindowManager.LayoutParams.TYPE_APPLICATION_OVERLAY;

    } else {

        mLayoutParams.type = WindowManager.LayoutParams.TYPE_SYSTEM_ALERT;

    }

    mLayoutParams.format = PixelFormat.RGBA_8888;  //窗口透明

    mLayoutParams.gravity = Gravity.LEFT | Gravity.TOP;  //窗口位置

    mLayoutParams.flags = WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL | WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE;

    mLayoutParams.width = 200;

    mLayoutParams.height = 200;

    mLayoutParams.x = mWindowManager.getDefaultDisplay().getWidth() - 200;

    mLayoutParams.y = 0;

    mWindowManager.addView(mView, mLayoutParams);

}


3、View的拖拽实现

借助WindowManager.LayoutParams来实现,mLayoutParams.x和mLayoutParams.y分别表示mView左上角的横纵坐标,所以我们只需要改动这两个值就行了,当ACTION_UP时,计算当前mView的中心点相对窗口的位置,然后将mView动态滑动到窗口左边或者右边:


//设置触摸滑动事件

mView.setOnTouchListener(new View.OnTouchListener() {

    int startX, startY;  //起始点

    boolean isMove;  //是否在移动

    long startTime;

    int finalMoveX;  //最后通过动画将mView的X轴坐标移动到finalMoveX

    @Override

    public boolean onTouch(View v, MotionEvent event) {

        switch (event.getAction()) {

            case MotionEvent.ACTION_DOWN:

                startX = (int) event.getX();

                startY = (int) event.getY();

                startTime = System.currentTimeMillis();

                isMove = false;

                return false;

            case MotionEvent.ACTION_MOVE:

                mLayoutParams.x = (int) (event.getRawX() - startX);

                mLayoutParams.y = (int) (event.getRawY() - startY);

                updateViewLayout();  //更新mView 的位置

                return true;

            case MotionEvent.ACTION_UP:

                long curTime = System.currentTimeMillis();

                isMove = curTime - startTime > 100;


                //判断mView是在Window中的位置,以中间为界

                if (mLayoutParams.x + mView.getMeasuredWidth() / 2 >= mWindowManager.getDefaultDisplay().getWidth() / 2) {

                    finalMoveX = mWindowManager.getDefaultDisplay().getWidth() - mView.getMeasuredWidth();

                } else {

                    finalMoveX = 0;

                }

                //使用动画移动mView

                ValueAnimator animator = ValueAnimator.ofInt(mLayoutParams.x, finalMoveX).setDuration(Math.abs(mLayoutParams.x - finalMoveX));

                animator.addUpdateListener((ValueAnimator animation) -> {

                    mLayoutParams.x = (int) animation.getAnimatedValue();

                    updateViewLayout();

                });

                animator.start();

                return isMove;

        }

        return false;

    }

});


4、注意

为了让Window与Activity脱离,这里我们采用Service来做,通过Service来添加和移除View;在权限申请成功之后我们需要通知Service(其实是Activity,可能会有保存数据等操作)作相应改变(提供一个接口给Service),然后在Service中使用广播来通知Activity;最后一个需要注意的地方就是我们需要判断应用程序是否在前台还是后台来添加或移除Window,这里通过使用ActivityLifecycleCallbacks来监听Activity在前台的数量来判断应用程序是在前台还是后台


class ApplicationLifecycle : Application.ActivityLifecycleCallbacks {

    private var started: Int = 0

    override fun onActivityPaused(activity: Activity?) {

    }

    override fun onActivityResumed(activity: Activity?) {

    }

    override fun onActivityStarted(activity: Activity?) {

        started++

        if (started == 1) {

            Log.e("TAG", "应用在前台了!!!")

        }

    }

    override fun onActivityDestroyed(activity: Activity?) {

    }

    override fun onActivitySaveInstanceState(activity: Activity?, outState: Bundle?) {

    }

    override fun onActivityStopped(activity: Activity?) {

        started--

        if (started == 0) {

            Log.e("TAG", "应用在后台了!!!")

        }

    }

    override fun onActivityCreated(activity: Activity?, savedInstanceState: Bundle?) {

    }

}


本文代码已传至Github

参考

Android 8.0 悬浮窗变动与用法

Android 悬浮窗权限各机型各系统适配大全

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,117评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,963评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,897评论 0 240
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,805评论 0 203
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,208评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,535评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,797评论 2 311
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,493评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,215评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,477评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,988评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,325评论 2 252
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,971评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,807评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,544评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,455评论 2 266

推荐阅读更多精彩内容

  • 序言 前些日子跟朋友聊天,朋友Z果粉,前些天更新了微信,说微信出了个好方便的功能啊,我问是啥功能啊,看看我大And...
    24K纯帅豆阅读 6,786评论 2 31
  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 12,469评论 2 59
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,563评论 25 707
  • 20岁。是一个怎么样年龄,想探寻的太多,想尝试的太多,害怕的茫然不知所措的也太多太多。 在大学里,...
    范星星阅读 293评论 0 1
  • 近来二十几年间,药物常年在身边; 究其原因归何处?根源就在大米中。 万家陈米恒食中,毒素慢慢侵身体; 吾劝诸君当立...
    傲梅寒雪阅读 241评论 0 0