Android实现新手引导半透明蒙层效果

package com.cymobi.library.view.widget;import android.app.Activity;import android.content.Context;import android.graphics.Bitmap;import android.graphics.Canvas;import android.graphics.Paint;import android.graphics.PorterDuff;import android.graphics.PorterDuffXfermode;import android.graphics.RectF;import android.util.Log;import android.view.Gravity;import android.view.View;import android.view.ViewGroup;import android.view.ViewTreeObserver;import android.widget.FrameLayout;import android.widget.RelativeLayout;import com.cymobi.library.R;/** * Created by xuke on 2017/8/24. */public class GuideView extends RelativeLayout implements ViewTreeObserver.OnGlobalLayoutListener {  private final String TAG = getClass().getSimpleName();  private Context mContent;  private boolean first = true;  private static final String SHOW_GUIDE_PREFIX = "show_guide";  private int offsetX, offsetY;  private int radius;  private View targetView;  private View textGuideView;  private View customGuideView;  private Paint mCirclePaint;  private Paint mBackgroundPaint;  private boolean isMeasured;  private int[] center;  private PorterDuffXfermode porterDuffXfermode;  private Bitmap bitmap;  private int backgroundColor;  private Canvas temp;  private Direction direction;  private MyShape myShape;  private int[] location;  private boolean onClickExit;  private OnClickCallback onclickListener;  private int targetViewWidth;  private int targetViewHeight;  private boolean isContain = false;  private boolean needDraw = true;  public GuideView(Context context) {    super(context);    this.mContent = context;  }  public int[] getLocation() {    return location;  }  public void setLocation(int[] location) {    this.location = location;  }  public int getRadius() {    return radius;  }  public void setRadius(int radius) {    this.radius = radius;  }  public void setDirection(Direction direction) {    this.direction = direction;  }  public void setShape(MyShape shape) {    this.myShape = shape;  }  public void setBgColor(int background_color) {    this.backgroundColor = background_color;  }  public void setTargetView(View targetView) {    this.targetView = targetView;  }  public int[] getCenter() {    return center;  }  public void setCenter(int[] center) {    this.center = center;  }  public void setOffsetX(int offsetX) {    this.offsetX = offsetX;  }  public void setOffsetY(int offsetY) {    this.offsetY = offsetY;  }  public void setContain(boolean contain) {    this.isContain = contain;  }  public void setCustomGuideView(View customGuideView) {    this.customGuideView = customGuideView;    if (!first) {      restoreState();    }  }  public void setTextGuideView(View textGuideView) {    this.textGuideView = textGuideView;    if (!first) {      restoreState();    }  }  private boolean hasShown() {    if (targetView == null)      return true;    return mContent.getSharedPreferences(TAG, Context.MODE_PRIVATE).getBoolean(generateUniqId(targetView), false);  }  private String generateUniqId(View v) {    return SHOW_GUIDE_PREFIX + v.getId();  }  public void setOnclickListener(OnClickCallback onclickListener) {    this.onclickListener = onclickListener;  }  private void setClickInfo() {    final boolean exit = onClickExit;    setOnClickListener(new OnClickListener() {      @Override      public void onClick(View v) {        if (onclickListener != null) {          onclickListener.onClickedGuideView();        }        if (exit) {          hide();        }      }    });  }  public void show() {    Log.v(TAG, "show");    if (hasShown())      return;    if (targetView != null) {      targetView.getViewTreeObserver().addOnGlobalLayoutListener(this);    }    this.setBackgroundResource(R.color.transparent);    this.bringToFront(); //设置在最上层    ((FrameLayout) ((Activity) mContent).getWindow().getDecorView()).addView(this);    first = false;  }  public void hide() {    Log.v(TAG, "hide");    if (customGuideView != null || textGuideView != null) {      targetView.getViewTreeObserver().removeOnGlobalLayoutListener(this);      this.removeAllViews();      ((FrameLayout) ((Activity) mContent).getWindow().getDecorView()).removeView(this);      restoreState();    }  }  /**   * 获得targetView 的宽高   *   * @return   */  private int[] getTargetViewSize() {    int[] location = {-1, -1};    if (isMeasured) {      location[0] = targetView.getWidth();      location[1] = targetView.getHeight();    }    return location;  }  /**   * 获得targetView 的半径   *   * @return   */  private int getTargetViewRadius() {    if (isMeasured) {      int[] size = getTargetViewSize();      int x = size[0];      int y = size[1];      return (int) (Math.sqrt(x * x + y * y) / 2);    }    return -1;  }  @Override  protected void onDraw(Canvas canvas) {    super.onDraw(canvas);    Log.v(TAG, "onDraw");    if (!isMeasured)      return;    if (targetView == null)      return;    drawBackground(canvas);  }  private void drawBackground(Canvas canvas) {    Log.v(TAG, "drawBackground");    needDraw = false;    // 先绘制bitmap，再将bitmap绘制到屏幕    bitmap = Bitmap.createBitmap(canvas.getWidth(), canvas.getHeight(), Bitmap.Config.ARGB_8888);    temp = new Canvas(bitmap);    // 背景画笔    Paint bgPaint = new Paint();    if (backgroundColor != 0) {      bgPaint.setColor(backgroundColor);    } else {      bgPaint.setColor(getResources().getColor(R.color.bg_shadow));    }    // 绘制屏幕背景    temp.drawRect(0, 0, temp.getWidth(), temp.getHeight(), bgPaint);    // targetView 的透明圆形画笔    if (mCirclePaint == null) {      mCirclePaint = new Paint();    }    //透明效果    porterDuffXfermode = new PorterDuffXfermode(PorterDuff.Mode.CLEAR);  //SRC_OUT或者CLEAR都可以    mCirclePaint.setXfermode(porterDuffXfermode);    mCirclePaint.setAntiAlias(true);    if (myShape != null) {      RectF oval = new RectF();      switch (myShape) {        case CIRCULAR://圆形          temp.drawCircle(center[0], center[1], radius, mCirclePaint);          break;        case RECTANGULAR://圆角矩形          if (isContain) {            oval.left = location[0] - 8;            oval.top = center[1] - targetViewHeight / 2 - 8;            oval.right = location[0] + targetViewWidth + 8;            oval.bottom = center[1] + targetViewHeight / 2 + 8;          } else {            oval.left = location[0] + 5;            oval.top = center[1] - targetViewHeight / 2 + 1;            oval.right = location[0] + targetViewWidth - 5;            oval.bottom = center[1] + targetViewHeight / 2 - 1;          }          temp.drawRoundRect(oval, radius, radius, mCirclePaint);          break;      }    } else {      temp.drawCircle(center[0], center[1], radius, mCirclePaint);    }    // 绘制到屏幕    canvas.drawBitmap(bitmap, 0, 0, bgPaint);    bitmap.recycle();  }  @Override  public void onGlobalLayout() {    if (isMeasured)      return;    if (targetView.getHeight() > 0 && targetView.getWidth() > 0) {      isMeasured = true;      targetViewWidth = targetView.getWidth();      targetViewHeight = targetView.getHeight();    }    // 获取targetView的中心坐标    if (center == null) {      // 获取右上角坐标      location = new int[2];      targetView.getLocationInWindow(location);      center = new int[2];      // 获取中心坐标      center[0] = location[0] + targetView.getWidth() / 2;      center[1] = location[1] + targetView.getHeight() / 2;    }    // 获取targetView外切圆半径    if (radius == 0) {      radius = getTargetViewRadius();    }    //文字图片和提示图片    createView();  }  //文字图片和我知道啦图片一起放  private void createView() {    Log.v(TAG, "createView");    //文字提示    LayoutParams textViewParams;    textViewParams = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);    textViewParams.setMargins(0, center[1] + radius + 10, 0, 0);    // 我知道提示布局参数    LayoutParams guideViewParams;    guideViewParams = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);    guideViewParams.setMargins(0, center[1] + radius + 10, 0, 0);    if (textGuideView != null && customGuideView != null) {      if (direction != null) {        int left = center[0] + targetViewWidth / 2;        int right = center[0] + targetViewWidth / 2;        int top = center[1] - targetViewHeight / 2;        int bottom = center[1] + targetViewHeight / 2;        //我自己的项目只需要这两个方向的, 所以这里就只写了Top和Boottom        switch (direction) {          case TOP:            this.setGravity(Gravity.CENTER_HORIZONTAL);            textViewParams.setMargins(offsetX, top - offsetY, -offsetX, -top + offsetY);            guideViewParams.setMargins(offsetX, -3 * offsetY + top, -offsetX, -top + 3 * offsetY);            break;          case BOTTOM:            this.setGravity(Gravity.CENTER_HORIZONTAL);            textViewParams.setMargins(offsetX, bottom + offsetY, -offsetX, -bottom - offsetY);            guideViewParams.setMargins(offsetX, bottom + 3 * offsetY, -offsetX, -bottom - 3 * offsetY);            break;        }        if (this != null)          this.removeAllViews();        this.addView(textGuideView, textViewParams);        this.addView(customGuideView, guideViewParams);      }    }  }  /**   * 定义GuideView相对于targetView的方位，   */  public enum Direction {    LEFT, TOP, RIGHT, BOTTOM,    LEFT_TOP, LEFT_BOTTOM,    RIGHT_TOP, RIGHT_BOTTOM  }  /**   * 定义目标控件的形状。圆形，矩形   */  public enum MyShape {    CIRCULAR, RECTANGULAR  }  /**   * GuideView点击Callback   */  public interface OnClickCallback {    void onClickedGuideView();  }  public static class Builder {    static GuideView guiderView;    static Builder instance = new Builder();    Context mContext;    private Builder() {    }    public Builder(Context ctx) {      mContext = ctx;    }    public static Builder newInstance(Context ctx) {      guiderView = new GuideView(ctx);      return instance;    }    /**     * 设置目标view     */    public Builder setTargetView(View target) {      guiderView.setTargetView(target);      return instance;    }    /**     * 设置蒙层颜色     */    public Builder setBgColor(int color) {      guiderView.setBgColor(color);      return instance;    }    /**     * 设置文字和图片View 在目标view的位置     */    public Builder setDirction(Direction dir) {      guiderView.setDirection(dir);      return instance;    }    /**     * 设置绘制形状     */    public Builder setShape(MyShape shape) {      guiderView.setShape(shape);      return instance;    }    public Builder setRadius(int radius) {      guiderView.setRadius(radius);      return instance;    }    /**     * 设置文字图片     */    public Builder setTextGuideView(View view) {      guiderView.setTextGuideView(view);      return instance;    }    /**     * 设置"我知道啦"图片     */    public Builder setCustomGuideView(View view) {      guiderView.setCustomGuideView(view);      return instance;    }    /**     * 设置图片的偏移量     */    public Builder setOffset(int x, int y) {      guiderView.setOffsetX(x);      guiderView.setOffsetY(y);      return instance;    }    /**     * 设置时候包含 true:画的透明包含目标view     */    public Builder setContain(boolean isContain) {      guiderView.setContain(isContain);      return instance;    }    /**     * 点击监听     */    public Builder setOnclickListener(final OnClickCallback callback) {      guiderView.setOnclickListener(callback);      return instance;    }    public GuideView build() {      guiderView.setClickInfo();      return guiderView;    }  }  public void restoreState() {    Log.v(TAG, "restoreState");    offsetX = offsetY = 0;    radius = 0;    mCirclePaint = null;    mBackgroundPaint = null;    isMeasured = false;    center = null;    porterDuffXfermode = null;    bitmap = null;    needDraw = true;    temp = null;  }}

//文字图片    final ImageView iv1 = new ImageView(context);    iv1.setImageResource(R.drawable.img_guide_work_text);    RelativeLayout.LayoutParams params1 = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);    iv1.setLayoutParams(params1);    //我知道啦    final ImageView iv2 = new ImageView(context);    iv2.setImageResource(R.drawable.img_guide_know);    RelativeLayout.LayoutParams params2 = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);    iv2.setLayoutParams(params2); guideView = GuideView.Builder        .newInstance(context)        .setTargetView(itemWork) //设置目标view        .setTextGuideView(iv1)   //设置文字图片        .setCustomGuideView(iv2)  //设置 我知道啦图片        .setOffset(0, 80)      //偏移量 x=0 y=80        .setDirction(GuideView.Direction.BOTTOM)  //方向        .setShape(GuideView.MyShape.RECTANGULAR)  //矩形        .setRadius(10)               //圆角        .setContain(false)             //透明的方块时候包含目标view 默认false        .setBgColor(getResources().getColor(R.color.bg_shadow))  //背景颜色        .setOnclickListener(new GuideView.OnClickCallback() {          @Override          public void onClickedGuideView() {            guideView.hide();          }        })        .build();guideView.show();