Jak utworzyć nakładkę pomocy, taką jak w kilku aplikacjach na Androida i ICS?

Chcę utworzyć nakładki pomocy, takie jak te, które widzisz, gdy ICS ładuje się po raz pierwszy lub w aplikacjach takich jak ES File Explorer lub Apex Launcher (jest ich więcej, ale nie mogę o nich teraz myśleć). Czy to tylko względny układ z jednym widokiem umieszczonym na drugim? Nie udało mi się znaleźć żadnego przykładowego kodu do zrobienia czegoś takiego. Czy ktoś wie, jak to się robi lub ma jakieś pomysły?

Załóżmy, że zwykle dzwonisz setContentView(R.layout.main), ale przy pierwszym uruchomieniu chcesz mieć tę nakładkę.

Krok 1: Utwórz FrameLayoutkod Java i przekaż go do setContentView().

Krok # 2: Użyj, LayoutInflateraby nadmuchać R.layout.maindo FrameLayout.

Krok # 3: Użyj, LayoutInflateraby nadmuchać nakładkę do pliku FrameLayout.

Krok # 4: Gdy użytkownik naciśnie przycisk (lub cokolwiek), aby odrzucić nakładkę, wywołaj, removeView()aby usunąć nakładkę z FrameLayout.

Ponieważ nakładka jest późniejszym elementem podrzędnym elementu FrameLayout, będzie unosić się nad zawartością R.layout.main.

„Znak trenera” to „Nakładka pomocy” w rozmowie UX :-)

coach_mark.xml to układ znacznika formatki

coach_mark_master_view to identyfikator najwyższego widoku (root) w 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();
}

Dodanie próbki coach_mark.xml (do tego doskonałego rozwiązania podanego przez Oded Breiner), dzięki czemu ppl może łatwo skopiować i wkleić, aby szybko zobaczyć działający przykład.

Przykład coach_mark.xml tutaj, zmień -> drawable / coach_marks na swój obraz:

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>

I opcjonalnie użyj tego motywu, aby usunąć dopełnienie:

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

Możesz to zrobić dość szybko. Dodajesz na przykład LinearLayout, w którym umieszczasz obraz z alfą, który odpowiada Twoim informacjom pomocy i co chcesz narysować jak nakładkę. W tobie xml twojej aktywności umieszczasz ten układ w RelativeLayout po układzie twojej aktywności z widocznością Gone. Aby narysować informacje pomocy, wystarczy ustawić tę widoczność jako widoczną.

Mam nadzieję, że wszystko jasne, jeśli masz jakieś pytania, z przyjemnością na nie odpowiem.

Zobacz moją kolejną odpowiedź, jak programowo pokaż układ nakładki na górze bieżącej aktywności. Plik layout.xml działania nie musi nic wiedzieć o skórze nakładki. Możesz umieścić półprzezroczystą nakładkę, zakryć tylko część ekranu, jeden lub więcej widoków tekstu i przycisków ... Jak programowo nałożyć przycisk?

• utwórz szablon res / layout / paused.xml RelativeLayout lub użyj dowolnego najwyższego poziomu układu
• utwórz funkcję pokazującą nakładkę
• kluczem jest uzyskanie uchwytu do layoutu.xml, użycie klasy LayoutInflater do przeanalizowania XML w celu wyświetlenia obiektu, dodanie widoku nakładki do bieżącej struktury układu
• Mój przykład używa licznika czasu, aby zniszczyć obiekt nakładki, całkowicie usuwając go ze struktury widoku. Prawdopodobnie właśnie tego chcesz, aby się go pozbyć bez śladu.

Moim celem było to, aby główne działania nie były świadome istnienia żadnej nakładki, nakładek przychodzi i odchodzi, wielu różnych nakładek, nadal może używać plików tekstowych overlay1.xml jako szablonu, a zawartość powinna być aktualizowana programowo. Robię prawie to, co powiedział nam CommonsWare, mój post przedstawia rzeczywisty kod programu, aby rozpocząć.

disclaimer: OPs "Dziękuję za wkład. Tak sobie to wyobrażałem. Muszę przyznać uznanie poniższej odpowiedzi" komentarz nie oznacza mojej odpowiedzi, ale odpowiedź CommonsWare. Stackoverflow zmienił kolejność wysyłek.