অ্যান্ড্রয়েড প্রেরক UI কাস্টমাইজ করুন

আপনি কাস্ট উইজেটগুলি কাস্টমাইজ করতে পারেন রঙ সেট করে, বোতামগুলিকে স্টাইল করে, পাঠ্য এবং থাম্বনেইলের উপস্থিতি, এবং প্রদর্শনের জন্য বোতামের প্রকারগুলি বেছে নিয়ে৷

অ্যাপ থিম কাস্টমাইজ করুন

এই উদাহরণটি একটি কাস্টম থিম শৈলী 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>

সমর্থন লাইব্রেরি সংস্করণ 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/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. MiniControllerFragment এর castControlButtons অ্যাট্রিবিউটে @id/cast_button_type_custom ব্যবহার করে একটি কাস্টম বোতাম রাখার জন্য একটি স্লট নির্দিষ্ট করুন।

  2. UIController এর একটি সাবক্লাস প্রয়োগ করুন। UIController এমন পদ্ধতি রয়েছে যা SDK দ্বারা ডাকা হয় যখন কাস্ট সেশন বা মিডিয়া সেশনের অবস্থা পরিবর্তিত হয়। আপনার UIController এর সাবক্লাস একটি ImageView প্যারামিটারগুলির একটি হিসাবে গ্রহণ করা উচিত এবং প্রয়োজন অনুসারে এটির অবস্থা আপডেট করা উচিত।

  3. সাবক্লাস MiniControllerFragment , তারপর onCreateView ওভাররাইড করুন এবং সেই কাস্টম বোতামের জন্য ImageView পেতে getButtonImageViewAt(int) কল করুন। তারপর আপনার কাস্টম UIController সাথে ভিউটি সংযুক্ত করতে bindViewToUIController(View, UIController) কল করুন।

  4. আপনার কাস্টম বোতাম থেকে অ্যাকশনটি কীভাবে পরিচালনা করবেন তার জন্য Add Custom Actions- এ MediaIntentReceiver দেখুন।

    MyCustomUIController নামক একটি UIController সাথে স্লট 2 এ একটি বোতাম যুক্ত করার একটি উদাহরণ এখানে রয়েছে: 

// 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. ExpandedControllerActivity এর castControlButtons অ্যাট্রিবিউটে @id/cast_button_type_custom ব্যবহার করে একটি কাস্টম বোতাম রাখার জন্য একটি স্লট নির্দিষ্ট করুন। তারপর আপনি সেই কাস্টম বোতামটির জন্য ImageView পেতে getButtonImageViewAt(int) ব্যবহার করতে পারেন।

  2. UIController এর একটি সাবক্লাস প্রয়োগ করুন। UIController এমন পদ্ধতি রয়েছে যা SDK দ্বারা কল করা হয় যখন কাস্ট সেশন বা মিডিয়া সেশনের অবস্থা পরিবর্তিত হয়। আপনার UIController এর সাবক্লাসের একটি ImageView প্যারামিটারগুলির মধ্যে একটি হিসাবে নেওয়া উচিত এবং প্রয়োজন অনুসারে এটির অবস্থা আপডেট করা উচিত।

  3. Subclass ExpandedControllerActivity, তারপর onCreate ওভাররাইড করুন এবং বোতামের ভিউ অবজেক্ট পেতে getButtonImageViewAt(int) কল করুন। তারপর আপনার কাস্টম UIController সাথে ভিউটি সংযুক্ত করতে bindViewToUIController(View, UIController) কল করুন।

  4. আপনার কাস্টম বোতাম থেকে অ্যাকশনটি কীভাবে পরিচালনা করবেন তার জন্য Add Custom Actions- এ MediaIntentReceiver দেখুন।

MyCustomUIController নামক একটি UIController সাথে স্লট 2 এ একটি বোতাম যুক্ত করার একটি উদাহরণ এখানে রয়েছে: 

// 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);
        ...
    }
}
পূর্ববর্তী
ইন্টিগ্রেট কাস্ট, ইন্টিগ্রেট কাস্ট
পরবর্তী
স্বয়ংক্রিয় UI পরীক্ষা, স্বয়ংক্রিয় UI পরীক্ষা