कास्ट विजेट को पसंद के मुताबिक बनाया जा सकता है. इसके लिए, आपको रंग सेट करने, बटन, टेक्स्ट, और थंबनेल की स्टाइल तय करने और दिखाने के लिए बटन चुनने का विकल्प मिलता है.
ऐप्लिकेशन की थीम को पसंद के मुताबिक बनाएं
इस उदाहरण से पसंद के मुताबिक थीम स्टाइल 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
का इस्तेमाल तब करना चाहिए, जब सहायता लाइब्रेरी का वर्शन 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 टूल की मदद से नहीं मिलते. जैसे, "थंब्स अप" बटन. चरण इस प्रकार हैं:
MiniControllerFragment
केcastControlButtons
एट्रिब्यूट में@id/cast_button_type_custom
का इस्तेमाल करके, कस्टम बटन शामिल करने के लिए वह स्लॉट तय करें.UIController
की सब-क्लास को लागू करें.UIController
में ऐसे तरीके शामिल होते हैं जिन्हें SDK टूल तब कॉल करता है, जब कास्ट सेशन या मीडिया सेशन की स्थिति बदलती है.UIController
की आपकी सब-क्लास कोImageView
को पैरामीटर के तौर पर चुनना चाहिए और ज़रूरत के हिसाब से उसका स्टेटस अपडेट करना चाहिए.सब-क्लास
MiniControllerFragment
इसके बाद,onCreateView
को बदलें और उस कस्टम बटन काImageView
पाने के लिए,getButtonImageViewAt(int)
को कॉल करें. इसके बाद,bindViewToUIController(View, UIController)
को कॉल करें और व्यू को अपने कस्टमUIController
से जोड़ें.अपने कस्टम बटन से, कार्रवाई को मैनेज करने का तरीका जानने के लिए, कस्टम ऐक्शन जोड़ें पर
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>
// 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
में ऐसे कस्टम कंट्रोल बटन जोड़े जा सकते हैं जो SDK टूल से नहीं मिलते. जैसे, "थंब्स अप" बटन. चरण इस प्रकार हैं:
ExpandedControllerActivity
केcastControlButtons
एट्रिब्यूट में@id/cast_button_type_custom
का इस्तेमाल करके, कस्टम बटन शामिल करने के लिए वह स्लॉट तय करें. इसके बाद,getButtonImageViewAt(int)
का इस्तेमाल करके, उस कस्टम बटन के लिएImageView
को हासिल किया जा सकता है.UIController
की सब-क्लास को लागू करें.UIController
में ऐसे तरीके होते हैं जिन्हें SDK टूल तब कॉल करता है, जब कास्ट सेशन या मीडिया सेशन की स्थिति बदलती है. आपकेUIController
की सब-क्लास को एक पैरामीटर के तौर परImageView
को लेना चाहिए और ज़रूरत के हिसाब से उसका स्टेटस अपडेट करना चाहिए.एक्सपैंशनedControllerActivity सब-क्लास करें, फिर बटन का व्यू ऑब्जेक्ट पाने के लिए
onCreate
को बदलें औरgetButtonImageViewAt(int)
को कॉल करें. इसके बाद, व्यू को अपने कस्टमUIController
से जोड़ने के लिए,bindViewToUIController(View, UIController)
को कॉल करें.अपने कस्टम बटन से कार्रवाई को मैनेज करने का तरीका जानने के लिए, कस्टम ऐक्शन जोड़ें पर
MediaIntentReceiver
देखें.
यहां स्लॉट 2 के बटन को MyCustomUIController
नाम के UIController
से जोड़ने का एक उदाहरण दिया गया है:
// 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); ... } }