android自定义高亮引导

电玩女神 2022-02-27 12:46 201阅读 0赞

原理就是用一个蒙层覆盖在界面之上，这里所说的界面从下面获取：

activity.getWindow().getDecorView()

高亮部分原理使用Xfermode图像混合模式，参考[Android进阶——Xfermode图像混合模式][Android_Xfermode]  
工具类：

/**
     * 高亮引导工具类
     *
     */
    public class HighlightUtil {
    
        /**
         *
         * @param activity
         * @param guideViews 要高亮提示的view数组 （TODO 目前只至此一个view，待扩充）
         */
        public static void setHighlight(Activity activity,  View[] guideViews) {
            if (activity == null || guideViews == null || guideViews.length <= 0) {
                return;
            }
            View highlightView = new HighlightView(activity, guideViews);
            View rootView = activity.getWindow().getDecorView();
            if (rootView instanceof FrameLayout) {
                ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                        ViewGroup.LayoutParams.MATCH_PARENT);
                ((FrameLayout) rootView).addView(highlightView,
                        ((FrameLayout) rootView).getChildCount(), lp);
            } else {
                FrameLayout frameLayout = new FrameLayout(activity);
                ViewGroup parent = (ViewGroup) rootView.getParent();
                parent.removeView(rootView);
                parent.addView(frameLayout, rootView.getLayoutParams());
                ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(
                        ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
                frameLayout.addView(rootView, lp);
                lp = new ViewGroup.LayoutParams(
                        ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
                frameLayout.addView(highlightView, lp);
            }
        }
    }

自定义蒙层：

/**
     * 自定义高亮引导view
     *
     */
    public class HighlightView extends View {
    
        private View[] guideViews;
        private int padding = 20;
        private int[] guideLocation; // left right top bottom
        private Bitmap arrow;
        private Bitmap dst;
        private Bitmap src;
    
        public HighlightView(Context context, View[] guideViews) {
            super(context);
            this.guideViews = guideViews;
    
            // 绘制完成后初始化
            getViewTreeObserver().addOnGlobalLayoutListener(mListener);
        }
    
        private ViewTreeObserver.OnGlobalLayoutListener mListener = new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                // 移除监听，只初始化一次
                getViewTreeObserver().removeOnGlobalLayoutListener(mListener);
                arrow = BitmapFactory.decodeResource(getResources(), R.drawable.highlight_arrow);
                dst = createDstBitmap(guideViews[0]);
                src = createSrcBitmap();
            }
        };
    
        @Override
        protected void onDraw(Canvas canvas) {
            if (guideViews == null || guideViews.length <= 0) {
                return;
            }
            //禁用硬件加速
            setLayerType(View.LAYER_TYPE_SOFTWARE, null);
            //使用离屏绘制
            int layerID = canvas.saveLayer(0, 0, getWidth(), getHeight(), null, Canvas.ALL_SAVE_FLAG);
    
            Paint paint = new Paint();
            canvas.drawBitmap(dst, 0, 0 ,paint);
            paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT));
            canvas.drawBitmap(src, 0, 0 ,paint);
            paint.setXfermode(null);
            canvas.drawBitmap(arrow, guideLocation[0] - arrow.getWidth(), guideLocation[3], paint);
    
            paint.setColor(0xFFFFFFFF);
            paint.setTextAlign(Paint.Align.CENTER);
            paint.setTextSize(40);
            canvas.drawText("点击扫描登录", guideLocation[0] - arrow.getWidth(),
                    guideLocation[3] + arrow.getHeight() + 3 * padding, paint);
    
            canvas.restoreToCount(layerID);
        }
    
        @Override
        public boolean onTouchEvent(MotionEvent event) {
            if (event.getAction() == MotionEvent.ACTION_UP) {
                // 关闭高亮指引
                setVisibility(GONE);
            }
            return true;
        }
    
        public Bitmap createDstBitmap(View view) {
            Bitmap bitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
            Canvas canvas = new Canvas(bitmap);
            Paint scrPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            scrPaint.setColor(0xFFFFFFFF);
            int[] location = new int[2];
            view.getLocationInWindow(location);
            int[] location2 = new int[2];
            getLocationInWindow(location2); // 用于计算状态栏的高度
            guideLocation = new int[4];
            guideLocation[0] = location[0] - padding;
            guideLocation[1] = location[1] - location2[1] - padding;
            guideLocation[2] = location[0] + view.getWidth() + padding;
            guideLocation[3] = location[1] - location2[1] + view.getHeight() + padding;
            canvas.drawOval(new RectF(guideLocation[0], guideLocation[1], guideLocation[2],
                    guideLocation[3]),scrPaint);
    
            return bitmap;
        }
    
        public Bitmap createSrcBitmap() {
            Bitmap bitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
            Canvas canvas = new Canvas(bitmap);
            Paint dstPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            dstPaint.setColor(0x99000000);
            canvas.drawRect(new Rect(0, 0, getWidth(), getHeight()), dstPaint);
            return bitmap;
        }
    }

效果如下：  
![在这里插入图片描述][20190327175613326.png]

后期需要补充功能：

*  版本号控制，只在某个版本号显示
 *  只显示一次
 *  高亮提示的view数组

参考：  
[Android高亮引导页的简单实现][Android]

[Android_Xfermode]: https://wongwoo.blog.csdn.net/article/details/88825213
[20190327175613326.png]: /images/20220227/ec1a28204926424cba4fae90e1b04b03.png
[Android]: https://blog.csdn.net/cbzcbzcbzcbz/article/details/82503131