שימוש בבקרות התעבורה

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

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

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

אמצעי בקרה ונגן

ערכת הכלים של Leanback UI מפרידה בין ממשק המשתמש של אמצעי הבקרה להפעלה לבין הנגן שמפעיל את הווידאו. ההטמעה מתבצעת באמצעות שני רכיבים: fragment לתמיכה בהפעלה להצגת אמצעי הבקרה להפעלה (ובאופן אופציונלי גם הסרטון) ומתאם נגן לאריזה של נגן מדיה.

הפעלת מקטע

הפעילות בממשק המשתמש של האפליקציה צריכה להשתמש ב-PlaybackSupportFragment או ב-VideoSupportFragment. שניהם מכילים את אמצעי הבקרה של ההפעלה במצב Leanback:

  • ‫A PlaybackSupportFragment מציג אנימציה של אמצעי הבקרה להפעלה, להשהיה ולעצירה כדי להסתיר או להציג אותם לפי הצורך.
  • VideoSupportFragment extends PlaybackSupportFragmentand has a SurfaceView to render video.

אפשר להתאים אישית את ObjectAdapter של קטע כדי לשפר את ממשק המשתמש. לדוגמה, משתמשים ב-setAdapter() כדי להוסיף שורה של 'סרטונים קשורים'.

PlayerAdapter

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

הדבקת החלקים

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

  • PlaybackBannerControlGlue מצייר את אמצעי הבקרה של ההפעלה בקטע ההפעלה ב "סגנון הישן", וממקם אותם בתוך רקע אטום. ‫(PlaybackBannerControlGlue מחליף את PlaybackControlGlue, שהשימוש בו הופסק).
  • PlaybackTransportControlGlue משתמש בפקדים בסגנון חדש עם רקע שקוף.

leanback transport control glue

אם רוצים שהאפליקציה תתמוך בהזזה מהירה של סרטונים, צריך להשתמש ב-PlaybackTransportControlGlue.

צריך גם לציין 'מארח דבק' שמקשר את הדבק לקטע ההפעלה, מצייר את אמצעי הבקרה של ההעברה בממשק המשתמש ושומר על המצב שלהם, ומעביר את אירועי אמצעי הבקרה של ההעברה בחזרה לדבק. המארח צריך להתאים לסוג של קטע ההפעלה. אפשר להשתמש ב-PlaybackSupportFragmentGlueHost עם PlaybackFragment, וב-VideoSupportFragmentGlueHost עם VideoFragment.

איור שמראה איך חלקי בקרת ההפעלה במצב Leanback משתלבים זה בזה:

leanback transport control glue

הקוד שמחבר את האפליקציה צריך להיות בתוך התג PlaybackSupportFragment או VideoSupportFragment שמגדיר את ממשק המשתמש.

בדוגמה הבאה, האפליקציה יוצרת מופע של PlaybackTransportControlGlue, נותנת לו את השם playerGlue ומקשרת את VideoSupportFragment ל-MediaPlayerAdapter שנוצר לאחרונה. מכיוון שזהו VideoSupportFragment, קוד ההגדרה קורא ל-setHost() כדי לצרף VideoSupportFragmentGlueHost ל-playerGlue. הקוד כלול בתוך המחלקה שמרחיבה את VideoSupportFragment.

Kotlin

class MyVideoFragment : VideoSupportFragment() {

  fun onCreate(savedInstanceState: Bundle) {
      super.onCreate(savedInstanceState)
      val playerGlue = PlaybackTransportControlGlue(getActivity(),
          MediaPlayerAdapter(getActivity()))
      playerGlue.setHost(VideoSupportFragmentGlueHost(this))
      playerGlue.addPlayerCallback(object : PlaybackGlue.PlayerCallback() {
          override fun onPreparedStateChanged(glue: PlaybackGlue) {
              if (glue.isPrepared()) {
                  playerGlue.seekProvider = MySeekProvider()
                  playerGlue.play()
              }
          }
      })
      playerGlue.setSubtitle("Leanback artist")
      playerGlue.setTitle("Leanback team at work")
      val uriPath = "android.resource://com.example.android.leanback/raw/video"
      playerGlue.getPlayerAdapter().setDataSource(Uri.parse(uriPath))
  }
}

Java

public class MyVideoFragment extends VideoSupportFragment {

  @Override
  public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      final PlaybackTransportControlGlue<MediaPlayerAdapter> playerGlue =
              new PlaybackTransportControlGlue(getActivity(),
                      new MediaPlayerAdapter(getActivity()));
      playerGlue.setHost(new VideoSupportFragmentGlueHost(this));
      playerGlue.addPlayerCallback(new PlaybackGlue.PlayerCallback() {
          @Override
          public void onPreparedStateChanged(PlaybackGlue glue) {
              if (glue.isPrepared()) {
                  playerGlue.setSeekProvider(new MySeekProvider());
                  playerGlue.play();
              }
          }
      });
      playerGlue.setSubtitle("Leanback artist");
      playerGlue.setTitle("Leanback team at work");
      String uriPath = "android.resource://com.example.android.leanback/raw/video";
      playerGlue.getPlayerAdapter().setDataSource(Uri.parse(uriPath));
  }
}

שימו לב שקוד ההגדרה מגדיר גם PlayerAdapter.Callback לטיפול באירועים מנגן המדיה.

התאמה אישית של ה-UI glue

אפשר להתאים אישית את PlaybackBannerControlGlue ואת PlaybackTransportControlGlue כדי לשנות את PlaybackControlsRow.

התאמה אישית של הכותרת והתיאור

כדי להתאים אישית את הכותרת והתיאור בחלק העליון של אמצעי הבקרה להפעלה, צריך לבטל את ברירת המחדל של onCreateRowPresenter():

Kotlin

override fun onCreateRowPresenter(): PlaybackRowPresenter {
    return super.onCreateRowPresenter().apply {
        (this as? PlaybackTransportRowPresenter)
                ?.setDescriptionPresenter(MyCustomDescriptionPresenter())
    }
}

Java

@Override
protected PlaybackRowPresenter onCreateRowPresenter() {
  PlaybackTransportRowPresenter presenter = (PlaybackTransportRowPresenter) super.onCreateRowPresenter();
  presenter.setDescriptionPresenter(new MyCustomDescriptionPresenter());
  return presenter;
}

הוספת פקדים

הדבק של אמצעי הבקרה מציג אמצעי בקרה לפעולות ב-PlaybackControlsRow.

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

אפשר להוסיף פעולות לקבוצות הראשיות והמשניות על ידי החלפת הערכים onCreatePrimaryActions() ו-onCreateSecondaryActions().

Kotlin

private lateinit var repeatAction: PlaybackControlsRow.RepeatAction
private lateinit var pipAction: PlaybackControlsRow.PictureInPictureAction
private lateinit var thumbsUpAction: PlaybackControlsRow.ThumbsUpAction
private lateinit var thumbsDownAction: PlaybackControlsRow.ThumbsDownAction
private lateinit var skipPreviousAction: PlaybackControlsRow.SkipPreviousAction
private lateinit var skipNextAction: PlaybackControlsRow.SkipNextAction
private lateinit var fastForwardAction: PlaybackControlsRow.FastForwardAction
private lateinit var rewindAction: PlaybackControlsRow.RewindAction

override fun onCreatePrimaryActions(primaryActionsAdapter: ArrayObjectAdapter) {
    // Order matters, super.onCreatePrimaryActions() will create the play / pause action.
    // Will display as follows:
    // play/pause, previous, rewind, fast forward, next
    //   > /||      |<        <<        >>         >|
    super.onCreatePrimaryActions(primaryActionsAdapter)
    primaryActionsAdapter.apply {
        add(skipPreviousAction)
        add(rewindAction)
        add(fastForwardAction)
        add(skipNextAction)
    }
}

override fun onCreateSecondaryActions(adapter: ArrayObjectAdapter?) {
    super.onCreateSecondaryActions(adapter)
    adapter?.apply {
        add(thumbsDownAction)
        add(thumbsUpAction)
    }
}

Java

private PlaybackControlsRow.RepeatAction repeatAction;
private PlaybackControlsRow.PictureInPictureAction pipAction;
private PlaybackControlsRow.ThumbsUpAction thumbsUpAction;
private PlaybackControlsRow.ThumbsDownAction thumbsDownAction;
private PlaybackControlsRow.SkipPreviousAction skipPreviousAction;
private PlaybackControlsRow.SkipNextAction skipNextAction;
private PlaybackControlsRow.FastForwardAction fastForwardAction;
private PlaybackControlsRow.RewindAction rewindAction;

@Override
protected void onCreatePrimaryActions(ArrayObjectAdapter primaryActionsAdapter) {
    // Order matters, super.onCreatePrimaryActions() will create the play / pause action.
    // Will display as follows:
    // play/pause, previous, rewind, fast forward, next
    //   > /||      |<        <<        >>         >|
    super.onCreatePrimaryActions(primaryActionsAdapter);
    primaryActionsAdapter.add(skipPreviousAction);
    primaryActionsAdapter.add(rewindAction);
    primaryActionsAdapter.add(fastForwardAction);
    primaryActionsAdapter.add(skipNextAction);
}

@Override
protected void onCreateSecondaryActions(ArrayObjectAdapter adapter) {
    super.onCreateSecondaryActions(adapter);
    adapter.add(thumbsDownAction);
    adapter.add(thumbsUpAction);
}

כדי לטפל בפעולות החדשות, צריך לבטל את ההגדרה של onActionClicked().

Kotlin

override fun onActionClicked(action: Action) {
    when(action) {
        rewindAction -> {
            // Handle Rewind
        }
        fastForwardAction -> {
            // Handle FastForward
        }
        thumbsDownAction -> {
            // Handle ThumbsDown
        }
        thumbsUpAction -> {
            // Handle ThumbsUp
        }
        else ->
            // The superclass handles play/pause and delegates next/previous actions to abstract methods,
            // so those two methods should be overridden rather than handling the actions here.
            super.onActionClicked(action)
    }
}

override fun next() {
    // Skip to next item in playlist.
}

override fun previous() {
    // Skip to previous item in playlist.
}

Java

@Override
public void onActionClicked(Action action) {
    if (action == rewindAction) {
        // Handle Rewind
    } else if (action == fastForwardAction ) {
        // Handle FastForward
    } else if (action == thumbsDownAction) {
        // Handle ThumbsDown
    } else if (action == thumbsUpAction) {
        // Handle ThumbsUp
    } else {
        // The superclass handles play/pause and delegates next/previous actions to abstract methods,
        // so those two methods should be overridden rather than handling the actions here.
        super.onActionClicked(action);
    }
}

@Override
public void next() {
    // Skip to next item in playlist.
}

@Override
public void previous() {
    // Skip to previous item in playlist.
}

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

הזזה מהירה בסרטון

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

קרצוף

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