WindowInsetsRulers সম্পর্কে

WindowInsets হল জেটপ্যাক কম্পোজের স্ট্যান্ডার্ড এপিআই যা স্ক্রীনের ক্ষেত্রগুলি পরিচালনা করার জন্য যা সিস্টেম UI দ্বারা আংশিক বা সম্পূর্ণরূপে অস্পষ্ট। এই ক্ষেত্রগুলির মধ্যে রয়েছে স্ট্যাটাস বার, নেভিগেশন বার এবং অন-স্ক্রিন কীবোর্ড। আপনি বিকল্পভাবে পূর্বনির্ধারিত WindowInsetsRulers যেমন SafeDrawing Modifier.fitInside বা Modifier.fitOutside এ পাস করতে পারেন আপনার বিষয়বস্তুকে সিস্টেম বার এবং ডিসপ্লে কাটআউটের সাথে সারিবদ্ধ করতে বা কাস্টম WindowInsetsRulers তৈরি করতে পারেন।

WindowInsetsRulers এর সুবিধা

• খরচের জটিলতা এড়ায় : এটি লেআউটের স্থান নির্ধারণের পর্যায়ে কাজ করে। এর মানে এটি সম্পূর্ণরূপে ইনসেট কনজাম্পশন চেইনকে বাইপাস করে এবং প্যারেন্ট লেআউটগুলি যা করেছে তা নির্বিশেষে সবসময় সিস্টেম বার এবং ডিসপ্লে কাটআউটগুলির সঠিক, পরম অবস্থান প্রদান করতে পারে। যখন পূর্বপুরুষ কম্পোজেবল ভুলভাবে ইনসেট ব্যবহার করে তখন Modifier.fitInside বা Modifier.fitOutside পদ্ধতিগুলি সমস্যা সমাধানে সহায়ক।
• সহজে সিস্টেম বারগুলি এড়িয়ে চলুন : এটি আপনার অ্যাপের সামগ্রীকে সিস্টেম বার এবং ডিসপ্লে কাটআউট এড়াতে সাহায্য করে এবং সরাসরি WindowInsets ব্যবহার করার চেয়ে আরও সহজ হতে পারে৷
• অত্যন্ত কাস্টমাইজযোগ্য : ডেভেলপাররা কাস্টম রুলারের সাথে বিষয়বস্তু সারিবদ্ধ করতে পারে এবং কাস্টম লেআউটের সাথে তাদের লেআউটের উপর সুনির্দিষ্ট নিয়ন্ত্রণ রাখতে পারে।

WindowInsetsRulers এর অসুবিধা

• পরিমাপের জন্য ব্যবহার করা যাবে না : কারণ এটি স্থান নির্ধারণের পর্যায়ে কাজ করে, এটি যে অবস্থানগত তথ্য প্রদান করে তা পূর্ববর্তী পরিমাপের পর্যায়ে উপলব্ধ নয় ।

মডিফায়ার পদ্ধতির সাথে আপনার সামগ্রী সারিবদ্ধ করুন

Modifier.fitInside অ্যাপগুলিকে সিস্টেম বার এবং ডিসপ্লে কাটআউটগুলির সাথে সামগ্রী সারিবদ্ধ করার অনুমতি দেয়৷ এটি WindowInsets এর পরিবর্তে ব্যবহার করা যেতে পারে। Modifier.fitOutside সাধারণত Modifier.fitInside এর বিপরীত হয়।

উদাহরণস্বরূপ, অ্যাপের বিষয়বস্তু সিস্টেম বার এবং ডিসপ্লে কাটআউট এড়িয়ে যায় কিনা তা যাচাই করতে, আপনি fitInside(WindowInsetsRulers.safeDrawing.current) ব্যবহার করতে পারেন।

@Composable
fun FitInsideDemo(modifier: Modifier) {
    Box(
        modifier = modifier
            .fillMaxSize()
            // Or DisplayCutout, Ime, NavigationBars, StatusBar, etc...
            .fitInside(WindowInsetsRulers.SafeDrawing.current)
    )
}
InsetsSnippets.kt

নিম্নলিখিত সারণীটি দেখায় যে আপনার অ্যাপের সামগ্রীটি Modifier.fitInside বা Modifier.fitOutside সহ পূর্বনির্ধারিত রুলারগুলির সাথে কেমন হবে৷

পূর্বনির্ধারিত শাসকের প্রকার	Modifier.fitInside	Modifier.fitOutside
DisplayCutout
Ime		N/A
NavigationBars
SafeDrawing		N/A (এর পরিবর্তে StatusBar , CaptionBar , NavigationBar ব্যবহার করুন)
StatusBar

Modifier.fitInside এবং Modifier.fitOutside ব্যবহার করার জন্য কম্পোজেবলগুলিকে সীমাবদ্ধ করা প্রয়োজন। এর মানে আপনাকে অবশ্যই Modifier.size বা Modifier.fillMaxSize এর মতো মডিফায়ারকে সংজ্ঞায়িত করতে হবে।

কিছু রুলার যেমন Modifier.fitOutside on SafeDrawing এবং SystemBars একাধিক রুলার রিটার্ন করে। এই ক্ষেত্রে, অ্যান্ড্রয়েড বাম, উপরে, ডান, নীচে থেকে একটি রুলার ব্যবহার করে কম্পোজেবল রাখে।

Modifier.fitInside দিয়ে IME এড়িয়ে চলুন

Modifier.fitInside সাথে একটি IME এর সাথে নীচের উপাদানগুলি পরিচালনা করতে, একটি RectRuler পাস করুন যা NavigationBar এবং Ime এর সবচেয়ে ভিতরের মান নেয়।

@Composable
fun FitInsideWithImeDemo(modifier: Modifier) {
    Box(
        modifier = modifier
            .fillMaxSize()
            .fitInside(
                RectRulers.innermostOf(
                    WindowInsetsRulers.NavigationBars.current,
                    WindowInsetsRulers.Ime.current
                )
            )
    ) {
        TextField(
            value = "Demo IME Insets",
            onValueChange = {},
            modifier = modifier.align(Alignment.BottomStart).fillMaxWidth()
        )
    }
}
InsetsSnippets.kt

Modifier.fitInside সহ স্ট্যাটাস বার এবং ক্যাপশন বার এড়িয়ে চলুন

একইভাবে, Modifier.fitInsider সাথে স্ট্যাটাস বার এবং ক্যাপশন বার এড়িয়ে শীর্ষ উপাদানগুলি যাচাই করতে, একটি RectRuler পাস করুন যা StatusBars এবং CaptionBar এর সবচেয়ে অন্তর্নিহিত মান নেয়।

@Composable
fun FitInsideWithStatusAndCaptionBarDemo(modifier: Modifier) {
    Box(
        modifier = modifier
            .fillMaxSize()
            .fitInside(
                RectRulers.innermostOf(
                    WindowInsetsRulers.StatusBars.current,
                    WindowInsetsRulers.CaptionBar.current
                )
            )
    )
}
InsetsSnippets.kt

কাস্টম WindowInsetsRulers তৈরি করুন

আপনি কাস্টম রুলারে বিষয়বস্তু সারিবদ্ধ করতে পারেন। উদাহরণস্বরূপ, ব্যবহারের ক্ষেত্রে বিবেচনা করুন যেখানে একটি অভিভাবক কম্পোজেবল অনুপযুক্তভাবে ইনসেটগুলি পরিচালনা করে যার ফলে একটি নিম্নধারার শিশুর মধ্যে প্যাডিং সমস্যা হয়। যদিও এই সমস্যাটি অন্যান্য উপায়ে সমাধান করা যেতে পারে, যার মধ্যে Modifier.fitInside ব্যবহার করে, আপনি একটি কাস্টম রুলার তৈরি করতে পারেন যাতে নিম্নলিখিত উদাহরণ এবং ভিডিওতে দেখানো হয়েছে প্যারেন্ট আপস্ট্রীমে সমস্যাটি ঠিক না করেই শিশু কম্পোজেবলকে সুনির্দিষ্টভাবে সারিবদ্ধ করতে:

@Composable
fun WindowInsetsRulersDemo(modifier: Modifier) {
    Box(
        contentAlignment = BottomCenter,
        modifier = modifier
            .fillMaxSize()
            // The mistake that causes issues downstream, as .padding doesn't consume insets.
            // While it's correct to instead use .windowInsetsPadding(WindowInsets.navigationBars),
            // assume it's difficult to identify this issue to see how WindowInsetsRulers can help.
            .padding(WindowInsets.navigationBars.asPaddingValues())
    ) {
        TextField(
            value = "Demo IME Insets",
            onValueChange = {},
            modifier = modifier
                // Use alignToSafeDrawing() instead of .imePadding() to precisely place this child
                // Composable without having to fix the parent upstream.
                .alignToSafeDrawing()

            // .imePadding()
            // .fillMaxWidth()
        )
    }
}

fun Modifier.alignToSafeDrawing(): Modifier {
    return layout { measurable, constraints ->
        if (constraints.hasBoundedWidth && constraints.hasBoundedHeight) {
            val placeable = measurable.measure(constraints)
            val width = placeable.width
            val height = placeable.height
            layout(width, height) {
                val bottom = WindowInsetsRulers.SafeDrawing.current.bottom
                    .current(0f).roundToInt() - height
                val right = WindowInsetsRulers.SafeDrawing.current.right
                    .current(0f).roundToInt()
                val left = WindowInsetsRulers.SafeDrawing.current.left
                    .current(0f).roundToInt()
                measurable.measure(Constraints.fixed(right - left, height))
                    .place(left, bottom)
            }
        } else {
            val placeable = measurable.measure(constraints)
            layout(placeable.width, placeable.height) {
                placeable.place(0, 0)
            }
        }
    }
}
InsetsSnippets.kt

নীচের ভিডিওটি বাম দিকের ছবিতে একটি আপস্ট্রিম অভিভাবক দ্বারা সৃষ্ট সমস্যাযুক্ত IME ইনসেট খরচের একটি উদাহরণ দেখায় এবং ডানদিকে সমস্যাটি সমাধান করতে কাস্টম রুলার ব্যবহার করে৷ TextField কম্পোজেবলের নীচে অতিরিক্ত প্যাডিং দেখানো হয়েছে কারণ নেভিগেশন বার প্যাডিং অভিভাবক দ্বারা ব্যবহার করা হয়নি। পূর্ববর্তী কোড নমুনায় দেখা যায় এমন একটি কাস্টম রুলার ব্যবহার করে শিশুটিকে সঠিক চিত্রের সঠিক স্থানে স্থাপন করা হয়েছে।

যাচাই করুন যে বাবা-মা বাধ্য

WindowInsetsRulers নিরাপদে ব্যবহার করার জন্য, নিশ্চিত করুন যে অভিভাবক বৈধ সীমাবদ্ধতা প্রদান করে। পিতামাতার অবশ্যই একটি সংজ্ঞায়িত আকার থাকতে হবে এবং WindowInsetsRulers ব্যবহার করে এমন একটি শিশুর আকারের উপর নির্ভর করতে পারে না। প্যারেন্ট কম্পোজেবলে fillMaxSize বা অন্য সাইজ মডিফায়ার ব্যবহার করুন।

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