いくつかのAndroidアプリやICSに表示されるようなヘルプオーバーレイを作成するにはどうすればよいですか？

93

ICSが初めて読み込まれるときや、ESファイルエクスプローラーやApexランチャーなどのアプリで表示されるようなヘルプオーバーレイを作成したいと思っています（まだありますが、現時点では考えられません）。これは、1つのビューが他のビューの上にある相対的なレイアウトですか？私はそのようなことをするためのサンプルコードを見つけることができませんでした。誰もがこれがどのように行われるか知っていますか、何かアイデアがありますか？

ESファイルエクスプローラー

android

— ssuperz28
ソース

84

通常はを呼び出すと仮定しますsetContentView(R.layout.main)が、最初の実行では、このオーバーレイが必要です。

ステップ1：FrameLayoutJavaコードでを作成し、それをに渡しsetContentView()ます。

ステップ＃2を使用LayoutInflaterしてにインフレートR.layout.mainしますFrameLayout。

ステップ＃3：を使用LayoutInflaterしてオーバーレイをに組み込みますFrameLayout。

ステップ＃4：ユーザーがボタン（または何か）をタップしてオーバーレイを閉じるときに、removeView()からオーバーレイを削除するように呼び出しますFrameLayout。

オーバーレイはの子であるFrameLayoutので、のコンテンツの上にフロートしR.layout.mainます。

— CommonsWare
ソース

6

@ ssuperz28：ええ、まあ、手描きの矢じりとバブルは別です。あなたはそれらのためにあなた自身でいます。:-)

— CommonsWare 2012

あなたがあなたが望んだことをどうにかして成し遂げたかどうか私は知りません、しかし、これはもう一つの選択肢です。 stackoverflow.com/questions/8841240/…CommonsWare によって与えられた解決策を実行する場合、矢印を設定するために私が発生する唯一のことは、すでに矢印付きの画像を含むresourceImageまたはbackgroundImageで命令のFrameLayoutを定義することです（および透明性）。

— Edison Santos

1

これを行う方法はありますが、FrameLayoutから下にある子供の位置に関連してそれを行うのですか？

— 4gus71n 2013年

@CommonsWare-これはどのデバイスであっても機能しますか？

— Rat-a-tat-a-tat Ratatouille 2014

2

@ user3364963：物事の位置を動的に調整します。私の答えは少し簡略化されました。強調表示される要素の位置を決定し、「コーチマーク」の座標を調整すると思います。ViewGroup「コーチマーク」レイヤーのカスタムはそれを処理できShowcaseView、そのパターンの缶詰実装を提供するライブラリー（例えば、）があります。

— CommonsWare 2014年

80

「コーチマーク」はUXトークの「ヘルプオーバーレイ」です:-)

coach_mark.xmlはコーチマークレイアウトです

coach_mark_master_viewはで最上位ビュー（ルート）のIDであるcoach_mark.xml

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によって提供されたこの優れたソリューションに）追加することで、pplがコピー＆ペーストして簡単に動作する例をすばやく確認できるようにします。

ここに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>

— オディッドブライナー
ソース

こんにちは、どうすればこのダイアログを画面に合わせて拡大できますか？ドキュメントから

A dialog is a small window that prompts [...]. A dialog does not fill the screen and is normally used for modal events [...].

。このコードを使用すると、マスタービューが画面のごく一部に圧縮されます。私が設定した場合android:layout_width="640dp" android:layout_height="480dp"（つまり、テストしている画面の実際の値）、それは正しく動作します。（もちろん、これは実行可能な解決策ではありません）

— ocramot 2015

@ocramot：上記の例は、match_parentとWindow.FEATURE_NO_TITLEのために全画面表示にする必要があります

— Oded

私は別の方法でそれを見ているので、その後、他のいくつかの問題が存在しなければならない

— ocramot

1

私はこれが少なくとも数か月前のものであることを知っていますが、そのフルスクリーンの質問が理解されたことがありますか？

— cbhedd

3

：ダイアログのテーマを設定する方法がわからないものに、ちょうどそうのようなダイアログをインスタンス化new Dialog(getContext(), R.style.WalkthroughTheme);

— w3bshark

4

あなたはそれをかなり迅速に行うことができます。たとえば、LinearLayoutを追加します。ここには、ヘルプ情報に対応するアルファ付きの画像を置き、オーバーレイのように何を描きたいかを指定します。アクティビティのxmlで、このレイアウトを、Gone可視性のあるアクティビティのレイアウトの後にRelativeLayoutに配置します。ヘルプ情報を描画したいときは、この可視性を可視に設定する必要があります。

ご不明な点がございましたら、お気軽にお答えください。

— ふぶ
ソース

ご入力いただきありがとうございます。これは私がそれが行われていることを想像した方法です。私はそれを構築するつもりなので、私は以下の答えを信用しなければなりません。それはより管理しやすいようで、メインのアクティビティレイアウトを変更する必要はありません。

— ssuperz28 2012

1

プログラムで現在のアクティビティの上にオーバーレイレイアウトを表示する方法については、別の回答を参照してください。アクティビティのlayout.xmlは、オーバーレイスキンについて何も知る必要はありません。オーバーレイを半透明にして、画面の一部のみをカバーし、その上に1つ以上のテキストビューとボタンを配置できます... プログラムでボタンをオーバーレイする方法は？

res / layout / paused.xml RelativeLayoutテンプレートを作成するか、任意のレイアウトトップレベルを使用します
オーバーレイスキンを表示する関数を作成する
重要なのは、layout.xmlのハンドルを取得し、LayoutInflaterクラスを使用してxmlを解析してオブジェクトを表示し、現在のレイアウト構造にオーバーレイビューを追加することです。
私の例では、タイマーを使用して、ビュー構造から完全に削除してオーバーレイオブジェクトを破棄しています。これはおそらく、トレースなしでそれを取り除くためにも必要なものです。

私の目標は、メインのアクティビティがオーバーレイスキン、オーバーレイの出入り、さまざまなオーバーレイを認識せず、overlay1.xmlテキストファイルをテンプレートとして使用でき、プログラムでコンテンツを更新することです。CommonsWareが私に言ったほとんどのことをします。私の投稿は、開始するための実際のプログラムコードを示しています。

免責事項：OPs「入力ありがとうございます。これは、私がそれを行ったことを想像した方法です。私は以下の答えを信用しなければなりません」コメントは私の答えではなく、CommonsWareの答えを意味します。Stackoverflowは投稿の順序を変更しました。

— Whome
ソース