הצגת האפליקציה למשתמשים חדשים

משפרים את הפיתוח באמצעות 'כתיבה'

בעזרת 'Jetpack פיתוח נייטיב' ל-Android TV תוכלו ליצור ממשקי משתמש יפהפיים עם כמה שפחות קוד.

כתיבת הודעה לטלוויזיה ←

כדי להראות למשתמש חדש איך להפיק את המקסימום מהאפליקציה, יש להציג מידע על תהליך ההפעלה של האפליקציה במהלך ההפעלה. כמה דוגמאות למשתמשים חדשים מידע:

• להציג מידע מפורט על הערוצים הזמינים כשמשתמש ניגש לאפליקציה של הערוץ.
• כדאי להסב את תשומת הלב לתכונות חשובות באפליקציה.
• המחשת פעולות שנדרשות או מומלצות שהמשתמשים צריכים לבצע כאשר באמצעות האפליקציה בפעם הראשונה.

ספריית androidx.leanback מספקת כיתה אחת (OnboardingSupportFragment) עבור הצגת מידע על משתמש חדש. במדריך הזה נסביר איך להשתמש כיתה אחת (OnboardingSupportFragment) להצגה מידע מבוא שמוצג כשהאפליקציה מופעלת בפעם הראשונה בזמן האימון.

האפליקציה OnboardingSupportFragment משתמשת בממשק המשתמש של הטלוויזיה שיטות מומלצות להצגת מידע באופן שתואם לסגנונות של ממשק המשתמש בטלוויזיה וקל לנווט בו במכשירי טלוויזיה.

איור 1. דוגמה OnboardingSupportFragment

השיטה OnboardingSupportFragment לא מתאימה לכל תרחיש לדוגמה. אין להשתמש במאפיין OnboardingSupportFragment כשיש צורך לכלול רכיבים בממשק המשתמש שנדרשים להם קלט של משתמשים, כמו לחצנים ושדות. בנוסף, אין להשתמש ב-OnboardingSupportFragment למשימות שהמשתמש יבצע באופן קבוע. לבסוף, אם אתם צריכים להציג ממשק משתמש מרובה דפים קלט של משתמשים, כדאי להשתמש GuidedStepSupportFragment

הוספת OnboardSupportFragment

כדי להוסיף OnboardingSupportFragment באפליקציה, להטמיע מחלקה שמתרחבת הכיתה OnboardingSupportFragment. הוסף את המקטע הזה לפעילות, באמצעות פריסת ה-XML של הפעילות או באופן פרוגרמטי. חשוב לוודא שהפעילות משתמש בעיצוב שנגזר מ- Theme_Leanback_Onboarding, כמו שמתואר בקטע התאמה אישית של עיצובים.

בשיטה onCreate() של הפעילות העיקרית של האפליקציה, התקשרות startActivity() עם Intent שמצביע אל פעילות ההורה של OnboardingSupportFragment. כך אנחנו יכולים לוודא שהמאפיינים OnboardingSupportFragment מופיע בתור ברגע שהאפליקציה מופעלת.

כדי להבטיח OnboardingSupportFragment מופיע רק בפעם הראשונה שהמשתמש מפעיל את האפליקציה, השתמשו אובייקט SharedPreferences כדי לבדוק אם המשתמש כבר צפה OnboardingSupportFragment הגדרת ערך בוליאני שמשתנה ל-True כשהמשתמש מסיים לצפות OnboardingSupportFragment לבדיקה בערך הזה בפעילות העיקרית השיטה onCreate() ורק מתחילים פעילות הורה של OnboardingSupportFragment אם שהערך הוא False.

בדוגמה הבאה מוצג שינוי מברירת המחדל של onCreate() שבודק אם יש הערך של SharedPreferences, ואם הוא לא מוגדר כ-True, הפונקציה startActivity() כדי להציג את OnboardingSupportFragment:

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

@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, כפי שמוצג בדוגמה הבאה:

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

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

הוספת דפים של OnboardSupportFragment

OnboardingSupportFragment מציגה תוכן בסדרה של דפים לפי סדר מסוים. אחרי שמוסיפים את OnboardingSupportFragment, עליך להגדיר בדפי ההדרכה למשתמשים חדשים. לכל דף יכולים להיות כותרת, תיאור כמה תצוגות משנה שיכולות להכיל תמונות או אנימציות.

איור 2. OnboardingSupportFragment מרכיבי הדף.

באיור 2 מוצג דף לדוגמה עם נכסי יתרונות מרכזיים שמסמנים דף בהתאמה אישית. רכיבים ש-OnboardingSupportFragment יכולים לספק. רכיבי הדף הם:

1. כותרת הדף.
2. תיאור הדף.
3. תצוגת תוכן הדף, במקרה זה, סימן וי ירוק פשוט בתיבה אפורה. התצוגה הזו היא אופציונלית. אפשר להשתמש בתצוגה הזו כדי להמחיש את פרטי הדף. לדוגמה, אפשר כוללים צילום מסך שמדגיש את תכונת האפליקציה שהדף מתאר.
4. תצוגת רקע של הדף, במקרה זה, הדרגתיות של צבע כחול פשוט. התצוגה הזו תמיד מוצג מאחורי תצוגות אחרות בדף. התצוגה הזו היא אופציונלית.
5. התצוגה הקדמית של הדף, במקרה הזה, לוגו. התצוגה הזו תמיד מעובדת לפני כל התצוגות האחרות בדף. התצוגה הזו היא אופציונלית.

אתחול פרטי הדף כאשר היצירה של OnboardingSupportFragment היא ראשונה או מצורפות לפעילות ההורה, בתור דף הבקשה של המערכת כאשר הוא יוצר את התצוגה של המקטע. ניתן לאתחל את הדף ב-constructor של המחלקה או לבטל את ההגדרה שלו onAttach()

שינוי כל אחת מהשיטות הבאות, שמספקות פרטי דף למערכת:

• getPageCount() מחזירה את מספר הדפים ב- OnboardingSupportFragment.
• getPageTitle() מחזירה את הכותרת של מספר הדף המבוקש.
• getPageDescription() מחזיר את התיאור של הדף המבוקש מספר.

כדי לספק תצוגות משנה אופציונליות, מומלץ לשנות כל אחת מהשיטות הבאות כדי להציג תמונות או אנימציות:

• onCreateBackgroundView() הפונקציה מחזירה View הגדרה כך שתפעל כתצוגת רקע או ערך null אם לא נדרשת תצוגת רקע.
• onCreateContentView() הפונקציה מחזירה View Create כדי לפעול כתצוגת תוכן או null אם לא נדרשת צפייה בתוכן.
• onCreateForegroundView() הפונקציה מחזירה View יוצרים כך שיפעלו כתצוגה בחזית או כ-null אם לא נדרשת תצוגה קדמית.

המערכת מוסיפה לדף את View שיצרת הפריסה שלו. הדוגמאות הבאות מחליפות את ברירת המחדל onCreateContentView() ומחזירה ImageView:

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

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 בonCreate() של OnboardingSupportFragment. המערכת נעלמת ומציגה לזמן קצר את Drawable, ולאחר מכן עמעום הדרגתי Drawable לפני הצגת הדף הראשון של OnboardingSupportFragment.

אם אתם רוצים לספק אנימציה מותאמת אישית למסך הלוגו, במקום התקשרות אל setLogoResourceId(), שינוי מברירת המחדל onCreateLogoAnimation() ולהחזיר Animator שמבצע רינדור של האנימציה המותאמת אישית, כמו בדוגמה הבאה:

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

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

התאמה אישית של האנימציות בדף

המערכת משתמשת באנימציות ברירת מחדל בעת הצגת הדף הראשון של OnboardingSupportFragment ומתי המשתמש עובר לדף אחר. אפשר להתאים אישית את האנימציות האלה שעולות על השיטות OnboardingSupportFragment

כדי להתאים אישית את האנימציה שמופיעה בדף הראשון: לשנות onCreateEnterAnimation() ומחזירה את הערך Animator. הדוגמה הבאה יוצרת Animator לשינוי קנה המידה של תצוגת התוכן אופקי:

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

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

כדי להתאים אישית את האנימציה שבה המשתמש מנווט לדף אחר: לשנות onPageChanged() ב-method onPageChanged(), יוצרים Animator אובייקטים שמסירים את הדף הקודם ומציגים את הדף הבא, מוסיפים אותם AnimatorSet, ולשחק במערך. הבאים לדוגמה משתמשת באנימציה של יציאה הדרגתית כדי להסיר את הדף הקודם, מעדכנת את תמונה של תצוגת תוכן, ומשתמשת באנימציה הדרגתית כדי להציג את הדף הבא:

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

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