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

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

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

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

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

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

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

עיצוב Leanback

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

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

עיצוב NoTitleBar

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

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

עיצובים לתאימות

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

פיתוח פריסות בסיסיות של הטלוויזיה

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

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

סריקת יתר

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

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

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

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

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

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

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

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

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

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

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

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

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

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

תבניות פריסה שיש להימנע מהן

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

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

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

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

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

לספק פרסום אפקטיבי

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

ב-Android TV אין דפדפן אינטרנט. אסור שהמודעות שלכם ינסו להפעיל דפדפן אינטרנט או להפנות לתוכן שלא שייך לחנות Google Play מאושר למכשירי Android TV.

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

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

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