在Android中如何创建半透明灰色的教程覆盖层？

Question

当您第一次运行Android设备时（如果使用模拟器，您会经常看到这种情况），会有一个有关如何使用启动器和添加小部件等的有用小教程。我正在尝试在Google上找到其示例，但无法找到。希望您知道我的意思。这是带有每个步骤蓝色“确定”按钮的教程。

无论如何，我想为我的应用程序创建一个类似的教程，但我不确定最佳方法是什么。

我是否应该创建一个片段（Fragment），并将其设置为半透明，覆盖在我的常规活动（activity）上，并仅在第一次运行时显示它？

我是否应该为教程的每个部分制作一个半透明的.PNG文件，并在第一次运行时叠加在常规启动器活动上？

如果我选择后者，如何调整所有各种屏幕尺寸？我可以在Photoshop中将图像呈现为各种尺寸，但这并不能涵盖所有尺寸。如果我使用片段，我只需说“match_parent”就可以不用担心它，但随之而来的是我必须弄清楚片段的工作原理，这让我很困惑。

- bob

---

片段很容易理解，你必须尝试一下，正如你自己回答的那样，它们满足屏幕限制！ - Rachit Mishra

Answer 1

我认为这个开源库正是你在寻找的内容：

Showcase View

你可以从GitHub获取源代码和设置说明。

- jenzz

Answer 2

使用十六进制颜色代码，它由两个数字表示alpha值和六个数字表示颜色本身，就像这样：

android:background="#22FFFFFF"

它会使它半透明。

android:background="#c0000000" for more darkness

编辑过

一般十六进制颜色代码的结构为'#FFFF'

要实现透明度，在任何颜色代码后面加上两个数字。

例如：#110000，#220000，#330000。

这两个数字越大，透明度越低。

- Minto

Answer 3

有一个获奖的库可以实现这一功能，名为“FancyShowcaseView”。

https://github.com/faruktoptas/FancyShowCaseView

将以下代码添加到您的项目中：

在顶层build.gradle文件中（不是模块级别）：

allprojects {
    repositories {
        ...
        maven { url "https://jitpack.io" }
    }
}

在模块级别的（应用程序）build.gradle中。

dependencies {
    compile 'com.github.faruktoptas:FancyShowCaseView:1.0.0'
}

然后您可以调用：

new FancyShowCaseView.Builder(this)
        .focusOn(view)
        .title("Focus on View")
        .build()
        .show();

- David Rawson

---

这个库实际上非常好用，相比被选为答案的另一个库要更优秀。感谢分享！ - payne

Answer 4

您可以尝试像这样的内容。

<LinearLayout ... >
<!-- your Normal layout goes here -->
<RelativeLayout android:id="@+id/tutorialView" android:background="#D0000000"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

        <ImageView android:src="@drawable/hint_menu" android:layout_alignParentLeft="true"
                   android:layout_centerVertical="true" android:layout_width="wrap_content"
                   android:layout_height="wrap_content"/>

    </RelativeLayout>
</LinearLayout>

在你的onCreate方法中。

View tutorialView = findViewById(R.id.tutorialView);
        boolean tutorialShown = PreferenceManager.getDefaultSharedPreferences(MainActivity.this).getBoolean(Constants.PREF_KEY_TUT_MAIN, false);
        if (!tutorialShown) {
            tutorialView.setVisibility(View.VISIBLE);
        } else {
            tutorialView.setVisibility(View.GONE);
        }

        tutorialView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                v.setVisibility(View.GONE);
                PreferenceManager.getDefaultSharedPreferences(MainActivity.this).edit().putBoolean(Constants.PREF_KEY_TUT_MAIN, true).commit();
            }
        });

- Glenn Bech

Answer 5

你不需要使用 Photoshop。你可以使用 LinearLayout，例如 android:background="#50134BE8"。这将使它成为透明蓝色。您可以将布局放在所有元素的顶部，并在用户完成后隐藏它。 您可以使用任何背景颜色，但要使其透明，请在 "#" 符号后面放置从01到FE的数字以更改其透明度。将宽度和高度设置为fill_parent以占用整个区域。 将此视图直接放置在主布局中。希望这有所帮助。

- ya-ivanov