Come creare una visita guidata per un'applicazione Android

Question

Un paio di mesi fa mi sono comprato un HTC ONE X. Ho ammirato il modo in cui guidano l'utente a muovere i primi passi nel telefono con widget interattivi e funzioni di aiuto.

Vorrei aggiungere questo tipo di funzionalità a Rogerthat, l'app che stiamo costruendo, ma mi chiedo se ci sono strumenti/librerie che possono aiutarmi a raggiungere questo obiettivo?

Answer 1

Ho fatto un tour guidato per la mia app che consente all'utente di navigare tra 4 pagine di note e vedere le istruzioni. Ecco il codice:

public static void tour(final Context context, final String title, final int pageNumber, 
         final Drawable icon, final String[] pageMessage, final int[] layouts, final ViewGroup root) { 
    Builder tourDialog = new AlertDialog.Builder(context); 
    int nPage = 0; 


    if (pageMessage!=null){ 
     tourDialog.setMessage(pageMessage[pageNumber]); 
     nPage = pageMessage.length; 
    } 

    if (layouts!=null){   
     LayoutInflater inflater = (LayoutInflater) context.getSystemService(Activity.LAYOUT_INFLATER_SERVICE); 
     View layout1 = inflater.inflate(layouts[pageNumber], root); 
     tourDialog.setView(layout1); 
     //tourDialog.setView(views[pageNumber]); 
     nPage = layouts.length; 
    } 


    tourDialog.setTitle(title+" (page "+(pageNumber+1)+"/"+nPage+")"); 

    tourDialog.setPositiveButton("Prev", 
      new DialogInterface.OnClickListener() { 
       @Override 
       public void onClick(DialogInterface dialog, int whichButton) { 
        tour(context, title, pageNumber-1, icon, pageMessage,layouts, root); 
        return; 
       } 
      }); 


    tourDialog.setNeutralButton("Next", 
      new DialogInterface.OnClickListener() { 
       @Override 
       public void onClick(DialogInterface dialog, int whichButton) { 
        tour(context, title, pageNumber+1, icon, pageMessage,layouts, root); 
        return; 
       } 
      }); 
    tourDialog.setNegativeButton("Ok", 
      new DialogInterface.OnClickListener() { 
       @Override 
       public void onClick(DialogInterface dialog, int whichButton) { 
        return; 
       } 
      }); 
    if (icon!=null) 
     tourDialog.setIcon(icon); 
    AlertDialog dialog = tourDialog.create(); 

    dialog.show(); 

    if (pageNumber==0) 
     dialog.getButton(AlertDialog.BUTTON_POSITIVE).setEnabled(false); 
    else if (pageNumber==nPage-1){ 
     dialog.getButton(AlertDialog.BUTTON_NEUTRAL).setEnabled(false); 
    } 
} 

Esempio di utilizzo:

int[] layout = {R.layout.note1, R.layout.note2, R.layout.note3, R.layout.note4}; //resource id of each page's layout 
tour(context, "Notes ", 0,getResources().getDrawable(R.drawable.gmpte_logo_25px),null, layout, (ViewGroup) findViewById(R.id.root)); 

e un esempio di layout di pagina Nota:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:id="@+id/root" 
    android:padding="10dip"> 

<TextView android:id="@+id/text_before" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:textColor="#FFF" 
      android:textSize="16dp" 
      android:text="@string/note1_before_text" 
      android:layout_marginTop="10dp"/> 
<ImageView android:id="@+id/image" 
      android:contentDescription="@string/desc" 
      android:src="@drawable/mylocation_blue" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_toRightOf="@+id/text_before" 
      /> 
<TextView 
    android:id="@+id/text_after" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_alignLeft="@+id/text_before" 
    android:layout_below="@+id/image" 
    android:text="@string/note1_after_text" 
    android:textColor="#FFF" 
    android:textSize="16dp" /> 
</RelativeLayout> 

Hai bisogno di scrivere il proprio layout per ogni pagina nota, ma utilizzare lo stesso id (android:id="@+id/root") per il layout radice in ogni pagina.

Answer 2

Roman Nurik ha creato una libreria chiamata "Pager Wizard" per fare questo genere di cose. Potrebbe essere probabilmente usato per fare quello che stai chiedendo.

https://plus.google.com/113735310430199015092/posts/6cVymZvn3f4

http://code.google.com/p/romannurik-code/source/browse/misc/wizardpager

Aggiornamento:

Penso che questo potrebbe anche essere utile a voi. È simile al tour mostrato quando esegui per la prima volta una rom Android per Android in ICS +.

La libreria può essere utilizzato in qualsiasi versione di Android:

https://github.com/Espiandev/ShowcaseView

Se volete consecutivo vetrine si può guardare a questo expansio:

https://github.com/blundell/ShowcaseViewExample

Answer 3

Usa un ViewPager e un frammento per mostrare le schermate di aiuto. Troverete molte informazioni al riguardo.

Answer 4

Il Showcase View Library è sicuramente quello che si vuole:

Answer 5

ho scritto piccola biblioteca che contiene un componente semplice per fare un tour app. È molto limitato al mio caso, ma forse potrebbe essere il tuo caso. Single LessonCardView Visualizzato per la prima volta su attivit o sul pulsante clic Qualsiasi critica, aiuto o consiglio sara apprezzata. grazie https://github.com/dnocode/DnoLib