سفارشی‌سازی واسط کاربر فرستنده 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>

سه خط آخر در بالا به شما امکان می‌دهد سبک‌های خاصی را برای رونهاد مقدماتی، کنترل‌کننده کوچک، و کنترل‌کننده گسترده به‌عنوان بخشی از این زمینه تعریف کنید. نمونه‌هایی در بخش‌های زیر گنجانده شده است.

سفارشی‌سازی دکمه پخش محتوا

برای افزودن 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 اگر نسخه کتابخانه پشتیبانی جدیدتر از ‎۲۶.۰.۰ باشد باید استفاده شود. برای نسخه‌های قدیمی‌تر کتابخانه پشتیبانی، لطفاً به‌جای آن از 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 بازپخش را ۳۰ ثانیه به عقب می‌برد
@id/cast_button_type_forward_30_seconds بازپخش را ۳۰ ثانیه به جلو می‌برد
@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 از افزودن دکمه‌های کنترل سفارشی که کیت توسعه نرم‌افزار ارائه نمی‌دهد، مانند دکمه «شست بالا» پشتیبانی می‌کند. مراحل به این صورت است:

  1. جایگاهی را برای نگهداری دکمه سفارشی بااستفاده از @id/cast_button_type_custom در مشخصه castControlButtons از MiniControllerFragment مشخص کنید.

  2. زیرکلاسی از UIController را پیاده‌سازی کنید. UIController حاوی روش‌هایی است که وقتی وضعیت جلسه پخش محتوا یا جلسه رسانه تغییر می‌کند، کیت توسعه نرم‌افزار آن‌ها را فرا می‌خواند. زیرکلاس UIController شما باید ImageView را به‌عنوان یکی از پارامترها بگیرد و وضعیتش را درصورت نیاز به‌روز کند.

  3. زیرکلاس MiniControllerFragment، سپس onCreateView را ملغی کنید و getButtonImageViewAt(int) را فراخوانی کنید تا ImageView را برای آن دکمه سفارشی دریافت کنید. سپس با bindViewToUIController(View, UIController) تماس بگیرید تا نما را با UIController سفارشی‌تان مرتبط کنید.

  4. در افزودن کنش‌های سفارشی، نحوه مدیریت کنش از دکمه سفارشی را ببینید MediaIntentReceiver در.

    در اینجا مثالی از مرتبط کردن دکمه‌ای در جایگاه ۲ به 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 حاوی روش‌هایی است که وقتی وضعیت جلسه پخش محتوا یا جلسه رسانه تغییر می‌کند، کیت توسعه نرم‌افزار آن‌ها را فرا می‌خواند. زیرکلاس شما از UIController باید ImageView را به‌عنوان یکی از پارامترها بگیرد، و وضعیت خود را درصورت نیاز به‌روز کند.

  3. زیرکلاس ExpandedControllerActivity، سپس لغو onCreate و تماس getButtonImageViewAt(int) برای دریافت شیء نمای دکمه. سپس bindViewToUIController(View, UIController) را فراخوانی کنید تا نما را با UIController سفارشی‌تان مرتبط کنید.

  4. در افزودن کنش‌های سفارشی نحوه مدیریت کنش از دکمه سفارشی را ببینید MediaIntentReceiver

در اینجا مثالی از مرتبط کردن دکمه‌ای در جایگاه ۲ به 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);
        ...
    }
}