رابط کاربری فرستنده اندروید را سفارشی کنید

می‌توانید ویجت‌های 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>

اگر نسخه کتابخانه پشتیبانی جدیدتر از 26.0.0 باشد باید از 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 تعریف می شوند:

نوع دکمه شرح
@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 فراخوانی می شوند. زیرکلاس UIController شما باید ImageView به عنوان یکی از پارامترها در نظر بگیرد و در صورت نیاز وضعیت آن را به روز کند.

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

  4. برای نحوه مدیریت عملکرد از دکمه سفارشی خود MediaIntentReceiver را در Add Custom Actions ببینید.

    در اینجا مثالی از مرتبط کردن یک دکمه در شکاف 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>
کاتلین
// 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

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

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

  4. برای نحوه مدیریت عملکرد از دکمه سفارشی خود MediaIntentReceiver را در Add Custom Actions ببینید.

در اینجا مثالی از مرتبط کردن یک دکمه در شکاف 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>
کاتلین
// 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);
        ...
    }
}
قبلی
بازیگران را ادغام کنید
بعدی
تست های رابط کاربری خودکار