פריסות בערכת הכלים לממשק המשתמש של Leanback

כתיבה משופרת בעזרת תכונת הכתיבה

אפשר ליצור ממשקי משתמש יפים עם מינימום קוד באמצעות Jetpack Compose ל-Android TV OS.

יצירת מוזיקה לטלוויזיה →

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

שימוש בעיצובים של פריסות בטלוויזיה

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

עיצוב Leanback

הספרייה androidx.leanback שהוצאה משימוש כוללת את Theme.Leanback, ערכת נושא לפעילויות בטלוויזיה שמספקת סגנון חזותי עקבי לאפליקציות של ערכת הכלים Leanback UI. אפשר להשתמש בעיצוב הזה בכל אפליקציית טלוויזיה שנבנתה באמצעות מחלקות AndroidX Leanback. בדוגמת הקוד הבאה אפשר לראות איך להחיל את העיצוב הזה על פעילות:

<activity
  android:name="com.example.android.TvActivity"
  android:label="@string/app_name"
  android:theme="@style/Theme.Leanback">

עיצוב NoTitleBar

סרגל הכותרת הוא רכיב סטנדרטי בממשק המשתמש של אפליקציות ל-Android בטלפונים ובטאבלטים, אבל הוא לא מתאים לאפליקציות לטלוויזיה. אם אתם לא משתמשים במחלקות AndroidX Leanback, אתם צריכים להחיל את NoTitleBar theme על הפעילויות בטלוויזיה כדי למנוע את הצגת סרגל הכותרת. דוגמת הקוד הבאה ממניפסט של אפליקציית טלוויזיה מראה איך להחיל את העיצוב הזה כדי להסיר את התצוגה של סרגל הכותרת:

<application>
  ...
  <activity
    android:name="com.example.android.TvActivity"
    android:label="@string/app_name"
    android:theme="@android:style/Theme.NoTitleBar">
    ...
  </activity>
</application>

עיצובים של AppCompat

באפליקציות לנייד ב-Android, נפוץ מאוד להשתמש ב-AppCompatActivity Theme.AppCompat יחד עם אחד מהעיצובים. השילוב הזה מאפשר לכם להשתמש בתכונות כמו צביעת drawable בלי לדאוג לגבי גרסת Android שפועלת במכשיר. אם אתם מפתחים אפליקציה שפועלת רק ב-Android TV, אל תשתמשו ב-AppCompatActivity, כי התכונות שהוא מאפשר כבר זמינות ב-Android TV או לא רלוונטיות.

אם אתם מפתחים אפליקציה עם בסיס קוד משותף ל-Android לנייד ול-Android TV, יכול להיות שתיתקלו בבעיות שקשורות לעיצוב. ‫AppCompatActivity ורכיבי הווידג'ט השונים של AppCompat מחייבים שימוש ב-Theme.AppCompat, ואילו רכיבי ערכת הכלים לבניית ממשק משתמש של Leanback מחייבים שימוש ב-FragmentActivity וב-Theme.Leanback.

אם אתם צריכים להשתמש באותה פעילות בסיסית ל-Android לנייד ול-Android TV, או אם אתם רוצים להשתמש בתצוגות מותאמות אישית שמבוססות על ווידג'טים של AppCompat כמו AppCompatImageView, אתם יכולים להשתמש בערכות העיצוב של Theme.AppCompat.Leanback. העיצובים האלה כוללים את כל העיצובים של AppCompat וגם מספקים את הערכים הספציפיים ל-Leanback.

אפשר להתאים אישית את העיצובים של Theme.AppCompat.Leanback בדיוק כמו כל עיצוב אחר. לדוגמה, אם רוצים לשנות ערכים שספציפיים לערכת הכלים של ממשק המשתמש Leanback‏ OnboardingSupportFragment, אפשר לעשות משהו דומה לזה:

<style name="MyOnboarding" parent="Theme.AppCompat.Leanback.Onboarding">
    <item name="onboardingLogoStyle">@style/MyOnboardingLogoStyle</item>
    <item name="onboardingPageIndicatorStyle">@style/MyOnboardingPageIndicatorStyle</item>
</style>

יצירת פריסות בסיסיות לטלוויזיה

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

• ליצור פריסות עם כיוון לרוחב. מסכי טלוויזיה תמיד מוצגים במצב לרוחב.
• אפשר להציב את אמצעי הניווט במסך בצד ימין או שמאל של המסך ולשמור את המקום האנכי לתוכן.
• יצירת ממשקי משתמש שמחולקים לקטעים באמצעות fragments. כדי לנצל טוב יותר את השטח האופקי של המסך, כדאי להשתמש בקבוצות תצוגה כמו GridView במקום ListView.
• אפשר להשתמש בקבוצות תצוגה כמו RelativeLayout או LinearLayout כדי לסדר את התצוגות. בגישה הזו, המערכת יכולה להתאים את המיקום של התצוגות לגודל, ליישור, ליחס הגובה-רוחב ולדחיסות הפיקסלים של מסך הטלוויזיה.
• כדי למנוע ממשק משתמש עמוס, צריך להוסיף שוליים מספיקים בין אמצעי הבקרה של הפריסה.

סריקת יתר

לפריסות לטלוויזיה יש דרישות ייחודיות בגלל ההתפתחות של תקני הטלוויזיה, שמציגים תמונה במסך מלא לצופים. לכן, יכול להיות שבמכשירי טלוויזיה יחתכו את הקצה החיצוני של פריסת האפליקציה כדי לוודא שכל המסך מלא. התנהגות כזו נקראת בדרך כלל overscan.

ממקמים את רכיבי המסך שצריכים להיות גלויים למשתמש בכל רגע נתון באזור הבטוח של הסריקה העודפת. הוספת שוליים של 5% (48dp בצד ימין ובצד שמאל, ו-27dp בחלק העליון ובחלק התחתון) לפריסה עוזרת לוודא שרכיבי המסך בפריסה נמצאים באזור הבטוח של הסריקה העודפת.

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

בדוגמה הבאה מוצג פריסת שורש שיכולה להכיל רכיבי רקע ופריסת צאצאים מוטמעת עם שוליים של 5% שיכולה להכיל רכיבים באזור הבטוח של ה-overscan:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <!-- Screen elements that can render outside the overscan-safe area go here. -->

   <!-- Nested RelativeLayout with overscan-safe margin. -->
   <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:layout_marginTop="27dp"
       android:layout_marginBottom="27dp"
       android:layout_marginLeft="48dp"
       android:layout_marginRight="48dp">

      <!-- Screen elements that need to be within the overscan-safe area go here. -->

   </RelativeLayout>

</RelativeLayout>

זהירות: אל תחיל את השוליים של אזור התצוגה על הפריסה אם אתם משתמשים במחלקות AndroidX Leanback, כמו BrowseSupportFragment או בווידג'טים קשורים, כי הפריסות האלה כבר כוללות שוליים בטוחים לאזור התצוגה.

יצירת טקסט ואמצעי בקרה שקל להשתמש בהם

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

• כדאי לחלק את הטקסט לחלקים קטנים שהמשתמשים יכולים לסרוק במהירות.
• שימוש בטקסט בהיר על רקע כהה. קל יותר לקרוא את הסגנון הזה בטלוויזיה.
• אל תשתמשו בגופנים דקים או בגופנים עם קווים צרים ורחבים מאוד. כדי לשפר את הקריאות, כדאי להשתמש בגופנים פשוטים מסוג sans-serif ובטכנולוגיית החלקת קצוות (anti-aliasing).
• שימוש בגדלי הגופן הסטנדרטיים של Android:

  <TextView
        android:id="@+id/atext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:singleLine="true"
        android:textAppearance="?android:attr/textAppearanceMedium"/>

• צריך לוודא שכל הווידג'טים של התצוגה גדולים מספיק כדי שמי שיושב במרחק של 3 מטרים מהמסך יוכל לראות אותם בבירור. הדרך הכי טובה לעשות את זה היא להשתמש בגודל יחסי לפריסה במקום בגודל מוחלט, וביחידות של פיקסלים שאינם תלויים בדחיסות (dp) במקום ביחידות של פיקסלים מוחלטים. לדוגמה, כדי להגדיר את הרוחב של ווידג'ט, משתמשים ב-wrap_content במקום במידה בפיקסלים, וכדי להגדיר את השוליים של ווידג'ט, משתמשים בערכי dp במקום בערכי px.

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

ניהול משאבי פריסה לטלוויזיה

בדומה לכל מכשירי Android אחרים, לטלוויזיות יש גדלי מסך שונים והן תומכות ברזולוציות שונות, כולל, בין היתר, 720p,‏ 1080p ו-4K. חשוב לוודא שהאפליקציה תומכת בגדלים שונים של מסכים.

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

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

דפוסי פריסה שכדאי להימנע מהם

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

• שימוש חוזר בפריסות של טלפון או טאבלט: אל תשתמשו מחדש בפריסות מאפליקציה לטלפון או לטאבלט בלי לבצע שינויים. פריסות שנוצרו עבור גורמי צורה אחרים של מכשירי Android לא מתאימות למכשירי טלוויזיה, וצריך לפשט אותן כדי שיוכלו לפעול בטלוויזיה.
• שימוש ב-ActionBar: מומלץ להשתמש בסרגלי פעולות בטלפונים ובטאבלטים, אבל הם לא מתאימים לממשק של טלוויזיה. לא מומלץ להשתמש בתפריט האפשרויות של סרגל הפעולות או בכל תפריט נפתח אחר באפליקציות לטלוויזיה, כי קשה לנווט בתפריט כזה באמצעות שלט רחוק.
• שימוש ב-ViewPager: החלקה בין מסכים יכולה להיות נוחה מאוד בטלפון או בטאבלט, אבל אל תנסו לעשות את זה בטלוויזיה!

מידע נוסף על עיצוב פריסות שמתאימות לטלוויזיה זמין במדריך עיצוב לטלוויזיה.

טיפול במפות סיביות גדולות

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

פרסום יעיל

בסביבת הצפייה בסלון, מומלץ להשתמש בפתרונות של מודעות וידאו במסך מלא שאפשר לסגור תוך 30 שניות. הפונקציונליות של פרסום ב-Android TV, כמו לחצני סגירה וקליקים על מודעות, צריכה להיות נגישה באמצעות כפתורי החיצים ולא באמצעות מגע.

‫Android TV לא מספק דפדפן אינטרנט. אסור שהמודעות ינסו להפעיל דפדפן אינטרנט או להפנות לתוכן בחנות Google Play שלא אושר להצגה במכשירי Android TV.

הערה: אפשר להשתמש בכיתה WebView לצורך התחברות לשירותי מדיה חברתית.

מקורות מידע נוספים

עיצוב לטלוויזיה