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

本文实例为大家分享了Android实现新手引导半透明蒙层效果的具体代码,供大家参考,具体内容如下

效果图:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android自定义ViewGroup实现竖向引导界面

    一般进入APP都有欢迎界面,基本都是水平滚动的,今天和大家分享一个垂直滚动的例子. 先来看看效果把: 1.首先是布局文件: <com.example.verticallinearlayout.VerticalLinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:i

  • 一分钟实现Android遮罩引导视图

    一分钟实现Android遮罩引导视图,供大家参考,具体内容如下 先看一下效果图 主角GuideView登场! GuideView是一种基于DialogFragment实现的引导遮罩浮层视图的轻量级解决方案,它具备以下的特性: 响应导航按钮的动作(因为引导浮层本质是一个dialog): 链式引导层,支持设定一组的引导遮罩视图,通过点击切换下一个试图,快读与业务进行解藕: 自动绘制半透明浮层.透明核心区以及确保目标视图和引导视图的位置. 实现说明 页面的结构如下图所示: 核心类 GuideViewB

  • Android PopupWindow实现遮罩层效果

    此篇博客实现的功能是:点击界面中的图片,跳出一个PopupWindow,PopupWindow中含有相应的文字和图标,并且在显示PopupWindow的时候,背景为半透明. 看图描述:点击加号,跳出PopupWindow,其中包含三个图片,点击叉号PopupWindow消失:当PopupWindow显示的时候,背景为半透明 显示PopupWindow的代码 private void showPopupWindow() { View view = (LinearLayout) getLayoutI

  • 360浏览器文本框获得焦点后被android软键盘遮罩该怎么办

    场景是这样的,站点上筛选按钮点击后弹出层(fixed),当输入框获取焦点以后弹出系统自带的软键盘,在android上十款浏览器挨个测试比对,发现在360浏览器弹出键盘以后获取焦点的文本框被软键盘覆盖了. 截图如下 (未获取软键盘焦点的情况) (chrome浏览器调起软键盘的情况) (360浏览器调起软键盘情况) 那么问题来了,浏览器的软键盘显示出来又哪几种情况呢?英文   中文(网上找的) 经过简单的了解,大概分析了一下软键盘在浏览器上弹出应该包含软键盘占用主activity空间,让主activ

  • Android自定义Dialog内部透明、外部遮罩效果

    本文实例为大家分享了Android自定义Dialog遮罩效果的具体代码,供大家参考,具体内容如下 图例: 代码 1.自定义dialog:引入样式和代码指定样式 package com.gxjl.pe.gxjlpesdk.view; import android.app.Dialog; import android.content.Context; import android.os.Bundle; import android.support.annotation.NonNull; import

  • Android页面中引导蒙层的使用方法详解

    蒙层是什么,蒙层是一层透明的呈灰色的视图,是在用户使用App时让用户快速学会使用的一些指导.类似于一些引导页面,只不过比引导页面更加生动形象而已.在GitHub上有具体的demo. 地址为   github源码地址,需要的可以去上面下载源码看看 使用引导蒙层非常简单,只要在你的项目中导入一个GuideView类即可,当然,别忘了在values的资源文件下加上相应的一些数值. 下面是GuideView的原码 public class GuideView extends RelativeLayout

  • Android GuideView实现首次登陆引导

    简介:最最轻量级的新手引导库,能够快速为任何一个 View 创建一个遮罩层,支持单个页面,多个引导提示,支持为高亮区域设置不同的图形,支持引导动画,方便扩展 项目地址:binIoter/GuideView GuideView 本系统能够快速的为一个 Activity 里的任何一个 View 控件创建一个遮罩式的导航页. 工作原理 首先它需要一个目标 View 或者它的 id,我们通过 findViewById 来得到这个 View,计算它在屏幕上的区域 targetRect,通过这个区域,开始绘

  • Android之淘宝商品列表长按遮罩效果的实现

    先来看看淘宝.唯品会长按商品的效果,以及简单Demo的效果: 首先分析一下场景: 长按条目时,弹出遮罩的效果遮挡在原来的条目布局上: 页面滑动或点击其他的条目,上一个正在遮罩的条目遮罩消失. 长按其他条目时,上一个遮罩的条目撤销遮罩,当前长按的显示遮罩: 条目添加遮罩的时添加动画: 1. 遮罩的效果,我们会很容易的想到Android布局控件FrameLayout布局,是基于叠加在上方的布局.所以在列表条目布局的时候,可以使用FrameLayout布局,在长按列表条目时,用条目的根布局添加一个遮罩

  • Android使用popUpWindow带遮罩层的弹出框

    上次项目中实现了新功能,就一直想添加到博客里来着,惰性发作起来简直太可怕,不说了,跟着一起写吧,三步即可实现简单的弹出框功能,首先看效果-- 首先:主页面布局,触发控件一定要有,再有就是给根标签设置id <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:

  • Android实现遮罩层(蒙板)效果

    Android的遮罩效果就是把一张图片盖在另一张图片的上面,通过控制任意一张图片的显示百分比实现遮罩效果.下面我使用两张一样的图片来实现一个类似于 Android 的progressbar 的填充效果.使用遮罩效果来实现progressbar的效果的好处是,我们可以只改变图片就可以更改progress的进度填充效果,并且我们可以实现任意形式的填充效果,就比如横竖填充,扇形逆/顺时填充针等. 网上有很多介绍Android 遮罩效果的列子,但是都是横竖的填充效果,下面我来实现一个扇形填充效果,如下图

随机推荐