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

最新推荐文章于 2024-08-10 07:48:45 发布

月天寒6

最新推荐文章于 2024-08-10 07:48:45 发布

阅读量4.1k

点赞数

分类专栏： android 文章标签： android应用

android 专栏收录该内容

23 篇文章

订阅专栏

本文详细介绍了如何使用ShowcaseView开源项目在安卓应用中实现半透明提示界面的功能，包括默认方法和自定义实现步骤。通过简单的代码示例，展示了如何突出特定的UI元素或显示手势操作提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

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

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

如果你是使用Android Studio，在build.gradle文件中添加下面的代码来依赖ShowcaseView库
```
 compile 'com.github.amlcurran.showcaseview:library:5.0.0'
```
如果是使用其他IDE，请看这个说明。本项目使用Android Studio 0.8.6.
新建三个Activity：MainActivity, DefaultActivity, CustomActivity.

假设在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。

在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更新

作者本人已表明，该项目不支持导入Eclipse，请看Issue，不过也有大神成功了，可以看这个回答。
（由此引出的关于“怎样在eclipse中导入library的资料”：http://developer.android.com/tools/projects/projects-eclipse.html#ReferencingLibraryProject、http://stackoverflow.com/a/8281477。）
有网友想在一个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下载查看。
最新的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的半径大小，有需要的可以自取。期待作者将修改半径功能增加回来。