Android页面中引导蒙层的使用方法详解

蒙层是什么,蒙层是一层透明的呈灰色的视图,是在用户使用App时让用户快速学会使用的一些指导。类似于一些引导页面,只不过比引导页面更加生动形象而已。在GitHub上有具体的demo。

地址为   github源码地址,需要的可以去上面下载源码看看

使用引导蒙层非常简单,只要在你的项目中导入一个GuideView类即可,当然,别忘了在values的资源文件下加上相应的一些数值。

下面是GuideView的原码

public class GuideView extends RelativeLayout implements ViewTreeObserver.OnGlobalLayoutListener {
 private final String TAG = getClass().getSimpleName();
 private Context mContent;
 private List<View> mViews;
 private boolean first = true;
 /**
  * targetView前缀。SHOW_GUIDE_PREFIX + targetView.getId()作为保存在SP文件的key。
  */
 private static final String SHOW_GUIDE_PREFIX = "show_guide_on_view_";
 /**
  * GuideView 偏移量
  */
 private int offsetX, offsetY;
 /**
  * targetView 的外切圆半径
  */
 private int radius;
 /**
  * 需要显示提示信息的View
  */
 private View targetView;
 /**
  * 自定义View
  */
 private View customGuideView;
 /**
  * 透明圆形画笔
  */
 private Paint mCirclePaint;
 /**
  * 背景色画笔
  */
 private Paint mBackgroundPaint;
 /**
  * targetView是否已测量
  */
 private boolean isMeasured;
 /**
  * targetView圆心
  */
 private int[] center;
 /**
  * 绘图层叠模式
  */
 private PorterDuffXfermode porterDuffXfermode;
 /**
  * 绘制前景bitmap
  */
 private Bitmap bitmap;
 /**
  * 背景色和透明度,格式 #aarrggbb
  */
 private int backgroundColor;
 /**
  * Canvas,绘制bitmap
  */
 private Canvas temp;
 /**
  * 相对于targetView的位置.在target的那个方向
  */
 private Direction direction;

 /**
  * 形状
  */
 private MyShape myShape;
 /**
  * targetView左上角坐标
  */
 private int[] location;
 private boolean onClickExit;
 private OnClickCallback onclickListener;
 private RelativeLayout guideViewLayout;

 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;
  //  backgroundColor = Color.parseColor("#00000000");
  temp = null;
  //  direction = null;

 }

 public int[] getLocation() {
  return location;
 }

 public void setLocation(int[] location) {
  this.location = location;
 }

 public GuideView(Context context) {
  super(context);
  this.mContent = context;
  init();
 }

 public int getRadius() {
  return radius;
 }

 public void setRadius(int radius) {
  this.radius = radius;
 }

 public void setOffsetX(int offsetX) {
  this.offsetX = offsetX;
 }

 public void setOffsetY(int offsetY) {
  this.offsetY = offsetY;
 }

 public void setDirection(Direction direction) {
  this.direction = direction;
 }

 public void setShape(MyShape shape) {
  this.myShape = shape;
 }

 public void setCustomGuideView(View customGuideView) {
  this.customGuideView = customGuideView;
  if (!first) {
   restoreState();
  }
 }

 public void setBgColor(int background_color) {
  this.backgroundColor = background_color;
 }

 public View getTargetView() {
  return targetView;
 }

 public void setTargetView(View targetView) {
  this.targetView = targetView;
  //  restoreState();
  if (!first) {
   //   guideViewLayout.removeAllViews();
  }
 }

 private void init() {
 }

 public void showOnce() {
  if (targetView != null) {
   mContent.getSharedPreferences(TAG, Context.MODE_PRIVATE).edit().putBoolean(generateUniqId(targetView), true).commit();
  }
 }

 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 int[] getCenter() {
  return center;
 }

 public void setCenter(int[] center) {
  this.center = center;
 }

 public void hide() {
  Log.v(TAG, "hide");
  if (customGuideView != null) {
   targetView.getViewTreeObserver().removeOnGlobalLayoutListener(this);
   this.removeAllViews();
   ((FrameLayout) ((Activity) mContent).getWindow().getDecorView()).removeView(this);
   restoreState();
  }
 }

 public void show() {
  Log.v(TAG, "show");
  if (hasShown())
   return;

  if (targetView != null) {
   targetView.getViewTreeObserver().addOnGlobalLayoutListener(this);
  }

  this.setBackgroundResource(R.color.transparent);

  ((FrameLayout) ((Activity) mContent).getWindow().getDecorView()).addView(this);
  first = false;
 }

 /**
  * 添加提示文字,位置在targetView的下边
  * 在屏幕窗口,添加蒙层,蒙层绘制总背景和透明圆形,圆形下边绘制说明文字
  */
 private void createGuideView() {
  Log.v(TAG, "createGuideView");

  // 添加到蒙层
  //  if (guideViewLayout == null) {
  //   guideViewLayout = new RelativeLayout(mContent);
  //  }

  // Tips布局参数
  LayoutParams guideViewParams;
  guideViewParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
  guideViewParams.setMargins(0, center[1] + radius + 10, 0, 0);

  if (customGuideView != null) {

   //   LayoutParams guideViewParams = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
   if (direction != null) {
    int width = this.getWidth();
    int height = this.getHeight();

    int left = center[0] - radius;
    int right = center[0] + radius;
    int top = center[1] - radius;
    int bottom = center[1] + radius;
    switch (direction) {
     case TOP:
      this.setGravity(Gravity.BOTTOM | Gravity.CENTER_HORIZONTAL);
      guideViewParams.setMargins(offsetX, offsetY - height + top, -offsetX, height - top - offsetY);
      break;
     case LEFT:
      this.setGravity(Gravity.RIGHT);
      guideViewParams.setMargins(offsetX - width + left, top + offsetY, width - left - offsetX, -top - offsetY);
      break;
     case BOTTOM:
      this.setGravity(Gravity.CENTER_HORIZONTAL);
      guideViewParams.setMargins(offsetX, bottom + offsetY, -offsetX, -bottom - offsetY);
      break;
     case RIGHT:
      guideViewParams.setMargins(right + offsetX, top + offsetY, -right - offsetX, -top - offsetY);
      break;
     case LEFT_TOP:
      this.setGravity(Gravity.RIGHT | Gravity.BOTTOM);
      guideViewParams.setMargins(offsetX - width + left, offsetY - height + top, width - left - offsetX, height - top - offsetY);
      break;
     case LEFT_BOTTOM:
      this.setGravity(Gravity.RIGHT);
      guideViewParams.setMargins(offsetX - width + left, bottom + offsetY, width - left - offsetX, -bottom - offsetY);
      break;
     case RIGHT_TOP:
      this.setGravity(Gravity.BOTTOM);
      guideViewParams.setMargins(right + offsetX, offsetY - height + top, -right - offsetX, height - top - offsetY);
      break;
     case RIGHT_BOTTOM:
      guideViewParams.setMargins(right + offsetX, bottom + offsetY, -right - offsetX, -top - offsetY);
      break;
    }
   } else {
    guideViewParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
    guideViewParams.setMargins(offsetX, offsetY, -offsetX, -offsetY);
   }

   //   guideViewLayout.addView(customGuideView);

   this.addView(customGuideView, guideViewParams);
  }
 }

 /**
  * 获得targetView 的宽高,如果未测量,返回{-1, -1}
  *
  * @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;
 }

 boolean needDraw = true;

 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  Log.v(TAG, "onDraw");

  if (!isMeasured)
   return;

  if (targetView == null)
   return;

  //  if (!needDraw) 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.shadow));

  // 绘制屏幕背景
  temp.drawRect(0, 0, temp.getWidth(), temp.getHeight(), bgPaint);

  // targetView 的透明圆形画笔
  if (mCirclePaint == null)
   mCirclePaint = new Paint();
  porterDuffXfermode = new PorterDuffXfermode(PorterDuff.Mode.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 ELLIPSE://椭圆
     //RectF对象
     oval.left = center[0] - 150;        //左边
     oval.top = center[1] - 50;         //上边
     oval.right = center[0] + 150;        //右边
     oval.bottom = center[1] + 50;        //下边
     temp.drawOval(oval, mCirclePaint);     //绘制椭圆
     break;
    case RECTANGULAR://圆角矩形
     //RectF对象
     oval.left = center[0] - 150;        //左边
     oval.top = center[1] - 50;         //上边
     oval.right = center[0] + 150;        //右边
     oval.bottom = center[1] + 50;        //下边
     temp.drawRoundRect(oval, radius, radius, mCirclePaint);     //绘制圆角矩形
     break;
   }
  } else {
   temp.drawCircle(center[0], center[1], radius, mCirclePaint);//绘制圆形
  }

  // 绘制到屏幕
  canvas.drawBitmap(bitmap, 0, 0, bgPaint);
  bitmap.recycle();
 }

 public void setOnClickExit(boolean onClickExit) {
  this.onClickExit = onClickExit;
 }

 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();
    }
   }
  });
 }

 @Override
 public void onGlobalLayout() {
  if (isMeasured)
   return;
  if (targetView.getHeight() > 0 && targetView.getWidth() > 0) {
   isMeasured = true;
  }

  // 获取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();
  }
  // 添加GuideView
  createGuideView();
 }

 /**
  * 定义GuideView相对于targetView的方位,共八种。不设置则默认在targetView下方
  */
 enum Direction {
  LEFT, TOP, RIGHT, BOTTOM,
  LEFT_TOP, LEFT_BOTTOM,
  RIGHT_TOP, RIGHT_BOTTOM
 }

 /**
  * 定义目标控件的形状,共3种。圆形,椭圆,带圆角的矩形(可以设置圆角大小),不设置则默认是圆形
  */
 enum MyShape {
  CIRCULAR, ELLIPSE, RECTANGULAR
 }

 /**
  * GuideView点击Callback
  */
 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;
  }

  public Builder setTargetView(View target) {
   guiderView.setTargetView(target);
   return instance;
  }

  public Builder setBgColor(int color) {
   guiderView.setBgColor(color);
   return instance;
  }

  public Builder setDirction(Direction dir) {
   guiderView.setDirection(dir);
   return instance;
  }

  public Builder setShape(MyShape shape) {
   guiderView.setShape(shape);
   return instance;
  }

  public Builder setOffset(int x, int y) {
   guiderView.setOffsetX(x);
   guiderView.setOffsetY(y);
   return instance;
  }

  public Builder setRadius(int radius) {
   guiderView.setRadius(radius);
   return instance;
  }

  public Builder setCustomGuideView(View view) {
   guiderView.setCustomGuideView(view);
   return instance;
  }

  public Builder setCenter(int X, int Y) {
   guiderView.setCenter(new int[]{X, Y});
   return instance;
  }

  public Builder showOnce() {
   guiderView.showOnce();
   return instance;
  }

  public GuideView build() {
   guiderView.setClickInfo();
   return guiderView;
  }

  public Builder setOnclickExit(boolean onclickExit) {
   guiderView.setOnClickExit(onclickExit);
   return instance;
  }

  public Builder setOnclickListener(final OnClickCallback callback) {
   guiderView.setOnclickListener(callback);
   return instance;
  }
 }
}
导入后,在你想要使用蒙层的类中,使用也非常简单
 首先我们来初始化一个蒙层

 GuideView guideView = GuideView.Builder
    .newInstance(this)
    .setTargetView(menu)//设置目标
    .setCustomGuideView(iv)//设置蒙层上面使用的图片
    .setDirction(GuideView.Direction.LEFT_BOTTOM)
    .setShape(GuideView.MyShape.CIRCULAR) // 设置圆形显示区域,
    .setBgColor(getResources().getColor(R.color.shadow))
    .setOnclickListener(new GuideView.OnClickCallback() {
     @Override
     public void onClickedGuideView() {
      guideView.hide();

     }
    })
    .build();

然后  使用 guideView.show();方式来展现蒙层,guideView.hide()是让蒙层消失。

效果如图所示:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android使用popUpWindow带遮罩层的弹出框

    上次项目中实现了新功能,就一直想添加到博客里来着,惰性发作起来简直太可怕,不说了,跟着一起写吧,三步即可实现简单的弹出框功能,首先看效果-- 首先:主页面布局,触发控件一定要有,再有就是给根标签设置id <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" 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;

  • Android自定义ViewGroup实现竖向引导界面

    一般进入APP都有欢迎界面,基本都是水平滚动的,今天和大家分享一个垂直滚动的例子. 先来看看效果把: 1.首先是布局文件: <com.example.verticallinearlayout.VerticalLinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:i

  • 360浏览器文本框获得焦点后被android软键盘遮罩该怎么办

    场景是这样的,站点上筛选按钮点击后弹出层(fixed),当输入框获取焦点以后弹出系统自带的软键盘,在android上十款浏览器挨个测试比对,发现在360浏览器弹出键盘以后获取焦点的文本框被软键盘覆盖了. 截图如下 (未获取软键盘焦点的情况) (chrome浏览器调起软键盘的情况) (360浏览器调起软键盘情况) 那么问题来了,浏览器的软键盘显示出来又哪几种情况呢?英文   中文(网上找的) 经过简单的了解,大概分析了一下软键盘在浏览器上弹出应该包含软键盘占用主activity空间,让主activ

  • 一分钟实现Android遮罩引导视图

    一分钟实现Android遮罩引导视图,供大家参考,具体内容如下 先看一下效果图 主角GuideView登场! GuideView是一种基于DialogFragment实现的引导遮罩浮层视图的轻量级解决方案,它具备以下的特性: 响应导航按钮的动作(因为引导浮层本质是一个dialog): 链式引导层,支持设定一组的引导遮罩视图,通过点击切换下一个试图,快读与业务进行解藕: 自动绘制半透明浮层.透明核心区以及确保目标视图和引导视图的位置. 实现说明 页面的结构如下图所示: 核心类 GuideViewB

  • Android实现遮罩层(蒙板)效果

    Android的遮罩效果就是把一张图片盖在另一张图片的上面,通过控制任意一张图片的显示百分比实现遮罩效果.下面我使用两张一样的图片来实现一个类似于 Android 的progressbar 的填充效果.使用遮罩效果来实现progressbar的效果的好处是,我们可以只改变图片就可以更改progress的进度填充效果,并且我们可以实现任意形式的填充效果,就比如横竖填充,扇形逆/顺时填充针等. 网上有很多介绍Android 遮罩效果的列子,但是都是横竖的填充效果,下面我来实现一个扇形填充效果,如下图

  • Android自定义Dialog内部透明、外部遮罩效果

    本文实例为大家分享了Android自定义Dialog遮罩效果的具体代码,供大家参考,具体内容如下 图例: 代码 1.自定义dialog:引入样式和代码指定样式 package com.gxjl.pe.gxjlpesdk.view; import android.app.Dialog; import android.content.Context; import android.os.Bundle; import android.support.annotation.NonNull; import

  • Android PopupWindow实现遮罩层效果

    此篇博客实现的功能是:点击界面中的图片,跳出一个PopupWindow,PopupWindow中含有相应的文字和图标,并且在显示PopupWindow的时候,背景为半透明. 看图描述:点击加号,跳出PopupWindow,其中包含三个图片,点击叉号PopupWindow消失:当PopupWindow显示的时候,背景为半透明 显示PopupWindow的代码 private void showPopupWindow() { View view = (LinearLayout) getLayoutI

  • Android之淘宝商品列表长按遮罩效果的实现

    先来看看淘宝.唯品会长按商品的效果,以及简单Demo的效果: 首先分析一下场景: 长按条目时,弹出遮罩的效果遮挡在原来的条目布局上: 页面滑动或点击其他的条目,上一个正在遮罩的条目遮罩消失. 长按其他条目时,上一个遮罩的条目撤销遮罩,当前长按的显示遮罩: 条目添加遮罩的时添加动画: 1. 遮罩的效果,我们会很容易的想到Android布局控件FrameLayout布局,是基于叠加在上方的布局.所以在列表条目布局的时候,可以使用FrameLayout布局,在长按列表条目时,用条目的根布局添加一个遮罩

  • Android GuideView实现首次登陆引导

    简介:最最轻量级的新手引导库,能够快速为任何一个 View 创建一个遮罩层,支持单个页面,多个引导提示,支持为高亮区域设置不同的图形,支持引导动画,方便扩展 项目地址:binIoter/GuideView GuideView 本系统能够快速的为一个 Activity 里的任何一个 View 控件创建一个遮罩式的导航页. 工作原理 首先它需要一个目标 View 或者它的 id,我们通过 findViewById 来得到这个 View,计算它在屏幕上的区域 targetRect,通过这个区域,开始绘

随机推荐