ערכת הכלים של ממשק המשתמש Leanback כוללת אמצעי בקרה להפעלה שמשפרים את חוויית המשתמש. באפליקציות וידאו, אמצעי הבקרה של ההפעלה תומכים בהזזה של הווידאו קדימה ואחורה. בזמן הגרירה של הסמן לבחירת המיקום, מוצגות תמונות ממוזערות כדי לעזור לנווט בסרטון.
הספרייה כוללת מחלקות מופשטות וגם יישומי קוד מוכנים מראש, שמעניקים למפתחים שליטה מפורטת יותר. בעזרת ההטמעות המוכנות מראש, תוכלו ליצור במהירות אפליקציה עשירה בתכונות בלי לכתוב הרבה קוד. אם אתם צריכים התאמה אישית נוספת, אתם יכולים להרחיב כל אחד מהרכיבים המובנים מראש בספרייה.
אמצעי בקרה ונגן
ערכת הכלים של Leanback UI מפרידה בין ממשק המשתמש של אמצעי הבקרה להפעלה לבין הנגן שמפעיל את הווידאו. ההטמעה מתבצעת באמצעות שני רכיבים: fragment לתמיכה בהפעלה להצגת אמצעי הבקרה להפעלה (ובאופן אופציונלי גם הסרטון) ומתאם נגן לאריזה של נגן מדיה.
הפעלת מקטע
הפעילות בממשק המשתמש של האפליקציה צריכה להשתמש ב-PlaybackSupportFragment
או ב-VideoSupportFragment
.
שניהם מכילים את אמצעי הבקרה של ההפעלה במצב Leanback:
- A
PlaybackSupportFragment
מציג אנימציה של אמצעי הבקרה להפעלה, להשהיה ולעצירה כדי להסתיר או להציג אותם לפי הצורך. -
VideoSupportFragment
extendsPlaybackSupportFragment
and has aSurfaceView
to render video.
אפשר להתאים אישית את ObjectAdapter
של קטע כדי לשפר את ממשק המשתמש. לדוגמה, משתמשים ב-setAdapter()
כדי להוסיף שורה של 'סרטונים קשורים'.
PlayerAdapter
PlayerAdapter
הוא מחלקה מופשטת ששולטת בנגן המדיה הבסיסי. מפתחים יכולים לבחור בהטמעה המוכנה מראש MediaPlayerAdapter
או לכתוב הטמעה משלהם של המחלקה הזו.
הדבקת החלקים
צריך להשתמש ב'דבק בקרה' כדי לחבר את קטע ההפעלה לנגן. ספריית Leanback מספקת שני סוגים של קוד דבק:
-
PlaybackBannerControlGlue
מצייר את אמצעי הבקרה של ההפעלה בקטע ההפעלה ב "סגנון הישן", וממקם אותם בתוך רקע אטום. (PlaybackBannerControlGlue
מחליף אתPlaybackControlGlue
, שהשימוש בו הופסק). PlaybackTransportControlGlue
משתמש בפקדים בסגנון חדש עם רקע שקוף.
אם רוצים שהאפליקציה תתמוך בהזזה מהירה של סרטונים, צריך להשתמש ב-PlaybackTransportControlGlue
.
צריך גם לציין 'מארח דבק' שמקשר את הדבק לקטע ההפעלה, מצייר את אמצעי הבקרה של ההעברה בממשק המשתמש ושומר על המצב שלהם, ומעביר את אירועי אמצעי הבקרה של ההעברה בחזרה לדבק. המארח צריך להתאים לסוג של קטע ההפעלה. אפשר להשתמש ב-PlaybackSupportFragmentGlueHost
עם PlaybackFragment
, וב-VideoSupportFragmentGlueHost
עם VideoFragment
.
איור שמראה איך חלקי בקרת ההפעלה במצב Leanback משתלבים זה בזה:
הקוד שמחבר את האפליקציה צריך להיות בתוך התג 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.
.