Android页面中的引导蒙层的使用

页面中的引导蒙层的使用"/>

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)mit();}}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;@Overrideprotected 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);elsebgPaint.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);// 或者CLEARmCirclePaint.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() {@Overridepublic void onClick(View v) {if (onclickListener != null) {onclickListener.onClickedGuideView();}if (exit) {hide();}}});}@Overridepublic 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();}// 添加GuideViewcreateGuideView();}/*** 定义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() {@Overridepublic void onClickedGuideView() {guideView.hide();}}).build();

然后  使用 guideView.show();方式来展现蒙层，guideView.hide()是让蒙层消失。
效果如图所示：