View Hierarchy: چیست، اصول کار و چگونگی بازرسی اینترفیس

View Hierarchy چیست؟

View Hierarchy — یک ساختار سلسلمراتبی از تمامی مؤلفه‌های View است که اینترفیس کاربری برنامه Android را تشکیل می‌دهند. هر عنصر اینترفیس، خواه دکمه، فیلد متنی، تصویر یا کانتینر، در این سلسلمراتب به عنوان یک گره در درخت نمایش داده می‌شود، و رابطه والد-فرزند تداخل مؤلفه‌های layout را منعکس می‌کند.

تعریف و هدف

در Android، هر صفحه از ViewGroup (کانتینرها) و View (ابزارک‌ها) ساخته می‌شود. ViewGroup شامل Viewهای فرزند است و محل قرارگیری آنها را مدیریت می‌کند. به عنوان مثال، LinearLayout عناصر را در یک خط قرار می‌دهد و ConstraintLayout بر اساس محدودیت‌ها. View Hierarchy این ساختار را به صورت درخت تصویرسازی می‌کند: ریشه — ViewGroup اصلی (مثلاً content)، برگ‌ها — ابزارک‌های نهایی مانند TextView یا ImageView.

اصل ساخت درخت View

وقتی Android صفحه را رندر می‌کند، درخت View را از بالا به پایین پیمایش می‌کند: ViewGroup والد عناصر فرزند را اندازه‌گیری و محل قرارگیری می‌کند، سپس هر فرزند خود را روی Canvas رسم می‌کند. ترتیب پیمایش ترتیب Z رسم را تعیین می‌کند — عناصری که بعداً اضافه می‌شوند روی عناصر قبلی رسم می‌شوند. درک این اصل برای اشکال‌زدایی عناصر متداخل و موقعیت‌گذاری نادرست حیاتی است.

<!-- مثال سلسلمراتب View در layout -->
<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 — ابزار اصلی Android Studio برای کار با View Hierarchy است. آن از وضعیت فعلی UI برنامه در حال اجرا یک عکس برمی‌دارد و درخت کامل View را با قابلیت مشاهده تعاملی نمایش می‌دهد. برای استفاده به یک دستگاه یا شبیه‌ساز با API Level 14 و بالاتر نیاز است.

عکس وضعیت UI

پس از راه‌اندازی، Layout Inspector به پروسه برنامه متصل شده و از WindowManager یک دامپ از وضعیت فعلی درخواست می‌کند. نتیجه شامل نه تنها درخت View، بلکه یک عکس از صفحه با مرزهای عناصر قرارگرفته روی آن است. این به شما امکان می‌دهد دقیقاً ببینید که کدام Viewها رسم شده‌اند و کجا قرار دارند، و نمایش بصری را با کد layout مقایسه کنید.

به‌روزرسانی بلافاصله

Layout Inspector از حالت Live Update پشتیبانی می‌کند که در آن عکس‌ها با تغییر وضعیات UI به‌طور خودکار به‌روز می‌شوند — به عنوان مثال، پس از کلیک روی دکمه یا باز کردن صفحه دیگر. این به‌ویژه در اشکال‌زدایی انیمیشن‌ها و تغییرات پویای اینترفیس مفید است، زمانی که باید تغییر درخت View را در پاسخ به اقدامات کاربر ردیابی کنید.

// مثال افزودن پویای View در runtime
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

View Hierarchy در Android Studio یک مجموعه از قابلیت‌ها برای تحلیل عمیق اینترفیس کاربری ارائه می‌دهد. ابزار فراتر از مشاهده ساده درخت رفته و شامل ابزارهای بازرسی ویژگی‌ها، تحلیل 3D و فیلتر کردن مؤلفه‌ها است.

مشاهده ویژگی‌های مؤلفه

پس از انتخاب هر View در درخت، پانل Properties با لیست کامل ویژگی‌ها باز می‌شود: layout_width، layout_height، padding، margin، visibility، elevation، background و تمام ویژگی‌های سفارشی از پوسته برنامه. مقادیر هم به پیکسل و هم به dp نمایش داده می‌شوند که مقایسه با کد layout را آسان‌تر می‌کند.

تصویرسازی سه‌بعدی لایه‌ها

Layout Inspector یک نمایش سه‌بعدی از سلسلمراتب View ارائه می‌دهد که در آن هر مؤلفه به عنوان یک لایه با ارتفاع مشخص (elevation) نمایش داده می‌شود. این به شما امکان می‌دهد ببینید کدام عناصر روی یکدیگر قرار می‌گیرند و چه ترتیب Z در رسم استفاده می‌شود. این حالت به‌ویژه در کار با CardView، FloatingActionButton و سایر مؤلفه‌های دارای elevation مفید است.

فیلتر و جستجوی مؤلفه‌ها

برای صفحات بزرگ با ده‌ها View، جستجوی بر اساس id و متن مؤلفه در دسترس است. می‌توان درخت را بر اساس نوع View فیلتر کرد (مثلاً فقط TextView را نشان داد) یا کانتینرها را مخفی کرده و فقط عناصر نهایی را نگه داشت. فیلتر کردن پیمایش در فایل‌های پیچیده layout با تداخل چندلایه را سرعت می‌بخشد. هنگام کار با RecyclerView، فیلتر کردن به شما امکان می‌دهد یک عنصر خاص لیست را برای تحلیل مفصل پارامترهای layout و وضعیتش جدا کنید.

تحلیل منابع و drawable

View Hierarchy نه تنها ویژگی‌های layout، بلکه منابع مرتبط را نیز نمایش می‌دهد: background drawable، منبع تصویر، رنگ‌های از پوسته. اگر View از VectorDrawable استفاده کند، می‌توان مسیر دقیق به منبع را مشاهده کرد. این به پیدا کردن مشکلات ارجاع نادرست drawable کمک می‌کند — مثلاً وقتی پوسته تیره از آیکون روشن استفاده می‌کند یا ارجاع منبع به یک فایل وجود نداشته اشاره می‌کند.

چگونه برای اشکال‌زدایی اینترفیس‌ها استفاده کنیم

اشکال‌زدایی UI با View Hierarchy مسائل عملی مشخصی را حل می‌کند که هر توسعه‌دهنده Android با آن مواجه می‌شود. ابزار نه تنها به شما امکان می‌دهد درخت را ببینید، بلکه مشکلات عملکرد و نمایش را پیدا و برطرف کنید.

یافتن مشکلات قرارگیری

وقتی عنصری روی صفحه آنجا که انتظار می‌روید نیست، کافیست Layout Inspector را باز کرده و مختصات mLeft و mTop آن را بررسی کنید. اغلب مشکل در margin یا constraintهای نادرست است. به عنوان مثال، TextView ممکن است به دلیل margin منفی یا محدودیت‌های نادرست در ConstraintLayout از حدود صفحه خارج شود. View Hierarchy موقعیت دقیق و ابعاد واقعی را نشان خواهد داد.

بهینه‌سازی عمق تداخل

کانتینرهای layout با تداخل عمیق بر عملکرد رندر تأثیر منفی می‌گذارند، زیرا Android زمان بیشتری را صرف مراحل measure و layout می‌کند. View Hierarchy سطح تداخل هر عنصر را نشان می‌دهد. عمق توصیه شده حداکثر 10 سطح است، و تجاوز از 15 سطح یک مشکل جدی محسوب می‌شود که باید با استفاده از ConstraintLayout یا Merge بازنویسی شود.

شناسایی تجدید رسم‌های اضافی

در پانل ویژگی‌ها می‌توان تعداد واقعی گذرهای measure و layout را برای هر View مشاهده کرد. تعداد زیاد تجدید رسم نشان‌دهنده ساختار ناموثر layout است. ابزارهای اشکال‌زدایی GPU Overdraw همراه با View Hierarchy تصویر کاملی ارائه می‌دهند: کدام Viewها بدون نیاز روی دیگران رسم می‌شوند و بار اضافی بر 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>

View Hierarchy در Android Studio: کار گام‌به–گام

برای استفاده مؤثر از View Hierarchy، لازم است بدانید چگونه ابزار را راه‌اندازی کنید، چگونه در درخت پیمایش کنید و چگونه داده‌های بدست آمده را برای تحلیل یا گزارش خروجی بگیرید.

شروع بازرسی

Layout Inspector از منوی Tools → Layout Inspector در Android Studio راه‌اندازی می‌شود. برنامه باید قبل از شروع روی دستگاه متصل یا شبیه‌ساز در حال اجرا باشد. پس از انتخاب پروسه، پنجره‌ای با سه پانل باز می‌شود: عکس صفحه، درخت View و پانل ویژگی‌های مؤلفه انتخاب‌شده. برای شبیه‌ساز با API 29 و بالاتر، حالت Live Update در دسترس است.

پیمایش در درخت

درخت View در پانل چپ به صورت یک لیست سلسلمراتبی نمایش داده می‌شود. می‌توان کانتینرها را باز و بسته کرد و همچنین مستقیماً روی عکس صفحه کلیک کرد — مؤلفه مربوطه خودکار در درخت انتخاب می‌شود. این یک همگام‌سازی دوطرفه است: انتخاب در درخت عنصر را در عکس صفحه برجسته می‌کند و بالعکس. برای جستجوی سریع از فیلد Filter استفاده کنید.

خروجی داده‌ها

نتایج بازرسی را می‌توان در فرمت .li (فایل Layout Inspector) برای مشاهده بعدی یا ارسال به همکاران ذخیره کرد. فایل حاوی اطلاعات کامل درباره درخت View، عکس صفحه و تمام ویژگی‌های مؤلفه‌ها است. برای خروجی، از دکمه Export در نوار ابزارهای Layout Inspector استفاده کنید. داده‌های خروجی شده را می‌توان در کامپیوتر دیگری با Android Studio برای تحلیل مشترک مشکلات UI باز کرد.