自定义引导控件

引导控件

1.可在XML文件中直接绑定当页需引导的控件集合
2.可在java文件中手动绑定当页需引导的控件集合,亦可单独绑定/添加
3.可在java文件中手动绑定当页需引导的矩阵位置集合,亦可单独绑定/添加
注:绑定集合则跳转集合首位引导位置,绑定单一引导则跳转至该引导,添加时不跳转
支持矩形/圆角矩形/椭圆形镂空标注引导位置
支持任意View子控件做提示标注(标注位置自动计算),但标注控件需要为GuideView的ChildView

public class GuideView extends FrameLayout {

    public static final int TYPE_RECT = 0, TYPE_ROUND_RECT = 1, TYPE_OVAL = 2;

    private RectF rectF;
    private Region region;
    private View hintView;
    private Path innerPath;
    private Paint boundPaint;
    private String resourceIds;
    private OnBindListener opListener;
    private ArrayList<RectF> relationRects;
    private ArrayList<String> hintResource;

    private boolean isDrawBound, isLayoutFinished;
    private float offset,//目标内边距
            radius,
            distanceX, distanceY;//提示视图和目标边距

    private int clipType, backgroundColor, hintViewId, stepNum=-1;
    private ArrayList<View> views;


    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        if (relationRects != null) {
            relationRects.clear();
        }
        if (hintResource != null) {
            hintResource.clear();
        }
        if (views != null) {
            views.clear();
        }
        relationRects = null;
        hintResource = null;
        resourceIds = null;
        boundPaint = null;
        opListener = null;
        innerPath = null;
        hintView = null;
        region = null;
        rectF = null;
        views = null;
    }

    @Retention(RetentionPolicy.SOURCE)
    @IntDef({TYPE_RECT, TYPE_ROUND_RECT, TYPE_OVAL})
    public @interface clipType {
    }

    public GuideView(Context context) {
        this(context, null);
    }

    public GuideView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public GuideView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.GuideView);
        clipType = array.getInt(R.styleable.GuideView_clipType, TYPE_RECT);
        resourceIds = array.getString(R.styleable.GuideView_relation_ids);
        hintViewId = array.getResourceId(R.styleable.GuideView_hint_view_id, NO_ID);
        offset = array.getDimension(R.styleable.GuideView_offset, BaseUtils.dp2px(10));
        float distance = array.getDimension(R.styleable.GuideView_distance, BaseUtils.dp2px(20));
        distanceX = array.getDimension(R.styleable.GuideView_distanceX, distance);
        distanceY = array.getDimension(R.styleable.GuideView_distanceY, distance);
        radius = array.getDimension(R.styleable.GuideView_android_radius, BaseUtils.dp2px(10));
        backgroundColor = array.getColor(R.styleable.GuideView_backgroundColor, context.getResources().getColor(R.color.translucent));
        float boundWidth = array.getDimension(R.styleable.GuideView_boundWidth, 0);
        int boundColor = array.getColor(R.styleable.GuideView_boundColor, Color.TRANSPARENT);
        array.recycle();
        relationRects = new ArrayList<>();
        innerPath = new Path();
        rectF = new RectF();
        region = new Region();
        setWillNotDraw(false);

        boundPaint = new Paint();
        boundPaint.setStyle(Paint.Style.STROKE);
        boundPaint.setAntiAlias(true);
        setBoundWidth(boundWidth, false);
        setBoundColor(boundColor, false);

        try {
            getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
                @Override
                public void onGlobalLayout() {
                    getViewTreeObserver().removeOnGlobalLayoutListener(this);
                    findRelationView();
                }
            });
        } catch (Exception ignored) {
            isLayoutFinished = true;
        }
    }

    private void findRelationView() {
        isLayoutFinished = true;
        if (views != null) {
            bindViews(views);
        } else {
            bindRelationViews();
        }
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        if (hintViewId != NO_ID) {
            hintView = findViewById(hintViewId);
        }
    }

    private void bindRelationViews() {
        try {
            if (resourceIds == null || TextUtils.isEmpty(resourceIds))
                return;
            View rootView = getRootView();
            String[] split = resourceIds.split(",");
            for (String s : split) {
                try {
                    addRelationView(rootView.findViewById(ResourceUtils.getIdByName(s)));
                } catch (Exception ignored) {
                }
            }
            jumpTo(0);
        } catch (Exception ignored) {
        }
    }

    public void setLabelView(View labelView) {
        this.labelView = labelView;
        bringChildToFront(labelView);
    }

    public void setDistanceX(float px) {
        if (distanceX != px) {
            this.distanceX = px;
            if (!isInLayout()) {
                requestLayout();
            }
        }
    }

    public void setDistanceY(float px) {
        if (distanceY != px) {
            this.distanceY = px;
            if (!isInLayout()) {
                requestLayout();
            }
        }
    }

    public void setDistance(float px) {
        if (distanceX != px || distanceY != px) {
            this.distanceY = px;
            this.distanceX = px;
            if (!isInLayout()) {
                requestLayout();
            }
        }
    }

    public void setBoundWidth(int dp) {
        setBoundWidth(BaseUtils.dp2px(dp), true);
    }

    public void setBoundWidth(float px) {
        setBoundWidth(px, true);
    }

    public void setBoundWidth(float px, boolean isRefresh) {
        if (boundPaint.getStrokeWidth() != px) {
            isDrawBound = px > 0;
            boundPaint.setStrokeWidth(px);
            if (isRefresh) {
                invalidate();
            }
        }
    }

    public void setBoundColor(@ColorInt int color) {
        setBoundColor(color, true);
    }

    public void setBoundColor(@ColorInt int color, boolean isRefresh) {
        if (boundPaint.getColor() != color) {
            isDrawBound = isDrawBound && (color != Color.TRANSPARENT);
            boundPaint.setColor(color);
            if (isRefresh) {
                invalidate();
            }
        }
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        //布局提示控件
        if (hintView != null && rectF != null && rectF.width() > 0 && rectF.height() > 0) {
            int width = hintView.getWidth();
            int height = hintView.getHeight();
            float realWidth = width + distanceX;
            float realHeight = height + distanceY;

            int _left = (int) (rectF.left - (realWidth));
            int _top = (int) (rectF.top - realHeight);
            int _right = (int) (rectF.right + realWidth);
            int _bottom = (int) (rectF.bottom + realHeight);

            left += getPaddingLeft();
            right -= getPaddingRight();
            top += getPaddingTop();
            bottom -= getPaddingBottom();

            if (_top >= top && _top + height <= rectF.top) {//目标上边
                if (_left < left) {
                    _left = left;
                }
                hintView.layout(_left, _top, Math.min(_left + width, right), _top + height);
            } else if (_left >= left && _left + width <= rectF.left) {//目标左边
                if (_top < top) {
                    _top = top;
                }
                hintView.layout(_left, _top, _left + width, Math.min(_top + height, bottom));
            } else if (_right <= right && _right - width >= rectF.right) {//目标右边
                if (_bottom > bottom) {
                    _bottom = bottom;
                }
                hintView.layout(_right - width, Math.max(_bottom - height, bottom), _right, _bottom);
            } else if (_bottom <= bottom && _bottom - height >= rectF.bottom) {//目标下边
                if (_right > right) {
                    _right = right;
                }
                hintView.layout(Math.max(_right - width, left), _bottom - height, _right, _bottom);
            } else {//目标内左上角
                int x = (int) (rectF.left + distanceX + offset);
                int y = (int) (rectF.top + distanceY + offset);
                hintView.layout(x, y, x + width, y + height);
            }
        }
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(MeasureSpec.makeMeasureSpec(MeasureSpec.getSize(widthMeasureSpec), MeasureSpec.EXACTLY),
                MeasureSpec.makeMeasureSpec(MeasureSpec.getSize(heightMeasureSpec), MeasureSpec.EXACTLY));
    }

    public void setClipType(@clipType int clipType) {
        this.clipType = clipType;
        createPath(false);
    }

    public void setRadius(float radius) {
        this.radius = radius;
        createPath(false);
    }

    public void setRect(Rect rect) {
        rectF.set(rect);
        createPath();
    }

    public void setRect(RectF rect) {
        rectF.set(rect);
        createPath();
    }

    public void setOffset(@FloatRange(from = 0) float offset) {
        this.offset = offset;
        createPath();
    }

    /**
     * 获取当前目标矩阵
     */
    public RectF getRelationRectF() {
        return rectF;
    }

    private void createPath() {
        createPath(true);
    }

    /**
     * 创建路径
     */
    private void createPath(boolean isRequestLayout) {
        if (offset > 0) {
            rectF.left -= offset;
            rectF.top -= offset;
            rectF.right += offset;
            rectF.bottom += offset;
        }
        innerPath.reset();
        innerPath.moveTo(rectF.left, rectF.top);
        if (clipType == TYPE_OVAL) {
            innerPath.addOval(rectF, Path.Direction.CW);
        } else if (clipType == TYPE_ROUND_RECT) {
            innerPath.addRoundRect(rectF, radius, radius, Path.Direction.CW);
        } else {
            innerPath.addRect(rectF, Path.Direction.CW);
        }
        innerPath.close();
        innerPath.computeBounds(rectF, true);
        region.setEmpty();
        region.setPath(innerPath, new Region((int) rectF.left, (int) rectF.top, (int) rectF.right, (int) rectF.bottom));
        if (isRequestLayout && !isInLayout()) {
            requestLayout();
        }
        postInvalidate();
    }

    /**
     * 清空原有目标  绑定所有目标 并 显示对首目标
     */
    public void bindRectF(ArrayList<RectF> rectFs) {
        if (rectFs != null && rectFs.size() > 0) {
            if (relationRects == null) {
                relationRects = new ArrayList<>();
            } else {
                relationRects.clear();
            }
            if (relationRects.addAll(rectFs)) {
                jumpTo(0);
            }
        }
    }

    /**
     * 如果存在当前目标 则绑定显示 否则添加值队尾并绑定显示
     */
    public void bindRectF(RectF rectF) {
        if (rectF == null)
            return;
        if (relationRects != null) {
            int index = relationRects.indexOf(rectF);
            if (index > -1) {
                jumpTo(index);
            } else if (addRelationRectF(rectF)) {
                jumpTo(relationRects.size() - 1);
            }
        } else {
            relationRects = new ArrayList<>();
            addRelationRectF(rectF);
            jumpTo(0);
        }
    }
    
	 public void jumpToNext() {
        jumpTo(stepNum + 1);
    }
    
    /**
     * 绑定显示指定位置的目标
     */
    public void jumpTo(int index) {
        RectF rect = null;

        if (relationRects != null && relationRects.size() > index) {
            rect = relationRects.get(index);
        }

        if (rect == null||stepNum == index)
            return;
        stepNum = index;
        if (opListener != null) {
            opListener.onBind(this, index);
        }
        try {
            if (hintView instanceof TextView && hintResource != null && hintResource.size() > index) {
                ((TextView) hintView).setText(hintResource.get(index));
            }
        } catch (Exception ignored) {
        }
        setRect(rect);
    }

    /**
     * 绑定显示指定控件位置目标
     */
    public void bindView(View view) {
        bindRectF(getRelationViewRectF(view));
    }

    /**
     * 清空原有目标  绑定所有目标 并 显示对首目标
     */
    public void bindViews(ArrayList<View> views) {
        if (this.views == null) {
            this.views = views;
        }
        if (isLayoutFinished && views != null && views.size() > 0) {
            ArrayList<RectF> rectFS = new ArrayList<>();
            for (View v : views) {
                rectFS.add(getRelationViewRectF(v));
            }
            bindRectF(rectFS);
        }
    }

    public void bindHintText(ArrayList<String> hintResource) {
        this.hintResource = hintResource;
    }

    /**
     * 附加目标
     */
    public boolean addRelationView(View view) {
        return addRelationView(view, -1);
    }

    /**
     * 附加目标
     */
    public boolean addRelationView(View view, int index) {
        return addRelationRectF(getRelationViewRectF(view), index);
    }

    /**
     * 附加目标
     */
    public boolean addRelationRectF(RectF rectF) {
        return addRelationRectF(rectF, -1);
    }

    /**
     * 附加目标
     */
    public boolean addRelationRectF(RectF rectF, int index) {
        try {
            if (relationRects != null && rectF != null && !relationRects.contains(rectF)) {
                if (index > -1) {
                    relationRects.add(index, rectF);
                } else {
                    relationRects.add(rectF);
                }
            }
            return true;
        } catch (Exception ignored) {
        }
        return false;
    }

    public RectF getRelationViewRectF(View view) {
        if (view == null)
            return null;
        int[] size = new int[2];
        view.getLocationInWindow(size);
        float x = size[0];
        float y = size[1];
        getLocationInWindow(size);
        float left = x - size[0];
        float top = y - size[1];
        RectF rectF = new RectF();
        rectF.left = left;
        rectF.top = top;
        rectF.right = left + view.getWidth();
        rectF.bottom = top + view.getHeight();
        return rectF;
    }

    @Override
    public boolean dispatchTouchEvent(MotionEvent event) {
        boolean isContain = event != null && region != null && region.contains((int) event.getX(), (int) event.getY());
        if (isContain) {
            if (opListener == null || !opListener.onRelationViewClick(this, stepNum + 1)) {
                jumpToNext();
            }
        }
        return !(isContain || isClickLabel(event)) || super.dispatchTouchEvent(event);
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        return isClickLabel(ev) || super.onInterceptTouchEvent(ev);
    }

    private boolean isClickLabel(MotionEvent ev) {
        if (ev == null || hintView== null)
            return false;
        float x = ev.getX();
        float y = ev.getY();
        return x >= hintView.getLeft() && x <= hintView.getRight()
                && y >= hintView.getTop() && y <= hintView.getBottom();
    }

    @SuppressLint("ClickableViewAccessibility")
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (isClickLabel(event)) {
            if (!onTouchEvent(hintView, event) && hintViewinstanceof ViewGroup) {
                ViewGroup group = (ViewGroup) this.labelView;
                for (int i = 0; i < group.getChildCount(); i++) {
                    onTouchEvent(group.getChildAt(i), event);
                }
            }
            return true;
        }
        return super.onTouchEvent(event);
    }

    private boolean onTouchEvent(View v, MotionEvent event) {
        return v != null && v.isEnabled() && v.isClickable() && isTouchView(v, event) && v.performClick();
    }

    private boolean isTouchView(View v, MotionEvent ev) {
        if (v == null || ev == null) {
            return false;
        }

        if (v == hintView)
            return true;

        int[] l = new int[2];
        v.getLocationInWindow(l);
        int left = l[0], top = l[1], bottom = top + v.getHeight(), right = left
                + v.getWidth();
        float x = ev.getRawX();
        float y = ev.getRawY();
        return x >= left && x <= right && y >= top && y <= bottom;
    }
    @Override
    public void setBackground(Drawable background) {
    }

    @Override
    public void setBackgroundResource(int resid) {

    }

    @Override
    public void setBackgroundDrawable(Drawable background) {

    }

    @Override
    public void setBackgroundColor(int backgroundColor) {
        if (this.backgroundColor != backgroundColor) {
            this.backgroundColor = backgroundColor;
            postInvalidate();
        }
    }

    @Override
    public void onDrawForeground(Canvas canvas) {
        super.onDrawForeground(canvas);
        canvas.save();
        if (innerPath == null || innerPath.isEmpty())
            return;
        if (hintView != null) {
            canvas.clipRect(hintView.getLeft(), hintView.getTop(), hintView.getRight(), hintView.getBottom(), Region.Op.DIFFERENCE);
        }
        //绘制背景
        canvas.clipPath(innerPath, Region.Op.DIFFERENCE);
        canvas.drawColor(backgroundColor);
        if (isDrawBound) {
            canvas.drawPath(innerPath, boundPaint);
        }
        canvas.restore();
    }

    public void setOnNextListener(OnBindListener nextListener) {
        this.opListener = nextListener;
    }

    public interface OnBindListener {
        /**
         * 绑定目标视图事件(绘制前)
         *
         * @param stepNum 当前目标id
         */
        void onBind(GuideView view, int stepNum);

        /**
         * 当前目标视图点击事件
         *
         * @param nextStepNum 下一个目标id
         * @return 是否拦击自动绑定下一个目标视图
         */
        boolean onRelationViewClick(GuideView view, int nextStepNum);
    }
}

attrs文件

<declare-styleable name="GuideView">
        <attr name="relation_ids" format="string" />
        <attr name="hint_view_id" format="reference" />
        <attr name="offset" format="dimension" />
        <attr name="distance" format="dimension" />
        <attr name="distanceX" format="dimension" />
        <attr name="distanceY" format="dimension" />
        <attr name="android:radius" />
        <attr name="backgroundColor" format="color|reference" />
        <attr name="boundColor" format="color|reference" />
        <attr name="boundWidth" format="dimension" />
        <attr name="clipType" format="enum">
            <enum name="RECT" value="0" />
            <enum name="ROUND_RECT" value="1" />
            <enum name="OVAL" value="2" />
        </attr>
    </declare-styleable>

使用示例

xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <方式一内容布局>

    <com.*.GuideView
        android:id="@+id/guide_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        app:backgroundColor="@color/translucent"
        app:boundColor="@color/colorPrimaryDark"
        app:distanceX="-10dp"
         app:relation_ids="idName,idName,idName,idName,idName"//关联内容布局中的目标idName
        app:hint_view_id="@id/tv_hint"//关联目标内容提示控件的资源id
        app:boundWidth="5dp">
        <TextView
            android:id="@+id/tv_hint"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:background="@color/colorAccent"
            android:text="asfasdfasdfasdfasdfsadfasffsadfsdaf"
            android:textColor="@color/colorPrimary"
            android:textSize="12sp" />
    	<方式二内容布局>
    </com.*.GuideView>
</FrameLayout>

注意 容器必须为FrameLayout 之类的可以让GuideView match_parent的容器

java

				//java绑定目标集合方式一  按添加顺序进行引导
				ArrayList<RectF> objects = new ArrayList<>();
                objects.add(guideView.getRelationViewRectF(目标控件1));
                objects.add(guideView.getRelationViewRectF(目标控件2));
                objects.add(guideView.getRelationViewRectF(目标控件3));
                objects.add(guideView.getRelationViewRectF(目标控件4));
                objects.add(guideView.getRelationViewRectF(目标控件5));
                guideView.bindRectF(objects);

				//java绑定目标集合方式二  按添加顺序进行引导
				ArrayList<View> objects = new ArrayList<>();
		        objects.add(目标控件1);
		        objects.add(目标控件2);
		        objects.add(目标控件3);
		        objects.add(目标控件4);
		        objects.add(目标控件5);
		        guideView.bindViews(objects);

		        //单一目标绑定方式  添加至队尾  并跳转至该引导
				guideView.bindRectF(RectF rectF);
				guideView.bindView(View view);
				
				//跳转至index步
				guideView. jumpTo(int index);
				
				//单一目标添加方式  添加至队尾 /指定位置
				guideView.addRelationView(View view) ;
				guideView.addRelationView(View view, int index);
			 	guideView.addRelationRectF(RectF rectF);
				guideView.addRelationRectF(RectF rectF, int index);
				
				//绑定提示文字  提示控件为文本控件时生效  内容顺序需和引导目标集合顺序一致  可在OnBindListener 监听中自定义提示
				bindHintText(ArrayList<String> hintResource)
				

监听事件

public interface OnBindListener {
        /**
         * 跳转至指定引导目标时(绘制之前)  可修改提示文字和引导目标边框绘制属性
         *
         * @param stepNum 当前引导顺序指针
         */
        void onBind(GuideView view, int stepNum);

        /**
         * 当前引导目标位置点击事件  可拦截自定义处理跳转
         *
         * @param nextStepNum 下一个目标顺序指针
         * @return 是否拦击自动跳转下一个引导目标
         */
        boolean onRelationViewClick(GuideView view, int nextStepNum);
    }