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

किसी फ़ंक्शन के ज़रिए, कॉम्पोज़ेबल को परिभाषित किया जाता है और @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 फ़्लमिंगो में, झलक के 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 में ऐसी सुविधाएं होती हैं जिनकी मदद से, तय की गई झलक के साथ इंटरैक्ट किया जा सकता है. इस इंटरैक्शन से, आपको झलक के रनटाइम व्यवहार को समझने में मदद मिलती है. साथ ही, झलक की मदद से यूज़र इंटरफ़ेस (यूआई) को बेहतर तरीके से नेविगेट किया जा सकता है.

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

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

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

ऐसा वीडियो जिसमें उपयोगकर्ता किसी झलक

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

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

उपयोगकर्ता, किसी झलक पर कर्सर घुमा रहा है. इस वजह से 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 FontScalePreviews
AndroidStudioComposeSnippets.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 टूल ब्लॉग पढ़ें.

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