轻松自制flyme悬浮球

CouCanady 7年前
   <p>去年用了一整年的MX4Pro,魅族留给我最大的印象就是悬浮球了(质量问题我就不说了),左右滑动切换应用、上拉返回桌面、下拉打开通知栏、轻触返回…,一切都那么丝滑。然而自从上半年换成了s7dege,我感觉怎么也习惯不了没有悬浮球的生活了。</p>    <p>三星自己也有一个类似于悬浮球的功能,不过太过复杂,不易用,悬浮球本来就该是一个一步操作的产品,看来三星在软件设计方面还是任重而道远。于是乎我便在各大应用市场上找悬浮球,把所有排名靠前的悬浮球应用都安装试了一下,最后终于让我找到了一款几乎和flyme悬浮球相仿的app。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/cfdd76444e7428bcd44ae20b84f837e1.png"></p>    <p>这款app在我手机里呆了好几个月,是我手机里除了微信之外,唯一允许自启动的应用了。很感谢这款app的开发者,不仅没有任何广告,还非常好用,完美移植了flyme自带的悬浮球功能。</p>    <p>然而渐渐的,我便感觉到了一丝不舒服,那就是我每次安装了一个新app,打开后提示要赋予权限(存储、拍照)的时候,6.0的系统总会温馨的弹出一个框:</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/d672ae17bbaa855412a851c455f5b30b.jpg"></p>    <p>然后我就必须到设置页面,花半天找到悬浮球,关掉它的 <strong>“可出现在顶部的应用程”</strong> 权限,然后才能回到app,授予权限。最后,我还得再次跑到设置页面,再花半天找到悬浮球,打开它的 <strong>“可出现在顶部的应用程”</strong> 权限。朋友啊朋友,这种体验,一次就够了,然而硬是让我体验了N次啊!</p>    <p>然而有什么能难得倒程序员的呢?刚好这个周末在家无事,我决定按照自己的习惯,打造一个心目中最易用的悬浮球。</p>    <h2><strong>设计</strong></h2>    <h3><strong>1.UI</strong></h3>    <p>UI很简单,直接用sketch切了三个圆,一个是作为背景的灰色半透明的圆,一个是中心的小圆,另外还有一个默认隐藏的大圆。</p>    <h3><strong>2.功能</strong></h3>    <p>因为自己的操作习惯是固定的,所以也就不需要给悬浮球添加自定义操作的功能了,直接将操作对应的功能写死即可。</p>    <p>(1)单击:返回</p>    <p>(2)长按:移动悬浮球</p>    <p>(3)左滑右滑:打开最近应用程序</p>    <p>(4)上拉:返回桌面</p>    <p>(5)下拉:</p>    <p>这块我最先开始定义的很简单,就是下拉通知栏,但是经过一天的使用,我又给它加了一个功能,就是保持下拉状态1.5秒,将移除悬浮球。这样你便可以很简单的移除掉悬浮球了。</p>    <h2><strong>实现</strong></h2>    <h3><strong>1.如何添加悬浮球到桌面</strong></h3>    <p>这里首先要感谢郭霖大神的 《 Android桌面悬浮窗效果实现,仿360手机卫士悬浮窗效果》 ,这部分我参考了这篇文章,成功的将悬浮球添加到了桌面。</p>    <pre>  <code class="language-java">public static void addBallView(Context context) {      if (mBallView == null) {          WindowManager windowManager = getWindowManager(context);          int screenWidth = windowManager.getDefaultDisplay().getWidth();          int screenHeight = windowManager.getDefaultDisplay().getHeight();          mBallView = new FloatBallView(context);          LayoutParams params = new LayoutParams();          params.x = screenWidth;          params.y = screenHeight / 2;          params.width = WindowManager.LayoutParams.WRAP_CONTENT;          params.height = WindowManager.LayoutParams.WRAP_CONTENT;          params.gravity = Gravity.LEFT | Gravity.TOP;          params.type = LayoutParams.TYPE_PHONE;          params.format = PixelFormat.RGBA_8888;          params.flags = LayoutParams.FLAG_NOT_TOUCH_MODAL                  | LayoutParams.FLAG_NOT_FOCUSABLE;          mBallView.setLayoutParams(params);          windowManager.addView(mBallView, params);      }  }</code></pre>    <h3><strong>2.手势判断</strong></h3>    <p>这是最重要的部分了,承担着悬浮球的主要功能。</p>    <p>(1)手指按下时</p>    <p>按下时,隐藏小球,展现大球,并记录按下位置和按下时间。</p>    <pre>  <code class="language-java">case MotionEvent.ACTION_DOWN:         mIsTouching = true;         mImgBall.setVisibility(INVISIBLE);         mImgBigBall.setVisibility(VISIBLE);         mLastDownTime = System.currentTimeMillis();         mLastDownX = event.getX();         mLastDownY = event.getY();         postDelayed(new Runnable() {            @Override            public void run() {              if (!mIsLongTouch && mIsTouching && mCurrentMode == MODE_NONE) {                      mIsLongTouch = isLongClick(event);                 }            }         }, LONG_CLICK_LIMIT);         break;</code></pre>    <p>代码最后的postDealy时干嘛使的呢?就是通过延迟300毫秒,判断是否是长按模式。其中判断长按的方法代码如下:</p>    <pre>  <code class="language-java">private boolean isLongClick(MotionEvent event) {      float offsetX = Math.abs(event.getX() - mLastDownX);      float offsetY = Math.abs(event.getY() - mLastDownY);      long time = System.currentTimeMillis() - mLastDownTime;        if (offsetX < mTouchSlop && offsetY < mTouchSlop && time >= LONG_CLICK_LIMIT) {          //震动提醒          mVibrator.vibrate(mPattern, -1);          return true;      } else {          return false;      }  }</code></pre>    <p>(2)手指移动时</p>    <p>这时要判断是否是处于长按状态,如果是,那么进入MOVE模式,移动悬浮球,如果不是,则判断操作手势,即下拉还是上拉等其他手势。</p>    <pre>  <code class="language-java">case MotionEvent.ACTION_MOVE:        if (!mIsLongTouch && isTouchSlop(event)) {                return true;        }        if (mIsLongTouch && (mCurrentMode == MODE_NONE || mCurrentMode == MODE_MOVE)) {                mLayoutParams.x = (int) (event.getRawX() - mOffsetToParent);                mLayoutParams.y = (int) (event.getRawY() - mOffsetToParentY);                mWindowManager.updateViewLayout(FloatBallView.this, mLayoutParams);                mBigBallX = mImgBigBall.getX();                mBigBallY = mImgBigBall.getY();                mCurrentMode = MODE_MOVE;        } else {                doGesture(event);        }        break;</code></pre>    <p>进行手势操作的代码如下,主要是根据当前坐标与按下时记录的坐标进行计算,判断手势,并更新大球位置。</p>    <pre>  <code class="language-java">private void doGesture(MotionEvent event) {      float offsetX = event.getX() - mLastDownX;      float offsetY = event.getY() - mLastDownY;        if (Math.abs(offsetX) < mTouchSlop && Math.abs(offsetY) < mTouchSlop) {          return;      }      if (Math.abs(offsetX) > Math.abs(offsetY)) {          if (offsetX > 0) {              if (mCurrentMode == MODE_RIGHT) {                  return;              }              mCurrentMode = MODE_RIGHT;              mImgBigBall.setX(mBigBallX + OFFSET);              mImgBigBall.setY(mBigBallY);          } else {              if (mCurrentMode == MODE_LEFT) {                  return;              }              mCurrentMode = MODE_LEFT;              mImgBigBall.setX(mBigBallX - OFFSET);              mImgBigBall.setY(mBigBallY);          }      } else {          if (offsetY > 0) {              if (mCurrentMode == MODE_DOWN || mCurrentMode == MODE_GONE) {                  return;              }              mCurrentMode = MODE_DOWN;              mImgBigBall.setX(mBigBallX);              mImgBigBall.setY(mBigBallY + OFFSET);                //如果长时间保持下拉状态,将会触发移除悬浮球功能              postDelayed(new Runnable() {                  @Override                  public void run() {                      if (mCurrentMode == MODE_DOWN && mIsTouching) {                          toRemove();                          mCurrentMode = MODE_GONE;                      }                  }              }, TO_APP_INDEX_LIMIT);          } else {              if (mCurrentMode == MODE_UP) {                  return;              }              mCurrentMode = MODE_UP;              mImgBigBall.setX(mBigBallX);              mImgBigBall.setY(mBigBallY - OFFSET);          }      }  }</code></pre>    <p>(3)手指抬起时</p>    <p>手指抬起后,先要判断是否是长按模式,不是的话再判断是否是单击,都不是的话就根据当前状态触发对应功能。</p>    <pre>  <code class="language-java">case MotionEvent.ACTION_CANCEL:  case MotionEvent.ACTION_UP:         mIsTouching = false;         if (mIsLongTouch) {             mIsLongTouch = false;         } else if (isClick(event)) {             AccessibilityUtil.doBack(mService);         } else {             doUp();         }         mImgBall.setVisibility(VISIBLE);         mImgBigBall.setVisibility(INVISIBLE);         mCurrentMode = MODE_NONE;         break;</code></pre>    <h2><strong>效果</strong></h2>    <p>到目前为止,悬浮球的功能就实现了,来看看使用效果如何。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/5c6d94ca83cf2a2a0972d5007073bd0e.gif"></p>    <h2><strong>最后再说两句</strong></h2>    <p>花了大半天,总算是大功告成了,程序员,最大的好处就是自己可以定制应用:joy:,</p>    <p> </p>    <p> </p>