android 蒙版控件,GitHub - ptliao/ShowcaseView: 这是一个Android的蒙版控件，用于引导用户的操作。...

Android蒙板控件(用户引导)

效果图

添加依赖

root build.gradle

allprojects {

repositories {

...

maven { url 'https://jitpack.io' }

}

}

app build.gradle

dependencies {

compile 'com.github.wdzawdh:ShowcaseView:v1.1'

}

使用方法

栗子一

最简单的使用方式 (图1)

方法解释：(set系列的方法都会有默认值)

1.setOnlyOneTag 用来标识只显示一次

2.setMaskColor 遮罩的颜色

3.setDismissOnTouch 是否触摸任意地方消失

4.setDuration 显示和消失的事件

5.setTargetPadding 能控制透明块的大小

6.addTarget 透明块要在哪个view上展示

7.addImage 添加图片，五个参数分别是图片资源、x轴的位置(0-10.0f)、y轴的位置(0-10.0f)、图片的缩放比例(当为1.0f时图片宽为屏幕的一半，高度会等比例缩放)、点击图片蒙版是否消失。

8.addShowcaseListener 监听显示和关闭的事件

new ShowcaseView.Builder(this)

.setOnlyOneTag(MainActivity.class.getSimpleName())

.setMaskColor("#88EECC33")

.setDismissOnTouch(true)

.setDuration(1000L, 1000L)

.setTargetPadding(20)

.addTarget(mTextView)

.addImage(R.mipmap.img_showcase, 5.0f, 5.0f, 1.5f, true)

.addShowcaseListener(new ShowcaseView.ShowcaseListener() {

@Override

public void onDisplay(ShowcaseView showcaseView) {

}

@Override

public void onDismiss(ShowcaseView showcaseView) {

Intent intent = new Intent(

MainActivity.this, SecondActivity.class);

startActivity(intent);

}

})

.build().show();

栗子二

图2 图3 图4 是添加到队列再显示的方式(showQueue)，也就是说当第一个蒙版消失后会接着显示第二个...直到把队列中的蒙版都显示完。addShowcaseQueue方法用来添加到队列，最后通过showQueue方法来依次显示。

特别注意：set系列的属性会在第一个addShowcaseQueue调用后保留下来，直到调用build为止，比如遮罩颜色等。

new ShowcaseView.Builder(this)

.setOnlyOneTag(MainActivity.class.getSimpleName())

.setMaskColor("#88EECC33")

.setDismissOnTouch(true)

.setDuration(1000L, 1000L)

.setTargetPadding(20)

.addTarget(mTextView, ShowcaseView.CIRCLE_SHAPE)

.addShowcaseQueue()

.setMaskColor("#66FFB6C1")

.addTarget(mTextView2, ShowcaseView.OVAL_SHAPE)

.addShowcaseQueue()

.setMaskColor("#D8BFD8")

.setDismissOnTouch(false)

.addTarget(mTextView3, ShowcaseView.RECTANGLE_SHAPE)

.addImage(R.mipmap.img_showcase, 5.0f, 8.0f, 1.0f, true)

.addShowcaseListener(new ShowcaseView.ShowcaseListener() {

@Override

public void onDisplay(ShowcaseView showcaseView) {

Toast.makeText(getApplication(),

"最后一个展示啦",Toast.LENGTH_SHORT).show();

}

@Override

public void onDismiss(ShowcaseView showcaseView) {

Toast.makeText(getApplication(),

"最后一个消失啦",Toast.LENGTH_SHORT).show();

}

})

.addShowcaseQueue()

.build().showQueue();

PS: 关于屏幕适配

为了在不同分辨率的屏幕上显示图片的效果相似，在addImage的时候会默认缩放将图片宽缩放为为屏幕的一半，高度跟随宽等比例缩放，使用时通过第四个参数调整大小，通过第二三个参数调整位置。图片x轴和y轴的位置是按权重调整的，范围是0-10.0f，已图片中心为坐标，(0,0)在最左上方，(10,10)在最右下方。建议先调整大小再调整位置。