लेआउट की हैरारकी ऑप्टिमाइज़ करें

Compose को आज़माएं

Jetpack Compose, Android के लिए यूज़र इंटरफ़ेस (यूआई) का सुझाया गया टूलकिट है. Compose में लेआउट के साथ काम करने का तरीका जानें.

Compose में लेआउट इंस्पेक्टर →

आम तौर पर, यह माना जाता है कि बुनियादी लेआउट स्ट्रक्चर का इस्तेमाल करने से, सबसे असरदार लेआउट मिलते हैं. हालांकि, यह गलत है. ऐसा इसलिए, क्योंकि आपके ऐप्लिकेशन में जोड़े गए हर विजेट और लेआउट को शुरू करने, लेआउट करने, और ड्रॉ करने की ज़रूरत होती है. उदाहरण के लिए, LinearLayout के नेस्ट किए गए इंस्टेंस का इस्तेमाल करने से, व्यू हाइरार्की बहुत ज़्यादा डीप हो सकती है. इसके अलावा, layout_weight पैरामीटर का इस्तेमाल करने वाले LinearLayout के कई इंस्टेंस को नेस्ट करना महंगा पड़ सकता है. ऐसा इसलिए, क्योंकि हर चाइल्ड को दो बार मेज़र करना पड़ता है. यह तब और भी ज़रूरी हो जाता है, जब लेआउट को बार-बार इनफ़्लेट किया जाता है. जैसे, RecyclerView में इस्तेमाल करने पर.

इस दस्तावेज़ में, लेआउट की जांच और उसे ऑप्टिमाइज़ करने के लिए, लेआउट इंस्पेक्टर और lint का इस्तेमाल करने का तरीका बताया गया है.

अपने लेआउट की जानकारी देखना

Android SDK टूल में, लेआउट इंस्पेक्टर टूल शामिल है. इसकी मदद से, आपका ऐप्लिकेशन चालू होने के दौरान, अपने लेआउट का विश्लेषण किया जा सकता है. इस टूल का इस्तेमाल करके, लेआउट की परफ़ॉर्मेंस में मौजूद कमियों का पता लगाया जा सकता है.

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

उदाहरण के लिए, पहली इमेज में एक ऐसा लेआउट दिखाया गया है जिसका इस्तेमाल RecyclerView में किसी आइटम के तौर पर किया जाता है. इस लेआउट में, बाईं ओर एक छोटी बिटमैप इमेज और दाईं ओर टेक्स्ट के दो स्टैक किए गए आइटम दिखाए गए हैं. यह खास तौर पर ज़रूरी है कि इस तरह के लेआउट को ऑप्टिमाइज़ किया जाए. ऐसा इसलिए, क्योंकि इन्हें कई बार इनफ़्लेट किया जाता है. इससे परफ़ॉर्मेंस के फ़ायदे कई गुना बढ़ जाते हैं.

पहली इमेज. `RecyclerView` में किसी आइटम के लिए कॉन्सेप्ट वाला लेआउट. RecyclerView.

लेआउट इंस्पेक्टर, उपलब्ध डिवाइसों और उनके चालू कॉम्पोनेंट की सूची दिखाता है. विंडो टैब से अपना कॉम्पोनेंट चुनें. इसके बाद, चुने गए कॉम्पोनेंट की लेआउट हाइरार्की देखने के लिए, लेआउट इंस्पेक्टर पर क्लिक करें. उदाहरण के लिए, दूसरी इमेज में, पहली इमेज में दिखाए गए लिस्ट आइटम का लेआउट दिखाया गया है.

दूसरी इमेज. पहली इमेज में दिखाए गए लेआउट के लिए लेआउट हाइरार्की. इसमें LinearLayout के नेस्ट किए गए इंस्टेंस का इस्तेमाल किया गया है.

अपने लेआउट में बदलाव करना

नेस्ट किए गए LinearLayout की वजह से, पहले वाले लेआउट की परफ़ॉर्मेंस धीमी हो जाती है. इसलिए, लेआउट को फ़्लैट करके परफ़ॉर्मेंस को बेहतर बनाया जा सकता है. इसका मतलब है कि लेआउट को नैरो और डीप बनाने के बजाय, शैलो और वाइड बनाया जाए. रूट नोड के तौर पर ConstraintLayout का इस्तेमाल करके, इस तरह के लेआउट बनाए जा सकते हैं. इस डिज़ाइन को ConstraintLayout का इस्तेमाल करने के लिए बदलने पर, लेआउट दो लेवल की हाइरार्की बन जाता है:

    <androidx.constraintlayout.widget.ConstraintLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      xmlns:tools="http://schemas.android.com/tools"
      android:id="@+id/root"
      android:layout_width="match_parent"
      android:layout_height="52dp"
      android:background="#e4e6e4"
      android:padding="4dp">

      <ImageView
          android:id="@+id/image"
          android:layout_width="48dp"
          android:layout_height="48dp"
          android:background="#5c5c74"
          android:contentDescription="An example box"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toTopOf="parent" />

      <TextView
          android:id="@+id/title"
          android:layout_width="0dp"
          android:layout_height="0dp"
          android:layout_marginStart="4dp"
          android:background="#745c74"
          app:layout_constraintBottom_toTopOf="@+id/subtitle"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toEndOf="@id/image"
          app:layout_constraintTop_toTopOf="parent" />

      <TextView
          android:id="@+id/subtitle"
          android:layout_width="0dp"
          android:layout_height="0dp"
          android:background="#7e8d6e"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toStartOf="@id/title"
          app:layout_constraintTop_toBottomOf="@+id/title" />
  </androidx.constraintlayout.widget.ConstraintLayout>
    

नए लेआउट की जानकारी इस तरह दिखती है:

तीसरी इमेज. लेआउट इंस्पेक्टर का 3D मोड.

इसके फ़ायदे कई गुना बढ़ जाते हैं, क्योंकि इस लेआउट का इस्तेमाल सूची में मौजूद हर आइटम के लिए किया जाता है.

ज़्यादातर अंतर, LinearLayout डिज़ाइन में layout_weight का इस्तेमाल करने की वजह से होता है. इससे मेज़रमेंट धीमा हो सकता है. यह इस बात का एक उदाहरण है कि हर लेआउट का इस्तेमाल कैसे किया जाता है. ध्यान से सोचें कि लेआउट वेट का इस्तेमाल करना ज़रूरी है या नहीं.

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

lint का इस्तेमाल करना

लेआउट फ़ाइलों पर lint टूल चलाना एक अच्छा तरीका है. इससे व्यू हाइरार्की को ऑप्टिमाइज़ करने के संभावित तरीकों को खोजा जा सकता है. Lint, layoutopt टूल की जगह लेता है और इसमें ज़्यादा सुविधाएं होती हैं. यहां lint के नियमों के कुछ उदाहरण दिए गए हैं: rules:

• कंपाउंड ड्रॉएबल का इस्तेमाल करें. LinearLayout को कंपाउंड ड्रॉएबल के तौर पर ज़्यादा असरदार तरीके से मैनेज किया जा सकता है. इसमें ImageView और TextView शामिल होता है.
• रूट फ़्रेम मर्ज करें. अगर किसी लेआउट का रूट, FrameLayout है और वह बैकग्राउंड या पैडिंग उपलब्ध नहीं कराता है, तो उसे मर्ज टैग से बदला जा सकता है. यह थोड़ा ज़्यादा असरदार होता है.
• काम के न रहने वाले लीफ़ नोड हटाएं. ऐसे लेआउट को हटाया जा सकता है जिसमें कोई चाइल्ड या बैकग्राउंड नहीं है. ऐसा इसलिए, क्योंकि वह दिखता नहीं है. इससे लेआउट हाइरार्की फ़्लैट और ज़्यादा असरदार हो जाती है.
• काम के न रहने वाले पैरंट नोड हटाएं. ऐसे लेआउट को हटाया जा सकता है जिसमें कोई चाइल्ड है, लेकिन उसके कोई सिबलिंग नहीं है. साथ ही, वह ScrollView या रूट लेआउट नहीं है और उसका कोई बैकग्राउंड नहीं है. चाइल्ड व्यू को सीधे पैरंट में ले जाकर भी, लेआउट हाइरार्की को फ़्लैट और ज़्यादा असरदार बनाया जा सकता है.
• डीप लेआउट से बचें. बहुत ज़्यादा नेस्टिंग वाले लेआउट, परफ़ॉर्मेंस के लिए खराब होते हैं. परफ़ॉर्मेंस को बेहतर बनाने के लिए, ConstraintLayout, जैसे फ़्लैट लेआउट का इस्तेमाल करें. lint की जांच के लिए, डिफ़ॉल्ट तौर पर ज़्यादा से ज़्यादा डेप्थ 10 होती है.

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

फ़ाइल > सेटिंग > प्रोजेक्ट सेटिंग विकल्प का इस्तेमाल करके, Android Studio में जांच के प्रोफ़ाइल मैनेज किए जा सकते हैं और जांचें कॉन्फ़िगर की जा सकती हैं. आपको 'जांच का कॉन्फ़िगरेशन' पेज दिखेगा. इसमें, काम करने वाली जांचें दिखेंगी:

चौथी इमेज. 'जांच का कॉन्फ़िगरेशन' पेज.

Lint, कुछ समस्याओं को अपने-आप ठीक कर सकता है. साथ ही, अन्य समस्याओं के लिए सुझाव दे सकता है. इसके अलावा, समीक्षा के लिए सीधे गड़बड़ी वाले कोड पर जा सकता है.

ज़्यादा जानकारी के लिए, लेआउट और लेआउट रिसॉर्स देखें.