如何使用 LayoutInflater / ViewStub 进行叠加

Question

由于我实际上对以编程方式更改视图不是很有信心，所以我有以下问题：

在我的应用程序第一次启动时，我希望在主屏幕上有一个覆盖，告诉用户查看设置，因为用户必须配置两个关键选项。

我不想使用AlertDialog，也不想使用向导。因此，我决定采用类似于 Go SMS 的方法，并在第一次开始时创建一个覆盖。我创建的模型如下所示：

普通菜单：

第一次开始：

所以这些是我遇到的问题：

1. 就像我说的，我不想在第一次启动时使用屏幕截图叠加，因为这会占用太多空间并且不会独立于语言和屏幕。
2. 我希望将圆圈作为 png，但我不知道如何将它放在图像上
3. 同样的文字问题
4. 最后我想在应用程序上放置一个半透明的白色。它不一定需要图标的孔，尽管它会很好。

如果您需要 Layout Source，您可以在 pastebin 获得它

所以，我只需要从这里开始，如果使用 LayoutInflater 或 ViewStub 更好以及如何实现它，因为我完全没有使用它的经验......

谢谢！

/edit：我上传了一个新的、布局更合理的布局。

Answer 1

我遇到了类似的问题，我的客户想要一个应用程序的演练，其中整个屏幕必须变得更白（正如他们所说：“透明”），除了由覆盖语音气泡解释的按钮。
对你来说幸运的是，你的布局并不像我必须使用的那样复杂:)

现在，您可以通过两种方式获得透明效果，或者使用白色背景并调用所有视图的 setAlpha() 方法，或者您可以创建半透明的白色叠加层。
如果您使用叠加层，则必须找到一种通过叠加层显示不透明按钮的方法。这可能会有点复杂。 如果您使用第一个选项，您可以在不透明视图上设置Alpha(1) 以使其显示。

setAlpha() 方法仅适用于 api 版本 11+，因此如果您针对的是早期版本，您可能需要以稍微复杂的方式进行操作。
在视图上设置 alpha 的示例预蜂窝：

按钮的布局（按你的意愿制作，只要让它们相似，这样你就可以循环访问它们）：

<LinearLayout 
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <ImageView 
        android:tag="image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/tile"/>
    <TextView 
        android:tag="text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#FF000000"
        android:text="button1"/>
</LinearLayout>

在你的程序中，当你想让按钮透明时：

LinearLayout l = (LinearLayout) findViewById(R.id.button1);
((ImageView)l.findViewWithTag("image")).setAlpha(0x7F);
((TextView)l.findViewWithTag("text")).setTextColor(0x7F000000);

当您决定如何创建透明效果时，您必须决定如何显示叠加文本/气泡。您很可能希望将其放在整个布局之上的单独层中，以确保它不受新视图的影响。
实现此目的的一种方法是将根布局元素更改为 FrameLayout，然后在其中创建/显示。例如：

<FrameLayout background="#FFFF"> <!-- white background, just in case -->
    <LinearLayout>
        <!-- the rest of your layout -->
    </LinearLayout>
    <LinearLayout visibility="gone"> <!-- this will be your overlay view -->
        <ImageView /> <!-- the arrow/ring -->
        <TextView /> <!-- the description -->
    </LinearLayout>
</FrameLayout>

显示介绍时，将隐藏的覆盖视图的位置设置为要解释的表格项的位置，将文本更改为适当的字符串/资源并显示视图。

介绍结束后，您重置所有按钮的 alpha 值，并再次将叠加层的可见性设置为消失。

Answer 2

由于我对 ViewStub 没有太多经验，所以我会使用 LayoutInflater。

首先，您需要在当前布局之上加载第二个布局。最简单的方法是拥有一个 FrameLayout，它有一个子视图作为当前视图，并且在第一次启动时动态加载第二个子视图。当您在 Activity 中加载内容视图时，它将附加到一些已创建的视图（一些 DecorView、FrameLayout 等）。因此，您可以重新使用现有的 FrameLayout，也可以创建一个新的。 我会投票支持第二种解决方案，因为它更稳定（我刚刚提到了另一种可能性，以防你想最小化层数）。

因此，第一步，将您当前的布局包装在 FrameLayout 中，并给它一个 id，比如说“@id/root”。

然后，在 onCreate 方法中，你可以有这样的东西：

setContentView(R.layout.main);
if (isFirstRun()) {
    ViewGroup parent = (ViewGroup)findViewById(R.id.root); // locate the FrameLayout
    LayoutInflater li = LayoutInflater.from(this); // get an instance of LayoutInflater
    li.inflate(R.layout.overlay, parent);
}

到目前为止，您将加载叠加层。现在由您来定义覆盖。 要制作美白效果，只需在您的 overlay.xml 布局中的根视图上设置以下属性：

android:background="#40ffffff"

要定位圆圈，首先需要找到它的位置。您可以使用 View.getLocationOnScreen 获取屏幕上图标（圆圈下方）的绝对坐标。那么你可以有两种选择：

• 要么创建自定义视图（用于叠加层）并在给定位置手动绘制圆圈
• 或使用 ImageView 添加圆圈并根据坐标调整左右边距