Android开发技巧——高亮的用户操作指南

Android开发技巧——高亮的用户操作指南

---

2015-12-15补记：

发现使用PopupWindow进行遮罩层的显示，在华为P7上会有问题。具体表现为：画出来的高亮部分会偏下。原因为：通过view.getRootView获取到DecorView，把其作为PopupWindow的anchorView来显示，然而在华为P7上依然是显示在status bar下面，而我们计算高亮时获取view的高度，是从decorView开始计算的，导致之间的距离相差了一个状态栏的高度。参考张鸿洋大神的做法对实现进行了修改，相关修改见文末。

---

一不小心成了博客之星的候选人，还有许多朋友帮我投票，无以回报，只好发篇博客以表谢意。

前面四篇写了关于自定义控件的一些基础知识。在我的理解中，其实做Android开发久了，在项目领域无非是更熟悉业务流程，而在Android的技术领域，基本上是走向两个方向，或是两个方向都走。

一是做界面上的开发，比如各种下拉刷新，酷炫的对话框，各种动效等，这其中有的是为了界面的更好实现，有些是为了设计的更好表现。

第二个方向则是非界面上的开发，比如热修复，事件总线，网络请求库，图片加载库等，侧重于解决某一层面的问题，提高效率，降低风险，或是其他原因。

我自己目前对第二个方向所涉较少，而对于第一个方向，接触比较多的就是自定义控件了。除了与属性相关的设置以及控件本身的方法的调用，自定义控件的表现主要还是在onDraw里的绘制，而onDraw里的绘制，基本上也是你能想到多远，加上所需的数学知识和相关API，就能做到多远。

需求

说得有点远了，这一篇主要分享的是操作指南的一种实现，聚光灯高亮某个控件。



如图所示，所谓高亮，其实只是把屏幕全屏用半透明的遮罩层挡住，而只留下其中某一控件不遮住，并在控件的附近加上具体的文字提示，而让用户的焦点都聚集到这一控件上，并看到提示的文字。然后点击圆圈里面的控件，有对应的响应事件。按返回键不能退出这个界面。

上面的例子还是相对比较好实现的，因为它没有QQ的提示里面的箭头，只是一个圆，并且在下面一行文字。本文也只讨论这种实现，有其他需求的可以自己扩展。

思路

全屏遮罩（不包括显示的系统状态栏），首先我所想到的就是PopupWindow了。在PopupWindow中显示一个View，View的背景为半透明黑色，并且中间抠出一个圆，然后下面再绘制一行文字就可以了。抠出一个圆的实现可以通过对Paint调用setXfermode，setXfermode的参数可以参考《setXfermode》这篇博客。

那么思路如下：

1. 继承View，在onDraw(Canvas canvas)方法中绘制一层半透明背景

2. 设置setXfermode(xfermode)为PorterDuff.Mode.DST_OUT，计算圆所在坐标，并画出

3. 在圆的下方画出文字

4. 提供接口showTipForView(final View view, String tip, OnClickListener listener)供外部调用，参数为：需要高亮的控件，文字提示，点击之后的回调。

5. 计算需要响应的点击区域，回调listener。

实现

下面是具体的实现过程。

聚光灯高亮

首先先实现高亮的效果，关于点击下一步再说。从上面的分析我们可以知道至少需要以下变量：

public class HighLightView extends View {
    private static final float RADIUS_RATIO = 1f / 3;
    private static final PorterDuffXfermode MODE_DST_OUT = new PorterDuffXfermode(PorterDuff.Mode.DST_OUT);

    private final Paint mPaint;

    private int mOverlayColor;//遮罩层颜色
    private int mRadius; // 圆半径
    private int mCenterX; // 圆心横坐标
    private int mCenterY; // 圆心纵坐标

    private String mTip; // 提示文字
    private float mTipX; // 文字横坐标
    private float mTipY; // 文字纵坐标

    private View mAnchorView; // 高亮的View
    private final PopupWindow mPopupWindow;
}

然后在构造方法中，对mPopupWindow和mPaint进行初始化。由于我这边遮罩颜色是固定的，所以我也在这边一起初始化了。代码如下：

    public HighLightView(Context context) {
        super(context);
        mPopupWindow = new PopupWindow(this, ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT, true);
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setDither(true);
        mPaint.setStyle(Paint.Style.FILL);
        int textSize = getResources().getDimensionPixelSize(R.dimen.text_32pt);
        mPaint.setTextSize(textSize);
        mPaint.setColor(Color.WHITE);
        mOverlayColor = getResources().getColor(R.color.guide_overlay);
    }

然后我们实现在onDraw(Canvas canvas)里的绘制，绘制代码很简单，画个遮罩层，设置Xfermode，画个圆，去掉Xfermode，画个文字。

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(mOverlayColor);
        mPaint.setXfermode(MODE_DST_OUT);
        canvas.drawCircle(mCenterX, mCenterY, mRadius, mPaint);
        mPaint.setXfermode(null);
        canvas.drawText(mTip, mTipX, mTipY, mPaint);
    }

但是这里的坐标都需要在调用showTipForView(final View view, String tip, OnClickListener listener)了之后进行计算。所以下面是这个方法的实现过程：

   /**
     * @param view     要高亮的view
     * @param tip      文字提示
     * @param listener 点击回调
     */
    public void showTipForView(final View view, final String tip, OnClickListener listener) {
        mAnchorView = view;
        mTip = tip;
        mClickListener = listener;

        final View rootView = view.getRootView();

        final int[] location = new int[2];
        view.getLocationInWindow(location);//获取当前view在窗口中的位置
        final int viewHeight = view.getHeight();
        final int viewWidth = view.getWidth();
        mRadius = (int) (viewWidth * RADIUS_RATIO);
        mCenterX = viewWidth / 2 + location[0];// 获取圆心x坐标
        mCenterY = viewHeight / 2 + location[1]; // 获取圆心y坐标

        mTipX = (rootView.getWidth() - mPaint.measureText(mTip)) / 2; //提示文字的横坐标，居中即可
        mTipY = location[1] + mRadius * 2; // 提示文字的纵坐标，只需要在圆的下方，这里设为view的纵坐标加上直径
        mPopupWindow.showAtLocation(rootView, Gravity.TOP, 0, 0);
    }

实现过程很简单，获取view的坐标，宽，高，然后进行各种计算并赋给其他参数。

但是在运行的时候，你会发现，如果这时候这个view还没有被绘制出来的话，可能出现两个问题：

1，坐标计算不正确，圆都跑左上角的屏幕边缘去了。

2，mPopupWindow.showAtLocation调用的时候报异常：

android.view.WindowManager$BadTokenException
Unable to add window -- token null is not valid; is your activity running?

第一个的原因是view还没有绘制完成，所以获取到的坐标不是最后的坐标。第二个的原因是我们调用的时候Activity的生命周期还没完成。通常我们都会在某个界面刚显示的时候弹出这种提示，所以会存在这样的问题。

stackoverflow了之后，发现问题的解决方法很简单，只需要在view中调用 post方法，把计算和弹出的代码放在这里面就可以了，它会在窗口显示之后被调用，见《Problems creating a Popup Window in Android Activity》。这个答案不但解决了问题2，也顺便解决了问题1 。

所以代码改为：

    /**
     * @param view     要高亮的view
     * @param tip      文字提示
     * @param listener 点击回调
     */
    public void showTipForView(final View view, final String tip, OnClickListener listener) {
        mAnchorView = view;
        mTip = tip;
        mClickListener = listener;

        view.post(new Runnable() {
            @Override
            public void run() {
                final View rootView = view.getRootView();

                final int[] location = new int[2];
                view.getLocationInWindow(location);//获取当前view在窗口中的位置
                final int viewHeight = view.getHeight();
                final int viewWidth = view.getWidth();
                mRadius = (int) (viewWidth * RADIUS_RATIO);
                mCenterX = viewWidth / 2 + location[0];// 获取圆心x坐标
                mCenterY = viewHeight / 2 + location[1]; // 获取圆心y坐标

                mTipX = (rootView.getWidth() - mPaint.measureText(mTip)) / 2; //提示文字的横坐标，居中即可
                mTipY = location[1] + mRadius * 2; // 提示文字的纵坐标，只需要在圆的下方，这里设为view的纵坐标加上直径
                mPopupWindow.showAtLocation(rootView, Gravity.TOP, 0, 0);
            }
        });
    }

点击事件

这里我们期望的点击区域是圆和按钮的相交部分。但实际上，我们不需要这么精确，只需要确定与它相近的一个矩形就可以了，如下图所示：



在这里，我们假定可点击区域为与宽平等的直径在这个View上平移所经过的面积，它与实际上圆与View的相交部分只差4个小角，在手指触摸的情况下可以忽略这个误差。

相关的变量定义如下：

    /**
     * 可点击的区域
     */
    private Rect mClickRect;
    /**
     * 是否在点击区域按下
     */
    private boolean mDownInClickRect;

在前面计算其他变量的方法中，再加上一行代码，用于计算这个矩形：

    // 可点击区域为圆心按钮相交的近似矩形
    mClickRect = new Rect(mCenterX - mRadius, location[1], mCenterX + mRadius, location[1] + viewHeight);

接着处理点击事件，重写onTouchEvent(MotionEvent event)即可，判断按下和松开时是否都在点击范围内，是的话就回调，并且把mPopupWindow隐藏掉。代码如下：

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                final PointF down = new PointF(event.getX(), event.getY());
                if (isInClickRect(down)) {
                    mDownInClickRect = true;
                }
                break;

            case MotionEvent.ACTION_UP:
                if (!mDownInClickRect) {
                    break;
                }
                final PointF up = new PointF(event.getX(), event.getY());
                if (isInClickRect(up) && mClickListener != null) {
                    mClickListener.onClick(mAnchorView);
                    mPopupWindow.dismiss();
                }
                mDownInClickRect = false;
                return true;
        }
        return super.onTouchEvent(event);
    }

    private boolean isInClickRect(PointF point) {
        return point.x > mClickRect.left && point.x < mClickRect.right
                && point.y > mClickRect.top && point.y < mClickRect.bottom;
    }

扩展讨论

如果需要把这个高亮的控件做得通用，我们需要往外再提供一些接口用于设置一些内容，比如：

1，遮罩层的颜色

2，文字的样式

3，高亮的样式（我这里的项目中是显示一个圈，但更多的可能是高亮控件本身）

4，其他需要显示的内容，比如箭头，或者是其他图形或控件（类似于“我知道了”的按钮）

因项目较忙，写博客的时间不多，如果有好的建议，优化，或者我没有考虑到的场景，欢迎评论及指正。

2015-12-15补述：

上面使用PopupWindow来实现的原理貌似无法解决部分机型的兼容问题，导致绘制出来的高亮部分偏下，参考hongyangAndroid/Highlight的实现过程，进行以下四步修改：

1，去掉PopupWindow，显示时改为直接添加到DecorView的方式：

    if(anchorView instanceof ViewGroup) {
        ((ViewGroup)anchorView).addView(HighLightView.this, ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
    }

2，要隐藏的时候，将其remove掉：

    ((ViewGroup)getParent()).removeView(HighLightView.this);

3，这个时候View的事件会穿透到下一层去，所以需要在构造方法里进行设置：

    setFilterTouchesWhenObscured(false);

4，原先绘制圆的代码，此时只会绘制出一个大黑块，所以需要一个Bitmap变量，用于保存你要显示的内容，包括遮罩层，高亮的圆，文字，如下：

        mBitmap = Bitmap.createBitmap(anchorView.getWidth(), anchorView.getHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(mBitmap);
        canvas.drawColor(mOverlayColor);
        mPaint.setXfermode(X_FER_MODE);
        canvas.drawCircle(mCenterX, mCenterY, mRadius, mPaint);
        mPaint.setXfermode(null);
        mPaint.setColor(Color.WHITE);
        canvas.drawText(mTip, mTipX, mTipY, mPaint);

该类完整的代码如下：

package com.parkingwang.app.guide.operation;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PointF;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;

import com.parkingwang.app.R;

/**
 * 高亮的View。
 *
 * @author Geek_Soledad (msdx.android@qq.com)
 * @version 2015-12-07 3.1
 * @since 2015-12-07 3.1
 */
public class HighLightView extends View {
    private static final float RADIUS_RATIO = 1f / 3;
    private static final PorterDuffXfermode X_FER_MODE = new PorterDuffXfermode(PorterDuff.Mode.DST_OUT);

    private final Paint mPaint;

    private int mOverlayColor;//遮罩层颜色
    private int mRadius; // 圆半径
    private int mCenterX; // 圆心横坐标
    private int mCenterY; // 圆心纵坐标

    private String mTip; // 提示文字
    private float mTipX; // 文字横坐标
    private float mTipY; // 文字纵坐标

    private View mHighLightView; // 高亮的View
    private Bitmap mBitmap;

    private OnClickListener mClickListener; // 点击回调
    /**
     * 可点击的区域
     */
    private Rect mClickRect = new Rect();
    /**
     * 是否在点击区域按下
     */
    private boolean mDownInClickRect;

    public HighLightView(Context context) {
        super(context);
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setDither(true);
        mPaint.setStyle(Paint.Style.FILL);
        int textSize = getResources().getDimensionPixelSize(R.dimen.text_32pt);
        mPaint.setTextSize(textSize);
        mOverlayColor = getResources().getColor(R.color.guide_overlay);

        setFilterTouchesWhenObscured(false);
    }

    /**
     * @param view     要高亮的view
     * @param tip      文字提示
     * @param listener 点击回调
     */
    public void showTipForView(final View view, final String tip, OnClickListener listener) {
        mHighLightView = view;
        mTip = tip;
        mClickListener = listener;

        view.post(new Runnable() {
            @Override
            public void run() {
                final View anchorView = view.getRootView();
                prepare(anchorView, view);
                if(anchorView instanceof ViewGroup) {
                    ((ViewGroup)anchorView).addView(HighLightView.this, ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
                }
            }
        });
    }

    private void prepare(View anchorView, View view) {
        final int[] baseLocation = new int[2];
        anchorView.getLocationInWindow(baseLocation);
        final int[] viewLocation = new int[2];
        view.getLocationInWindow(viewLocation);//获取当前view在窗口中的位置
        final int viewHeight = view.getHeight();
        final int viewWidth = view.getWidth();
        final int halfHeight = viewHeight / 2;
        mRadius = (int) (viewWidth * RADIUS_RATIO);
        mCenterX = viewLocation[0] - baseLocation[0] + viewWidth / 2;// 获取圆心x坐标
        mCenterY = viewLocation[1] - baseLocation[1] + halfHeight; // 获取圆心y坐标

        // 可点击区域为圆心按钮相交的近似矩形
        mClickRect.set(mCenterX - mRadius, mCenterY - halfHeight, mCenterX + mRadius, mCenterY + halfHeight);
        mTipX = (anchorView.getWidth() - mPaint.measureText(mTip)) / 2; //提示文字的横坐标，居中即可
        mTipY = viewLocation[1] + mRadius * 2; // 提示文字的纵坐标，只需要在圆的下方，这里设为view的纵坐标加上直径
        mBitmap = Bitmap.createBitmap(anchorView.getWidth(), anchorView.getHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(mBitmap);
        canvas.drawColor(mOverlayColor);
        mPaint.setXfermode(X_FER_MODE);
        canvas.drawCircle(mCenterX, mCenterY, mRadius, mPaint);
        mPaint.setXfermode(null);
        mPaint.setColor(Color.WHITE);
        canvas.drawText(mTip, mTipX, mTipY, mPaint);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawBitmap(mBitmap, 0, 0, null);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                final PointF down = new PointF(event.getX(), event.getY());
                if (isInClickRect(down)) {
                    mDownInClickRect = true;
                }
                break;

            case MotionEvent.ACTION_UP:
                if (!mDownInClickRect) {
                    break;
                }
                final PointF up = new PointF(event.getX(), event.getY());
                if (isInClickRect(up) && mClickListener != null) {
                    mClickListener.onClick(mHighLightView);
                    ((ViewGroup)getParent()).removeView(HighLightView.this);
                }
                mDownInClickRect = false;
                return true;
        }
        return true;
    }

    private boolean isInClickRect(PointF point) {
        return point.x > mClickRect.left && point.x < mClickRect.right
                && point.y > mClickRect.top && point.y < mClickRect.bottom;
    }
}

参考资料：

《setXfermode》：http://407827531.iteye.com/blog/1470519

《Problems creating a Popup Window in Android Activity》：http://stackoverflow.com/questions/4187673/problems-creating-a-popup-window-in-android-activity/4713487#4713487

Highlight：https://github.com/hongyangAndroid/Highlight

本文原创，转载请注明出处：http://blog.csdn.net/maosidiaoxian/article/details/50248145