ابزار Layout Inspector در Android Studio به شما این امکان را می‌دهد که چیدمان (layout) اپلیکیشن خود را دیباگ کنید . . .

معرفی و کاربرد Layout Inspector

ابزار Layout Inspector در Android Studio به شما این امکان را می‌دهد که چیدمان (layout) اپلیکیشن خود را دیباگ کنید. این ابزار، ساختار سلسله‌مراتبی نماها (View Hierarchy) را نمایش می‌دهد و شما می‌توانید ویژگی‌های هر View را بررسی کنید.

با استفاده از Layout Inspector می‌توانید:

• چیدمان اپ خود را با طراحی اولیه (mockup) مقایسه کنید،
• جزئیات چیدمان را هنگام اجرای برنامه (runtime) بررسی کنید.

این ابزار به‌ویژه زمانی مفید است که چیدمان شما به‌صورت پویا (در زمان اجرا) ساخته می‌شود و نه فقط از طریق XML، یا Compose در طراحی اولیه ،  و رفتار چیدمان مطابق انتظار نیست.

نکات مهم قبل از استفاده

قبل از استفاده باید به این نکات توجه کنیم

• این قابلیت در api بالاتر از 29 معرفی شده است .
• «من خودم خیلی سعی کردم که در جنی موشن استفاده کنم ، اما نشد ، برای همین در داخل خود Emulator اندروید استودیو تست کردم ».
• « سعی کنید از ورژن جدید تر اندروید استودیو استفاده کنید ، ورژن های قبلی اشکالات دارند که این قابلیت در اون درست کار نمیکنه »
• « برای این اموزش من از ورژن Studio.2024.3.2.15 استفاده کردم ، که جدید ترین و پایدارترین نسخه در زمان این آموزش است هست »

بعد از ساختن یه پروژه ، و ران کردن پروژه داخل ایمولاتور باید به این قسمت بریم :

نحوه فعال‌سازی و رفع خطاهای احتمالی

• در اندروید استودیو های قدیمی ، layout inspector یک ابزار جداگانه بود اما در اندروید استودیو های ورژن جدید با Running devices یکی شده ، و اگه از قسمت Tools ->Layout Inspector را انتخاب کنید به این Running Devices هدایت می شوید .
• در بار اول که از Layout Inspector استفاده کنید امکان داره با این خطا مواجه بشید :

این خطا داره میگه که برای استفاده از Layout Inspector این کتابخانه Compose-ui-inspection.jar نیاز داره  ،این کتابخانه به صورت پیش فرض در حین نصب کردن اندروید استودیو هست ، که در قبل در این مسیر بود :

C:\Program Files\Android\Android Studio\plugins\android\resources\

اما جدیدا این فایل در این مسیر قرار دارد :

C:\Program Files\Android\Android Studio\plugins\android\resources\app-inspection\

همون طور که می بینید ، یه پوشه دیگه به آدرس این فایل اضافه شده است ، برای این که بتونیم این مشکل رو حل کنیم باید مسیر جدید رو به اندروید بدیم ،به این صورت عمل کنید :

• ابتدا به این مسیر برید : Help->Edit custom VM options . . .

بعد این فایل برای شما باز میشه :

در این فایل شما باید ادرس جدید فایل رو وارد کنید :
-Dlayout.inspector.rel.jar.location=C:\Program Files\Android\Android Studio\plugins\android\resources\app-inspection

دقت کنید ، که مسیرها در رایانه شما در این قسمت ممکن است تفاوت داشته باشد این رو با مال خودتون تنظیم کنید

بعد از این که ، این را داخل این فایل وارد کردید اندروید استودیو رو ریستارت کنید ،

و بعد در این جا این رو انتخاب کنید .

بعد از راه اندازی مجدد اندروید استودیو ، و  Run کردن پروژه این گزینه رو انتخاب کنید :

بعد از زدن این گزینه ، یه مقدار منتظر باشید که این قسمت در پایین صفحه برای شما ظاهر شود:

اگر روی کادر علامت زده کلیک کنید  تا قسمت های مختلف رو توضیح بدم  : (من قسمت column  رو باز کردم و به زیر مجموعه اون Button کلیک کردم )

بخش‌های مهم Layout Inspector

توضیح قسمت های علامت زده شده :

بررسی Recompose و Skip با مثال عملی

من روی Button در شبیه ساز کلیک کردم و نتیجه شد عکس پایینی :

توضیح اتفاقی که افتاد :
وقتی روی دکمه کلیک می‌کنی، state (name) تغییر می‌کنه.
پس کل اون Composable (Greeting) دوباره اجرا میشه (Recompose میشه).

تو اون Greeting دوتا چیز داری:
۱. Button
۲. Text

Compose اول میره سراغ Button → می‌گه: “این دکمه نیازی به تغییر نداره، پس Skip!” (یعنی دوباره نمی‌سازمش).
بعد میره سراغ Text → می‌بینه که Text وابسته به state تغییر کرده، پس این یکی رو واقعاً دوباره می‌سازه.

پس چرا میگی دکمه ۲ بار recompose شد؟ چون:

• اولین بار که Greeting ساخته شد (initial composition).
• دومین بار که کلیک کردی و Greeting کلش recompose شد، ولی دکمه چون تغییر نکرد skip شد (فقط چک شد که لازم نیست عوض بشه).

در واقع:
✔️ ۱ بار واقعا ساخته شد.
✔️ ۱ بار هم بررسی شد که نیازی به تغییر نداره (skip شد).

پس تو Layout Inspector می‌بینی ۲ بار رفت، ولی یکی‌ش واقعیه، یکی‌ش فقط بررسی بوده.

خلاصه کوتاه:

✅ روی دکمه کلیک → کل Greeting دوباره اجرا → Compose چک میکنه دکمه عوض شده؟ → نه! → skip
ولی باز هم اسمش recompose حساب میشه چون بررسی شده.

جمع بندی

در این مثال به صورت خیلی ساده در مورد این ابزار بحث کردیم ، درادامه و مقاله ای تحت عنوان Side effect منتشر شده است که در حین بررسی State ها و مشکلات آن ها ، ابزار Layout inspector بسیار مفید واقع میشود .و برای اطلاعات بیشتر میتونید به این سایت مراجعه کنید .