本文主要是介绍引导页高亮小提示,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
布局省略
测试代码入下:
HighLightGuideView.builder(this).addHighLightGuidView(confirm, R.mipmap.unchain).setHighLightStyle(HighLightGuideView.VIEWSTYLE_RECT).show();HighLightGuideView.builder(this).addHighLightGuidView(confirm, R.mipmap.unchain).setHighLightStyle(HighLightGuideView.VIEWSTYLE_CIRCLE).show();
//HighLightGuideView.builder(this).addHighLightGuidView(confirm, R.mipmap.unchain).setHighLightStyle(HighLightGuideView.VIEWSTYLE_OVAL).show();HighLightGuideView.builder(this).addHighLightGuidView(setting_feedback_text, R.mipmap.input_pass).setHighLightStyle(HighLightGuideView.VIEWSTYLE_NO).show();
参数的意思是:
addHighLightGuidView为哪个控件设置高亮,以及在该控件处填指示的图片
setHighLightStyle设置高亮的类型–矩形、圆形、椭圆、以及没有高亮
HighLightGuideView
package com.safly.myapplication.highlight;import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.BlurMaskFilter;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.RectF;
import android.support.v4.content.ContextCompat;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;import com.safly.myapplication.R;import java.util.ArrayList;/*** * des:“应用新功能”的用户指引view*/
public class HighLightGuideView extends View {//高亮类型:矩形、圆形、椭圆、没有高亮public static final int VIEWSTYLE_RECT = 0;public static final int VIEWSTYLE_CIRCLE = 1;public static final int VIEWSTYLE_OVAL = 2;public static final int VIEWSTYLE_NO = -1;//画笔类型,圆滑、默认public int maskblurstyle = MASKBLURSTYLE_SOLID;//画笔类型默认public static final int MASKBLURSTYLE_SOLID = 0;public static final int MASKBLURSTYLE_NORMAL = 1;private View rootView;//activity的contentview,是FrameLayoutprivate Bitmap inputPass, addEvent, unChain;// 指示箭头private Bitmap fgBitmap;// 前景private Canvas mCanvas;// 绘制蒙版层的画布private Paint mPaint;// 绘制蒙版层画笔private int screenW, screenH;// 屏幕宽高private int radius;//圆半径private OnDismissListener onDismissListener;//关闭监听private Activity activity;/*******************可配置属性*****************************/private boolean touchOutsideCancel = true;//外部点击是否可关闭private int highLightStyle = VIEWSTYLE_RECT;//高亮类型默认圆形private ArrayList<Bitmap> tipBitmaps;//显示图片private ArrayList<View> targetViews;//高亮目标viewprivate int maskColor = 0x99000000;// 蒙版层颜色private int borderWitdh = 2;private int highLisghtPadding = 0;// 高亮控件paddingprivate int mipTipsId;private HighLightGuideView(Activity activity) {super(activity);this.activity=activity;cal(activity);init(activity);}public static HighLightGuideView builder(Activity activity) {return new HighLightGuideView(activity);}/*** 获取屏幕的宽度、高度* @param context*/private void cal(Context context) {int[] screenSize = UiUtil.getScreenSize((Activity) context);screenW = screenSize[0];screenH = screenSize[1];}private void init(Context context) {tipBitmaps = new ArrayList<>();targetViews = new ArrayList<>();rootView = ((Activity) getContext()).findViewById(android.R.id.content);addEvent = BitmapFactory.decodeResource(getResources(), R.mipmap.add_event);inputPass = BitmapFactory.decodeResource(getResources(), R.mipmap.input_pass);unChain = BitmapFactory.decodeResource(getResources(), R.mipmap.unchain);BlurMaskFilter.Blur blurStyle = null;switch (maskblurstyle) {case MASKBLURSTYLE_SOLID:blurStyle = BlurMaskFilter.Blur.SOLID;break;case MASKBLURSTYLE_NORMAL:blurStyle = BlurMaskFilter.Blur.NORMAL;break;}mPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);// 设置画笔透明度为0是关键!mPaint.setARGB(0, 255, 0, 0);mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));mPaint.setMaskFilter(new BlurMaskFilter(0.1f, blurStyle));//蒙层mapfgBitmap = Bitmap.createBitmap(screenW, screenH, Bitmap.Config.ARGB_4444);mCanvas = new Canvas(fgBitmap);mCanvas.drawColor(maskColor);}@Overrideprotected void onDraw(Canvas canvas) {if (targetViews == null && tipBitmaps == null)return;// 绘制前景DST_IN!!!!!!!!!canvas.drawBitmap(fgBitmap, 0, 0, null);//有高亮控件if (targetViews.size() > 0 && tipBitmaps.size() > 0) {for (int i = 0; i < targetViews.size(); i++) {//高亮控件宽高int vWidth = targetViews.get(i).getWidth();int vHeight = targetViews.get(i).getHeight();//获取获取高亮控件坐标int left = 0;int top = 0;int right = 0;int bottom = 0;try {Rect rtLocation =ViewUtils.getLocationInView(((ViewGroup)activity.findViewById(Window.ID_ANDROID_CONTENT)).getChildAt(0),targetViews.get(i));left = rtLocation.left;top = rtLocation.top;right = rtLocation.right;bottom = rtLocation.bottom;Log.d("statusheightssleft",left+"");Log.d("statusheightsstop",top+"");Log.d("statusheightbottom",right+"");Log.d("statusheightsbottom",bottom+"");} catch (Exception e) {e.printStackTrace();}//绘制高亮形状switch (highLightStyle) {case VIEWSTYLE_OVAL:RectF rectf = new RectF(left-highLisghtPadding, top-highLisghtPadding, right+highLisghtPadding, bottom+highLisghtPadding);mCanvas.drawOval(rectf, mPaint);break;case VIEWSTYLE_RECT:RectF rect = new RectF(left - borderWitdh-highLisghtPadding, top - borderWitdh-highLisghtPadding, right + borderWitdh+highLisghtPadding, bottom + borderWitdh+highLisghtPadding);mCanvas.drawRoundRect(rect, 20, 20, mPaint);break;case VIEWSTYLE_CIRCLE:radius = vWidth > vHeight ? vWidth / 2 +highLisghtPadding/2: vHeight / 2+ highLisghtPadding/2;if (radius < 50) {radius = 100;}mCanvas.drawCircle(left + vWidth / 2, top + vHeight / 2, radius, mPaint);break;}//绘制箭头和提示图switch (mipTipsId){case R.mipmap.add_event:mCanvas.drawBitmap(addEvent, left + vWidth / 2 - 50, bottom, null);break;case R.mipmap.input_pass:mCanvas.drawBitmap(inputPass, left, top, null);break;case R.mipmap.unchain:int width = unChain.getWidth();mCanvas.drawBitmap(unChain, screenW - width - radius, bottom, null);break;default:break;}}}}@Overridepublic boolean onTouchEvent(MotionEvent event) {switch (event.getAction()) {case MotionEvent.ACTION_UP://if (touchOutsideCancel) {this.setVisibility(View.GONE);//移除viewif (rootView != null) {((ViewGroup) rootView).removeView(this);}//返回监听if (this.onDismissListener != null) {onDismissListener.onDismiss();}return true;}break;}return true;}public interface OnDismissListener {public void onDismiss();}/********************builder模式设置属性******************************//*** 绘制前景画布颜色** @param bgColor*/public HighLightGuideView setMaskColor(int bgColor) {try {this.maskColor = ContextCompat.getColor(getContext(),bgColor);// 重新绘制前景画布mCanvas.drawColor(maskColor);} catch (Exception e) {e.printStackTrace();}return this;}/*** 设置高亮显示类型** @param style*/public HighLightGuideView setHighLightStyle(int style) {this.highLightStyle = style;return this;}/*** 设置高亮画笔类型** @param maskblurstyle*/public HighLightGuideView setMaskblurstyle(int maskblurstyle) {this.maskblurstyle = maskblurstyle;return this;}/*** 设置需要高亮的View和提示的图片** @param targetView* @param res*/public HighLightGuideView addHighLightGuidView(View targetView, int res) {try {mipTipsId = res;targetViews.add(targetView);tipBitmaps.add(BitmapFactory.decodeResource(getResources(), res));} catch (Exception e) {e.printStackTrace();}return this;}/*** 设置不需要高亮的View,只是提示图片** @param res*/public HighLightGuideView addNoHighLightGuidView(int res) {try {tipBitmaps.add(BitmapFactory.decodeResource(getResources(), res));} catch (Exception e) {e.printStackTrace();}return this;}/*** 设置外部是否关闭,默认关闭** @param cancel*/public HighLightGuideView setTouchOutsideDismiss(boolean cancel) {this.touchOutsideCancel = cancel;return this;}/*** 设置额外的边框宽度** @param borderWidth*/public HighLightGuideView setBorderWidth(int borderWidth) {this.borderWitdh = borderWidth;return this;}/*** 设置状态栏高度 默认是减去了一个状态栏高度 如果主题设置android:windowTranslucentStatus=true* 需要设置状态栏高度为0** @param highLisghtPadding*/public HighLightGuideView setHighLisghtPadding(int highLisghtPadding) {this.highLisghtPadding = highLisghtPadding;return this;}/*** 设置关闭监听** @param listener*/public HighLightGuideView setOnDismissListener(OnDismissListener listener) {this.onDismissListener = listener;return this;}/*** 清空画布*/public HighLightGuideView clearBg() {if (mCanvas != null) {Paint paint = new Paint();paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));mCanvas.drawPaint(paint);paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC));}// 将其注入画布mCanvas = new Canvas(fgBitmap);// 绘制前景画布mCanvas.drawColor(maskColor);return this;}/*** 显示*/public void show() {if (rootView != null) {ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);((ViewGroup) rootView).addView(this, ((ViewGroup) rootView).getChildCount(), lp);}}}
UiUtil
package com.safly.myapplication.highlight;import android.app.Activity;
import android.content.Context;
import android.util.DisplayMetrics;/*** * des:测量工具类*/
public final class UiUtil {/*** 获取屏幕尺寸* * @param activity* Activity* @return 屏幕尺寸像素值,下标为0的值为宽,下标为1的值为高*/public static int[] getScreenSize(Activity activity) {DisplayMetrics metrics = new DisplayMetrics();activity.getWindowManager().getDefaultDisplay().getMetrics(metrics);return new int[] { metrics.widthPixels, metrics.heightPixels };}/*** 获取状态栏高度* @param context* @return*/public static int getStatusBarHeight(Context context) {int result = 0;int resId = context.getResources().getIdentifier("status_bar_height", "dimen", "android");if (resId > 0) {result = context.getResources().getDimensionPixelOffset(resId);}return result;}}
ViewUtils
package com.safly.myapplication.highlight;import android.app.Activity;
import android.content.Context;
import android.graphics.Rect;
import android.view.View;/*** * des:测量位置*/
public class ViewUtils {private static final String FRAGMENT_CON = "NoSaveStateFrameLayout";public static Rect getLocationInView(View parent, View child) {if (child == null || parent == null) {throw new IllegalArgumentException("parent and child can not be null .");}View decorView = null;Context context = child.getContext();if (context instanceof Activity) {decorView = ((Activity) context).getWindow().getDecorView();}Rect result = new Rect();Rect tmpRect = new Rect();View tmp = child;if (child == parent) {child.getHitRect(result);return result;}while (tmp != decorView && tmp != parent) {//找到控件占据的矩形区域的矩形坐标tmp.getHitRect(tmpRect);if (!tmp.getClass().equals(FRAGMENT_CON)) {result.left += tmpRect.left;result.top += tmpRect.top;}tmp = (View) tmp.getParent();}result.right = result.left + child.getMeasuredWidth();result.bottom = result.top + child.getMeasuredHeight();return result;}
}
这篇关于引导页高亮小提示的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!