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

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

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

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

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

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

ध्यान दें: Android Wear, झलक के लिए अलग-अलग एनोटेशन का इस्तेमाल करता है (@WearPreviewDevices और @WearPreviewFontScales); ज़्यादा जानकारी के लिए, देखें इनका इस्तेमाल करके स्क्रीन और फ़ॉन्ट साइज़ के कॉम्बिनेशन की जांच करें झलक.

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

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

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

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

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

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

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

झलक देखें

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

ध्यान दें: @Preview एनोटेशन पर लागू किए गए आर्ग्युमेंट (उदाहरण के लिए, widthDp, locale वगैरह) चलाई जा रही हैं. डिप्लॉय किया गया है.

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

@Preview रेंडर किया गया कॉन्टेंट कॉपी करें

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

एक ही @Preview व्याख्या की कई झलकें

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

मल्टीझलक टेंप्लेट

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

कस्टम मल्टीझलक एनोटेशन बनाएं

मल्टीझलक की मदद से, ऐसी एनोटेशन क्लास तय की जा सकती है जिसमें कई अलग-अलग कॉन्फ़िगरेशन वाले @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

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

@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

मल्टी-झलक और सामान्य झलक!-- का मिला-जुला रूप इस्तेमाल करने से, आपको ज़्यादा बड़े स्केल वाले प्रोजेक्ट की कई प्रॉपर्टी का अच्छी तरह से टेस्ट कर सकते हैं.

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

अक्सर, ऐसी स्थिति आती है जब आपको अपने कंपोज़ेबल में एक बड़ा डेटासेट पास करना पड़ता है झलक देखें. ऐसा करने के लिए, उदाहरण के तौर पर दिए गए डेटा को @PreviewParameter के साथ पैरामीटर जोड़ना एनोटेशन.

@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

यह क्रम में हर डेटा एलिमेंट के लिए एक झलक रेंडर करता है:

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

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

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

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

झलक की सीमाएं

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

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

झलक और ViewModels

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

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

चेतावनी: आपको ViewModel इंस्टेंस को किसी दूसरे कंपोज़ेबल में पास नहीं करना चाहिए फ़ंक्शन. ऐसा करने पर, कंपोज़ेबल को 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

किसी भी समय 'ctrl या ⌘ + click' किया जा सकता है Android में @Preview एनोटेशन Studio में जाकर उन पैरामीटर की पूरी सूची देखें जिन्हें कस्टमाइज़ करते समय अडजस्ट किया जा सकता है झलक देखें.

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 के इस्तेमाल को आसान बनाने के तरीके कैसे बढ़ावा देता है, इस बारे में ज़्यादा जानने के लिए और जानें और टूलिंग टिप्स, लिखें ब्लॉग देखें टूलिंग.