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

פיתוח טוב יותר באמצעות Compose

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

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

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

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

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

עיצוב Leanback

הספרייה androidx.leanback שיצאה משימוש כוללת את Theme.Leanback, נושא לפעילויות בטלוויזיה שמספק סגנון חזותי עקבי לאפליקציות של ערכת הכלים לממשק משתמש של Leanback. אפשר להשתמש בערכת הנושא הזו בכל אפליקציית טלוויזיה שנבנתה באמצעות המחלקות של 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.

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

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

בדוגמה הבאה מוצג פריסת שורש שיכולה להכיל רכיבי רקע ופריסת צאצאים מוטמעת עם שוליים של 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>

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

יצירת טקסט ורכיבי בקרה שנוחים לשימוש

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

• כדאי לחלק את הטקסט למקטעים קצרים שהמשתמשים יכולים לסרוק במהירות.
• שימוש בטקסט בהיר על רקע כהה. קל יותר לקרוא את הסגנון הזה בטלוויזיה.
• אל תשתמשו בגופנים דקים או בגופנים עם קווים צרים ורחבים מאוד. כדי לשפר את הקריאות, כדאי להשתמש בגופני 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 כדי להתחבר לשירותים של רשתות חברתיות.

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

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