Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

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>

ऊपर की आखिरी तीन लाइनों से, इस थीम के तहत शुरुआती ओवरले, मिनी कंट्रोलर, और बड़े किए गए कंट्रोलर के लिए खास स्टाइल तय की जा सकती हैं. इन सेक्शन के बाद दिए गए उदाहरणों में, इन स्टाइल के बारे में बताया गया है.

Cast बटन को पसंद के मुताबिक बनाना

अपने ऐप्लिकेशन की थीम में, mediaRouteTheme को पसंद के मुताबिक बनाने के लिए:

<style name="Theme.CastVideosTheme" parent="Theme.AppCompat.Light.NoActionBar">
  <!-- ... -->
  <item name="mediaRouteTheme">@style/CustomMediaRouterTheme</item>
</style>

Media Router की अपनी पसंद के मुताबिक बनाई गई थीम और 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 का इस्तेमाल करें.

शुरुआती ओवरले थीम को पसंद के मुताबिक बनाना

The 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>

मिनी कंट्रोलर को पसंद के मुताबिक बनाना

थीम को पसंद के मुताबिक बनाना

The 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 टूल, Cast सेशन या मीडिया सेशन की स्थिति में बदलाव होने पर कॉल करता है. आपकी UIController सबक्लास में, ImageView को पैरामीटर के तौर पर शामिल किया जाना चाहिए. साथ ही, ज़रूरत के हिसाब से इसकी स्थिति को अपडेट किया जाना चाहिए.
MiniControllerFragment की सबक्लास बनाएं. इसके बाद, onCreateView को बदलें और उस पसंद के मुताबिक बटन के लिए ImageView पाने के लिए, getButtonImageViewAt(int) को कॉल करें. इसके बाद, व्यू को अपनी पसंद के मुताबिक बनाए गए UIControllerसे जोड़ने के लिए, bindViewToUIController(View, 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>

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

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

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

पीछे जाएं

कास्ट को जोड़ें

आगे बढ़ें

यूज़र इंटरफ़ेस (यूआई) की जांच अपने-आप होने के लिए सेट करें