アンドロイドアプリケーションのガイド付きツアーを作成する方法

Question

数ヶ月前にHTC ONE Xを購入しました。インタラクティブなウィジェットとヘルプ機能を使用して、ユーザーが最初の手順を携帯電話で行う方法を賞賛しました。

この種の機能を私たちが構築しているアプリであるRogerthatに追加したいと思いますが、これを達成するためのツールやライブラリがあるのでしょうか？

Answer 1

私は、ユーザーが4つのノートページをナビゲートできるように、ガイドを見ました。

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

使用例：

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

やノートページレイアウトの例：ここでは、コードです

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

あなたは各ノートのページのための独自のレイアウトを記述する必要があるが、しかし、各ページのルートレイアウトに同じID（android:id="@+id/root"）を使用します。

Answer 2

ローマンNurikは、この種のことを行うために "Wizard Pager"というライブラリをまとめました。それは、あなたが求めていることをするために使用される可能性があります。

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

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

更新：

私は、これはまた、あなたに役立つかもしれないと思います。これは、ICS +で最初に在庫Androidロムを実行したときに表示されたツアーに似ています。

ライブラリーは、Androidのすべてのバージョンで使用することができます：

https://github.com/Espiandev/ShowcaseView

あなたはこのexpansioを見ることができる展示あなたが連続した場合：

https://github.com/blundell/ShowcaseViewExample

Answer 3

ViewPagerとフラグメントを使用してヘルプ画面を表示します。あなたはそれについてたくさんの情報を見つけるでしょう。

Answer 4

Showcase View Libraryは何をしたい間違いです：

Answer 5

私はアプリのツアーを作るためのシンプルなコンポーネントが含まれていることを少しライブラリ を書きました。 私の場合には非常に制限されていますが、おそらくあなたのケースになる可能性があります。 Single LessonCardView初回起動時に表示された またはボタンをクリックしてください 批判、助言またはアドバイスをいただければ幸いです。ありがとう https://github.com/dnocode/DnoLib