Android Academy · पाठ

Text और Column की मूल बातें

सामग्री दिखाएँ और क्रम से रखें।

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

Text और Column की मूल बातें, CoddyKit पर Android Academy का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Android Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Android Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

Text composable

Compose में दिखाई जाने वाली सबसे मूल चीज़ टेक्स्ट है। Text composable स्क्रीन पर एक स्ट्रिंग बनाता है।

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

@Composable
fun Hello() {
    Text("Hello, Android!")
}

टेक्स्ट की शैली बदलना

Text अपने रूप को बदलने के लिए पैरामीटर स्वीकार करता है। आप fontSize, color और fontWeight सेट कर सकते हैं।

आकार के लिए sp इकाई का उपयोग होता है, जो उपयोगकर्ता की फ़ॉन्ट सेटिंग के अनुसार बदलती है। इससे आपका ऐप सभी के लिए पढ़ने योग्य रहता है।

Text(
    "Big Title",
    fontSize = 24.sp,
    fontWeight = FontWeight.Bold
)

आपको लेआउट की आवश्यकता क्यों है

यदि आप Text को लगातार दो बार कॉल करते हैं, तो दोनों टेक्स्ट एक ही स्थान पर आकर एक-दूसरे के ऊपर दिखाई देंगे। Composables अपने-आप व्यवस्थित नहीं होते।

आइटम को क्रम से रखने के लिए आपको ऐसे लेआउट composable की आवश्यकता होती है जो अपने child को व्यवस्थित करे। लंबवत रूप से रखने के लिए सबसे सामान्य composable Column है।

Column composable

Column अपने child को एक के नीचे एक, लंबवत रूप से व्यवस्थित करता है। आप child composables को इसके अंतिम lambda ब्लॉक के अंदर रखते हैं।

ब्रेसिज़ के अंदर लिखा गया हर composable उस लंबवत समूह की एक पंक्ति बन जाता है, उसी क्रम में जिस क्रम में आपने उसे लिखा है।

@Composable
fun TwoLines() {
    Column {
        Text("First line")
        Text("Second line")
    }
}

Column में क्रम महत्वपूर्ण है

Column के अंदर child उसी क्रम में ऊपर से नीचे दिखाई देते हैं जिस क्रम में आप उन्हें सूचीबद्ध करते हैं। कोड में किसी पंक्ति को ऊपर ले जाएँ और वह स्क्रीन पर भी ऊपर चली जाएगी।

इससे लेआउट का व्यवहार अनुमानित रहता है: कोड को ऊपर से नीचे पढ़कर आप जान सकते हैं कि स्क्रीन ऊपर से नीचे कैसी दिखेगी।

Column {
    Text("Title")
    Text("Subtitle")
    Text("Body text")
}

लंबवत व्यवस्था

Column verticalArrangement का उपयोग करके अपने child के बीच की दूरी नियंत्रित कर सकता है। उदाहरण के लिए, Arrangement.spacedBy समान अंतराल जोड़ता है।

यह हर child में अलग-अलग दूरी जोड़ने से अधिक साफ़ तरीका है और आपके लेआउट को एकसमान रखता है।

Column(
    verticalArrangement = Arrangement.spacedBy(8.dp)
) {
    Text("One")
    Text("Two")
}

क्षैतिज संरेखण

डिफ़ॉल्ट रूप से Column अपने child को शुरुआत यानी बाईं ओर संरेखित करता है। उन्हें बीच में या अंत में संरेखित करने के लिए horizontalAlignment का उपयोग करें।

इसे Alignment.CenterHorizontally पर सेट करने से हर child column की चौड़ाई के भीतर बीच में आ जाता है।

Column(
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text("Centered")
    Text("Also centered")
}

Row से परिचय

Column चीज़ों को लंबवत रखता है, जबकि इसका सहोदर Row बच्चों को क्षैतिज रूप से अगल-बगल व्यवस्थित करता है। विचार एक ही है, केवल दिशाएँ अलग हैं।

आप ग्रिड और कार्ड बनाने के लिए Rows और Columns को मिलाएँगे। अभी इतना याद रखें: Column नीचे की ओर, Row आर-पार।

Row {
    Text("Left")
    Text("Right")
}

लेआउट्स को एक-दूसरे में रखना

लेआउट्स के अंदर अन्य लेआउट्स हो सकते हैं। अधिक समृद्ध डिज़ाइन बनाने के लिए आप Row को Column के अंदर रख सकते हैं।

यहाँ एक कॉलम पहले शीर्षक और फिर उसके नीचे दो टेक्स्ट के साथ एक रो दिखाता है। सरल भागों से जटिल स्क्रीन बनाने का तरीका ही नेस्टिंग है।

Column {
    Text("Score")
    Row {
        Text("Home")
        Text("Away")
    }
}

आइटम्स के बीच जगह जोड़ना

दो composables के बीच निश्चित अंतर जोड़ने के लिए आप Spacer डाल सकते हैं। यह एक खाली composable है, जो केवल जगह घेरता है।

इसे modifier के माध्यम से height दें, और यह अगले आइटम को नीचे धकेल देगा। अगले पाठ में हम modifiers के बारे में और जानेंगे।

Column {
    Text("Top")
    Spacer(modifier = Modifier.height(16.dp))
    Text("Bottom")
}

सब कुछ एक साथ रखना

Text और Column की मदद से आप पहले ही लेबल वाली सरल स्क्रीन बना सकते हैं। एक शीर्षक और उसके नीचे विवरण की कुछ पंक्तियाँ रखें।

यह छोटा पैटर्न आपके द्वारा लिखी जाने वाली लगभग हर Compose स्क्रीन की नींव है।

@Composable
fun InfoBlock() {
    Column {
        Text("Name: Ada")
        Text("Role: Engineer")
    }
}

त्वरित जाँच

आइए, लेआउट की दिशा के बारे में आपकी समझ जाँचते हैं।

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

पुनरावृत्ति

आपने Text से स्ट्रिंग दिखाना और fontSize तथा fontWeight से उन्हें स्टाइल करना सीखा। Column बच्चों को कोड के क्रम में लंबवत रखता है, जबकि Row उन्हें क्षैतिज रूप से व्यवस्थित करता है।

आप verticalArrangement या Spacer से अंतर नियंत्रित कर सकते हैं और horizontalAlignment से बच्चों को संरेखित कर सकते हैं। Rows और Columns को एक-दूसरे में रखकर अधिक समृद्ध लेआउट बनाए जा सकते हैं। अगले पाठ में आप इन स्क्रीन को ऐप चलाए बिना प्रीव्यू करेंगे।

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

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

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

पाठ्यक्रम: 36
पाठ: 152

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

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

क्या “Text और Column की मूल बातें” पाठ निःशुल्क है?

हाँ — Android Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “Text और Column की मूल बातें” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Android Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“Text और Column की मूल बातें” में मैं क्या सीखूँगा?

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

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

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

“Text और Column की मूल बातें” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

← Android Academy पर वापस जाएँ