自定义引导图

之前使用的是gitup上的三方项目来进行新手的引导 也就是蒙层和图片显示，

但是有个问题，三方项目功能太大，但是实际需求不大，而且我们的需求是高亮控件上下都加控件而一般的三方控件都是加一个view没办法我们自己自定义处理

原理很简单绘制一个全屏的灰色View 获取需要高亮的控件中心点坐标，获取中心点坐标的原因是为了好算，然后获取高亮控件宽高，然后依据宽高抠图出一个高亮控件 ，最后上下添加view

public class CustomGuideView extends RelativeLayout implements ViewTreeObserver.OnGlobalLayoutListener,View.OnClickListener{

privateContextmContext;

privateRelativeLayoutrl;

privateBitmapbitmap;

privateCanvastemp;

privatePaintmCirclePaint;

private int[]center=new int[2];//中心点

private int[]location=new int[2];//位置

privatePorterDuffXfermodeporterDuffXfermode;

publicCustomGuideView(Context context,RelativeLayout view) {

         super(context);

       //初始化设置 

         this.mContext=context;

         this.rl=view;

         this.setBackgroundResource(R.color.transparent);

        this.setOnClickListener(this);

        location[0] =rl.getWidth();

       location[1] =rl.getHeight();

        rl.getLocationInWindow(location);

        center[0] =location[0] +rl.getWidth() /2;

        center[1] =location[1] +rl.getHeight() /2;//绘图点在中间就是为了好算

}

public voidshowView(){

      rl.getViewTreeObserver().addOnGlobalLayoutListener(this);

     ((FrameLayout) ((Activity)mContext).getWindow().getDecorView()).addView(this);

}

@SuppressLint("DrawAllocation")

@Override

protected voidonDraw(Canvas canvas) {

     super.onDraw(canvas);

     bitmap=    Bitmap.createBitmap(canvas.getWidth(),

               canvas.getHeight(),Bitmap.Config.ARGB_8888);

    temp=newCanvas(bitmap);

    //绘制背景

    Paint bgPaint =newPaint();

    bgPaint.setColor(getResources().getColor(R.color.shadow));

    temp.drawRect(0,0,temp.getWidth(),temp.getHeight(),bgPaint);

   if(mCirclePaint==null){

        mCirclePaint=newPaint();

}

      porterDuffXfermode=newPorterDuffXfermode(PorterDuff.Mode.SRC_OUT);

      // 或者CLEAR扣出来一个高亮控件

      mCirclePaint.setXfermode(porterDuffXfermode);

      mCirclePaint.setAntiAlias(true);

      RectF oval =newRectF();

      oval.left=center[0] -rl.getWidth() /2;//左边

      oval.top=center[1] -rl.getHeight()/2;//上边 

      oval.right=center[0] +rl.getWidth() /2;//右边

      oval.bottom=center[1] +rl.getHeight()/2;

//用中点做坐标会很好算更符合我们的习惯 换成右下角也可以，右下角算法看客自己研究

      temp.drawRoundRect(oval,0,0,mCirclePaint);

      canvas.drawBitmap(bitmap,0,0,bgPaint);

      bitmap.recycle();

}

@Override

public voidonGlobalLayout() {

      addGuideView();

}

private voidaddGuideView() {

//添加图片就不介绍了很简单的添加而已 

     TextView tv=newTextView(mContext);

      tv.setText("success");

      tv.setTextColor(getResources().getColor(R.color.color_f59e0a));

     RelativeLayout.LayoutParams vpTv =

      newRelativeLayout.LayoutParams(

      RelativeLayout.LayoutParams.WRAP_CONTENT,

      RelativeLayout.LayoutParams.WRAP_CONTENT);

       vpTv.addRule(RelativeLayout.CENTER_HORIZONTAL);

       vpTv.setMargins(0,center[1] -rl.getHeight()/2-rl.getHeight(),0,0);

      Button bt=newButton(mContext);

      bt.setText("success222222");

      bt.setBackgroundColor(getResources().getColor(R.color.colorAccent));

      RelativeLayout.LayoutParams vpBt =

              newRelativeLayout.LayoutParams(

     RelativeLayout.LayoutParams.WRAP_CONTENT,

     RelativeLayout.LayoutParams.WRAP_CONTENT);

      vpBt.addRule(RelativeLayout.CENTER_HORIZONTAL);

       vpBt.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);

      vpBt.setMargins(0,0,0,300);

     CustomGuideView.this.addView(tv,vpTv);

     CustomGuideView.this.addView(bt,vpBt);

}

@Override

public voidonClick(View v) {

//点击事件很简单那个控件需要就onclick 就可以

       ((FrameLayout) ((Activity)mContext).getWindow().getDecorView()).removeView(this);

}

}

参考项目 ： https://github.com/qiushi123/GuideView-master