如何创建像您在一些 Android 应用程序和 ICS 中看到的帮助叠加层？

Question

我想要创建帮助覆盖，就像您在首次加载 ICS 时看到的那样，或者在 ES File Explorer 或 Apex Launcher 等应用程序中看到的那样（还有更多，但我现在想不起来）。这只是一种相对布局，一个视图位于另一个视图之上吗？我还没有找到任何示例代码来做这样的事情。有人知道这是怎么做到的或有什么想法吗？

Answer 1

你可以很快地做到这一点。例如，您添加了一个 LinearLayout，您可以在其中放置一张带有 alpha 的图片，该图片对应于您的帮助信息以及您想要像叠加层一样绘制什么。在您的活动的 xml 中，您将此布局放在具有“消失”可见性的活动布局之后的 RelativeLayout 中。当您要绘制帮助信息时，只需将此可见性设置为可见即可。

我希望，我很清楚，如果您有任何问题，我很乐意回答他们。

Answer 2

假设您通常会调用setContentView(R.layout.main)，但在第一次运行时，您希望拥有此叠加层。

第 1 步：在 Java 代码中创建一个 FrameLayout 并将其传递给 setContentView()。

步骤#2：使用LayoutInflater 将R.layout.main 膨胀为FrameLayout。

第 3 步：使用 LayoutInflater 将叠加层膨胀到 FrameLayout。

第 4 步：当用户点击按钮（或其他）以关闭覆盖时，调用 removeView() 以从 FrameLayout 中删除覆盖。

由于覆盖是FrameLayout 的后一个子代，它会浮在R.layout.main 的内容之上。

Answer 3

请参阅我的另一个答案，如何以编程方式在当前活动之上显示覆盖布局。 Activity 的 layout.xml 不需要知道关于覆盖皮肤的任何信息。您可以将覆盖半透明，仅覆盖屏幕的一部分，一个或多个文本视图和按钮...... How to overlay a button programmically?

• 创建 res/layout/paused.xml RelativeLayout 模板或使用任何顶层布局
• 创建一个显示叠加皮肤的函数
• 关键是获取 layout.xml 的句柄，使用 LayoutInflater 类解析 xml 以查看对象，将叠加视图添加到当前布局结构中
• 我的示例使用计时器通过从视图结构中完全删除覆盖对象来销毁它。这可能也是你想要摆脱它而不留痕迹的东西。

我的目标是主要活动不知道任何覆盖皮肤，覆盖来来去去，许多不同的覆盖，仍然能够使用overlay1.xml文本文件作为模板，并且内容应该以编程方式更新。我做了 CommonsWare 告诉我们的事情，我的帖子显示了实际的程序代码以开始使用。

免责声明：OP“感谢您的意见。这就是我想象的完成方式。我必须感谢下面的答案”评论并不意味着我的答案，而是 CommonsWare 的答案。 Stackoverflow 已更改帖子排序。

Answer 4

“Coach mark”在 UX talk 中是“Help overlay” :-)

coach_mark.xml 是您的教练标记布局

coach_mark_master_view 是 coach_mark.xml

中最顶层视图（根）的 id

public void onCoachMark(){

    final Dialog dialog = new Dialog(this);
    dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
    dialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
    dialog.setContentView(R.layout.coach_mark);
    dialog.setCanceledOnTouchOutside(true);
    //for dismissing anywhere you touch
    View masterView = dialog.findViewById(R.id.coach_mark_master_view);
    masterView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            dialog.dismiss();
        }
    });
    dialog.show();
}

添加coach_mark.xml 的示例（Oded Breiner 给出的这个出色的解决方案），以便人们可以轻松地复制和粘贴以快速查看工作示例。

这里是 coach_mark.xml 的示例，将 -> drawable/coach_marks 更改为您的图像：

coach_mark.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:id="@+id/coach_mark_master_view">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
         <ImageView
             android:id="@+id/coach_marks_image"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:layout_centerInParent="true"
             android:layout_gravity="center_horizontal"
             android:src="@drawable/coach_marks" />
    </RelativeLayout>
</LinearLayout>

并且可以选择使用这个主题来移除填充：

<style name="WalkthroughTheme" parent="Theme.AppCompat">
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:backgroundDimEnabled">false</item>
</style>