初めてのユーザーに、アプリを最大限に活用する方法を示すには、 オンボーディング情報を提供します。オンボーディングの例を 含まれます
- ユーザーがどのチャンネルを使用できるかの詳細情報を表示する ユーザーが初めてチャンネルアプリにアクセスしたとき
- アプリの注目機能をアピールします。
- ユーザーが行うべき手順や推奨される手順を説明する ユーザーになったとします
androidx.leanback ライブラリ
OnboardingSupportFragment クラス:
初回ユーザー情報の表示ですこのガイドでは、
提示するクラス OnboardingSupportFragment 個
アプリの初回起動時に表示される基本情報
あります。
OnboardingSupportFragment は TV UI を使用します
TV UI のスタイルに合った方法で情報を表示するためのベスト プラクティス
テレビデバイスでも操作しやすいです
図 1. 例
OnboardingSupportFragment。
OnboardingSupportFragment は、すべてのユースケースに適しているわけではありません。
以下を含める必要がある場合は OnboardingSupportFragment を使用しないでください
ボタンやフィールドなど、ユーザー入力が必要な UI 要素。
また、ユーザーが行うタスクに OnboardingSupportFragment を使用しないでください。
定期的に確認しましょう。最後に、マルチページの UI を表示する必要がある場合は、
使用する場合は、
GuidedStepSupportFragment。
OnboardingSupportFragment を追加する
OnboardingSupportFragment を追加するには
実装するには、Terraform 言語を拡張するクラスを
OnboardingSupportFragment クラス。追加
レイアウト XML を使用するか、アクティビティのいずれかを使用して、このフラグメントをアクティビティに
できます。アクティビティまたは
フラグメントが、
Theme_Leanback_Onboarding,
テーマをカスタマイズするをご覧ください。
次の onCreate() メソッドで、
アプリのメイン アクティビティ、
startActivity()
次のポイントを指す Intent を使用します。
OnboardingSupportFragment の親アクティビティ。
これにより
OnboardingSupportFragment の表示形式
すぐに利用可能になります
Google Cloud の
OnboardingSupportFragment は、
ユーザーが初めてアプリを起動したときに、
SharedPreferences オブジェクト
ユーザーがそのページを閲覧したことがあるか
OnboardingSupportFragment。ブール値を定義する
ユーザーが閲覧を終了すると true に変わります。
OnboardingSupportFragment。確認
この値は、メイン アクティビティの
onCreate() メソッドを使用し、
次の場合の親アクティビティ: OnboardingSupportFragment
値は false です。
次の例は、以下を確認する onCreate() のオーバーライドを示しています。
SharedPreferences 値。true に設定されていない場合、次のメソッドが呼び出されます。
startActivity() を使用して OnboardingSupportFragment を表示します。
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 オブジェクトを使用します。これを行うには、
onFinishFragment()
を OnboardingSupportFragment に設定し、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
一連の順序付きページにコンテンツを表示します。新しい P-MAX キャンペーンを
OnboardingSupportFragment には、次を定義する必要があります
オンボーディングページで確認できます。各ページには、タイトル、説明、
サブビューを複数作成することもできます。
図 2. 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
使用する場合は、
setLogoResourceId()
（Drawable の ID に置き換えます）
（onCreate()）
メソッド OnboardingSupportFragment を使用してください。
システムがフェードインして、
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(); }
kubectl コマンドの
Animator オブジェクトと
AnimatorSet オブジェクトについては、以下をご覧ください。
<ph type="x-smartling-placeholder"></ph>
プロパティ アニメーションの概要をご覧ください。
テーマをカスタマイズする
すべての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カスタム アクティビティ テーマの 2 つの属性を宣言します。この属性に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; }