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

发布时间:2019-08-08 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了Android实现新手引导半透明蒙层效果脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例为大家分享了AndROId实现新手引导透明蒙层效果的具体代码,供大家参考,具体内容如下

效果图:

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

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

其中的文字和我知道啦是ui切得两张透明图片

自定义View:

 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();   
android教程
脚本网站
android studio

脚本宝典总结

以上是脚本宝典为你收集整理的Android实现新手引导半透明蒙层效果全部内容,希望文章能够帮你解决Android实现新手引导半透明蒙层效果所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。