Jak utworzyć półprzezroczystą szarą nakładkę samouczka w systemie Android?

Question

Wiesz, kiedy pierwszy raz uruchamiasz urządzenie z systemem Android (coś, co widzisz bardzo często, jeśli używasz emulatora), jest mały samouczek dotyczący używania programu uruchamiającego i dodawania widżetów itp. Próbuję znaleźć przykład tego w Google, ale nie mogę. Mam nadzieję, że wiesz o co mi chodzi. To ten z niebieskimi przyciskami "w porządku" na każdym kroku.

W każdym razie chcę utworzyć dla mojej aplikacji, ale nie jestem pewien, jaki jest najlepszy sposób na zrobienie tego.

Czy mogę utworzyć Fragment, który mogę uczynić półprzezroczystym w stosunku do mojej zwykłej aktywności i czy pojawia się tylko przy pierwszym uruchomieniu?

Czy zrobię półprzezroczysty plik .png dla każdej sekcji samouczka i nałożę go na zwykłe działanie programu uruchamiającego w pierwszym uruchomieniu?

Jeśli robię to drugie, w jaki sposób mogę dopasować dla wszystkich różnych rozmiarów ekranu? Mogę po prostu renderować obraz w Photoshopie do różnych wymiarów, ale to nie pokryje wszystkich z nich. Jeśli przejdę do fragmentu trasy, mogę po prostu powiedzieć "match_parent" i nie martw się o to. Ale muszę się dowiedzieć, jak działają Fragmenty, i oni mnie mylą.

Answer 1

Myślę, że ta biblioteka open-source jest dokładnie to, czego szukasz:

Showcase View

Możesz pobrać kod źródłowy i instrukcje konfiguracji od GitHub.

Answer 2

Nie musisz używać Photoshopa. Możesz użyć na przykład LinearLayout z android:background="#50134BE8". To sprawi, że będzie przezroczysty niebieski. Możesz umieścić układ na górze wszystkiego i ukryć go, gdy użytkownik skończy. Możesz użyć dowolnego koloru tła, ale aby uczynić go przezroczystym, umieść numer od 01 do FE, po symbolu "#", aby zmienić jego przezroczystość. Ustaw szerokość i wysokość na fill_parent, aby zająć cały obszar. Umieść ten widok bezpośrednio w głównym układzie. Mam nadzieję że to pomoże.

Answer 3

Można spróbować czegoś jak ten

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

I w onCreate metody

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

Użyj szesnastkowy kod koloru, który składa się z dwóch cyfrdla alfa i sześć dla samego koloru, jak ten:

android:background="#22FFFFFF" 

To będzie zrobić to półprzezroczyste.

android:background="#c0000000" for more darkness 

Zmieniano

Ogólnie hexadecimak struktura kod koloru jest jak '#FFFF'

dla osiągnięcia przejrzystości po '#' dodać dwa do każdej cyfry kodu koloru.

Np: #110000, #220000, #330000.

Im większe są te dwie cyfry, tym mniejsza przezroczystość.

Answer 5

Nie

jest nagradzana biblioteka dla tej zwanej "FancyShowcaseView":

https://github.com/faruktoptas/FancyShowCaseView

Dodaj do projektu tak:

W najwyższym poziomiebuild.gradle (nie na poziomie modułu):

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

W moduł poziomie (app) build.gradle

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

Następnie można wywołać:

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