سفارشی‌سازی واسط کاربر فرستنده 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)
        ...
    }
}
جاوا
// 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 از افزودن دکمه‌های کنترل سفارشی که توسط کیت توسعه نرم‌افزار ارائه نمی‌شوند، مانند دکمه «پسندیدن»، پشتیبانی می‌کند. مراحل عبارت‌اند از:

  1. جایگاهی را برای قرار دادن دکمه سفارشی بااستفاده از @id/cast_button_type_custom در مشخصه castControlButtons از ExpandedControllerActivity مشخص کنید. سپس می‌توانید از getButtonImageViewAt(int) برای دریافت ImageView برای آن دکمه سفارشی استفاده کنید.

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

  3. Subclass ExpandedControllerActivity, then override onCreate and call getButtonImageViewAt(int) to get the view object of the button. سپس 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)
        ...
    }
}
جاوا
// 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);
        ...
    }
}