Skip to content

Latest commit

 

History

History
98 lines (93 loc) · 4.61 KB

README.md

File metadata and controls

98 lines (93 loc) · 4.61 KB
Raw

新手引导浮层

本引导浮层框架支持如下功能：
（1）添加高亮的区域，该区域可以为矩形、椭圆和圆形，并且可以为该区域增加padding。
（2）在浮层上添加组件，该组件可以相对于当前已显示的某个组件的位置添加，也可以自定义显示的位置。
（3）浮层的显示与消失。
（4）清除高亮的区域和添加的组件，更新浮层的视图（通常为多步骤引导使用）。
（5）其它功能：设置浮层是否点击可消失、点击的事件和返回键是否可取消等等。

引用方式

maven：

<dependency>
	<groupId>com.jimmysun</groupId>
	<artifactId>guide</artifactId>
	<version>2.0.1</version>
	<type>pom</type>
</dependency>

gradle：

compile 'com.jimmysun:guide:2.0.1'

示例

代码参见https://github.com/jimmysuncpt/Guide/tree/master/app
截图：

使用方式

GuideManager guideManager = new GuideManager(context)
        .highlightViewInRect(view) // 以矩形的方式高亮显示视图
        .highlightViewInRect(view, padding) // 以矩形的方式高亮显示视图，带间距
        .highlightViewInRect(view, paddingLeft, paddingTop, paddingRight, paddingBottom) // 以矩形的方式高亮显示视图，带间距
        .highlightViewInOval(view) // 以椭圆形的方式高亮显示视图
        .highlightViewInOval(view, padding) // 以椭圆形的方式高亮显示视图，带间距
        .highlightViewInOval(view, paddingLeft, paddingTop, paddingRight, paddingBottom) // 以椭圆形的方式高亮显示视图，带间距
        .highlightViewInCircle(view) // 以圆形的方式高亮显示视图
        .highlightViewInCircle(view, paddingRadius) // 以圆形的方式高亮显示视图，带间距
        .addViewRelativeTo(view, relativeTo, alignType, xMargin, yMargin) // 相对于某个视图添加一个视图，见注意事项（3）
        .addView(view, params) // 以指定的布局参数添加一个视图
        .updateViewLayout(view, params) // 更新视图的布局参数
        .removeView(view) // 删除一个视图
        .clear() // 清除所有高亮的区域和添加的视图
        .setCancelable(true) // 设置是否可以按返回键消失
        .setCanceledOnTouch(true) // 设置是否可以点击消失
        .setOnClickListener(onClickListener) // 设置点击事件监听器
        .setAlpha(0.7f) // 设置透明度，0~1，默认0.7
        .requestLayout(); // 更新布局
guideManager.isShowing(); // 是否正在显示
guideManager.show(); // 显示
guideManager.dismiss(); // 消失

注意事项

（1）如果要获取某个视图的具体显示位置，通常在这个视图的addOnGlobalLayoutListener()方法中使用GuideManager，代码如下：

view.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
    @Override
    public void onGlobalLayout() {
        view.getViewTreeObserver().removeOnGlobalLayoutListener(this);
        // show guide
    }
});

（2）如果想做多步骤引导，可以嵌套使用，代码如下：

// 第一步...
guideManager.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        guideManager.clear();
        // 第二步...
        guideManager.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                guideManager.clear();
                // 第三步...
            }
        });
    }
});
guideManager.show();

（3）addViewRelativeTo(view, relativeTo, alignType, xMargin, yMargin)方法参数说明

  • view：要添加的视图。
  • relativeTo：相对的视图。
  • alignType：对齐方式，可使用GuideManager的LEFT_OF、RIGHT_OF、ABOVE、BELOW、ALIGN_LEFT、ALIGN_TOP、ALIGN_RIGHT和ALIGN_BOTTOM，如果要使用多种对齐方式，可以采用“或”的方式，例如“GuideManager.RIGHT_OF | GuideManager.BELOW”。
  • xMargin：横向的距离，单位px。
  • yMargin：纵向的距离，单位px。
    对齐方式及相对距离如图所示：