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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_31743309/article/details/77934273

效果图:

其中的文字和我知道啦是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();