初めてのユーザーにアプリを最大限に活用する方法を説明するために、アプリの起動時にオンボーディング情報を提示します。オンボーディング情報の例を以下に示します。
- ユーザーが初めてチャンネル アプリにアクセスしたときに、利用可能なチャンネルに関する詳細情報を表示します。
- アプリの注目機能をアピールします。
- アプリを初めて使用するときにユーザーが行う必要のある手順や推奨される手順を示します。
androidx.leanback ライブラリには、初回ユーザー情報を表示するための OnboardingSupportFragment
クラスが用意されています。このガイドでは、OnboardingSupportFragment
クラスを使用して、アプリの初回起動時に表示される基本情報を提示する方法について説明します。
OnboardingSupportFragment
は、TV UI に関するおすすめの方法に沿って、TV UI のスタイルに合わせて情報を表示し、TV デバイスで簡単に操作できるようにします。
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
オブジェクトを使用して、表示済みとしてマークします。これを行うには、OnboardingSupportFragment
の onFinishFragment()
をオーバーライドし、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
が提供できるカスタマイズ可能なページ要素を、吹き出しで示しています。ページ要素は以下のとおりです。
- ページのタイトル。
- ページの説明。
- ページのコンテンツ ビュー。この例では、グレーのボックスに緑色のシンプルなチェックマークが表示されています。 このビューは省略可能です。このビューを使用して、ページの詳細を説明します。たとえば、ページで説明されているアプリの機能をハイライト表示したスクリーンショットを追加できます。
- ページ バックグラウンド ビュー。今回の例の場合は、シンプルな青色のグラデーションを表示しています。このビューは常に、ページ上の他のビューの背後に表示されます。このビューは省略可能です。
- ページ フォアグラウンド ビュー。今回の例の場合は、ロゴを表示しています。このビューは、常にページ上の他のすべてのビューの前にレンダリングされます。このビューは省略可能です。
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
をロゴ画面として表示する場合は、OnboardingSupportFragment
の onCreate()
メソッドで、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; }