Google IO 2019 पर Android Jetpack Compose के बारे में बात करने के बाद, मैं इसे तुरंत आज़माना चाहता था। इसके अलावा, इसमें लागू दृष्टिकोण ने स्पंदन को बहुत याद दिलाया , जिसकी मुझे पहले से दिलचस्पी थी ।

कंपोज लाइब्रेरी स्वयं पूर्व-अल्फा चरण में है, इसलिए इसके बारे में बहुत सारे दस्तावेज और लेख उपलब्ध नहीं हैं। इसके बाद, मैं कई संसाधनों पर भरोसा करूंगा, जिन्हें मैं खोजने में कामयाब रहा, साथ ही ओपन सोर्स लाइब्रेरी भी ।

ये संसाधन हैं:

• एंड्रॉइड डेवलपर्स बैकस्टेज: एपिसोड 115: जेटपैक कम्पोज
• पहले सिद्धांतों से रचना करें
• जेटपैक में गोता लगाना

Android Jetpack Compose क्या है?

पहले, संपूर्ण Android UI दृश्य वर्ग पर आधारित था। Android के शुरुआती दिनों से यह मामला रहा है। और इस संबंध में, कई विरासत और वास्तु दोषों का संचय हुआ है, जिसे बेहतर बनाया जा सकता है। लेकिन ऐसा करना उनके आधार पर लिखे गए सभी कोड को तोड़े बिना काफी मुश्किल है।

पिछले वर्षों में, क्लाइंट अनुप्रयोगों (फ्रंटेंड ट्रेंड्स सहित) की दुनिया में कई नई अवधारणाएं सामने आई हैं, इसलिए Google टीम ने एक कट्टरपंथी रास्ता अपनाया है और एंड्रॉइड में पूरे यूआई स्तर को खरोंच से फिर से लिखा है। तो एंड्रॉइड जेटपैक कम्पोज़ लाइब्रेरी दिखाई दी, जिसमें रिएक्ट, लिथो, व्यू, फ्लटर और कई अन्य लोगों के वैचारिक ट्रिक्स शामिल हैं।

आइए मौजूदा यूआई की कुछ विशेषताओं के बारे में जानें और इसकी तुलना कम्पोज़ से करें।

1. Android रिलीज़ से स्वतंत्रता

मौजूदा UI प्लेटफ़ॉर्म से निकटता से संबंधित है। जब मटीरियल डिज़ाइन के पहले घटक दिखाई दिए, तो उन्होंने केवल एंड्रॉइड 5 (एपीआई 21) और उच्चतर के साथ काम किया। सिस्टम के पुराने संस्करणों पर काम करने के लिए, आपको समर्थन लाइब्रेरी का उपयोग करना होगा।

कम्पोज़ जेटपैक का हिस्सा है, जो इसे सिस्टम संस्करणों से स्वतंत्र बनाता है और एंड्रॉइड के पुराने संस्करणों में भी उपयोग करने के लिए संभव है (कम से कम HTML के साथ)।

2. पूरे कोटलिन एपीआई

पहले, आपको UI बनाने के लिए अलग-अलग फ़ाइलों से निपटना पड़ता था। हमने xml में मार्कअप का वर्णन किया है, और फिर इसे काम करने के लिए जावा / कोटलिन कोड का उपयोग किया है। फिर हम थीम, एनीमेशन, नेविगेशन, सेट करने के लिए फिर से अन्य xml फ़ाइलों में लौट आए ... और यहां तक ​​कि xml (डेटा बाइंडिंग) में कोड लिखने का भी प्रयास किया।

कोटलिन का उपयोग करने से आप xml के बजाय सीधे शैली यूआई को कोड में लिख सकते हैं।

3. समतुल्य = समग्र: विरासत के बजाय रचना का उपयोग करना

कस्टम UI तत्व बनाना बोझिल हो सकता है। हमें व्यू या उसके वंशज से विरासत में प्राप्त करने की आवश्यकता है और ठीक से शुरू होने से पहले कई महत्वपूर्ण गुणों का ध्यान रखना चाहिए। उदाहरण के लिए, TextView वर्ग में जावा कोड की लगभग 30 हजार लाइनें हैं। यह इस तथ्य के कारण है कि इसमें स्वयं के भीतर बहुत सारे अनावश्यक तर्क शामिल हैं जो वंशज तत्वों द्वारा विरासत में मिले हैं।

रचना के साथ विरासत की जगह, दूसरी ओर कम्पोज़ आया।

Padding यह बताने के लिए सबसे उपयुक्त है कि यह किस बारे में है:

मौजूदा UI में, 30dp पर 30dp को रेंडर करने के लिए:

हमें निम्नलिखित कोड लिखने की आवश्यकता है:

 <TextView android:id="@+id/simpleTextView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@color/cyan" android:padding="30dp" <------------------------ NOTE THIS android:text="Drag or tap on the seek bar" /> 

इसका मतलब यह है कि TextView.java या इसके सुपरक्लास के अंदर कहीं न कहीं तर्क है जो जानता है कि इंडेंट्स को कैसे गिनना और आकर्षित करना है।

आइए देखें कि कंपोज़ में आप कैसे कर सकते हैं:

 // note: the cyan background color is omitted for now to keep it simple Padding(30.dp) { Text("Drag or tap on the seek bar") } 

परिवर्तन
TextView सिर्फ Text() बन गया है। android:padding प्रॉपर्टी एक Padding में बदल गई है जो Text लपेटता है।

लाभ
इस प्रकार, Text केवल Text को प्रस्तुत करने के लिए जिम्मेदार है। वह इंडेंट गिनना नहीं जानता है। दूसरी ओर, पैडिंग केवल पैडिंग के लिए जिम्मेदार है और इससे अधिक कुछ नहीं। इसका उपयोग किसी अन्य तत्व के आसपास किया जा सकता है।

4. यूनिडायरेक्शनल डेटा स्ट्रीम

यदि हम बात करते हैं, तो एक मौजूदा यूआई प्रणाली में CheckBox की स्थिति को नियंत्रित करने के बारे में, यूनिडायरेक्शनल डेटा प्रवाह एक महत्वपूर्ण अवधारणा है। जब उपयोगकर्ता CheckBox पर टैप करता है, तो उसकी स्थिति checked = true हो जाती checked = true : वर्ग दृश्य स्थिति को अपडेट करता है और उस कोड से कॉलबैक कहता है जो राज्य परिवर्तन पर नज़र रखता है।

फिर, कोड में ही, उदाहरण के लिए, ViewModel , आपको संबंधित state चर को अपडेट करने की आवश्यकता है। अब आपके पास दबाए गए राज्य की दो प्रतियां हैं, जो समस्याएं पैदा कर सकती हैं। उदाहरण के लिए, ViewModel अंदर state चर का मान बदलने से CheckBox अपडेट हो जाएगा, जो एक अंतहीन लूप में समाप्त हो सकता है। इससे बचने के लिए हमें किसी तरह की बैसाखी के साथ आना होगा।

कम्पोज़ का उपयोग करने से इन समस्याओं को हल करने में मदद मिलेगी, क्योंकि यह एक-बिंदु के सिद्धांत पर आधारित है। राज्य परिवर्तन को ढांचे के अंदर संसाधित किया जाएगा: हम केवल डेटा मॉडल को आवक देते हैं। इसके अलावा, कंपोज में घटक अब अपनी स्थिति को अपने दम पर नहीं बदलता है। इसके बजाय, यह केवल कॉलबैक कहता है, और अब यह UI को बदलने के लिए एप्लिकेशन का कार्य है।

5. डिबगिंग में सुधार

चूँकि पूरा UI अब Kotlin में लिखा गया है, आप अब UI को डीबग कर सकते हैं। मैंने खुद यह कोशिश नहीं की, लेकिन पॉडकास्ट में उन्होंने कहा कि डिबगर और ब्रेकप्वाइंट कंपोज़ में काम करते हैं।

पर्याप्त शब्द, कोड दिखाएं

मुझे पता है, मैं जल्दी से यह देखना चाहता हूं कि यूआई कोड में क्या दिखता है (स्पॉइलर: यदि आप इसके बारे में लिखने की कोशिश की तो फ्लटर के समान)।

हम कुछ सरल View बनाकर शुरुआत करेंगे, फिर तुलना करेंगे कि वे मौजूदा UI और कंपोज़ में कैसे दिखते हैं।

1. FrameLayout बनाम Wrap + Padding + Background

हम ऊपर दिए गए हमारे उदाहरण का पुन: उपयोग करते हैं और इस 30dp को फ़िरोज़ा पृष्ठभूमि के साथ 30dp पर इंडेंट करने की कोशिश करते हैं:

मौजूदा UI:

 <TextView android:id="@+id/simpleTextView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@color/cyan" <-------------- NOTE THIS android:padding="30dp" <------------------------ AND THIS android:text="Drag or tap on the seek bar" /> 

अब उस कोड को देखें जो Compose में समान है:

 @Composable fun MyText() { Wrap { Padding(30.dp) { DrawRectangle(color = Color.Cyan) Text("Drag or tap on the seek bar") } } } 

यहाँ कुछ नई चीजें हैं। चूंकि Text केवल टेक्स्ट रेंडर करने के बारे में जानता है, इसलिए यह पैडिंग और बैकग्राउंड की परवाह नहीं करता है। इसलिए, उन्हें जोड़ने के लिए, हमें तीन अलग-अलग कार्यों का उपयोग करने की आवश्यकता है:

• DrawRectangle है
• Padding इंडेंट
• Wrap एक ऐसा कार्य है जो FrameLayout जैसे मापदंडों को पूरा FrameLayout ।

आसानी से। लेकिन यह मौजूदा UI सिस्टम से थोड़ा अलग है जिसका हम सभी उपयोग करते हैं।

2. वर्टिकल LinearLayout बनाम Column

अब हम अपने अच्छे पुराने LinearLayout बराबर कुछ करने की कोशिश करते हैं।
दो तत्वों को एक दूसरे के नीचे रखने के लिए, जैसा कि नीचे दी गई तस्वीर में है, हम Column उपयोग कर सकते हैं:

कोड इस तरह दिखेगा:

 @Composable fun FormDemo() { Column(crossAxisAlignment = CrossAxisAlignment.Start) { Text("Click the button below: ") Button(text = "Next") } } 

Column तत्व में निहित एक दूसरे के नीचे लंबवत स्थित होगा।

2 ए। इंडेंट

आपने शायद देखा कि टेक्स्ट और बटन किनारे के बहुत करीब हैं। इसलिए, Padding जोड़ें।

 @Composable fun FormDemo() { Padding(10.dp) { //   Column(crossAxisAlignment = CrossAxisAlignment.Start) { Text("Click the button below: ") Button(text = "Next") } } } 

यह बेहतर लग रहा है:

2 बी। अंतराल

हम Text और Button बीच कुछ इंडेंटेशन भी जोड़ सकते हैं:

 @Composable fun FormDemo() { Padding(10.dp) { Column(crossAxisAlignment = CrossAxisAlignment.Start) { Text("Click the button below: ") HeightSpacer(10.dp) //    Button(text = "Next") } } } 

हमारी स्क्रीन अब कैसी दिखती है:

2c। क्षैतिज LinearLayout बनाम Row

पहले के बगल में दूसरा बटन रखें:

इसके लिए कोड:

 @Composable fun FormDemo() { Padding(10.dp) { Column(crossAxisAlignment = CrossAxisAlignment.Start) { Text("Click the button below: ") HeightSpacer(10.dp) Row { //   Button(text = "Back") //   WidthSpacer(10.dp) //    Button(text = "Next") } } } } 

Row अंदर Row दो बटन क्षैतिज होंगे। WidthSpacer उनके बीच दूरी जोड़ता है।

2 डी। Gravity बनाम Alignment

हमारे तत्वों को केंद्र में संरेखित करें, जैसा कि gravity वर्तमान UI में करता है। अंतर दिखाने के लिए, मैं पुरानी पंक्तियों पर टिप्पणी करूंगा और उन्हें नए लोगों के साथ बदलूंगा:

 @Composable fun FormDemo() { Padding(10.dp) { // Column(crossAxisAlignment = CrossAxisAlignment.Start) { Column(crossAxisAlignment = CrossAxisAlignment.Center) { //  Text("Click the button below: ") HeightSpacer(10.dp) // Row { Row(mainAxisSize = FlexSize.Min) { //    Button(text = "Back") WidthSpacer(10.dp) Button(text = "Next") } } } } 

हम सफल होंगे:

crossAxisAlignment = CrossAxisAlignment.Center नेस्टेड तत्व क्षैतिज रूप से केंद्रित होंगे। हमें Row पैरामीटर को mainAxisSize = FlexSize.Min भी सेट करना चाहिए, जैसा कि mainAxisSize = FlexSize.Min व्यवहार में है, ताकि यह डिफ़ॉल्ट mainAxisSize = FlexSize.Max कारण स्क्रीन पर खिंचाव न mainAxisSize = FlexSize.Max , जो mainAxisSize = FlexSize.Max तरह व्यवहार करता है।

2 डी। टिप्पणी

ऊपर दिए गए उदाहरणों में हमने जो देखा, आप देख सकते हैं कि सभी तत्वों को अलग-अलग कार्यों के समग्र बनाया गया है: padding एक अलग कार्य है, Text , Button या Column अंदर गुण होने के बजाय spacer एक अलग कार्य है।

अधिक जटिल तत्व जैसे कि RecyclerView या ConstraintLayout का विकास चल रहा है: इसलिए, मुझे डेमो स्रोतों में उनके साथ एक उदाहरण नहीं मिला।

3. शैलियों और विषयों

आपने शायद देखा कि ऊपर दिए बटन डिफ़ॉल्ट रूप से बैंगनी हैं। ऐसा इसलिए है क्योंकि वे डिफ़ॉल्ट शैलियों का उपयोग करते हैं। आइए देखें कि कंपोज़ में स्टाइल कैसे काम करते हैं।

ऊपर दिए गए उदाहरणों में, FormDemo @Composable एनोटेशन के साथ टैग किया @Composable । अब मैं दिखाऊंगा कि इस तत्व का उपयोग Activity में कैसे किया जाता है:

 override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { CraneWrapper{ MaterialTheme { FormDemo() } } } } 

setContentView() फ़ंक्शन के बजाय, हम setContent() , Compose.kt लाइब्रेरी से एक एक्सटेंशन फ़ंक्शन का उपयोग करते हैं।

CraneWrapper में कंपोज़ ट्री होता है और FocusManager Density , FocusManager और FocusManager तक पहुँच प्रदान करता है।

MaterialTheme आपको तत्वों के लिए थीम को अनुकूलित करने की अनुमति देता है।

उदाहरण के लिए, मैं थीम के प्राथमिक रंग को भूरे रंग में बदल सकता हूं:

 override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { CraneWrapper{ // MaterialTheme { MaterialTheme(colors = MaterialColors(primary = Color.Maroon)) { FormDemo() } } } } 

अब हमारी स्क्रीन इस तरह दिखाई देगी:

अन्य रंग और फोंट जिन्हें बदला जा सकता है: MaterialTheme.kt # 57

रैली गतिविधि किसी विषय को अनुकूलित करने का एक अच्छा उदाहरण प्रदान करती है: RallyTheme.kt का स्रोत कोड

क्या देखना / पढ़ना है

यदि आप अधिक चाहते हैं, तो आप यहां दिए गए निर्देशों के अनुसार नमूना परियोजना को इकट्ठा कर सकते हैं ।

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

#compose बारे में प्रश्न डेवलपर्स से चैनल #compose kotlinlang #compose में पूछे जा सकते हैं।

टिप्पणियों में अन्य लिंक छोड़ें - सबसे उपयोगी यहां जोड़े जाएंगे।

निष्कर्ष

इस लाइब्रेरी का विकास जोरों पर है, इसलिए यहां दिखाए गए किसी भी इंटरफेस में बदलाव किया जा सकता है। अभी भी बहुत सी चीजें हैं जो आप सोर्स कोड के बारे में जान सकते हैं, जैसे @Model और Unidirectional data flow (यूनिडायरेक्शनल डेटा स्ट्रीम)। शायद यह भविष्य के लेखों के लिए एक विषय है।