Compose में विंडो इनसेट

Android प्लैटफ़ॉर्म, सिस्टम यूज़र इंटरफ़ेस (यूआई) बनाने के लिए ज़िम्मेदार होता है, जैसे कि स्टेटस बार और नेविगेशन बार पर क्लिक करें. यह सिस्टम यूज़र इंटरफ़ेस (यूआई) दिखाया जाता है, भले ही वह किसी भी वह ऐप्लिकेशन है जिसका इस्तेमाल उपयोगकर्ता कर रहा है. WindowInsets, सिस्टम के बारे में जानकारी देता है यूज़र इंटरफ़ेस (यूआई) की इमेज, ताकि यह पक्का किया जा सके कि आपका ऐप्लिकेशन सही जगह पर दिखे और यूज़र इंटरफ़ेस (यूआई) छिपी न हो को लागू किया जा सकता है.

सिस्टम बार के पीछे एक किनारे से दूसरे किनारे तक जाना
पहली इमेज. सिस्टम बार के पीछे एक किनारे से दूसरे किनारे तक जाना

डिफ़ॉल्ट रूप से, आपके ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) को सिस्टम यूज़र इंटरफ़ेस (यूआई) के अंदर रखा जाता है, जैसे, स्टेटस बार और नेविगेशन बार. इससे पक्का होता है कि आपके ऐप्लिकेशन का कॉन्टेंट सिस्टम के यूज़र इंटरफ़ेस (यूआई) एलिमेंट से छिप नहीं सकता.

हालांकि, हमारा सुझाव है कि आप ऐप्लिकेशन को उन इलाकों में दिखाने के लिए ऑप्ट-इन करें जहां सिस्टम यूज़र इंटरफ़ेस (यूआई) भी दिखता है. इससे उपयोगकर्ताओं को बेहतर अनुभव मिलता है और इससे ऐप्लिकेशन, उसके लिए उपलब्ध विंडो स्पेस का पूरा फ़ायदा ले पाता है. यह इससे ऐप्लिकेशन, सिस्टम यूज़र इंटरफ़ेस (यूआई) के साथ ऐनिमेट भी हो सकते हैं. खास तौर पर, ऐसा तब होता है, जब और सॉफ़्टवेयर कीबोर्ड को छिपाया जा सकता है.

इन इलाकों में दिखाने के लिए ऑप्ट इन करना और सिस्टम यूज़र इंटरफ़ेस (यूआई) को going Edge-to- Edge कहा जाता है. इस पेज पर, आपको अलग-अलग तरह के इनसेट, एक से दूसरे किनारे तक जाने के लिए ऑप्ट-इन करने का तरीका, और इनसेट एपीआई का इस्तेमाल करें, ताकि आपके यूज़र इंटरफ़ेस (यूआई) को ऐनिमेट किया जा सके और आपके ऐप्लिकेशन के हिस्सों को धुंधला करने से बचा जा सके.

इनसेट की बुनियादी बातें

जब कोई ऐप्लिकेशन एक से दूसरे किनारे तक जाता है, तो आपको यह पक्का करना होगा कि ज़रूरी कॉन्टेंट और सिस्टम के यूज़र इंटरफ़ेस (यूआई) से इंटरैक्शन को छिपाया नहीं जाता. उदाहरण के लिए, यदि कोई बटन जगह है, तो हो सकता है उपयोगकर्ता उस पर क्लिक न कर पाए.

सिस्टम के यूज़र इंटरफ़ेस (यूआई) का साइज़ और उसे कहां रखा जाएगा, इसकी जानकारी दी गई है insets के ज़रिए मिलेंगे.

सिस्टम के यूज़र इंटरफ़ेस (यूआई) के हर हिस्से में इसी तरह का इनसेट होता है, जो इसका साइज़ और उसे कहां रखा जाए. उदाहरण के लिए, स्टेटस बार इनसेट से आपको स्टेटस बार और पोज़िशन पर होता है, जबकि नेविगेशन बार इनसेट से नेविगेशन बार का साइज़ और पोज़िशन. हर तरह के इनसेट में चार पिक्सल डाइमेंशन: ऊपर, बाएं, दाएं, और नीचे. इन डाइमेंशन से पता चलता है कि सिस्टम का यूज़र इंटरफ़ेस (यूआई), ऐप्लिकेशन की विंडो के संगत साइड से बड़ा हो जाता है. इससे बचने के लिए सिस्टम यूज़र इंटरफ़ेस (यूआई) को ओवरलैप करता है. इसलिए, ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) को उसी रकम.

पहले से मौजूद इन Android इनसेट के टाइप, WindowInsets के ज़रिए उपलब्ध हैं:

WindowInsets.statusBars

स्टेटस बार की जानकारी देने वाले इनसेट. ये सिस्टम के सबसे ऊपर मौजूद यूज़र इंटरफ़ेस (यूआई) बार हैं. इनमें सूचना आइकॉन और दूसरे इंडिकेटर शामिल होते हैं.

WindowInsets.statusBarsIgnoringVisibility

स्टेटस बार यह दिखाता है कि वे कब दिख रहे हैं. अगर स्टेटस बार फ़िलहाल छिपे हुए हैं (इमर्सिव फ़ुल स्क्रीन मोड में जाने की वजह से), तो मुख्य स्टेटस बार के इनसेट खाली होंगे, लेकिन ये इनसेट खाली नहीं होंगे.

WindowInsets.navigationBars

नेविगेशन बार की जानकारी देने वाले इनसेट. ये डिवाइस के बाईं, दाईं या नीचे की ओर सिस्टम यूज़र इंटरफ़ेस (यूआई) बार होते हैं, जो टास्कबार या नेविगेशन आइकॉन के बारे में बताते हैं. उपयोगकर्ता के पसंदीदा नेविगेशन के तरीके और टास्कबार के साथ इंटरैक्ट करने के दौरान, रनटाइम के दौरान इनमें बदलाव हो सकता है.

WindowInsets.navigationBarsIgnoringVisibility

नेविगेशन बार यह दिखाता है कि वे कब दिख रहे हैं. अगर नेविगेशन बार फ़िलहाल छिपे हुए हैं (मज़ेदार फ़ुल स्क्रीन मोड में जाने की वजह से), तो मुख्य नेविगेशन बार के इनसेट खाली होंगे, लेकिन ये इनसेट खाली नहीं होंगे.

WindowInsets.captionBar

सिस्टम यूज़र इंटरफ़ेस (यूआई) विंडो की सजावट के बारे में बताने वाला इनसेट. अगर यह फ़्रीफ़ॉर्म विंडो में है, जैसे कि सबसे ऊपर मौजूद टाइटल बार.

WindowInsets.captionBarIgnoringVisibility

कैप्शन बार तब दिखाया जाता है, जब वे दिखाई देते हैं. अगर कैप्शन बार फ़िलहाल छिपाए गए हैं, तो मुख्य कैप्शन बार इनसेट खाली होंगे, लेकिन ये इनसेट खाली नहीं होंगे.

WindowInsets.systemBars

यह सिस्टम बार इनसेट को जोड़ता है, जिनमें स्टेटस बार, नेविगेशन बार, और कैप्शन बार शामिल होते हैं.

WindowInsets.systemBarsIgnoringVisibility

सिस्टम बार इनके दिखने की तारीख को सेट करता है. अगर इमर्सिव फ़ुल स्क्रीन मोड में जाने की वजह से फ़िलहाल सिस्टम बार छिपे हुए हैं, तो मुख्य सिस्टम बार इनसेट खाली होंगे, लेकिन ये इनसेट खाली नहीं होंगे.

WindowInsets.ime

नीचे दिए गए इनसेट में, सॉफ़्टवेयर कीबोर्ड के नीचे इस्तेमाल की जा रही जगह के बारे में बताया गया है.

WindowInsets.imeAnimationSource

इनसेट से यह पता चलता है कि कीबोर्ड के मौजूदा ऐनिमेशन से पहले सॉफ़्टवेयर कीबोर्ड ने कितनी जगह का इस्तेमाल किया था.

WindowInsets.imeAnimationTarget

इनसेट से यह पता चलता है कि कीबोर्ड के मौजूदा ऐनिमेशन के बाद, सॉफ़्टवेयर कीबोर्ड कितना स्पेस लेगा.

WindowInsets.tappableElement

एक तरह का इनसेट, जो नेविगेशन यूज़र इंटरफ़ेस (यूआई) के बारे में ज़्यादा जानकारी देता है. इससे "टैप" करने पर खाली जगह मिलती है उसे सिस्टम मैनेज करेगा, न कि ऐप्लिकेशन. जेस्चर वाले नेविगेशन वाले पारदर्शी नेविगेशन बार के लिए, ऐप्लिकेशन के कुछ एलिमेंट को सिस्टम नेविगेशन यूज़र इंटरफ़ेस (यूआई) से टैप किया जा सकता है.

WindowInsets.tappableElementIgnoringVisibility

टैप किए जा सकने वाले एलिमेंट इस बात को सेट करते हैं कि वे कब दिख रहे हैं. अगर टैप किए जा सकने वाले एलिमेंट फ़िलहाल छिपाए गए हैं (इमर्सिव फ़ुल स्क्रीन मोड में जाने की वजह से), तो टैप किए जा सकने वाले मुख्य एलिमेंट इनसेट खाली होंगे, लेकिन ये इनसेट खाली नहीं होंगे.

WindowInsets.systemGestures

इनसेट में इनसेट की संख्या है, जहां सिस्टम नेविगेशन के लिए जेस्चर का इस्तेमाल करेगा. ऐप्लिकेशन Modifier.systemGestureExclusion का इस्तेमाल करके, मैन्युअल तरीके से यह तय कर सकते हैं कि हाथ के कुछ जेस्चर का इस्तेमाल कैसे किया जाए.

WindowInsets.mandatorySystemGestures

यह सिस्टम जेस्चर का एक सबसेट है, जिसे सिस्टम हमेशा इस्तेमाल करेगा. साथ ही, जिसे Modifier.systemGestureExclusion की मदद से ऑप्ट आउट नहीं किया जा सकता.

WindowInsets.displayCutout

इनसेट में, डिसप्ले कटआउट (नॉच या पिनहोल) को ओवरलैप होने से बचाने के लिए, ज़रूरी स्पेस की जानकारी दी गई है.

WindowInsets.waterfall

झरने के घुमावदार हिस्सों को दिखाने वाले इनसेट. वॉटरफ़ॉल डिसप्ले में स्क्रीन के किनारों पर ऐसे घुमावदार इलाके होते हैं जहां स्क्रीन, डिवाइस के किनारों के साथ रैप होती है.

इन टाइप की खास जानकारी में, तीन "सुरक्षित" शामिल हैं. इनसेट टाइप से यह पक्का किया जा सकता है कि अस्पष्ट:

ये "सुरक्षित" इनसेट टाइप में दिए गए प्लैटफ़ॉर्म इनसेट:

  • WindowInsets.safeDrawing का इस्तेमाल करके, वह कॉन्टेंट सुरक्षित रखें जिसे नहीं बनाया जा सकता पर क्लिक करें. आम तौर पर, इनसेट का इस्तेमाल किया जाता है: ऐसा कॉन्टेंट बनाना जो सिस्टम के यूज़र इंटरफ़ेस (यूआई) से साफ़ न हो (या तो कुछ हद तक या शामिल हैं).
  • हाथ के जेस्चर से कॉन्टेंट को सुरक्षित रखने के लिए, WindowInsets.safeGestures का इस्तेमाल करें. यह ऐप जेस्चर के साथ सिस्टम जेस्चर के बीच टकराव से बचा जाता है (जैसे कि बॉटम जेस्चर शीट, कैरसेल या गेम में से कोई एक).
  • WindowInsets.safeContent का इस्तेमाल इनको मिलाकर करें पक्का करने के लिए, WindowInsets.safeDrawing और WindowInsets.safeGestures कॉन्टेंट में कोई विज़ुअल ओवरलैप और जेस्चर ओवरलैप न हो.

इनसेट सेटअप

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

  1. इतने समय में enableEdgeToEdge() पर कॉल करें Activity.onCreate. यह कॉल अनुरोध करता है कि आपका ऐप्लिकेशन सिस्टम यूज़र इंटरफ़ेस (यूआई) की इमेज. इसके बाद, आपके ऐप्लिकेशन के पास यह कंट्रोल होगा कि इन इनसेट का इस्तेमाल इन कामों के लिए कैसे किया जाए करके यूज़र इंटरफ़ेस (यूआई) में बदलाव कर सकता है.

  2. android:windowSoftInputMode="adjustResize" को अपनी ऐक्टिविटी में सेट करें AndroidManifest.xml एंट्री. इस सेटिंग से, आपके ऐप्लिकेशन को साइज़ सॉफ़्टवेयर IME को इनसेट के रूप में उपयोग किया, जिसका उपयोग आप सामग्री को पैड करने और लेआउट करने के लिए कर सकते हैं आपके ऐप्लिकेशन में IME के दिखने और गायब होने पर, सही तरीके से.

    <!-- in your AndroidManifest.xml file: -->
<activity
  android:name=".ui.MainActivity"
  android:label="@string/app_name"
  android:windowSoftInputMode="adjustResize"
  android:theme="@style/Theme.MyApplication"
  android:exported="true">

Compose के एपीआई

जब आपकी ऐक्टिविटी सभी इनसेट को मैनेज कर लेगी, तब आप कंपोज़ की सुविधा का इस्तेमाल कर सकते हैं एपीआई यह पक्का करते हैं कि कॉन्टेंट धुंधला न हो और इंटरैक्ट करने वाले एलिमेंट आपके सिस्टम के यूज़र इंटरफ़ेस (यूआई) को ओवरलैप करें. ये एपीआई आपके ऐप्लिकेशन का लेआउट भी सिंक करते हैं इनसेट में बदलें.

उदाहरण के लिए, यह कॉन्टेंट पर इनसेट लागू करने का सबसे बुनियादी तरीका है पासवर्ड का इस्तेमाल करें:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    enableEdgeToEdge()

    setContent {
        Box(Modifier.safeDrawingPadding()) {
            // the rest of the app
        }
    }
}
InsetsSnippets.kt

यह स्निपेट safeDrawing विंडो इनसेट को कॉन्टेंट हटाने के लिए कहें. इससे यह पक्का होता है कि इंटरैक्ट किए जा सकने वाले एलिमेंट सिस्टम के यूज़र इंटरफ़ेस (यूआई) से ओवरलैप करता है, तो इसका यह भी मतलब है कि कोई भी ऐप्लिकेशन सिस्टम यूज़र इंटरफ़ेस (यूआई) का इस्तेमाल करें. पूरे डेटा का इस्तेमाल विंडो के लिए, आपको एक स्क्रीन-दर-स्क्रीन पर इनसेट को लागू किए जाने वाले हिस्से को बेहतर बनाना होगा या कॉम्पोनेंट-दर-कॉम्पोनेंट के आधार पर तय होता है.

ये सभी इनसेट टाइप, IME ऐनिमेशन के साथ अपने-आप ऐनिमेट होते हैं एपीआई 21 पर बैकपोर्ट किया गया. एक्सटेंशन का इस्तेमाल करके, इन इनसेट का इस्तेमाल करने वाले आपके सभी लेआउट साथ ही, इनसेट वैल्यू बदलने पर अपने-आप ऐनिमेट होता है.

कंपोज़ेबल को अडजस्ट करने के लिए, इन इनसेट टाइप का इस्तेमाल करने के दो मुख्य तरीके हैं लेआउट: पैडिंग मॉडिफ़ायर और इनसेट साइज़ मॉडिफ़ायर.

पैडिंग मॉडिफ़ायर

Modifier.windowInsetsPadding(windowInsets: WindowInsets) ये शर्तें लागू करता है: दिया गया विंडो इनसेट, पैडिंग के रूप में होता है, जो Modifier.padding की तरह काम करता है. उदाहरण के लिए, Modifier.windowInsetsPadding(WindowInsets.safeDrawing) लागू होता है सुरक्षित ड्रॉइंग इनसेट को चारों ओर पैडिंग के रूप में सेट कर देता है.

सबसे आम इनसेट टाइप के लिए, कई सुविधाएं पहले से मौजूद हैं. Modifier.safeDrawingPadding() ऐसा ही एक तरीका है. Modifier.windowInsetsPadding(WindowInsets.safeDrawing). एनालॉग दूसरे इनसेट टाइप के लिए मॉडिफ़ायर का इस्तेमाल करें.

इनसेट साइज़ मॉडिफ़ायर

नीचे दिए गए मॉडिफ़ायर, विंडो इनसेट की संख्या को कॉम्पोनेंट, इनसेट का साइज़ होना चाहिए:

Modifier.windowInsetsStartWidth(windowInsets: WindowInsets)

windowInsets के शुरुआती हिस्से पर, चौड़ाई के तौर पर लागू करता है (जैसे कि Modifier.width)

Modifier.windowInsetsEndWidth(windowInsets: WindowInsets)

windowInsets के आखिरी हिस्से को चौड़ाई के तौर पर लागू करता है (जैसे कि Modifier.width)

Modifier.windowInsetsTopHeight(windowInsets: WindowInsets)

windowInsets के ऊपरी हिस्से को ऊंचाई के तौर पर लागू करता है (जैसे कि Modifier.height)

Modifier.windowInsetsBottomHeight(windowInsets: WindowInsets)

विंडो इनसेट के निचले हिस्से को ऊंचाई के तौर पर लागू करता है (जैसे Modifier.height)

ये मॉडिफ़ायर खास तौर पर, उस Spacer का साइज़ बदलने के लिए काम के होते हैं जो इनसेट का स्पेस:

LazyColumn(
    Modifier.imePadding()
) {
    // Other content
    item {
        Spacer(
            Modifier.windowInsetsBottomHeight(
                WindowInsets.systemBars
            )
        )
    }
}
InsetsSnippets.kt

इनसेट इस्तेमाल

इनसेट पैडिंग मॉडिफ़ायर (windowInsetsPadding और हेल्पर जैसे safeDrawingPadding) अपने-आप ही इनसेट के उस हिस्से का इस्तेमाल करती है जिसे इसे पैडिंग के तौर पर लागू किया जाता है. कंपोज़िशन ट्री के अंदर जाते समय, नेस्ट किए हुए इनसेट को पैडिंग मॉडिफ़ायर और इनसेट साइज़ मॉडिफ़ायर को पता है कि इनसेट का इस्तेमाल बाहरी इनसेट पैडिंग मॉडिफ़ायर पहले ही कर लिया गया है. साथ ही, इनसेट के एक ही हिस्से का एक से ज़्यादा बार इस्तेमाल करने से नतीजे में भी ज़्यादा स्टोरेज की ज़रूरत नहीं होती.

इनसेट साइज़ मॉडिफ़ायर से भी इनसेट के एक ही हिस्से का इस्तेमाल एक से ज़्यादा बार नहीं किया जाता अगर इनसेट का पहले ही इस्तेमाल किया जा चुका है. हालांकि, जब से वह अपने का इस्तेमाल करते हैं, तो वे इनसेट का इस्तेमाल नहीं करते.

इस वजह से, नेस्टिंग पैडिंग मॉडिफ़ायर अपने-आप हर कंपोज़ेबल में पैडिंग (जगह) लागू की गई है.

पहले की तरह ही LazyColumn उदाहरण पर नज़र डालें, LazyColumn imePadding मॉडिफ़ायर से साइज़ बदला जा सकता है. LazyColumn के अंदर, आखिरी आइटम है साइज़, सिस्टम बार के निचले हिस्से की ऊंचाई के बराबर होना चाहिए:

LazyColumn(
    Modifier.imePadding()
) {
    // Other content
    item {
        Spacer(
            Modifier.windowInsetsBottomHeight(
                WindowInsets.systemBars
            )
        )
    }
}
InsetsSnippets.kt

IME बंद होने पर, imePadding() मॉडिफ़ायर कोई पैडिंग (जगह) लागू नहीं करता, क्योंकि IME की कोई ऊंचाई नहीं है. imePadding() मॉडिफ़ायर में कोई पैडिंग (जगह) नहीं लागू किया जा रहा है. कोई इनसेट इस्तेमाल नहीं किया गया है और Spacer की ऊंचाई इतनी होगी कि सबसे नीचे दाईं ओर मौजूद है.

IME के खुलने पर, IME IME के आकार से मेल खाने के लिए ऐनिमेट करता है, और imePadding() मॉडिफ़ायर, सबसे नीचे वाली पैडिंग (जगह) को लागू करना शुरू करता है, ताकि IME के खुलने पर LazyColumn. जैसे ही imePadding() मॉडिफ़ायर लागू होना शुरू होता है नीचे की पैडिंग के साथ, यह इनसेट की मात्रा का भी उपयोग करना शुरू कर देता है. इसलिए, Spacer की ऊंचाई कम होना शुरू हो जाती है. ऐसा सिस्टम के बीच के स्पेस के हिस्से के तौर पर किया जाता है imePadding() मॉडिफ़ायर के ज़रिए बार को पहले ही लागू कर दिया गया है. एक बार imePadding() मॉडिफ़ायर, सबसे नीचे की पैडिंग (जगह) को लागू कर रहा है सिस्टम बार की तुलना में, Spacer की ऊंचाई शून्य है.

IME बंद होने पर, बदलाव उलटे होते हैं: Spacer जब imePadding() इसके मान से कम लागू हो रहा हो, तो शून्य की ऊंचाई से बड़ा करें सिस्टम बार के निचले हिस्से में दिखाई देता है, जब तक कि Spacer की ऊंचाई के बराबर या उससे ज़्यादा नहीं हो जाती IME के पूरी तरह से ऐनिमेट हो जाने के बाद, सिस्टम बार के नीचे की ओर.

दूसरी इमेज. TextField
के साथ एज-टू-एज लेज़ी कॉलम

यह व्यवहार सभी के बीच संचार के माध्यम से पूरा होता है windowInsetsPadding मॉडिफ़ायर हैं और कई अन्य चीज़ों से प्रभावित हो सकते हैं तरीके.

Modifier.consumeWindowInsets(insets: WindowInsets) इनसेट का भी इस्तेमाल करता है Modifier.windowInsetsPadding की तरह ही हैं, लेकिन यह लागू नहीं होता इस्तेमाल किए गए इनसेट को पैडिंग के तौर पर इस्तेमाल किया जा सकता है. यह इनसेट के साथ काम में आता है साइज़ मॉडिफ़ायर, ताकि भाई-बहनों को यह पता चल सके कि एक तय संख्या में इनसेट हैं पहले ही उपयोग कर लिया गया है:

Column(Modifier.verticalScroll(rememberScrollState())) {
    Spacer(Modifier.windowInsetsTopHeight(WindowInsets.systemBars))

    Column(
        Modifier.consumeWindowInsets(
            WindowInsets.systemBars.only(WindowInsetsSides.Vertical)
        )
    ) {
        // content
        Spacer(Modifier.windowInsetsBottomHeight(WindowInsets.ime))
    }

    Spacer(Modifier.windowInsetsBottomHeight(WindowInsets.systemBars))
}
InsetsSnippets.kt

Modifier.consumeWindowInsets(paddingValues: PaddingValues) बहुत काम करता है WindowInsets आर्ग्युमेंट वाले वर्शन की तरह ही काम करता है, लेकिन इस्तेमाल करने के लिए आर्बिट्रेरी PaddingValues. यह जानकारी देने के लिए फ़ायदेमंद है जब पैडिंग या स्पेसिंग इनसेट पैडिंग मॉडिफ़ायर, जैसे कि सामान्य Modifier.padding या तय ऊंचाई स्पेसर:

@OptIn(ExperimentalLayoutApi::class)
Column(Modifier.padding(16.dp).consumeWindowInsets(PaddingValues(16.dp))) {
    // content
    Spacer(Modifier.windowInsetsBottomHeight(WindowInsets.ime))
}
InsetsSnippets.kt

ऐसे मामलों में जहां बिना इस्तेमाल किए रॉ विंडो इनसेट की ज़रूरत हो, वहां सीधे तौर पर WindowInsets वैल्यू दें या WindowInsets.asPaddingValues() का इस्तेमाल करके ऐसे इनसेट का PaddingValues दिखाएँ जो खपत से प्रभावित नहीं होते. हालांकि, नीचे दी गई चेतावनियों की वजह से, विंडो इनसेट पैडिंग का इस्तेमाल करें जहां भी मुमकिन हो, वहां कार्रवाई बदलने वाली कुंजी और विंडो, साइज़ मॉडिफ़ायर को सेट कर देती है.

Insets और Jetpack Compose के चरण

Compose, इनसेट को अपडेट और ऐनिमेट करने के लिए, AndroidX के कोर एपीआई का इस्तेमाल करता है, जो इनसेट को मैनेज करने के लिए, दिए गए प्लैटफ़ॉर्म एपीआई का इस्तेमाल करते हैं. उस प्लैटफ़ॉर्म की वजह से व्यवहार, इनसेट का Jetpack के चरणों के साथ खास संबंध है लिखें.

इनसेट की वैल्यू, कंपोज़िशन फ़ेज़ के बाद अपडेट की जाती है, लेकिन शुरुआती वैल्यू से पहले अपडेट की जाती है लेआउट फ़ेज़. इसका मतलब है कि कंपोज़िशन में इनसेट की वैल्यू को पढ़ना आम तौर पर, इनसेट की ऐसी वैल्यू का इस्तेमाल करता है जो एक फ़्रेम देर से अपडेट होती है. बिल्ट-इन इस पेज पर बताए गए मॉडिफ़ायर में, लेआउट फ़ेज़ तक इनसेट करता है, जिससे यह पक्का होता है कि इनसेट वैल्यू का इस्तेमाल उसी फ़्रेम से जुड़ी हों जिसे उन्हें अपडेट किया गया है.

WindowInsets के साथ कीबोर्ड IME ऐनिमेशन

किसी स्क्रोलिंग कंटेनर पर Modifier.imeNestedScroll() को लागू करके, इसे खोला जा सकता है और कंटेनर के नीचे तक स्क्रोल करते समय, IME को अपने-आप बंद कर देता है.

class WindowInsetsExampleActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        WindowCompat.setDecorFitsSystemWindows(window, false)

        setContent {
            MaterialTheme {
                MyScreen()
            }
        }
    }
}

@OptIn(ExperimentalLayoutApi::class)
@Composable
fun MyScreen() {
    Box {
        LazyColumn(
            modifier = Modifier
                .fillMaxSize() // fill the entire window
                .imePadding() // padding for the bottom for the IME
                .imeNestedScroll(), // scroll IME at the bottom
            content = { }
        )
        FloatingActionButton(
            modifier = Modifier
                .align(Alignment.BottomEnd)
                .padding(16.dp) // normal 16dp of padding for FABs
                .navigationBarsPadding() // padding for navigation bar
                .imePadding(), // padding for when IME appears
            onClick = { }
        ) {
            Icon(imageVector = Icons.Filled.Add, contentDescription = "Add")
        }
    }
}
MigrationOtherConsiderationsSnippets.kt

ऐनिमेशन में, यूआई एलिमेंट को ऊपर और नीचे की ओर स्क्रोल करते हुए कीबोर्ड का इस्तेमाल करते हुए दिखाया गया है

पहला डायग्राम. IME ऐनिमेशन

Material 3 कॉम्पोनेंट के लिए इनसेट सपोर्ट

आसानी से इस्तेमाल करने के लिए, पहले से मौजूद कई मटीरियल 3 कंपोज़ेबल (androidx.compose.material3) यह इस बात के हिसाब से खुद इनसेट को हैंडल करता है कि आपके ऐप्लिकेशन में कंपोज़ेबल को किस तरह रखा गया है सामग्री विनिर्देशों के अनुसार

इनसेट हैंडलिंग कंपोज़ेबल

नीचे मटीरियल की सूची दी गई है ऐसे कॉम्पोनेंट जो अपने-आप इनसेट को हैंडल करता है.

ऐप्लिकेशन बार

  • TopAppBar / SmallTopAppBar / CenterAlignedTopAppBar / MediumTopAppBar / LargeTopAppBar: सिस्टम बार के टॉप और हॉरिज़ॉन्टल किनारों को पैडिंग के तौर पर लागू करता है, क्योंकि इसका इस्तेमाल विंडो के सबसे ऊपर किया जाता है.
  • BottomAppBar: सिस्टम बार के नीचे और हॉरिज़ॉन्टल साइड को पैडिंग के तौर पर लागू करता है.

कॉन्टेंट कंटेनर

  • ModalDrawerSheet / DismissibleDrawerSheet / PermanentDrawerSheet (मॉडल नेविगेशन पैनल में मौजूद कॉन्टेंट): कॉन्टेंट पर वर्टिकल और स्टार्ट इनसेट लागू होते हैं.
  • ModalBottomSheet: सबसे नीचे इनसेट पर लागू होता है.
  • NavigationBar : नीचे और हॉरिज़ॉन्टल इनसेट पर लागू होता है.
  • NavigationRail: वर्टिकल और स्टार्ट इनसेट पर लागू होता है.

स्कैफ़ोल्ड

डिफ़ॉल्ट रूप से, Scaffold आपके इस्तेमाल और इस्तेमाल के लिए, पैरामीटर paddingValues के रूप में इनसेट देता है. Scaffold, कॉन्टेंट पर इनसेट लागू नहीं करता; तो यह ज़िम्मेदारी आपकी है. उदाहरण के लिए, Scaffold के अंदर LazyColumn के साथ इन इनसेट का इस्तेमाल करने के लिए:

Scaffold { innerPadding ->
    // innerPadding contains inset information for you to use and apply
    LazyColumn(
        // consume insets as scaffold doesn't do it by default
        modifier = Modifier.consumeWindowInsets(innerPadding),
        contentPadding = innerPadding
    ) {
        items(count = 100) {
            Box(
                Modifier
                    .fillMaxWidth()
                    .height(50.dp)
                    .background(colors[it % colors.size])
            )
        }
    }
}
InsetsSnippets.kt

डिफ़ॉल्ट इनसेट को बदलें

कंपोज़ेबल को पास किए गए windowInsets पैरामीटर को, इस तरह बदला जा सकता है: कंपोज़ेबल के व्यवहार को कॉन्फ़िगर करें. यह पैरामीटर अलग तरह का हो सकता है इसके बजाय लागू करने के लिए विंडो इनसेट का इस्तेमाल करें, या कोई खाली इंस्टेंस पास करके बंद कर दें: WindowInsets(0, 0, 0, 0).

उदाहरण के लिए, इनसेट हैंडलिंग को बंद करना LargeTopAppBar windowInsets पैरामीटर को किसी खाली इंस्टेंस पर सेट करें:

LargeTopAppBar(
    windowInsets = WindowInsets(0, 0, 0, 0),
    title = {
        Text("Hi")
    }
)
InsetsSnippets.kt

व्यू सिस्टम इनसेट के साथ इंटरऑप करें

अगर आपकी स्क्रीन में व्यू और कोड को उसी क्रम में लिखें. इस मामले में, आपको साफ़ तौर पर किसे इनसेट का इस्तेमाल करना चाहिए और किसे अनदेखा करना चाहिए.

उदाहरण के लिए, अगर आपका सबसे बाहरी लेआउट एक Android View लेआउट है, तो आपको व्यू सिस्टम में इनसेट का इस्तेमाल करेगा और कंपोज़ के लिए उन्हें अनदेखा कर देगा. इसके अलावा, अगर आपका सबसे बाहरी लेआउट एक कंपोज़ेबल है, तो आपको लिखें और AndroidView कंपोज़ेबल को ज़रूरत के हिसाब से पैड करें.

डिफ़ॉल्ट रूप से, हर ComposeView खपत का WindowInsetsCompat लेवल. इस डिफ़ॉल्ट तरीके को बदलने के लिए, इसे सेट करें ComposeView.consumeWindowInsets false तक.

संसाधन

  • अब Android पर - यह पूरी तरह से काम करने वाला Android ऐप्लिकेशन है. इसे पूरी तरह से Kotlin और Jetpack Compose के साथ बनाया गया है.
{% endverba नया %} {% verbatim %}