Wie erstelle ich das halbtransparente graue Tutorial-Overlay in Android?

Question

Sie wissen, wenn Sie ein Android-Gerät zum ersten Mal ausführen (etwas sehen Sie viel, wenn Sie den Emulator verwenden), dass es ein hilfreiches kleines Tutorial über die Verwendung des Launcher und Hinzufügen von Widgets, etc. Ich versuche zu finden Ein Beispiel dafür bei Google, aber ich kann nicht. Ich hoffe du weißt was ich meine. Es ist der mit den blauen "OK" -Knöpfen bei jedem Schritt.

Wie auch immer, ich möchte einen für meine App erstellen, aber ich bin mir nicht sicher, welcher der beste Weg ist, es zu tun.

Erstelle ich ein Fragment, das ich zusätzlich zu meiner normalen Aktivität halbtransparent machen kann, damit es nur beim ersten Durchlauf angezeigt wird?

Erstelle ich für jeden Abschnitt des Lernprogramms eine halbtransparente .png und überlagere sie beim ersten Lauf über die normale Launcher-Aktivität?

Wenn ich die letztere, wie kann ich für alle verschiedenen Bildschirmgrößen anpassen? Ich könnte das Bild in Photoshop in verschiedene Dimensionen rendern, aber das wird nicht alles abdecken. Wenn ich die Fragment-Route gehe, kann ich einfach "match_parent" sagen und mir keine Sorgen machen. Aber dann muss ich herausfinden, wie Fragmente funktionieren, und sie verwirren die Hölle aus mir heraus.

Answer 1

Ich denke, die Open-Source-Bibliothek ist genau das, was Sie suchen:

Showcase View

Sie können den Quellcode und Setup-Anweisungen von GitHub greifen.

Answer 2

Sie müssen Photoshop nicht verwenden. Sie können zum Beispiel ein LinearLayout mit android:background="#50134BE8" verwenden. Dies wird es blau transparent machen. Sie können das Layout über alles legen und es ausblenden, wenn der Benutzer fertig ist. Sie können eine beliebige Hintergrundfarbe verwenden, aber um sie transparent zu machen, platzieren Sie eine Zahl von 01 bis FE, nach dem Symbol "#", um die Transparenz zu ändern. Stellen Sie die Breite und die Höhe auf fill_parent ein, um die gesamte Fläche zu belegen. Platzieren Sie diese Ansicht direkt im Hauptlayout. Hoffe das hilft.

Answer 3

Sie können dies so etwas wie versuchen

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

Und in Ihrer onCreate Methode

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

Answer 4

einen hexadezimalen Farbcode verwenden, die aus zwei Ziffern besteht für alpha und sechs für die Farbe selbst, wie folgt aus:

android:background="#22FFFFFF" 

Es schaffst es halbtransparent.

android:background="#c0000000" for more darkness 

Herausgegeben

Allgemeinen hexadecimak Farbcodestruktur ist wie '#FFFF'

Zur Erreichung Transparenz zwei Stellen nach dem '#' in einem Farbcode.

ZB: #110000, #220000, #330000.

Je größer diese zwei Ziffern, desto geringer die Transparenz.

Answer 5

Es ist eine preisgekrönte Bibliothek für diese "FancyShowcaseView" genannt:

https://github.com/faruktoptas/FancyShowCaseView

zu einem Projekt wie folgt hinzufügen:

Im Top-Level-build.gradle (nicht die Modulebene):

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

Im Modulebene (app) build.gradle

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

Dann können Sie anrufen:

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