初めてのユーザーにアプリを紹介する

初めてのユーザーにアプリを最大限に活用する方法を説明するには、アプリの起動時にオンボーディング情報を提示します。オンボーディング情報の例を以下に示します。

  • ユーザーが最初にチャンネル アプリにアクセスしたときに、使用可能なチャンネルに関する詳細情報を表示します。
  • アプリの注目機能をアピールします。
  • ユーザーが初めてアプリを使用する際の必須または推奨の手順を説明する。

Leanback AndroidX ライブラリには、初めてのユーザーに情報を提供するための OnboardingSupportFragment クラスが用意されています。このガイドでは、OnboardingSupportFragment クラスを使用して、アプリの初回起動時に表示される導入情報を提示する方法について説明します。

OnboardingSupportFragment は、TV UI のベスト プラクティスを使用して、TV UI のスタイルに合わせ、TV デバイスで簡単に操作できるように情報を表示します。

図 1. OnboardingSupportFragment の例。

OnboardingSupportFragment は、すべてのユースケースに適しているわけではありません。ボタンやフィールドなど、ユーザー入力を必要とする UI 要素を含める必要がある場合は、OnboardingSupportFragment を使用しないでください。また、ユーザーが定期的に行うタスクには OnboardingSupportFragment を使用しないでください。最後に、ユーザー入力が必要なマルチページ UI を表示する必要がある場合は、GuidedStepSupportFragment の使用を検討してください。

OnboardingSupportFragment を追加する

アプリに OnboardingSupportFragment を追加するには、OnboardingSupportFragment クラスを拡張するクラスを実装します。アクティビティのレイアウト XML を使用するか、プログラマティックに、このフラグメントをアクティビティに追加します。テーマをカスタマイズするセクションの説明のとおり、アクティビティまたはフラグメントが Theme_Leanback_Onboarding から派生したテーマを使用していることを確認します。

アプリのメイン アクティビティの onCreate() メソッドで、OnboardingSupportFragment の親アクティビティを指す Intent を使用して startActivity() を呼び出します。これにより、アプリが起動したらすぐに OnboardingSupportFragment が表示されるようになります。

ユーザーが初めてアプリを起動したときにのみ OnboardingSupportFragment が表示されるようにするには、SharedPreferences オブジェクトを使用して、ユーザーがすでに OnboardingSupportFragment を表示したかどうかを追跡します。ユーザーが OnboardingSupportFragment の表示を終了したときに true に変わるブール値を定義します。メイン アクティビティの onCreate() メソッドでこの値を確認し、値が false の場合にのみ OnboardingSupportFragment 親アクティビティを開始します。

次の例は、SharedPreferences 値を確認し、true に設定されていない場合は startActivity() を呼び出して OnboardingSupportFragment を表示する onCreate() のオーバーライドを示しています。

Kotlin

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    PreferenceManager.getDefaultSharedPreferences(this).apply {
        // Check if we need to display our OnboardingSupportFragment
        if (!getBoolean(MyOnboardingSupportFragment.COMPLETED_ONBOARDING_PREF_NAME, false)) {
            // The user hasn't seen the OnboardingSupportFragment yet, so show it
            startActivity(Intent(this@OnboardingActivity, OnboardingActivity::class.java))
        }
    }
}

Java

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    SharedPreferences sharedPreferences =
            PreferenceManager.getDefaultSharedPreferences(this);
    // Check if we need to display our OnboardingSupportFragment
    if (!sharedPreferences.getBoolean(
            MyOnboardingSupportFragment.COMPLETED_ONBOARDING_PREF_NAME, false)) {
        // The user hasn't seen the OnboardingSupportFragment yet, so show it
        startActivity(new Intent(this, OnboardingActivity.class));
    }
}

ユーザーが OnboardingSupportFragment を表示したら、SharedPreferences オブジェクトを使用して、表示済みとしてマークします。そのためには、次の例に示すように、OnboardingSupportFragmentonFinishFragment() をオーバーライドして、SharedPreferences 値を true に設定します。

Kotlin

override fun onFinishFragment() {
    super.onFinishFragment()
    // User has seen OnboardingSupportFragment, so mark our SharedPreferences
    // flag as completed so that we don't show our OnboardingSupportFragment
    // the next time the user launches the app
    PreferenceManager.getDefaultSharedPreferences(context).edit().apply {
        putBoolean(COMPLETED_ONBOARDING_PREF_NAME, true)
        apply()
    }
}

Java

@Override
protected void onFinishFragment() {
    super.onFinishFragment();
    // User has seen OnboardingSupportFragment, so mark our SharedPreferences
    // flag as completed so that we don't show our OnboardingSupportFragment
    // the next time the user launches the app
    SharedPreferences.Editor sharedPreferencesEditor =
            PreferenceManager.getDefaultSharedPreferences(getContext()).edit();
    sharedPreferencesEditor.putBoolean(
            COMPLETED_ONBOARDING_PREF_NAME, true);
    sharedPreferencesEditor.apply();
}

OnboardingSupportFragment ページを追加する

OnboardingSupportFragment は、順序付けされた一連のページにコンテンツを表示します。OnboardingSupportFragment を追加したら、オンボーディング ページを定義する必要があります。各ページには、タイトル、説明、複数のサブビュー(画像やアニメーションを含めることができる)を含めることができます。

図 2. OnboardingSupportFragment ページ要素。

図 2 はページの例であり、OnboardingSupportFragment で提供されるカスタマイズ可能なページ要素をコールアウトで示しています。ページ要素は以下のとおりです。

  1. ページのタイトル。
  2. ページの説明。
  3. ページのコンテンツ ビュー。この例では、グレーのボックス内に緑色のシンプルなチェックマークが表示されている。 このビューは省略可能です。このビューは、ページの詳細を示すために使用します。たとえば、ページに記載されているアプリの機能をハイライト表示したスクリーンショットを追加できます。
  4. ページ バックグラウンド ビュー。今回の例の場合は、シンプルな青色のグラデーションを表示しています。このビューは常に、ページ上の他のビューの背後に表示されます。このビューは省略可能です。
  5. ページ フォアグラウンド ビュー。今回の例の場合は、ロゴを表示しています。このビューは常に、ページ上の他のすべてのビューの前面にレンダリングされます。このビューは省略可能です。

フラグメントのビューの作成時にシステムがページ情報をリクエストするため、OnboardingSupportFragment が最初に作成されたとき、または親アクティビティにアタッチされたときにページ情報を初期化します。ページ情報は、クラス コンストラクタか、onAttach() のオーバーライドで初期化できます。

システムにページ情報を提供する次の各メソッドをオーバーライドします。

  • getPageCount() は、OnboardingSupportFragment 内のページ数を返します。
  • getPageTitle() - リクエストされたページ番号のタイトルを返します。
  • getPageDescription() は、リクエストされたページ番号の説明を返します。

次の各メソッドをオーバーライドして、画像やアニメーションを表示するオプションのサブビューを提供します。

  • onCreateBackgroundView() は、バックグラウンド ビューとして機能するように作成した View を返します。バックグラウンド ビューが必要ない場合は null を返します。
  • onCreateContentView() は、コンテンツ ビューとして機能するように作成した View を返します。コンテンツ ビューが必要ない場合は null を返します。
  • onCreateForegroundView() は、フォアグラウンド ビューとして機能するように作成した View を返します。フォアグラウンド ビューが必要ない場合は null を返します。

作成した View はページ レイアウトに追加されます。次の例では、onCreateContentView() をオーバーライドして ImageView を返します。

Kotlin

private lateinit var contentView: ImageView
...
override fun onCreateContentView(inflater: LayoutInflater?, container: ViewGroup?): View? {
    return ImageView(context).apply {
        scaleType = ImageView.ScaleType.CENTER_INSIDE
        setImageResource(R.drawable.onboarding_content_view)
        setPadding(0, 32, 0, 32)
        contentView = this
    }
}

Java

private ImageView contentView;
...
@Override
protected View onCreateContentView(LayoutInflater inflater, ViewGroup container) {
    contentView = new ImageView(getContext());
    contentView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
    contentView.setImageResource(R.drawable.onboarding_content_view);
    contentView.setPadding(0, 32, 0, 32);
    return contentView;
}

初期ロゴ画面を追加する

OnboardingSupportFragment は、アプリを紹介するオプションのロゴ画面から始めることができます。ロゴ画面として Drawable を表示する場合は、OnboardingSupportFragmentonCreate() メソッドで Drawable の ID を指定して setLogoResourceId() を呼び出します。システムが Drawable をフェードインして短時間表示してから、Drawable をフェードアウトしてから OnboardingSupportFragment の最初のページを表示します。

ロゴ画面にカスタム アニメーションを表示する場合は、次の例に示すように、setLogoResourceId() を呼び出す代わりに onCreateLogoAnimation() をオーバーライドして、カスタム アニメーションをレンダリングする Animator オブジェクトを返します。

Kotlin

public override fun onCreateLogoAnimation(): Animator =
        AnimatorInflater.loadAnimator(context, R.animator.onboarding_logo_screen_animation)

Java

@Override
public Animator onCreateLogoAnimation() {
    return AnimatorInflater.loadAnimator(getContext(),
            R.animator.onboarding_logo_screen_animation);
}

ページ アニメーションをカスタマイズする

OnboardingSupportFragment の最初のページを表示するときと、ユーザーが別のページに移動したときに、システムはデフォルトのアニメーションを使用します。これらのアニメーションをカスタマイズするには、OnboardingSupportFragment のメソッドをオーバーライドします。

最初のページに表示されるアニメーションをカスタマイズするには、onCreateEnterAnimation() をオーバーライドして Animator を返します。次の例では、コンテンツ ビューを水平方向にスケーリングする Animator を作成します。

Kotlin

override fun onCreateEnterAnimation(): Animator =
    ObjectAnimator.ofFloat(contentView, View.SCALE_X, 0.2f, 1.0f)
            .setDuration(ANIMATION_DURATION)

Java

@Override
protected Animator onCreateEnterAnimation() {
    Animator startAnimator = ObjectAnimator.ofFloat(contentView,
            View.SCALE_X, 0.2f, 1.0f).setDuration(ANIMATION_DURATION);
    return startAnimator;
}

ユーザーが別のページに移動したときに使用するアニメーションをカスタマイズするには、onPageChanged() をオーバーライドします。onPageChanged() メソッドで、前のページを削除して次のページを表示する Animator オブジェクトを作成し、それらを AnimatorSet に追加して、そのセットを再生します。次の例では、フェードアウト アニメーションで前のページを削除し、コンテンツ ビューの画像を更新し、フェードイン アニメーションで次のページを表示しています。

Kotlin

override fun onPageChanged(newPage: Int, previousPage: Int) {
    // Create a fade-out animation for previousPage and, once
    // done, swap the contentView image with the next page's image
    val fadeOut = ObjectAnimator.ofFloat(mContentView, View.ALPHA, 1.0f, 0.0f)
            .setDuration(ANIMATION_DURATION)
            .apply {
                addListener(object : AnimatorListenerAdapter() {

                    override fun onAnimationEnd(animation: Animator) {
                        mContentView.setImageResource(pageImages[newPage])
                    }
                })
            }
    // Create a fade-in animation for nextPage
    val fadeIn = ObjectAnimator.ofFloat(mContentView, View.ALPHA, 0.0f, 1.0f)
            .setDuration(ANIMATION_DURATION)
    // Create AnimatorSet with fade-out and fade-in animators and start it
    AnimatorSet().apply {
        playSequentially(fadeOut, fadeIn)
        start()
    }
}

Java

@Override
protected void onPageChanged(final int newPage, int previousPage) {
    // Create a fade-out animation for previousPage and, once
    // done, swap the contentView image with the next page's image
    Animator fadeOut = ObjectAnimator.ofFloat(mContentView,
            View.ALPHA, 1.0f, 0.0f).setDuration(ANIMATION_DURATION);
    fadeOut.addListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationEnd(Animator animation) {
            mContentView.setImageResource(pageImages[newPage]);
        }
    });
    // Create a fade-in animation for nextPage
    Animator fadeIn = ObjectAnimator.ofFloat(mContentView,
            View.ALPHA, 0.0f, 1.0f).setDuration(ANIMATION_DURATION);
    // Create AnimatorSet with fade-out and fade-in animators and start it
    AnimatorSet set = new AnimatorSet();
    set.playSequentially(fadeOut, fadeIn);
    set.start();
}

Animator オブジェクトと AnimatorSet オブジェクトの作成方法について詳しくは、 プロパティ アニメーションの概要をご覧ください。

テーマをカスタマイズする

OnboardingSupportFragment の実装では、Theme_Leanback_Onboarding テーマ、または Theme_Leanback_Onboarding を継承するテーマのいずれかを使用する必要があります。次のいずれかの方法で、OnboardingSupportFragment のテーマを設定します。

  • 目的のテーマを使用するように OnboardingSupportFragment の親アクティビティを設定します。次の例は、アプリ マニフェストで Theme_Leanback_Onboarding を使用するようにアクティビティを設定する方法を示しています。
    <activity
       android:name=".OnboardingActivity"
       android:enabled="true"
       android:exported="true"
       android:theme="@style/Theme.Leanback.Onboarding">
    </activity>
    
  • カスタム アクティビティ テーマで LeanbackOnboardingTheme_onboardingTheme 属性を使用して、親アクティビティのテーマを設定します。この属性を、アクティビティ内の OnboardingSupportFragment オブジェクトのみが使用する別のカスタムテーマにポイントします。アクティビティですでにカスタムテーマを使用していて、アクティビティ内の他のビューに OnboardingSupportFragment スタイルを適用したくない場合は、この方法を使用します。
  • onProvideTheme() をオーバーライドして、目的のテーマを返します。複数のアクティビティが OnboardingSupportFragment を使用している場合や、親アクティビティが目的のテーマを使用できない場合は、この方法を使用します。次の例では、onProvideTheme() をオーバーライドして Theme_Leanback_Onboarding を返します。

    Kotlin

    override fun onProvideTheme(): Int = R.style.Theme_Leanback_Onboarding
    

    Java

    @Override
    public int onProvideTheme() {
       return R.style.Theme_Leanback_Onboarding;
    }