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 का इस्तेमाल तब किया जाना चाहिए, जब सहायता लाइब्रेरी का वर्शन 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 एट्रिब्यूट. काम करने वाले कंट्रोल बटन के बारे में इस तरह से बताया गया है आईडी से जुड़े संसाधन:

यहां एक उदाहरण दिया गया है, जिसमें एल्बम आर्ट, चलाएं/रोकें टॉगल बटन, और 'आगे बढ़ें' बटन को इसी क्रम में बाएं से दाएं:

<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 MiniControllerFragment के castControlButtons एट्रिब्यूट में.

2. इसकी एक सब-क्लास लागू करें UIController. UIController में वे तरीके शामिल हैं जिन्हें SDK टूल तब कॉल करता है, जब किसी कास्ट सेशन या मीडिया सेशन में हुए बदलावों के. 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>

// 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 टूल से नहीं मिलते हैं, जैसे कि "थंब्स अप" बटन. चरण इस प्रकार हैं:

1. कस्टम बटन शामिल करने के लिए स्लॉट चुनें @id/cast_button_type_custom ExpandedControllerActivity के castControlButtons एट्रिब्यूट में. इसके बाद, इनका इस्तेमाल किया जा सकता है: getButtonImageViewAt(int) पाने के लिए ImageView उस कस्टम बटन के लिए.

2. इसकी एक सब-क्लास लागू करें UIController. UIController में ऐसे तरीके शामिल हैं जिन्हें SDK टूल की मदद से कॉल किया जाता है. ऐसा तब किया जाता है, जब किसी राज्य में कास्ट सेशन या मीडिया सेशन में हुए बदलावों के. इसकी सब-क्लास UIController को एक पैरामीटर के तौर पर ImageView लेना चाहिए, और ज़रूरत के हिसाब से इसकी स्थिति को अपडेट करता है.

3. सब-क्लास एक्सटेंडेड कंट्रोलरActivity, फिर ओवरराइड करें onCreate और कॉल करें getButtonImageViewAt(int) बटन का व्यू ऑब्जेक्ट पाने के लिए. फिर कॉल करें 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>

// 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);
        ...
    }
}