View Hierarchy: یہ کیا ہے، کام کرنے کے اصول اور انٹرفیس کا معائنہ کیسے کریں

View Hierarchy کیا ہے؟

View Hierarchy تمام View اجزاء کا ایک درجہ بندی کا ڈھانچہ ہے جو Android ایپلیکیشن کے یوزر انٹرفیس کو تشکیل دیتے ہیں۔ انٹرفیس کا ہر عنصر، خواہ وہ بٹن ہو، ٹیکسٹ فیلڈ ہو، تصویر ہو یا کنٹینر، اس درجہ بندی میں درخت کے ایک نوڈ کے طور پر پیش کیا جاتا ہے، اور والدین-بچے کا تعلق layout اجزاء کی نیسٹنگ کو ظاہر کرتا ہے۔

تعریف اور مقصد

Android میں، ہر اسکرین ViewGroups (کنٹینر) اور Views (ویجٹ) سے بنائی جاتی ہے۔ ایک ViewGroup میں چائلڈ Views ہوتے ہیں اور ان کی پوزیشن کا انتظام کرتا ہے۔ مثال کے طور پر، LinearLayout عناصر کو ایک لائن میں ترتیب دیتا ہے، جبکہ ConstraintLayout انہیں رکاوٹوں کے مطابق ترتیب دیتا ہے۔ View Hierarchy اس ڈھانچے کو ایک درخت کے طور پر تصور کرتا ہے: جڑ روٹ ViewGroup ہے (مثلاً content)، اور پتے TextView یا ImageView جیسے آخری ویجٹ ہیں۔

View درخت بنانے کا اصول

جب Android اسکرین رینڈر کرتا ہے، تو وہ View درخت کو اوپر سے نیچے کی طرف ٹراورس کرتا ہے: والدین ViewGroup چائلڈ عناصر کو ناپتا ہے اور پوزیشن دیتا ہے، پھر ہر چائلڈ عنصر خود کو Canvas پر کھینچتا ہے۔ ٹراورسل ترتیب رینڈرنگ کی Z-ترتیب کا تعین کرتی ہے — بعد میں شامل کیے گئے عناصر پچھلے عناصر کے اوپر کھینچے جاتے ہیں۔ اس اصول کو سمجھنا اوورلیپنگ عناصر اور غلط پوزیشننگ کو ڈیبگ کرنے کے لیے بہت اہم ہے۔

<!-- Layout میں View کے درجہ بندی کی مثال -->
<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/titleText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World" />

    <Button
        android:id="@+id/submitBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Submit" />

</androidx.constraintlayout.widget.ConstraintLayout>

Layout Inspector کیسے کام کرتا ہے

Layout Inspector View Hierarchy کے ساتھ کام کرنے کے لیے اہم Android Studio ٹول ہے۔ یہ چلتی ہوئی ایپلیکیشن کی موجودہ UI حالت کا سنیپ شاٹ لیتا ہے اور انٹرایکٹو دیکھنے کی صلاحیتوں کے ساتھ مکمل View درخت دکھاتا ہے۔ اس کے لیے API Level 14 یا اس سے اوپر کے ڈیوائس یا ایمولیٹر کی ضرورت ہے۔

UI حالت کا سنیپ شاٹ

لانچ ہونے پر، Layout Inspector ایپلیکیشن کے عمل سے جڑتا ہے اور موجودہ WindowManager حالت کا ڈمپ مانگتا ہے۔ نتیجے میں نہ صرف View درخت بلکہ عناصر کی حدود کے ساتھ اسکرین کا اسکرین شاٹ بھی شامل ہوتا ہے۔ یہ لفظی طور پر دیکھنے کی اجازت دیتا ہے کہ کون سے Views رینڈر ہوئے ہیں اور وہ کہاں ہیں، بصری ڈسپلے کو layout کوڈ سے ملاتے ہوئے۔

ریئل ٹائم اپ ڈیٹ

Layout Inspector Live Update موڈ کو سپورٹ کرتا ہے، جہاں UI حالت بدلنے پر سنیپ شاٹس خود بخود اپ ڈیٹ ہو جاتے ہیں — مثال کے طور پر، بٹن پر کلک کرنے یا دوسری اسکرین پر جانے کے بعد۔ یہ اینی میشن اور ڈائنامک انٹرفیس تبدیلیوں کو ڈیبگ کرتے وقت خاص طور پر مفید ہے، جب صارف کے اعمال کے جواب میں View درخت کی تبدیلی کو ٹریک کرنا ضروری ہو۔

// رن ٹائم میں متحرک طور پر View شامل کرنے کی مثال
val dynamicView = TextView(this).apply {
    id = View.generateViewId()
    layoutParams = ViewGroup.LayoutParams(
        ViewGroup.LayoutParams.WRAP_CONTENT,
        ViewGroup.LayoutParams.WRAP_CONTENT
    )
    text = "Dynamic View"
}
binding.root.addView(dynamicView)

View Hierarchy کی اہم صلاحیتیں

Android Studio میں View Hierarchy یوزر انٹرفیس کے گہرائی سے تجزیہ کے لیے خصوصیات کا ایک سیٹ فراہم کرتا ہے۔ ٹول صرف درخت دیکھنے سے آگے بڑھتا ہے اور خصوصیات کا معائنہ، 3D تجزیہ اور اجزاء کی فلٹرنگ شامل کرتا ہے۔

جزو کی خصوصیات دیکھنا

درخت میں کسی بھی View کو منتخب کرنے پر، Properties پینل خصوصیات کی مکمل فہرست کے ساتھ کھلتا ہے: layout_width، layout_height، padding، margin، visibility، elevation، background اور ایپلیکیشن تھیم کی تمام حسب ضرورت صفات۔ قدریں پکسل اور dp دونوں میں دکھائی جاتی ہیں، جس سے layout کوڈ سے مماثلت آسان ہو جاتی ہے۔

تہوں کا 3D تصور

Layout Inspector View کے درجہ بندی کا تین جہتی منظر پیش کرتا ہے، جہاں ہر جزو ایک مخصوص بلندی (elevation) کے ساتھ ایک تہہ کے طور پر دکھایا جاتا ہے۔ یہ بصری طور پر دیکھنے کی اجازت دیتا ہے کہ کون سے عناصر ایک دوسرے کو اوورلیپ کرتے ہیں اور رینڈرنگ کے دوران کون سی Z-ترتیب استعمال ہوتی ہے۔ یہ موڈ CardView، FloatingActionButton اور elevation والے دیگر اجزاء کے ساتھ کام کرتے وقت خاص طور پر مفید ہے۔

اجزاء کو فلٹر کرنا اور تلاش کرنا

درجنوں Views والی بڑی اسکرینوں کے لیے، id کے ذریعے تلاش اور جزو کا متن دستیاب ہے۔ آپ درخت کو View کی قسم کے مطابق فلٹر کر سکتے ہیں (مثلاً، صرف TextView دکھائیں) یا کنٹینر چھپا سکتے ہیں، صرف آخری عناصر چھوڑ کر۔ فلٹرنگ گہری نیسٹنگ والی پیچیدہ layout فائلوں میں نیویگیشن کو تیز کرتی ہے۔ RecyclerView کے ساتھ کام کرتے وقت، فلٹرنگ آپ کو اس کے layout پیرامیٹرز اور حالت کے تفصیلی تجزیہ کے لیے فہرست کے کسی مخصوص آئٹم کو الگ کرنے کی اجازت دیتی ہے۔

وسائل اور drawable کا تجزیہ

View Hierarchy نہ صرف layout کی خصوصیات بلکہ متعلقہ وسائل بھی دکھاتا ہے: background drawable، تصویر کا ماخذ، تھیم کے رنگ۔ اگر View VectorDrawable استعمال کرتا ہے، تو وسائل کا صحیح راستہ دیکھا جا سکتا ہے۔ یہ غلط drawable حوالوں کے مسائل تلاش کرنے میں مدد کرتا ہے — مثال کے طور پر، جب ڈارک تھیم ہلکا آئیکن استعمال کرتی ہے، یا جب وسائل کا حوالہ کسی غیر موجود فائل کی طرف اشارہ کرتا ہے۔

انٹرفیس ڈیبگ کرنے کے لیے کیسے استعمال کریں

View Hierarchy کے ساتھ UI ڈیبگ کرنا مخصوص عملی کاموں کو حل کرتا ہے جن کا سامنا ہر Android ڈویلپر کو ہوتا ہے۔ ٹول نہ صرف درخت دیکھنے بلکہ کارکردگی اور ڈسپلے کے مسائل تلاش کرنے اور ٹھیک کرنے کی اجازت دیتا ہے۔

پوزیشن کے مسائل تلاش کرنا

جب اسکرین پر کوئی عنصر متوقع جگہ پر نہیں ہے، تو بس Layout Inspector کھولیں اور اس کے کوآرڈینیٹ mLeft اور mTop دیکھیں۔ اکثر مسئلہ غلط مارجن یا ConstraintLayout میں غلط طریقے سے کنفیگر کردہ رکاوٹوں میں ہوتا ہے۔ View Hierarchy صحیح پوزیشن اور اصل طول و عرض دکھائے گا۔

نیسٹنگ گہرائی کو بہتر بنانا

گہرائی سے نیسٹڈ layout کنٹینر رینڈرنگ کارکردگی کو منفی طور پر متاثر کرتے ہیں، کیونکہ Android پیمائش اور layout کے مراحل پر زیادہ وقت صرف کرتا ہے۔ View Hierarchy ہر عنصر کی نیسٹنگ سطح کو واضح طور پر دکھاتا ہے۔ تجویز کردہ گہرائی 10 سطحوں سے زیادہ نہیں ہے، اور 15 سطحوں سے تجاوز کرنا ایک سنگین مسئلہ سمجھا جاتا ہے جس کے لیے ConstraintLayout یا Merge کے ساتھ ری فیکٹرنگ کی ضرورت ہے۔

ضرورت سے زیادہ دوبارہ ڈرائنگ کی شناخت

پراپرٹیز پینل میں، آپ ہر View کے لیے پیمائش اور layout کے اصل مراحل کی تعداد دیکھ سکتے ہیں۔ ضرورت سے زیادہ دوبارہ ڈرائنگ ایک غیر موثر layout ڈھانچے کی نشاندہی کرتی ہے۔ GPU Overdraw ڈیبگنگ ٹولز View Hierarchy کے ساتھ مل کر مکمل تصویر فراہم کرتے ہیں: کون سے Views غیر ضروری طور پر دوسروں کے اوپر کھینچے جاتے ہیں، جس سے GPU پر اضافی بوجھ پڑتا ہے۔ GPU Overdraw تجزیہ Layout Inspector ڈیٹا کے ساتھ مل کر پوری اسکرین پر غیر موثر ڈرائنگ کی مکمل تصویر فراہم کرتا ہے۔

// Merge کے ساتھ گہرائی کی اصلاح
// نیسٹڈ LinearLayout کے بجائے Merge استعمال کریں
<merge xmlns:android="http://schemas.android.com/apk/res/android">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="بہتر کردہ مواد" />
</merge>

Android Studio میں View Hierarchy: مرحلہ وار گائیڈ

View Hierarchy کو مؤثر طریقے سے استعمال کرنے کے لیے، یہ جاننا ضروری ہے کہ ٹول کیسے شروع کریں، درخت میں کیسے نیویگیٹ کریں اور تجزیہ یا رپورٹنگ کے لیے حاصل کردہ ڈیٹا کو کیسے برآمد کریں۔

معائنہ شروع کرنا

Layout Inspector Android Studio میں Tools → Layout Inspector مینو سے شروع کیا جاتا ہے۔ شروع کرنے سے پہلے، ایپلیکیشن منسلک ڈیوائس یا ایمولیٹر پر چل رہی ہونی چاہیے۔ عمل منتخب کرنے کے بعد، تین پینل والی ایک ونڈو ظاہر ہوتی ہے: اسکرین کا اسکرین شاٹ، View درخت اور منتخب جزو کی پراپرٹیز پینل۔ API 29 اور اس سے اوپر کے ایمولیٹر کے لیے، Live Update موڈ دستیاب ہے۔

درخت میں نیویگیشن

View درخت بائیں پینل میں ایک درجہ بندی کی فہرست کے طور پر دکھایا جاتا ہے۔ آپ کنٹینرز کو پھیلا اور سکیڑ سکتے ہیں، اور اسکرین شاٹ پر براہ راست کلک بھی کر سکتے ہیں — متعلقہ جزو درخت میں خود بخود نمایاں ہو جاتا ہے۔ یہ دو طرفہ مطابقت پذیری ہے: درخت میں انتخاب اسکرین شاٹ پر عنصر کو نمایاں کرتا ہے، اور اس کے برعکس۔ فوری تلاش کے لیے، Filter فیلڈ استعمال کریں۔

ڈیٹا برآمد کرنا

معائنہ کے نتائج کو بعد میں دیکھنے یا ساتھیوں کے ساتھ شیئر کرنے کے لیے .li فارمیٹ (Layout Inspector فائل) میں محفوظ کیا جا سکتا ہے۔ فائل میں View درخت، اسکرین شاٹ اور تمام اجزاء کی خصوصیات کے بارے میں مکمل معلومات ہوتی ہیں۔ برآمد کرنے کے لیے، Layout Inspector ٹول بار میں Export بٹن استعمال کریں۔ برآمد کردہ ڈیٹا کو UI مسائل کے مشترکہ تجزیہ کے لیے Android Studio والی دوسری مشین پر کھولا جا سکتا ہے۔