Jetpack রচনায় টুলটিপ ব্যবহার করা:ধাপে ধাপে নির্দেশিকা

যখন আমি জেটপ্যাক কম্পোজ সম্পর্কে আমার শেষ নিবন্ধটি লিখেছিলাম, তখন আমি সেখানে বলেছিলাম যে জেটপ্যাক কম্পোজে কিছু মৌলিক উপাদান অনুপস্থিত (আমার মতে) এবং তাদের মধ্যে একটি টুলটিপ।

সেই সময়ে, টুলটিপগুলি প্রদর্শন করার জন্য কোনও অন্তর্নির্মিত সংমিশ্রণযোগ্য ছিল না এবং অনলাইনে ঘুরতে থাকা বেশ কয়েকটি বিকল্প সমাধান ছিল। এই সমাধানগুলির সাথে সমস্যাটি ছিল যে একবার জেটপ্যাক কম্পোজ নতুন সংস্করণ প্রকাশ করলে সেই সমাধানগুলি ভেঙে যেতে পারে। তাই এটি আদর্শ ছিল না এবং সম্প্রদায়টি এই আশায় রেখে গিয়েছিল যে ভবিষ্যতে কোন এক সময়, টুলটিপগুলির জন্য সমর্থন যোগ করা হবে৷

আমি বলতে পেরে আনন্দিত যে কম্পোজ ম্যাটেরিয়াল 3 এর 1.1.0 সংস্করণ থেকে, আমরা এখন টুলটিপ সমর্থন তৈরি করেছি। 👏

যদিও এটি নিজেই দুর্দান্ত, সেই সংস্করণটি প্রকাশিত হওয়ার পর এক বছরেরও বেশি সময় কেটে গেছে। এবং পরবর্তী সংস্করণগুলির সাথে, টুলটিপগুলির সাথে সম্পর্কিত APIও ব্যাপকভাবে পরিবর্তিত হয়েছে৷

আপনি যদি চেঞ্জলগের উপর যান, আপনি দেখতে পাবেন কিভাবে সর্বজনীন এবং অভ্যন্তরীণ API পরিবর্তিত হয়েছে। তাই মনে রাখবেন, আপনি যখন এই নিবন্ধটি পড়বেন, তখন জিনিসগুলি পরিবর্তন হতে থাকবে কারণ টুলটিপস সম্পর্কিত সবকিছু এখনও ExperimentalMaterial3Api::class দ্বারা চিহ্নিত করা হয়েছে। .

❗️ এই নিবন্ধটির জন্য ব্যবহৃত উপাদান 3 এর সংস্করণটি হল 1.2.1, যা 6ই মার্চ, 2024-এ প্রকাশিত হয়েছিল

আমাদের কাছে এখন দুটি ভিন্ন ধরনের টুলটিপের জন্য সমর্থন আছে:

1. সরল টুলটিপ

2. রিচ মিডিয়া টুলটিপ

প্লেন টুলটিপ

আপনি একটি আইকন বোতাম সম্পর্কে তথ্য প্রদান করতে প্রথম ধরনের ব্যবহার করতে পারেন যা অন্যথায় পরিষ্কার হবে না। উদাহরণস্বরূপ, আইকন বোতামটি কী প্রতিনিধিত্ব করে তা ব্যবহারকারীকে নির্দেশ করতে আপনি একটি সাধারণ টুলটিপ ব্যবহার করতে পারেন।

আপনার অ্যাপ্লিকেশনে একটি টুলটিপ যোগ করতে, আপনি টুলটিপবক্স ব্যবহার করুন রচনাযোগ্য এই কম্পোজেবলে বেশ কিছু আর্গুমেন্ট লাগে:

fun TooltipBox(
 positionProvider: PopupPositionProvider,
 tooltip: @Composable TooltipScope.() -> Unit,
 state: TooltipState,
 modifier: Modifier = Modifier,
 focusable: Boolean = true,
 enableUserInput: Boolean = true,
 content: @Composable () -> Unit,
)

আপনি যদি আগে Composables ব্যবহার করে থাকেন তবে এর মধ্যে কিছু আপনার পরিচিত হওয়া উচিত। আমি এখানে হাইলাইট করব যেগুলির একটি নির্দিষ্ট ব্যবহারের ক্ষেত্রে রয়েছে:

• পজিশন প্রদানকারী - PopupPositionProvider এর টাইপ, এবং টুলটিপের অবস্থান গণনা করতে ব্যবহৃত হয়।

• টুলটিপ - এখানে আপনি টুলটিপটি কেমন হবে তার UI ডিজাইন করতে পারেন।

• রাষ্ট্র - এটি একটি নির্দিষ্ট টুলটিপ দৃষ্টান্তের সাথে যুক্ত এমন অবস্থাকে ধরে রাখে। এটি টুলটিপ দেখানো/খারিজ করার মতো পদ্ধতিগুলিকে প্রকাশ করে এবং যখন একটির একটি দৃষ্টান্ত স্থাপন করার সময়, আপনি ঘোষণা করতে পারেন যে টুলটিপটি স্থায়ী হওয়া উচিত কি না (অর্থাৎ ব্যবহারকারী টুলটিপের বাইরে একটি ক্লিক ক্রিয়া সম্পাদন না করা পর্যন্ত এটি স্ক্রিনে প্রদর্শন করা উচিত)।

• বিষয়বস্তু - এটি সেই UI যা টুলটিপ উপরে/নীচে প্রদর্শন করবে।

এখানে একটি BasicTooltipBox তাৎক্ষণিক করার একটি উদাহরণ সমস্ত প্রাসঙ্গিক আর্গুমেন্ট পূরণ করে:

@OptIn(ExperimentalFoundationApi::class, ExperimentalMaterial3Api::class)
@Composable
fun BasicTooltip() {
 val tooltipPosition = TooltipDefaults.rememberPlainTooltipPositionProvider()
 val tooltipState = rememberBasicTooltipState(isPersistent = false)
 BasicTooltipBox(positionProvider = tooltipPosition,
 tooltip = { Text("Hello World") } ,
 state = tooltipState) {
 IconButton(onClick = { }) {
 Icon(imageVector = Icons.Filled.Favorite, 
 contentDescription = "Your icon's description")
 }
 }
}

জেটপ্যাক কম্পোজে টুলটিপ ডিফল্ট নামে একটি বিল্ট ইন ক্লাস রয়েছে। আপনি একটি টুলটিপবক্স তৈরি করে এমন আর্গুমেন্টগুলিকে তাৎক্ষণিক সাহায্য করতে এই ক্লাসটি ব্যবহার করতে পারেন। উদাহরণস্বরূপ, আপনি TooltipDefaults.rememberPlainTooltipPositionProvider ব্যবহার করতে পারেন নোঙ্গর উপাদান সম্পর্কিত টুলটিপ সঠিকভাবে অবস্থান করতে।

সমৃদ্ধ টুলটিপ

একটি সমৃদ্ধ মিডিয়া টুলটিপ একটি সাধারণ টুলটিপের চেয়ে বেশি জায়গা নেয় এবং একটি আইকন বোতামের কার্যকারিতা সম্পর্কে আরও প্রসঙ্গ প্রদান করতে ব্যবহার করা যেতে পারে। টুলটিপ দেখানো হলে, আপনি আরও ব্যাখ্যা বা সংজ্ঞা প্রদান করতে এতে বোতাম এবং লিঙ্ক যোগ করতে পারেন।

এটি একটি টুলটিপবক্সের ভিতরে, একটি প্লেইন টুলটিপের মতো একইভাবে ইনস্ট্যান্ট করা হয়, তবে আপনি রিচটুলটিপ কম্পোজেবল ব্যবহার করেন৷

TooltipBox(positionProvider = tooltipPosition,
 tooltip = {
 RichTooltip(
 title = { Text("RichTooltip") },
 caretSize = caretSize,
 action = {
 TextButton(onClick = {
 scope.launch {
 tooltipState.dismiss()
 tooltipState.onDispose()
 }
 }) {
 Text("Dismiss")
 }
 }
 ) {
 Text("This is where a description would go.")
 }
 },
 state = tooltipState) {
 IconButton(onClick = {
 /* Icon button's click event */
 }) {
 Icon(imageVector = tooltipIcon,
 contentDescription = "Your icon's description",
 tint = iconColor)
 }
 }

একটি সমৃদ্ধ টুলটিপ সম্পর্কে লক্ষ্য করার জন্য কয়েকটি বিষয়:

1. একটি সমৃদ্ধ টুলটিপ একটি ক্যারেটের জন্য সমর্থন করে৷

   ৷

2. আপনি টুলটিপে একটি ক্রিয়া (অর্থাৎ, একটি বোতাম) যোগ করতে পারেন যাতে ব্যবহারকারীদের আরও তথ্য খুঁজে বের করার বিকল্প দেওয়া হয়।

3. টুলটিপ খারিজ করতে আপনি যুক্তি যোগ করতে পারেন।

এজ কেস

যখন আপনি আপনার টুলটিপ স্থিতি স্থায়ী হিসাবে চিহ্নিত করতে চান৷ , এর মানে হল যে একবার ব্যবহারকারী UI এর সাথে ইন্টারঅ্যাক্ট করে যা আপনার টুলটিপ দেখায়, এটি দৃশ্যমান থাকবে যতক্ষণ না ব্যবহারকারী স্ক্রীনের অন্য কোথাও চাপ দেয়।

আপনি যদি উপরে থেকে একটি রিচ টুলটিপের উদাহরণ দেখে থাকেন, তাহলে আপনি হয়তো লক্ষ্য করেছেন যে আমরা একবার ক্লিক করার পরে টুলটিপটিকে খারিজ করার জন্য একটি বোতাম যুক্ত করেছি৷

একজন ব্যবহারকারী সেই বোতাম টিপে একবার একটি সমস্যা হয়। যেহেতু খারিজ ক্রিয়াটি টুলটিপে সঞ্চালিত হয়, যদি কোনও ব্যবহারকারী এই টুলটিপকে আহ্বান করে এমন UI আইটেমে আরেকটি দীর্ঘ প্রেস করতে চাইলে টুলটিপটি আবার দেখানো হবে না। এর মানে হল যে টুলটিপের অবস্থা এটি বরখাস্ত হওয়ার উপর অবিচল। তাহলে, আমরা কীভাবে এটির সমাধান করব?

টুলটিপের অবস্থা "রিসেট" করার জন্য, আমাদের অনডিসপোজকে কল করতে হবে পদ্ধতি যা টুলটিপ অবস্থার মাধ্যমে উন্মুক্ত করা হয়। একবার আমরা এটি করে ফেললে, টুলটিপ স্থিতি পুনরায় সেট করা হয় এবং ব্যবহারকারী যখন UI আইটেমটিতে দীর্ঘক্ষণ চাপ দেয় তখন টুলটিপটি আবার দেখানো হবে৷

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun RichTooltip() {
 val tooltipPosition = TooltipDefaults.rememberRichTooltipPositionProvider()
 val tooltipState = rememberTooltipState(isPersistent = true)
 val scope = rememberCoroutineScope()
 TooltipBox(positionProvider = tooltipPosition,
 tooltip = {
 RichTooltip(
 title = { Text("RichTooltip") },
 caretSize = TooltipDefaults.caretSize,
 action = {
 TextButton(onClick = {
 scope.launch {
 tooltipState.dismiss()
 tooltipState.onDispose() /// <---- HERE
 }
 }) {
 Text("Dismiss")
 }
 }
 ) {
 }
 },
 state = tooltipState) {
 IconButton(onClick = { }) {
 Icon(imageVector = Icons.Filled.Call, contentDescription = "Your icon's description")
 }
 }
}

অন্য একটি দৃশ্য যেখানে টুলটিপ স্টেট রিসেট হয় না তা হল যদি ব্যবহারকারীর ক্রিয়া প্রতি খারিজ পদ্ধতির জন্য নিজেদেরকে কল করার পরিবর্তে, ব্যবহারকারী টুলটিপের বাইরে ক্লিক করে, যার ফলে এটি খারিজ হয়ে যায়। এটি পর্দার পিছনে বরখাস্ত পদ্ধতিকে কল করে এবং টুলটিপ স্থিতিটি খারিজ করার জন্য সেট করা হয়। আমাদের টুলটিপ আবার দেখার জন্য UI এলিমেন্টে দীর্ঘক্ষণ চাপ দিলে কিছুই হবে না।

আমাদের যুক্তি যা টুলটিপের অন-ডিসপোজ পদ্ধতিকে কল করে তা ট্রিগার হয় না, তাই আমরা কীভাবে টুলটিপের অবস্থা পুনরায় সেট করতে পারি?

বর্তমানে, আমি এটি বের করতে সক্ষম হইনি। এটি টুলটিপের MutatorMutex এর সাথে সম্পর্কিত হতে পারে। হয়তো আসন্ন রিলিজের সাথে, এর জন্য একটি API থাকবে। আমি লক্ষ্য করেছি যে যদি অন্য টুলটিপগুলি স্ক্রিনে উপস্থিত থাকে এবং সেগুলি টিপানো হয় তবে এটি টুলটিপে পূর্বে ক্লিক করা পুনরায় সেট করে৷

আপনি যদি এখানে বৈশিষ্ট্যযুক্ত কোডটি দেখতে চান তবে আপনি এই GitHub সংগ্রহস্থলে যেতে পারেন

আপনি যদি একটি অ্যাপ্লিকেশনে টুলটিপ দেখতে চান, আপনি এটি এখানে দেখতে পারেন৷

রেফারেন্স

• Material3 টুলটিপ ওভারভিউ

• টুলটিপ ডিফল্ট

• টুলটিপ সোর্স কোড

বিনামূল্যে কোড শিখুন. freeCodeCamp-এর ওপেন সোর্স পাঠ্যক্রম 40,000-এরও বেশি লোককে ডেভেলপার হিসেবে চাকরি পেতে সাহায্য করেছে। শুরু করুন