Android GuideView实现首次登陆引导

简介:最最轻量级的新手引导库,能够快速为任何一个 View 创建一个遮罩层,支持单个页面,多个引导提示,支持为高亮区域设置不同的图形,支持引导动画,方便扩展

项目地址:binIoter/GuideView

GuideView

本系统能够快速的为一个 Activity 里的任何一个 View 控件创建一个遮罩式的导航页。

工作原理

首先它需要一个目标 View 或者它的 id,我们通过 findViewById 来得到这个 View,计算它在屏幕上的区域 targetRect,通过这个区域,开始绘制一个覆盖整个 Activity 的遮罩,可以定义遮罩的颜色和透明度,然而目标 View 被绘制成透明从而实现高亮的效果。接下来是在相对于这个 targetRect 的区域绘制一些图片或者文字。我们把这样一张图片或者文字抽象成一个 Component 接口,设置文字或者图片,所有的图片文字都是相对于 targetRect 来定义的。可以设定额外的 x,y 偏移量,可以对遮罩系统设置可见状态的发生变化时的监听回调,可以对遮罩系统设置开始和结束时的动画效,另外,我们可以不对整个 Activity 覆盖遮罩,而是对某一个 View 覆盖遮罩。

注意:具体用法参见 demo,内附详细注释

usage

 public class SimpleComponent implements Component {

  @Override
  public View getView(LayoutInflater inflater) {
     LinearLayout ll = new LinearLayout(inflater.getContext());
     LinearLayout.LayoutParams param =
         new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
     ll.setOrientation(LinearLayout.VERTICAL);
     ll.setLayoutParams(param);
     TextView textView = new TextView(inflater.getContext());
     textView.setText(R.string.welcome);
     textView.setTextColor(inflater.getContext().getResources().getColor(R.color.color_white));
     textView.setTextSize(20);
     ImageView imageView = new ImageView(inflater.getContext());
     imageView.setImageResource(R.mipmap.arrow);
     ll.removeAllViews();
     ll.addView(textView);
     ll.addView(imageView);
     ll.setOnClickListener(new View.OnClickListener() {
       @Override
       public void onClick(View view) {
         Toast.makeText(view.getContext(), "引导层被点击了", Toast.LENGTH_SHORT).show();

       }
     });
     return ll;
  }

    @Override
    public int getAnchor() {
       return Component.ANCHOR_BOTTOM;
    }

    @Override
    public int getFitPosition() {
       return Component.FIT_START;
    }

    @Override
    public int getXOffset() {
        return 30;
    }

    @Override
    public int getYOffset() {
       return 0;
    }
  }

 public void showGuideView() {
   final GuideBuilder builder1 = new GuideBuilder();
   builder1.setTargetView(button1)
       .setAlpha(150)
       .setOverlayTarget(true)//设置目标区域是否高亮显示
       .setOutsideTouchable(false);
   builder1.setOnVisibilityChangedListener(new GuideBuilder.OnVisibilityChangedListener() {
     @Override
     public void onShown() {
       // Toast.makeText(MutiGuideViewActivity.this, "show", Toast.LENGTH_SHORT).show();
       }
     @Override
     public void onDismiss() {
       button2.post(new Runnable() {
         @Override
         public void run() {
           showGuideView2();
         }
       });
       // Toast.makeText(MutiGuideViewActivity.this, "dismiss", Toast.LENGTH_SHORT).show();
     }
   });

   builder1.addComponent(new SimpleComponent());
   Guide guide = builder1.createGuide();
   guide.setShouldCheckLocInWindow(false);
   guide.show(MutiGuideViewActivity.this);
}

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

(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 PopupWindow实现遮罩层效果

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

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

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

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

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

  • 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;

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

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

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

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

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

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

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

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

  • 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

随机推荐