Android使用ShowcaseView添加半透明操作提示图片的方法

在安卓系统第一次使用的时候，我们会看到类似如下左图的界面，它用一个半透明的图片遮盖住下面的界面，而突出界面中的某一个按钮或者图标，然后在旁边写上若干提示文字，告诉用户某个操作方法。类似的，当我们第一次使用某些软件的时候，也会出现一个半透明的提示界面，比如知乎在第一次查看的时候，会告诉你右划返回，当你以后再进行相同的操作时，这个半透明的提示图片就不会出现了。

  那么我们怎样在自己的安卓应用上也实现类似的功能呢？相关的中文讨论不多，我看到过如下两个：

• http://chenyoca.iteye.com/blog/1188807
• http://www.2cto.com/kf/201210/161838.html

  但是过程都不算简单，这种轮子性质的工作，我们自己来做反而费力不讨好，在Stackoverflow上有人给出了解答：

• http://stackoverflow.com/questions/12013334/how-do-you-create-a-transparent-demo-screen-for-an-android-app
• http://stackoverflow.com/questions/26293836/how-to-add-a-semi-transparent-demo-screen-using-showcaseview

  使用ShowcaseView开源项目可以非常简单的实现以上的功能。下面的截图是我实现的效果。

  Picture 1 是主界面, Picture 2是ShowcaseView默认实现, Picture 3是ShowcaseView用户自定义实现，下面我将简要介绍实现的步骤。

1. 如果你是使用Android Studio，在build.gradle文件中添加下面的代码来依赖ShowcaseView库

    compile 'com.github.amlcurran.showcaseview:library:5.0.0'

   如果是使用其他IDE，请看这个说明。本项目使用Android Studio 0.8.6.

2. 新建三个Activity：MainActivity, DefaultActivity, CustomActivity.

3. 假设在DefaultActivity中有一个按钮，你想像Picture 2那样突出它，在DefaultActivity的onCreate()方法中添加如下代码：

    Button get_src_bn = (Button)findViewById(R.id.get_source_bn);         get_src_bn.setOnClickListener(new View.OnClickListener() {             @Override             public void onClick(View view) {                 Uri uri = Uri.parse("https://github.com/Beeder/ShowcaseViewDemo");                 Intent intent = new Intent(Intent.ACTION_VIEW,uri);                 startActivity(intent);             }         }); new ShowcaseView.Builder(this)         .setTarget(new ViewTarget(get_src_bn))//set button as target         .setContentTitle("Default ShowcaseView")         .setContentText("This is highlighting the button view.\nIn Default ShowcaseView, you must set the Target you want to highlight!")         .hideOnTouchOutside()         .build();

   这就是使用ShowcaseView的默认方法，很简单吧，你想突出什么，就以什么为Target。关于ShowcaseView的Target的更多内容，可以参考Target-API。

4. 在CustomActivity中，你不想突出任何一个按钮或者View，你只是想像Picture 3一样显示一个半透明图片告诉用户某种手势操作，那么你的代码应该是这样的：

    ShowcaseView showcaseView = new ShowcaseView.Builder(this)                             .setStyle(R.style.Custom_semi_transparent_demo)//setStyle instead of setTarget!                             .hideOnTouchOutside()                             .build(); //showcaseView.setBackground(getResources().getDrawable(R.drawable.swipe_back_en));//minAPI=16 showcaseView.setBackgroundDrawable(getResources().getDrawable(R.drawable.swipe_back_en));//deprecated.

   你没有target任何一个view，而是使用了setStyle来手动的设置一个背景主题，那么这个背景主题就是关键了，Custom_semi_transparent_demo的代码如下：

    <!--look at this: https://github.com/amlcurran/ShowcaseView/issues/159--> <!--you can customize it--> <style name="Custom_semi_transparent_demo" parent="ShowcaseView.Light">     <item name="sv_backgroundColor">#663d4353</item>     <item name="sv_showcaseColor">#25467A</item>     <item name="sv_buttonText">Close</item> </style>

   可以看到这个背景主题是继承了ShowcaseView.Light主题，然后修改了背景颜色、字体颜色和按钮文字。设置完正确的style之后，还需要马上设置背景图片，这个例子中的背景图片是R.drawable.swipe_back_en，图片必须是png格式的透明图片。

  整个步骤就完了，你将看到和上面三张图片显示一样的界面。更多的自定义功能可以看官方wiki。这个Demo的源代码以及英文版介绍请看ShowcaseViewDemo

---

2014.12.24更新

1. 作者本人已表明，该项目不支持导入Eclipse，请看Issue，不过也有大神成功了，可以看这个回答。
   （由此引出的关于“怎样在eclipse中导入library的资料”：http://developer.android.com/tools/projects/projects-eclipse.html#ReferencingLibraryProject、http://stackoverflow.com/a/8281477。）

2. 有网友想在一个activity中添加多张半透明提示图片，可以参考https://github.com/amlcurran/ShowcaseView/wiki/Display-showcase-views-sequentially-on-the-same-screen。也就是重载某一个showcaseview的onShowcaseViewHide(ShowcaseView showcaseView);或onShowcaseViewDidHide(ShowcaseView showcaseView);在这个函数里面创建一个新的showcaseview显示，这样就实现了连续显示多个的效果。本Demo已经添加了显示多个提示图片的功能，可以去https://github.com/Beeder/ShowcaseViewDemo下载查看。

3. 最新的showcaseview版本是5.0.0，在这个版本中不能修改单个高亮圆圈的半径，只能在/res/values/dimens.xml里面重载如下代码。（https://github.com/amlcurran/ShowcaseView/issues/259）

    <dimen name="showcase_radius">94dp</dimen> <dimen name="showcase_radius_inner">96dp</dimen> <dimen name="showcase_radius_outer">128dp</dimen>

   这样会导致项目中所有showcaseview的半径都改了，在旧版本中可以修改单个showcaseview的半径大小，有需要的可以自取。期待作者将修改半径功能增加回来。