התאמה אישית של ממשק המשתמש של השולח ב-Android

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

התאמה אישית של העיצוב של האפליקציה

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

<style name="Theme.CastVideosTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Set AppCompat's color theming attrs -->
    <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">@color/primary_dark</item>
    <item name="colorAccent">@color/accent</item>
    <item name="android:textColorPrimary">@color/primary_text</item>
    <item name="android:textColorSecondary">@color/secondary_text</item>
    <item name="castIntroOverlayStyle">@style/CustomCastIntroOverlay</item>
    <item name="castMiniControllerStyle">@style/CustomCastMiniController</item>
    <item name="castExpandedControllerStyle">@style/CustomCastExpandedController</item>
</style>

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

לחצן להתאמה אישית של הפעלת Cast

כדי להוסיף mediaRouteTheme בהתאמה אישית לעיצוב של האפליקציה:

<style name="Theme.CastVideosTheme" parent="Theme.AppCompat.Light.NoActionBar">
  <!-- ... -->
  <item name="mediaRouteTheme">@style/CustomMediaRouterTheme</item>
</style>

הצהרה על העיצוב המותאם אישית של נתב המדיה והצהרה על עיצוב מותאם אישית mediaRouteButtonStyle:

<style name="CustomMediaRouterTheme" parent="Theme.MediaRouter">
  <item name="mediaRouteButtonStyle">@style/CustomMediaRouteButtonStyle</item>
</style>

<style name="CustomMediaRouteButtonStyle" parent="Widget.MediaRouter.Light.MediaRouteButton">
  <item name="mediaRouteButtonTint">#EEFF41</item>
</style>

setTint אם הגרסה של ספריית התמיכה חדשה יותר מ-26.0.0, צריך להשתמש בה. למבוגרים יותר יש תמיכה בגרסאות של ספריות. צריך להשתמש ב-buttonTint במקום זאת.

התאמה אישית של העיצוב של שכבת-העל של כרטיס המבוא

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

<style name="CustomCastIntroOverlay" parent="CastIntroOverlay">
    <item name="castButtonTextAppearance">@style/TextAppearance.CustomCastIntroOverlay.Button</item>
    <item name="castTitleTextAppearance">@style/TextAppearance.CustomCastIntroOverlay.Title</item>
</style>
<style name="TextAppearance.CustomCastIntroOverlay.Button" parent="android:style/TextAppearance">
    <item name="android:textColor">#FFFFFF</item>
</style>
<style name="TextAppearance.CustomCastIntroOverlay.Title"parent="android:style/TextAppearance.Large">
    <item name="android:textColor">#FFFFFF</item>
</style>

התאמה אישית של המיני-בקר

התאמה אישית של העיצוב

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

<style name="CustomCastMiniController" parent="CastMiniController">
    <item name="castShowImageThumbnail">true</item>
    <item name="castTitleTextAppearance">@style/TextAppearance.AppCompat.Subhead</item>
    <item name="castSubtitleTextAppearance">@style/TextAppearance.AppCompat.Caption</item>
    <item name="castBackground">#FFFFFF</item>
    <item name="castProgressBarColor">#FFFFFF</item>
    <item name="castPlayButtonDrawable">@drawable/cast_ic_mini_controller_play</item>
    <item name="castPauseButtonDrawable">@drawable/cast_ic_mini_controller_pause</item>
    <item name="castStopButtonDrawable">@drawable/cast_ic_mini_controller_stop</item>
    <item name="castLargePlayButtonDrawable">@drawable/cast_ic_mini_controller_play_large</item>
    <item name="castLargePauseButtonDrawable">@drawable/cast_ic_mini_controller_pause_large</item>
    <item name="castLargeStopButtonDrawable">@drawable/cast_ic_mini_controller_stop_large</item>
    <item name="castSkipPreviousButtonDrawable">@drawable/cast_ic_mini_controller_skip_prev</item>
    <item name="castSkipNextButtonDrawable">@drawable/cast_ic_mini_controller_skip_next</item>
    <item name="castRewind30ButtonDrawable">@drawable/cast_ic_mini_controller_rewind30</item>
    <item name="castForward30ButtonDrawable">@drawable/cast_ic_mini_controller_forward30</item>
    <item name="castMuteToggleButtonDrawable">@drawable/cast_ic_mini_controller_mute</item>
    <item name="castClosedCaptionsButtonDrawable">@drawable/cast_ic_mini_controller_closed_caption</item
</style>

בחירת לחצנים

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

SLOT  SLOT  SLOT
  1     2     3

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

סוג לחצן תיאור
@id/cast_button_type_empty לא למקם לחצן בחריץ הזה
@id/cast_button_type_custom לחצן בהתאמה אישית
@id/cast_button_type_play_pause_toggle מעבר בין הפעלה והשהיה
@id/cast_button_type_skip_previous דילוג לפריט הקודם בתור
@id/cast_button_type_skip_next דילוג לפריט הבא בתור
@id/cast_button_type_rewind_30_seconds הרצת הסרטון 30 שניות אחורה
@id/cast_button_type_forward_30_seconds דילוג של 30 שניות קדימה בסרטון
@id/cast_button_type_mute_toggle השתקה וביטול ההשתקה של המקלט
@id/cast_button_type_closed_caption פתיחת תיבת דו-שיח לבחירת טראקים של טקסט ואודיו

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

<array name="cast_mini_controller_control_buttons">
    <item>@id/cast_button_type_empty</item>
    <item>@id/cast_button_type_play_pause_toggle</item>
    <item>@id/cast_button_type_forward_30_seconds</item>
</array>
...
<fragment
    android:id="@+id/cast_mini_controller"
    ...
    app:castControlButtons="@array/cast_mini_controller_control_buttons"
    class="com.google.android.gms.cast.framework.media.widget.MiniControllerFragment">

אזהרה: המערך הזה חייב להכיל שלושה פריטים בדיוק. אחרת, קובץ זמן ריצה תופיע הודעת חריג. אם אינך רוצה להציג לחצן בחריץ, @id/cast_button_type_empty

הוספת לחצנים מותאמים אישית

MiniControllerFragment תומך בהוספת לחצני בקרה מותאמים אישית, שלא סופקו על ידי ה-SDK, למשל "תמונה ממוזערת" לחצן. השלבים:

  1. ציון מקום להצגת לחצן מותאם אישית באמצעות @id/cast_button_type_custom במאפיין castControlButtons של MiniControllerFragment.

  2. ליישם קטגוריית משנה של UIController השדה UIController מכיל שיטות שה-SDK קורא להן כשהמדינה (State) של פעילות ה-Cast או של סשן המדיה. מחלקה משנית שלך של UIController צריך לקחת ImageView כאחד מהפרמטרים ולעדכן את המצב לפי הצורך.

  3. מחלקה משנית MiniControllerFragment, ואז לשנות את ברירת המחדל onCreateView והתקשרות getButtonImageViewAt(int) כדי לקבל ImageView לאותו לחצן מותאם אישית. ואז להתקשר bindViewToUIController(View, UIController) כדי לשייך את התצוגה UIController

  4. צפייה MediaIntentReceiver במאמר הוספת פעולות מותאמות אישית מוסבר איך מטפלים בפעולה מהלחצן בהתאמה אישית.

    הנה דוגמה לשיוך לחצן בחריץ 2 אל UIController שנקרא MyCustomUIController:

// arrays.xml
<array name="cast_expanded_controller_control_buttons">
    <item>@id/cast_button_type_empty</item>
    <item>@id/cast_button_type_rewind_30_seconds</item>
    <item>@id/cast_button_type_custom</item>
    <item>@id/cast_button_type_empty</item>
</array>
Kotlin
// MyCustomUIController.kt
class MyCustomUIController(private val mView: View) : UIController() {
    override fun onMediaStatusUpdated() {
        // Update the state of mView based on the latest the media status.
        ...
        mView.visibility = View.INVISIBLE
        ...
    }
}

// MyMiniControllerFragment.kt
class MyMiniControllerFragment : MiniControllerFragment() {
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        super.onCreateView(inflater, container, savedInstanceState)
        val customButtonView = getButtonImageViewAt(2)
        val myCustomUiController = MyCustomUIController(customButtonView)
        uiMediaController.bindViewToUIController(customButtonView, myCustomUiController)
        ...
    }
}
Java
// MyCustomUIController.java
class MyCustomUIController extends UIController {
    private final View mView;

    public MyCustomUIController(View view) {
            mView = view;
    }

    @Override
    public onMediaStatusUpdated() {
        // Update the state of mView based on the latest the media status.
        ...
        mView.setVisibility(View.INVISIBLE);
        ...
    }
}

// MyMiniControllerFragment.java
class MyMiniControllerFragment extends MiniControllerFragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        super.onCreateView(inflater, container, savedInstanceState);
        ImageView customButtonView = getButtonImageViewAt(2);
        MyCustomUIController myCustomUiController = new MyCustomUIController(customButtonView);
        getUIMediaController().bindViewToUIController(customButtonView, myCustomUiController);
        ...
    }
}

התאמה אישית של בקר מורחב

התאמה אישית של העיצוב

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

<style name="Theme.CastVideosTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="castExpandedControllerToolbarStyle">
        @style/ThemeOverlay.AppCompat.Dark.ActionBar
    </item>
</style>

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

<style name="CustomCastExpandedController" parent="CastExpandedController">
    <item name="castButtonColor">@null</item>
    <item name="castPlayButtonDrawable">@drawable/cast_ic_expanded_controller_play</item>
    <item name="castPauseButtonDrawable">@drawable/cast_ic_expanded_controller_pause</item>
    <item name="castStopButtonDrawable">@drawable/cast_ic_expanded_controller_stop</item>
    <item name="castSkipPreviousButtonDrawable">@drawable/cast_ic_expanded_controller_skip_previous</item>
    <item name="castSkipNextButtonDrawable">@drawable/cast_ic_expanded_controller_skip_next</item>
    <item name="castRewind30ButtonDrawable">@drawable/cast_ic_expanded_controller_rewind30</item>
    <item name="castForward30ButtonDrawable">@drawable/cast_ic_expanded_controller_forward30</item>
</style>

בחירת לחצנים

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

SLOT  SLOT  PLAY/PAUSE  SLOT  SLOT
  1     2     BUTTON      3     4

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

הנה דוגמה שמציבה לחצן הרצה אחורה במשבצת השנייה, אפשרות של דילוג לחצן קדימה בחריץ השלישי, ומשאירים את המשבצת הראשונה והאחרונה ריקות:

// arrays.xml
<array name="cast_expanded_controller_control_buttons">
    <item>@id/cast_button_type_empty</item>
    <item>@id/cast_button_type_rewind_30_seconds</item>
    <item>@id/cast_button_type_forward_30_seconds</item>
    <item>@id/cast_button_type_empty</item>
</array>
...
// styles.xml
<style name="Theme.MyTheme">
    <item name="castExpandedControllerStyle">
        @style/CustomCastExpandedController
    </item>
</style>
...
<style name="CustomCastExpandedController" parent="CastExpandedController">
    <item name="castControlButtons">
        @array/cast_expanded_controller_control_buttons
    </item>
</style>

המערך חייב להכיל ארבעה פריטים בדיוק. אחרת, חריגה של סביבת זמן הריצה תגרום לזרוק. אם אינך רוצה להציג לחצן בחריץ, @id/cast_button_type_empty CastContext יכול לנהל את מחזור החיים וגם של הפעילות הזו.

הוספת לחצנים מותאמים אישית

ל-ExpandedControllerActivity יש תמיכה בהוספת לחצני בקרה בהתאמה אישית שלא סופקו על ידי ה-SDK. כמו "אגודל כלפי מעלה". לחצן. השלבים:

  1. ציון מקום להצגת לחצן מותאם אישית באמצעות @id/cast_button_type_custom במאפיין castControlButtons של ExpandedControllerActivity. לאחר מכן תוכלו להשתמש getButtonImageViewAt(int) כדי לקבל ImageView לאותו לחצן מותאם אישית.

  2. ליישם קטגוריית משנה של UIController השדה UIController מכיל שיטות שה-SDK קוראת להן כשהמדינה (State) של פעילות ה-Cast או של סשן המדיה. מחלקה משנית שלך של הפרמטר UIController צריך להכיל ImageView כאחד מהפרמטרים, ולעדכן את המצב לפי הצורך.

  3. מחלקה משנית,ExpandedControllerActivity, ואז שינוי מברירת המחדל onCreate ולהתקשר getButtonImageViewAt(int) כדי לקבל את האובייקט view של הלחצן. ואז להתקשר bindViewToUIController(View, UIController) כדי לשייך את התצוגה ל-UIController בהתאמה אישית.

  4. צפייה MediaIntentReceiver בהוספת פעולות מותאמות אישית כדי להבין איך לבצע את הפעולה בלחיצה על הלחצן 'בהתאמה אישית'.

הנה דוגמה לשיוך לחצן בחריץ 2 אל UIController שנקראה MyCustomUIController:

// arrays.xml
<array name="cast_expanded_controller_control_buttons">
    <item>@id/cast_button_type_empty</item>
    <item>@id/cast_button_type_rewind_30_seconds</item>
    <item>@id/cast_button_type_custom</item>
    <item>@id/cast_button_type_empty</item>
</array>
Kotlin
// MyCustomUIController.kt
class MyCustomUIController(private val mView: View) : UIController() {
    override fun onMediaStatusUpdated() {
        // Update the state of mView based on the latest the media status.
        ...
        mView.visibility = View.INVISIBLE
        ...
    }
}

// MyExpandedControllerActivity.kt
internal class MyExpandedControllerActivity : ExpandedControllerActivity() {
    public override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val customButtonView = getButtonImageViewAt(2)
        val myCustomUiController = MyCustomUIController(customButtonView)
        uiMediaController.bindViewToUIController(customButtonView, myCustomUiController)
        ...
    }
}
Java
// MyCustomUIController.java
class MyCustomUIController extends UIController {
    private final View mView;

    public MyCustomUIController(View view) {
        mView = view;
    }

    @Override
    public onMediaStatusUpdated() {
        // Update the state of mView based on the latest the media status.
        ...
        mView.setVisibility(View.INVISIBLE);
        ...
    }
}

// MyExpandedControllerActivity.java
class MyExpandedControllerActivity extends ExpandedControllerActivity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ImageView customButtonView = getButtonImageViewAt(2);
        MyCustomUIController myCustomUiController = new MyCustomUIController(customButtonView);
        getUIMediaController().bindViewToUIController(customButtonView, myCustomUiController);
        ...
    }
}
הקודם
שילוב CAST
הבא
אוטומציה של בדיקות בממשק המשתמש