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

Compose でビルドを改善する
Android TV OS 用の Jetpack Compose を使用して、最小限のコードで美しい UI を作成します。
<ph type="x-smartling-placeholder"></ph> テレビ向け Compose →

初めてのユーザーに、アプリを最大限に活用する方法を示すには、 オンボーディング情報を提供します。オンボーディングの例を 含まれます

  • ユーザーがどのチャンネルを使用できるかの詳細情報を表示する ユーザーが初めてチャンネルアプリにアクセスしたとき
  • アプリの注目機能をアピールします。
  • ユーザーが行うべき手順や推奨される手順を説明する ユーザーになったとします

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 が保持する要素 提供できます。ページ要素は以下のとおりです。

  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 使用する場合は、 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;
}
前へ
トランスポート コントロールを使用する
次へ
手順ガイドを追加する