繁体   English   中英

如何在Android中创建半透明灰色教程叠加层?

[英]How do I create the semi-transparent grey tutorial overlay in Android?

你知道当你第一次运行Android设备时(如果你使用模拟器,你会看到很多东西),这是一个有用的小教程,关于如何使用启动器和添加小部件等等。我试图找到一个例子这在Google上,但我不能。 我希望你知道我的意思。 这是每一步都有蓝色“好”按钮的那个。

无论如何,我想为我的应用程序创建一个,但我不确定哪个是最好的方法去做。

我是否创建了一个片段,我可以在常规活动之上制作半透明片段并让它仅在第一次运行时出现?

我是否为教程的每个部分制作了一个半透明的.png并将其覆盖在第一次运行的常规启动器活动上?

如果我选择后者,我该如何调整各种屏幕尺寸? 我可以在Photoshop中将图像渲染到各种尺寸,但这并不能涵盖所有尺寸。 如果我去片段路线,我可以说“match_parent”而不用担心它。 但后来我必须弄清楚Fragments是如何工作的,而且他们让我感到困惑。

我认为这个开源库正是您所需要的:

展示视图

在此输入图像描述

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

使用十六进制颜色代码,由两个数字组成alpha六个颜色本身,如下所示:

android:background="#22FFFFFF"

它会使它变得半透明。

android:background="#c0000000" for more darkness

编辑

通常十六进制颜色代码结构就像'#FFFF'

为了获得透明度,在'#'之后将两位数添加到任何颜色代码中。

例如: #110000#220000#330000

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

你可以尝试这样的事情

<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();
            }
        });

有一个屡获殊荣的图书馆,名为“FancyShowcaseView”:

https://github.com/faruktoptas/FancyShowCaseView

FancyShowcaseView示例

像这样添加到您的项目:

顶级 build.gradle不是模块级别):

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

模块级 (app) build.gradle

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

然后你可以打电话:

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

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM