Jetpack Compose Academy · पाठ

Avatar, Name और Bio Section

image और text की सहायता से header तैयार कीजिए।

पाठ 2, कुल 4 में से13 चरण

Avatar, Name और Bio Section, CoddyKit पर Jetpack Compose Academy का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Jetpack Compose Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Jetpack Compose Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

पहले शीर्षलेख बनाएँ

अब रेखाचित्र को वास्तविक रूप देने का समय है। आप कार्ड के सबसे ऊपर मौजूद header से शुरुआत करेंगे: अवतार, नाम और छोटा परिचय। 👤

अवतार की छवि

अवतार एक Image Composable है, जो drawable संसाधन दिखाता है। इसका आकार स्पष्ट रूप से तय करें, ताकि यह पूरी स्क्रीन भरने जितना बड़ा न हो जाए।

Image(
    painter = painterResource(R.drawable.avatar),
    contentDescription = "Profile photo"
)

इसे गोल बनाएँ

प्रोफ़ाइल फ़ोटो गोल आकार में सबसे अच्छी लगती हैं। Image के modifier पर clip को CircleShape के साथ जोड़कर उसे एकदम गोल अवतार बनाएँ।

Image(
    painter = painterResource(R.drawable.avatar),
    contentDescription = "Profile photo",
    modifier = Modifier.size(96.dp).clip(CircleShape)
)

नाम जोड़ें

अवतार के नीचे दिखने वाला नाम आता है। एक साधारण Text Composable वह स्ट्रिंग दिखाता है, जिसे उपयोगकर्ता सबसे पहले पढ़ेगा।

Text(text = "Ada Lovelace")

नाम की शैली तय करें

नाम उभरकर दिखना चाहिए। MaterialTheme की typography से style दें, ताकि नाम एक उचित शीर्षक जैसा दिखाई दे।

Text(
    text = "Ada Lovelace",
    style = MaterialTheme.typography.titleLarge
)

परिचय का टेक्स्ट

नाम के नीचे एक और Text के साथ एक पंक्ति का परिचय जोड़ें। छोटी और हल्की शैली का उपयोग करें, ताकि वह शीर्षक नहीं बल्कि subtitle जैसा लगे।

Text(
    text = "Building delightful apps.",
    style = MaterialTheme.typography.bodyMedium
)

उन्हें Column में रखें

अवतार, नाम और परिचय लंबवत रखे जाते हैं, इसलिए तीनों को एक Column में लपेटें। जिस क्रम में आप उन्हें लिखते हैं, उसी क्रम में वे दिखाई देंगे।

Column {
    Image(/* avatar */)
    Text("Ada Lovelace")
    Text("Building delightful apps.")
}

सब कुछ बीच में रखें

शीर्षलेख बीच में होने पर संतुलित लगता है। अवतार और टेक्स्ट को एक सीध में रखने के लिए Column पर horizontalAlignment को CenterHorizontally सेट करें।

Column(
    horizontalAlignment = Alignment.CenterHorizontally
) { /* ... */ }

लंबवत जगह जोड़ें

बहुत सटा हुआ शीर्षलेख अव्यवस्थित लगता है। अवतार, नाम और परिचय के बीच एकसमान अंतर रखने के लिए Column पर Arrangement.spacedBy का उपयोग करें।

Column(
    verticalArrangement = Arrangement.spacedBy(8.dp)
) { /* ... */ }

शीर्षलेख में padding जोड़ें

Column के modifier में padding जोड़कर पूरे खंड के चारों ओर पर्याप्त जगह दें। किनारों को कभी भी स्क्रीन के फ़्रेम से नहीं छूना चाहिए।

Column(
    modifier = Modifier.padding(16.dp)
) { /* ... */ }

शीर्षलेख खंड पूरा

अब आपके पास एक साफ़-सुथरा शीर्षलेख है: गोल अवतार, गाढ़ा नाम और हल्का परिचय, सभी बीच में और उचित अंतर के साथ। आपके कार्ड का ऊपरी हिस्सा finished है। 🎉

त्वरित जाँच

चौकोर फ़ोटो को गोल अवतार में कैसे बदलते हैं?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन: शीर्षलेख

आपने बीच में रखे हुए Column के भीतर शीर्षलेख बनाया: clip किया हुआ गोल अवतार, शैलीबद्ध नाम और हल्का परिचय, सभी padding और उचित अंतर के साथ। अब आप आँकड़ों की Row जोड़ेंगे।

शुरुआत निःशुल्क

एआई शिक्षक के साथ Kotlin सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 30
पाठ: 120

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “Avatar, Name और Bio Section” पाठ निःशुल्क है?

हाँ—“Avatar, Name और Bio Section” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Jetpack Compose Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Jetpack Compose Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“Avatar, Name और Bio Section” में मैं क्या सीखूँगा?

image और text की सहायता से header तैयार कीजिए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Jetpack Compose Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Jetpack Compose Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Jetpack Compose Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।

“Avatar, Name और Bio Section” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Jetpack Compose Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Jetpack Compose Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Jetpack Compose Academy पर वापस जाएँ