कंपोज़ेबल को फ़ंक्शन से तय किया जाता है और उसके बारे में @Composable
की मदद से एनोटेट किया जाता है:
@Composable fun SimpleComposable() { Text("Hello World") }
इस कंपोज़ेबल की झलक देखने के लिए, अन्य कंपोज़ेबल और एनोटेट किया गया एलिमेंट बनाएं
@Composable
और @Preview
के साथ. इस नए और एनोटेट किए गए कंपोज़ेबल में अब यह शामिल है
शुरुआत में बनाया गया कंपोज़ेबल, SimpleComposable
:
@Preview @Composable fun SimpleComposablePreview() { SimpleComposable() }
@Preview
एनोटेशन से Android Studio को पता चलता है कि यह
कंपोज़ेबल को इस फ़ाइल के डिज़ाइन व्यू में दिखाया जाना चाहिए. आप इन्हें लाइव देख सकते हैं
बदलाव करने पर, कंपोज़ेबल प्रीव्यू में आपको अपडेट मिलेगा.
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") } }
डाइनैमिक कलर की झलक
अगर आपने डाइनैमिक
रंग के हिसाब से,
वॉलपेपर बदलने के लिए, 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)) }
बैकग्राउंड का रंग सेट करें
डिफ़ॉल्ट रूप से, आपका कंपोज़ेबल, पारदर्शी बैकग्राउंड में दिखता है. किसी कीवर्ड को
बैकग्राउंड में, showBackground
और backgroundColor
पैरामीटर जोड़ें. अंदर रखें
ध्यान रखें कि backgroundColor
एक ARGB Long
है, न कि Color
मान:
@Preview(showBackground = true, backgroundColor = 0xFF00FF00) @Composable fun WithGreenBackground() { Text("Hello World") }
सिस्टम यूज़र इंटरफ़ेस (यूआई)
अगर आपको झलक में स्टेटस और ऐक्शन बार दिखाने हैं, तो
showSystemUi
पैरामीटर:
@Preview(showSystemUi = true) @Composable fun DecoratedComposablePreview() { Text("Hello World") }
यूज़र इंटरफ़ेस (यूआई) मोड
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!") } }
अपने @Preview
से इंटरैक्ट करें
Android Studio में ऐसी सुविधाएं मिलती हैं जिनसे आपको अपने मौजूदा झलक. इस इंटरैक्शन से आपको वीडियो की झलक को समझने में मदद मिलती है' रनटाइम बिहेवियर साथ ही, आपको झलक के साथ अपने यूज़र इंटरफ़ेस (यूआई) पर बेहतर ढंग से नेविगेट करने की सुविधा मिलती है.
इंटरैक्टिव मोड
इंटरैक्टिव मोड की मदद से, झलक के साथ उसी तरह इंटरैक्ट किया जा सकता है जैसे कि आपका प्रोग्राम चलाने वाले डिवाइस, जैसे कि फ़ोन या टैबलेट पर. इंटरैक्टिव मोड सैंडबॉक्स एनवायरमेंट में आइसोलेटेड है (यानी, दूसरी झलकों से अलग), यहां एलिमेंट पर क्लिक करके, झलक में उपयोगकर्ता का इनपुट डाला जा सकता है. यह एक तेज़ इससे अलग-अलग स्टेट, जेस्चर, और यहां तक कि ऐनिमेशन को टेस्ट किया जा सकता है.
कोड नेविगेशन और कंपोज़ेबल आउटलाइन
झलक पर कर्सर घुमाकर, उसमें मौजूद कंपोज़ेबल की आउटलाइन देखी जा सकती है के अंदर. कंपोज़ेबल आउटलाइन पर क्लिक करके, नेविगेट करने के लिए एडिटर व्यू ट्रिगर होता है उससे जुड़ी जानकारी भी शामिल करें.
झलक देखें
आपके पास किसी एम्युलेटर या फ़िज़िकल डिवाइस पर खास @Preview
चलाने का विकल्प है. कॉन्टेंट बनाने
झलक को उसी प्रोजेक्ट ऐप्लिकेशन में नए Activity
के तौर पर डिप्लॉय किया गया है, इसलिए यह
एक ही कॉन्टेक्स्ट और अनुमतियां शेयर करता हो. इसके लिए, आपको लिखने की ज़रूरत नहीं है
बॉयलरप्लेट कोड, जिसमें अनुमति देने के लिए कहा गया हो.
झलक चलाएं आइकॉन पर क्लिक करें
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
झलक दिखाने वाले कंपोज़ेबल के लिए, इस कस्टम एनोटेशन का इस्तेमाल किया जा सकता है:
@FontScalePreviews @Composable fun HelloWorldPreview() { Text("Hello World") }
आपके पास एक से ज़्यादा मल्टीझलक एनोटेशन और सामान्य झलक एनोटेशन को जोड़ने का विकल्प है ताकि झलक का पूरा सेट बनाया जा सके. कई झलक वाले एनोटेशन जोड़कर एक साथ दिखाना इसका मतलब यह नहीं है कि सभी अलग-अलग कॉम्बिनेशन दिखाए गए हैं. इसके बजाय, हर मल्टीझलक एनोटेशन अलग से काम करता है और सिर्फ़ इसके वैरिएंट रेंडर करता है.
@Preview( name = "Spanish", group = "locale", locale = "es" ) @FontScalePreviews annotation class CombinedPreviews @CombinedPreviews @Composable fun HelloWorldPreview2() { MaterialTheme { Surface { Text(stringResource(R.string.hello_world)) } } }
मल्टी-झलक और सामान्य झलक!-- का मिला-जुला रूप इस्तेमाल करने से, आपको ज़्यादा बड़े स्केल वाले प्रोजेक्ट की कई प्रॉपर्टी का अच्छी तरह से टेस्ट कर सकते हैं.
@Preview
और बड़े डेटा सेट
अक्सर, ऐसी स्थिति आती है जब आपको अपने कंपोज़ेबल में एक बड़ा डेटासेट पास करना पड़ता है
झलक देखें. ऐसा करने के लिए, उदाहरण के तौर पर दिए गए डेटा को
@PreviewParameter
के साथ पैरामीटर जोड़ना
एनोटेशन.
@Preview @Composable fun UserProfilePreview( @PreviewParameter(UserPreviewParameterProvider::class) user: User ) { UserProfile(user) }
सैंपल डेटा उपलब्ध कराने के लिए, ऐसी क्लास बनाएं जो इसे लागू करती हो
PreviewParameterProvider
और नतीजे के तौर पर
डेटा का क्रम होना चाहिए.
class UserPreviewParameterProvider : PreviewParameterProvider<User> { override val values = sequenceOf( User("Elise"), User("Frank"), User("Julia") ) }
यह क्रम में हर डेटा एलिमेंट के लिए एक झलक रेंडर करता है:
एक से ज़्यादा झलक के लिए, सेवा देने वाली एक ही कंपनी की क्लास का इस्तेमाल किया जा सकता है. अगर ज़रूरी हो, तो सीमा तय करें सीमा पैरामीटर सेट करके पूर्वावलोकन की संख्या देखें.
@Preview @Composable fun UserProfilePreview2( @PreviewParameter(UserPreviewParameterProvider::class, limit = 2) user: User ) { UserProfile(user) }
सीमाएं और सबसे सही तरीके
Android Studio, झलक दिखाने वाले कोड को सीधे झलक वाली जगह पर लागू करता है. इस काम नहीं किया
एम्युलेटर या फ़िज़िकल डिवाइस का इस्तेमाल करना ज़रूरी होता है, क्योंकि यह पोर्ट की गई
जो Layoutlib
नाम के Android फ़्रेमवर्क का हिस्सा है. Layoutlib
कस्टम है
Android फ़्रेमवर्क का एक वर्शन है. कॉन्टेंट बनाने
लाइब्रेरी का मकसद Android Studio में ऐसे लेआउट की झलक उपलब्ध कराना है जिसमें
की ओर से रेंडर होने में बहुत कम समय लगता है.
झलक की सीमाएं
Android Studio में झलक जिस तरह से रेंडर होती हैं, उसकी वजह से साथ ही, इन्हें रेंडर करने के लिए पूरे Android फ़्रेमवर्क की ज़रूरत नहीं होती. हालांकि, इसमें ये सीमाएं लागू होती हैं:
- नेटवर्क का ऐक्सेस नहीं है
- फ़ाइल का ऐक्सेस नहीं है
- ऐसा हो सकता है कि
Context
के कुछ एपीआई पूरी तरह से उपलब्ध न हों
झलक और ViewModels
ViewModel
का इस्तेमाल करने पर झलक नहीं देखी जा सकती
कंपोज़ेबल. पूर्वावलोकन सिस्टम सभी निर्माण करने में सक्षम नहीं है
ViewModel
को पास किए जाने वाले पैरामीटर, जैसे कि डेटा स्टोर करने की जगह, इस्तेमाल के उदाहरण, मैनेजर,
या इससे मिलते-जुलते. साथ ही, अगर आपका ViewModel
डिपेंडेंसी इंजेक्शन में हिस्सा लेता है (जैसे
Hilt की तरह), प्रीव्यू सिस्टम पूरी डिपेंडेंसी नहीं बना सकता
ViewModel
बनाने के लिए ग्राफ़.
ViewModel
का इस्तेमाल करके, किसी कंपोज़ेबल की झलक देखने पर, Android Studio
कंपोज़ेबल को रेंडर करते समय होने वाली गड़बड़ी:
अगर आपको 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, )
अन्य संसाधन
Android Studio, @Preview
के इस्तेमाल को आसान बनाने के तरीके कैसे बढ़ावा देता है, इस बारे में ज़्यादा जानने के लिए और जानें
और टूलिंग टिप्स, लिखें ब्लॉग देखें
टूलिंग.
आपके लिए सुझाव
- ध्यान दें: JavaScript बंद होने पर लिंक टेक्स्ट दिखता है
- ComposeLocal के साथ स्थानीय तौर पर स्कोप वाला डेटा
- Compose में मटीरियल डिज़ाइन 2
- Compose में व्यू का इस्तेमाल करना