इस पेज का अनुवाद Cloud Translation API से किया गया है.

कंपोज़ेबल प्रीव्यू की मदद से, अपने यूज़र इंटरफ़ेस (यूआई) की झलक देखें

किसी फ़ंक्शन के ज़रिए, कॉम्पोज़ेबल को परिभाषित किया जाता है और @Composable के साथ एनोटेट किया जाता है:

@Composable
fun SimpleComposable() {
    Text("Hello World")
}AndroidStudioComposeSnippets.kt

एक आसान टेक्स्ट एलिमेंट, जिसमें "नमस्ते
दुनिया" शब्द हैं

इस कॉम्पोज़ेबल की झलक देखने के लिए, एक और कॉम्पोज़ेबल बनाएं और उसमें @Composable और @Preview का इस्तेमाल करके एनोटेट करें. एनोटेट किए गए इस नए कॉम्पोज़ेबल में, अब वह कॉम्पोज़ेबल शामिल है जिसे आपने शुरू में बनाया था, SimpleComposable:

@Preview
@Composable
fun SimpleComposablePreview() {
    SimpleComposable()
}AndroidStudioComposeSnippets.kt

@Preview एनोटेशन से Android Studio को पता चलता है कि इस फ़ाइल के डिज़ाइन व्यू में यह कॉम्पोज़ेबल दिखाया जाना चाहिए. बदलाव करते समय, कॉम्पोज़ेबल की झलक में लाइव अपडेट देखे जा सकते हैं.

Compose के 'झलक' सुविधा का इस्तेमाल करके, रीयल टाइम में अपडेट दिखाने वाला GIF

Android Studio के @Preview को रेंडर करने के तरीके को पसंद के मुताबिक बनाने के लिए, अपने कोड में पैरामीटर मैन्युअल तरीके से जोड़े जा सकते हैं. अलग-अलग प्रॉपर्टी के साथ किसी कॉम्पोज़ेबल की झलक देखने के लिए, एक ही फ़ंक्शन में @Preview एनोटेशन को कई बार जोड़ा जा सकता है.

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

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

@Preview एनोटेशन का ज़्यादा से ज़्यादा फ़ायदा पाने के लिए, अपनी स्क्रीन को इनपुट के तौर पर मिलने वाली स्थिति और उन इवेंट के हिसाब से तय करें जो स्क्रीन से आउटपुट के तौर पर मिलते हैं.

`@Preview` के बारे में बताएं

Android Studio में, कॉम्पोज़ेबल की झलक देखने की सुविधा को बेहतर बनाने के लिए कुछ सुविधाएं मिलती हैं. आपके पास उनके कंटेनर डिज़ाइन को बदलने, उनसे इंटरैक्ट करने या उन्हें सीधे किसी इम्यूलेटर या डिवाइस पर डिप्लॉय करने का विकल्प होता है.

डाइमेंशन

डिफ़ॉल्ट रूप से, @Preview डाइमेंशन अपने-आप चुने जाते हैं, ताकि उनके कॉन्टेंट को रैप किया जा सके. डाइमेंशन को मैन्युअल तरीके से सेट करने के लिए, heightDp और widthDp पैरामीटर जोड़ें. इन वैल्यू को पहले से ही dp के तौर पर समझा जाता है. इसलिए, आपको इनमें .dp जोड़ने की ज़रूरत नहीं है:

@Preview(widthDp = 50, heightDp = 50)
@Composable
fun SquareComposablePreview() {
    Box(Modifier.background(Color.Yellow)) {
        Text("Hello World")
    }
}AndroidStudioComposeSnippets.kt

पीले रंग का स्क्वेयर, जिस पर "नमस्ते
दुनिया" लिखा है

डाइनैमिक कलर की झलक

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

अलग-अलग डिवाइसों के साथ इस्तेमाल करना

Android Studio Flamingo में, अलग-अलग डिवाइसों में अपने कॉम्पोज़ेबल के कॉन्फ़िगरेशन तय करने के लिए, झलक वाले एनोटेशन के device पैरामीटर में बदलाव किया जा सकता है.

कॉम्पोज़ेबल फ़ंक्शन का सैंपल

जब डिवाइस पैरामीटर में कोई स्ट्रिंग (@Preview(device = "")) नहीं होती है, तो Ctrl + Space दबाकर ऑटोकंप्लीट की सुविधा चालू की जा सकती है. इसके बाद, हर पैरामीटर की वैल्यू सेट की जा सकती हैं.

सैंपल फ़ंक्शन में बदलाव करना

अपने-आप भरने की सुविधा की मदद से, सूची में से कोई भी डिवाइस विकल्प चुना जा सकता है. उदाहरण के लिए, @Preview(device = "id:pixel_4"). इसके अलावा, spec:width=px,height=px,dpi=int… चुनकर, हर पैरामीटर की अलग-अलग वैल्यू सेट करने के लिए, कस्टम डिवाइस डाला जा सकता है.

स्पेसिफ़िकेशन की सूची

लागू करने के लिए, Enter दबाएं या Esc दबाकर रद्द करें.

अमान्य वैल्यू सेट करने पर, एलान को लाल रंग से अंडरलाइन किया जाता है. साथ ही, समस्या को ठीक करने का विकल्प भी उपलब्ध हो सकता है (Alt + Enter (macOS के लिए ⌥ + ⏎) > इसके साथ बदलें …). जांच करने की सुविधा, आपके इनपुट से मिलती-जुलती समस्या को ठीक करने की कोशिश करती है.

अमान्य वैल्यू का उदाहरण

स्थान-भाषा

उपयोगकर्ता की अलग-अलग जगहों की जानकारी की जांच करने के लिए, locale पैरामीटर जोड़ें:

@Preview(locale = "fr-rFR")
@Composable
fun DifferentLocaleComposablePreview() {
    Text(text = stringResource(R.string.greeting))
}AndroidStudioComposeSnippets.kt

एक आसान टेक्स्ट एलिमेंट, जिसमें फ़्रेंच झंडे के साथ "नमस्ते" शब्द है

बैकग्राउंड का रंग सेट करना

डिफ़ॉल्ट रूप से, आपका कॉम्पोज़ेबल पारदर्शी बैकग्राउंड के साथ दिखता है. बैकग्राउंड जोड़ने के लिए, showBackground और backgroundColor पैरामीटर जोड़ें. ध्यान रखें कि backgroundColor एक ARGB Long है, न कि Color वैल्यू:

@Preview(showBackground = true, backgroundColor = 0xFF00FF00)
@Composable
fun WithGreenBackground() {
    Text("Hello World")
}AndroidStudioComposeSnippets.kt

हरे रंग का रेक्टैंगल, जिस पर "नमस्ते
दुनिया" लिखा है

सिस्टम यूज़र इंटरफ़ेस (यूआई)

अगर आपको झलक में स्टेटस और ऐक्शन बार दिखाने हैं, तो showSystemUi पैरामीटर जोड़ें:

@Preview(showSystemUi = true)
@Composable
fun DecoratedComposablePreview() {
    Text("Hello World")
}AndroidStudioComposeSnippets.kt

झलक वाली विंडो, जिसमें स्थिति और ऐक्शन बार के साथ कोई गतिविधि दिख रही है.

यूज़र इंटरफ़ेस (यूआई) मोड

पैरामीटर uiMode में, Configuration.UI_* के किसी भी कॉन्स्टेंट का इस्तेमाल किया जा सकता है. साथ ही, इसकी मदद से झलक के व्यवहार को बदला जा सकता है. उदाहरण के लिए, झलक को नाइट मोड पर सेट करके यह देखा जा सकता है कि थीम कैसी दिखती है.

`LocalInspectionMode`

LocalInspectionMode CompositionLocal से यह देखा जा सकता है कि कॉम्पोज़ेबल, झलक में (जांच किए जा सकने वाले कॉम्पोनेंट में) रेंडर किया गया है या नहीं. अगर कॉम्पोज़िशन को झलक में रेंडर किया जाता है, तो LocalInspectionMode.current की वैल्यू true हो जाती है. इस जानकारी की मदद से, झलक को पसंद के मुताबिक बनाया जा सकता है. उदाहरण के लिए, असल डेटा दिखाने के बजाय, झलक वाली विंडो में प्लेसहोल्डर इमेज दिखाई जा सकती है.

इस तरह, सीमाओं को भी हल किया जा सकता है. उदाहरण के लिए, नेटवर्क अनुरोध करने के बजाय सैंपल डेटा दिखाना.

@Composable
fun GreetingScreen(name: String) {
    if (LocalInspectionMode.current) {
        // Show this text in a preview window:
        Text("Hello preview user!")
    } else {
        // Show this text in the app:
        Text("Hello $name!")
    }
}AndroidStudioComposeSnippets.kt

अपने `@Preview` के साथ इंटरैक्ट करना

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

इंटरैक्टिव मोड

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

उपयोगकर्ता, झलक के "इंटरैक्टिव" बटन पर क्लिक करता है

वीडियो में, उपयोगकर्ता किसी प्रीव्यू के साथ इंटरैक्ट कर रहा है

कोड नेविगेशन और कॉम्पोज़ेबल आउटलाइन

झलक पर कर्सर घुमाकर, उसमें मौजूद कॉम्पोज़ेबल की आउटलाइन देखी जा सकती है. किसी कॉम्पोज़ेबल आउटलाइन पर क्लिक करने से, एडिटर व्यू ट्रिगर हो जाता है, ताकि उसकी परिभाषा पर पहुंचा जा सके.

झलक देखना

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

@Preview एनोटेशन के बगल में या झलक के सबसे ऊपर मौजूद, झलक चलाएं आइकॉन पर क्लिक करें. ऐसा करने पर, Android Studio उस @Preview को आपके कनेक्ट किए गए डिवाइस या एम्युलेटर पर डिप्लॉय कर देगा.

उपयोगकर्ता, झलक के "झलक चलाएं" बटन पर क्लिक करता है

डिवाइस पर झलक डिप्लॉय करने वाले उपयोगकर्ता का वीडियो

`@Preview` रेंडर कॉपी करें

रेंडर की गई हर झलक को इमेज के तौर पर कॉपी किया जा सकता है. इसके लिए, उस पर राइट क्लिक करें.

उपयोगकर्ता, झलक को इमेज के तौर पर कॉपी करने के लिए उस पर क्लिक करता है.

एक ही `@Preview` एनोटेशन की कई झलकें

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

एक से ज़्यादा झलक दिखाने वाले टेंप्लेट

androidx.compose.ui:ui-tooling-preview 1.6.0-alpha01+ में, एक से ज़्यादा प्रीव्यू दिखाने वाले एपीआई टेंप्लेट: @PreviewScreenSizes, @PreviewFontScales, @PreviewLightDark, और @PreviewDynamicColors को शामिल किया गया है. इससे, एक ही एनोटेशन की मदद से, सामान्य स्थितियों में Compose के यूज़र इंटरफ़ेस (यूआई) की झलक देखी जा सकती है.

टेंप्लेट का इस्तेमाल करके, अलग-अलग फ़ॉन्ट और स्क्रीन साइज़ की झलक देखना

कस्टम मल्टीप्रीव्यू एनोटेशन बनाना

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

अपनी पसंद के मुताबिक एनोटेशन क्लास बनाकर शुरुआत करें:

@Preview(
    name = "small font",
    group = "font scales",
    fontScale = 0.5f
)
@Preview(
    name = "large font",
    group = "font scales",
    fontScale = 1.5f
)
annotation class FontScalePreviewsAndroidStudioComposeSnippets.kt

झलक दिखाने वाले कॉम्पोज़ेबल के लिए, इस कस्टम एनोटेशन का इस्तेमाल किया जा सकता है:

@FontScalePreviews
@Composable
fun HelloWorldPreview() {
    Text("Hello World")
}AndroidStudioComposeSnippets.kt

Android Studio के डिज़ाइन टैब में, छोटे और बड़े फ़ॉन्ट के साथ कॉम्पोज़ेबल दिखाया गया है

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

@Preview(
    name = "Spanish",
    group = "locale",
    locale = "es"
)
@FontScalePreviews
annotation class CombinedPreviews

@CombinedPreviews
@Composable
fun HelloWorldPreview2() {
    MaterialTheme { Surface { Text(stringResource(R.string.hello_world)) } }
}AndroidStudioComposeSnippets.kt

Android Studio के डिज़ाइन टैब में, सभी कॉन्फ़िगरेशन में कॉम्पोज़ेबल दिखाया गया है

मल्टीप्रीव्यू और सामान्य प्रीव्यू को एक साथ इस्तेमाल करने से, बड़े पैमाने पर किए जा रहे प्रोजेक्ट की कई प्रॉपर्टी की पूरी तरह से जांच की जा सकती है.

`@Preview` और बड़े डेटा सेट

अक्सर, आपको अपने कॉम्पोज़ेबल के झलक में एक बड़ा डेटासेट पास करना पड़ता है. ऐसा करने के लिए, @PreviewParameter एनोटेशन के साथ पैरामीटर जोड़कर, Composable Preview फ़ंक्शन में सैंपल डेटा पास करें.

@Preview
@Composable
fun UserProfilePreview(
    @PreviewParameter(UserPreviewParameterProvider::class) user: User
) {
    UserProfile(user)
}
AndroidStudioComposeSnippets.kt

सैंपल डेटा देने के लिए, एक ऐसी क्लास बनाएं जो PreviewParameterProvider को लागू करती हो और सैंपल डेटा को क्रम के तौर पर दिखाती हो.

class UserPreviewParameterProvider : PreviewParameterProvider<User> {
    override val values = sequenceOf(
        User("Elise"),
        User("Frank"),
        User("Julia")
    )
}AndroidStudioComposeSnippets.kt

इससे क्रम में मौजूद हर डेटा एलिमेंट की एक झलक दिखती है:

एलीज़, फ़्रैंक, और जूलिया के डिसएम्बल किए जा सकने वाले कॉम्पोनेंट दिखाने वाली झलकियां

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

@Preview
@Composable
fun UserProfilePreview2(
    @PreviewParameter(UserPreviewParameterProvider::class, limit = 2) user: User
) {
    UserProfile(user)
}AndroidStudioComposeSnippets.kt

सीमाएं और सबसे सही तरीके

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

झलक की सीमाएं

Android Studio में झलकें रेंडर करने का तरीका ऐसा है कि वे कम जगह लेती हैं और उन्हें रेंडर करने के लिए पूरे Android फ़्रेमवर्क की ज़रूरत नहीं होती. हालांकि, इस सुविधा के साथ ये सीमाएं लागू होती हैं:

नेटवर्क ऐक्सेस नहीं है
फ़ाइल का ऐक्सेस नहीं है
ऐसा हो सकता है कि कुछ Context एपीआई पूरी तरह से उपलब्ध न हों

गाने के टीज़र के तौर पर बने शॉर्ट वीडियो और `ViewModels`

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

ViewModel की मदद से किसी कॉम्पोज़ेबल की झलक देखने पर, Android Studio उस कॉम्पोज़ेबल को रेंडर करते समय गड़बड़ी दिखाता है:

Android Studio के समस्या पैनल में, `ViewModel` को इंस्टैंशिएट करने में समस्या हुई मैसेज

अगर आपको ViewModel का इस्तेमाल करने वाले कॉम्पोज़ेबल की झलक देखनी है, तो आपको ViewModel के पैरामीटर के साथ एक और कॉम्पोज़ेबल बनाना चाहिए. ये पैरामीटर, कॉम्पोज़ेबल के आर्ग्युमेंट के तौर पर पास किए जाते हैं. इस तरह, आपको ViewModel का इस्तेमाल करने वाले कॉम्पोज़ेबल की झलक देखने की ज़रूरत नहीं है.

@Composable
fun AuthorColumn(viewModel: AuthorViewModel = viewModel()) {
  AuthorColumn(
    name = viewModel.authorName,
    // ViewModel sends the network requests and makes posts available as a state
    posts = viewModel.posts
  )
}

@Preview
@Composable
fun AuthorScreenPreview(
  // You can use some sample data to preview your composable without the need to construct the ViewModel
  name: String = sampleAuthor.name,
  posts: List<Post> = samplePosts[sampleAuthor]
) {
  AuthorColumn(...) {
    name = NameLabel(name),
    posts = PostsList(posts)
  }
}

एनोटेशन क्लास `@Preview`

Android Studio में @Preview एनोटेशन पर 'ctrl या ⌘ + क्लिक' करके, उन पैरामीटर की पूरी सूची देखी जा सकती है जिनमें झलक को पसंद के मुताबिक बनाने के दौरान बदलाव किया जा सकता है.

annotation class Preview(
    val name: String = "",
    val group: String = "",
    @IntRange(from = 1) val apiLevel: Int = -1,
    val widthDp: Int = -1,
    val heightDp: Int = -1,
    val locale: String = "",
    @FloatRange(from = 0.01) val fontScale: Float = 1f,
    val showSystemUi: Boolean = false,
    val showBackground: Boolean = false,
    val backgroundColor: Long = 0,
    @UiMode val uiMode: Int = 0,
    @Device val device: String = Devices.DEFAULT,
    @Wallpaper val wallpaper: Int = Wallpapers.NONE,
)AndroidStudioComposeSnippets.kt

अन्य संसाधन

Android Studio, @Preview के इस्तेमाल को आसान बनाने के बारे में ज़्यादा जानने के लिए, टूल के बारे में ज़्यादा सलाह पाने के लिए, Compose टूल ब्लॉग पढ़ें.

आपके लिए सुझाव

ध्यान दें: JavaScript बंद होने पर लिंक टेक्स्ट दिखता है
CompositionLocal के साथ स्थानीय तौर पर स्कोप किया गया डेटा
Compose में Material Design 2
'लिखें' सुविधा में व्यू का इस्तेमाल करना

आगे बढ़ें

ऐनिमेशन की झलक देखना और उन्हें डीबग करना