طرح خود را با Layout Inspector اشکال زدایی کنید

ابزار Layout Inspector در اندروید استودیو به شما امکان می‌دهد تا با نمایش سلسله مراتب نماها، طرح‌بندی برنامه خود را اشکال‌زدایی کنید. در این سلسله مراتب می‌توانید ویژگی‌های هر نما را بررسی کنید. با استفاده از Layout Inspector، می‌توانید طرح‌بندی برنامه خود را با مدل‌های طراحی مقایسه کنید، یک نمای بزرگنمایی شده یا سه‌بعدی از برنامه خود نمایش دهید و جزئیات طرح‌بندی آن را در زمان اجرا بررسی کنید. این امر به ویژه زمانی مفید است که طرح‌بندی شما در زمان اجرا ساخته شده باشد و نه کاملاً در XML و طرح‌بندی به طور غیرمنتظره‌ای رفتار کند.

شکل ۱. ابزار بررسی طرح‌بندی (Layout Inspector) تعبیه‌شده برای برنامه‌ی Jetchat.

شروع کنید

برای شروع Layout Inspector، برنامه خود را اجرا کنید ، به پنجره Running Devices بروید و روی Toggle Layout Inspector کلیک کنید. دکمه بازرس طرح‌بندی تعبیه‌شده را تغییر وضعیت دهید اگر بین چندین دستگاه یا پروژه جابجا شوید، Layout Inspector به طور خودکار به فرآیندهای اشکال‌زدایی که در پیش‌زمینه دستگاه متصل اجرا می‌شوند، متصل می‌شود.

در اینجا نحوه انجام برخی از کارهای رایج آورده شده است:

  • برای مشاهده سلسله مراتب و بررسی ویژگی‌های هر نما، از پنجره‌های ابزار Component Tree و Attributes استفاده کنید. Layout Inspector ممکن است برای دسترسی به ویژگی‌ها نیاز به راه‌اندازی مجدد فعالیت داشته باشد. برای اطلاعات بیشتر، به View Attribute Inspection مراجعه کنید.
  • برای انتخاب نماها با یک کلیک مستقیم روی نماها یا رفتن به کد با دوبار کلیک روی نماها، گزینه بازرسی عمیق (Toggle Deep Inspect) را فعال کنید. دکمه بازرسی عمیق را تغییر دهید .
  • برای تعامل با برنامه، گزینه بازرسی عمیق (Deep Inspect) را غیرفعال کنید. دکمه بازرسی عمیق را تغییر دهید .
  • برای بررسی دستگاه‌های فیزیکی، قابلیت آینه‌سازی دستگاه را فعال کنید.
  • برای فعال کردن به‌روزرسانی‌های زنده هنگام به‌روزرسانی رابط کاربری برنامه، بررسی کنید که Live Edit فعال باشد.
  • برای استفاده از حالت سه‌بعدی ، یک اسنپ‌شات از Layout Inspector بگیرید. عکس فوری از بازرس طرح‌بندی و سپس روی حالت سه بعدی کلیک کنید دکمه سه بعدی .

انتخاب یا جداسازی یک نما

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

برای انتخاب یک نما، روی آن در درخت اجزا یا صفحه نمایش طرح‌بندی کلیک کنید. تمام ویژگی‌های طرح‌بندی برای نمای انتخاب‌شده در پنل ویژگی‌ها ظاهر می‌شوند.

اگر طرح شما شامل نماهای همپوشانی است، می‌توانید با کلیک راست در حالت بازرسی عمیق، تمام نماهای موجود در یک منطقه را مشاهده کنید. دکمه بازرسی عمیق را تغییر دهید برای انتخاب نمایی که در جلو نیست، روی آن در درخت اجزا کلیک کنید یا طرح را بچرخانید .

برای کار با طرح‌بندی‌های پیچیده، می‌توانید نماهای منفرد را جدا کنید تا فقط زیرمجموعه‌ای از طرح‌بندی در درخت اجزا نشان داده شود و در نمایش طرح‌بندی رندر شود. برای جدا کردن یک نما، یک عکس فوری بگیرید عکس فوری از بازرس طرح‌بندی ، روی نمای موجود در درخت اجزا کلیک راست کرده و گزینه Show Only Subtree یا Show Only Parents را انتخاب کنید. برای بازگشت به نمای کامل، روی نمای مورد نظر کلیک راست کرده و گزینه Show All را انتخاب کنید. قبل از جداسازی یک نما، باید از آن یک Snapshot بگیرید.

پنهان کردن حاشیه‌های طرح‌بندی و مشاهده برچسب‌ها

برای پنهان کردن کادر اطراف یا مشاهده برچسب‌ها برای یک عنصر طرح‌بندی، روی «گزینه‌های مشاهده» کلیک کنید دکمه مشاهده گزینه‌ها در بالای صفحه نمایش طرح‌بندی (Layout Display) کلیک کنید و گزینه‌های «نمایش مرزها» (Show Borders) یا «نمایش برچسب نما» (Show View Label) را تغییر دهید.

ثبت تصاویر سلسله مراتب طرح‌بندی

Layout Inspector به شما امکان می‌دهد اسنپ‌شات‌هایی از سلسله مراتب چیدمان برنامه در حال اجرا خود ذخیره کنید تا بتوانید آنها را با دیگران به اشتراک بگذارید یا بعداً به آنها مراجعه کنید.

اسنپ‌شات‌ها داده‌هایی را که معمولاً هنگام استفاده از Layout Inspector مشاهده می‌کنید، ثبت می‌کنند، از جمله رندر سه‌بعدی دقیق از طرح‌بندی شما، درخت اجزای طرح‌بندی View، Compose یا Hybrid شما و ویژگی‌های دقیق برای هر جزء از رابط کاربری شما. برای ذخیره یک اسنپ‌شات، روی Snapshot Export/Import کلیک کنید. صادرات/واردات اسنپ‌شات و سپس Snapshot را صادر کنید .

با کلیک روی «وارد کردن عکس فوری»، یک عکس فوری ذخیره شده قبلی از Layout Inspector را بارگذاری کنید.

حالت سه بعدی

نمایش طرح‌بندی (Layout Display) یک تجسم سه‌بعدی پیشرفته از سلسله مراتب نمای برنامه شما در زمان اجرا ارائه می‌دهد. برای استفاده از این ویژگی، یک عکس فوری بگیرید. صادرات/واردات اسنپ‌شات ، روی دکمه حالت سه‌بعدی کلیک کنید دکمه سه بعدی در پنجره‌ی Snapshot Inspector، و با کشیدن ماوس آن را بچرخانید.

بازرس طرح‌بندی: نمای سه‌بعدی
شکل ۲. نمای سه‌بعدی چرخیده از یک طرح‌بندی.
بازرس طرح‌بندی: نمای فاصله‌گذاری لایه‌ها
شکل ۳. برای بزرگ یا کوچک کردن لایه‌های طرح‌بندی، از نوار لغزنده‌ی Layer Spacing استفاده کنید.

طرح‌بندی برنامه را با یک تصویر مرجع مقایسه کنید

برای مقایسه طرح‌بندی برنامه خود با یک تصویر مرجع، مانند یک ماکت رابط کاربری، می‌توانید یک تصویر بیت‌مپ روی آن را در Layout Inspector بارگذاری کنید.

  • برای بارگذاری یک پوشش، گزینه بارگذاری پوشش را انتخاب کنید. گزینه‌ای از نوار ابزار Layout Inspector . لایه‌ی پوششی متناسب با طرح‌بندی، مقیاس‌بندی می‌شود.
  • برای تنظیم شفافیت لایه، از اسلایدر Overlay Alpha استفاده کنید.
  • برای حذف پوشش، روی «پاک کردن پوشش» کلیک کنید

بازرسی نوشتن

Layout Inspector به شما امکان می‌دهد یک طرح‌بندی Compose را درون یک برنامه در حال اجرا در یک شبیه‌ساز یا دستگاه فیزیکی بررسی کنید. می‌توانید از Layout Inspector برای بررسی اینکه یک composable چند وقت یکبار دوباره ترکیب می‌شود یا از آن صرف نظر می‌شود، استفاده کنید، که می‌تواند به شناسایی مشکلات برنامه شما کمک کند. به عنوان مثال، برخی از خطاهای کدنویسی ممکن است رابط کاربری شما را مجبور به ترکیب مجدد بیش از حد کنند، که می‌تواند باعث عملکرد ضعیف شود. برخی از خطاهای کدنویسی می‌توانند مانع از ترکیب مجدد رابط کاربری شما شوند و بنابراین، از نمایش تغییرات رابط کاربری شما روی صفحه جلوگیری کنند.

درباره Layout Inspector برای Compose بیشتر بدانید

مشاهده بازرسی ویژگی

Layout Inspector برای عملکرد صحیح به تنظیمات سراسری زیر نیاز دارد:

adb shell settings put global debug_view_attributes 1

این گزینه اطلاعات اضافی برای بررسی تمام فرآیندهای روی دستگاه ایجاد می‌کند.

Layout Inspector به طور خودکار این تنظیم را هنگام شروع فعال می‌کند. این باعث می‌شود Activity فعلی در پیش‌زمینه مجدداً راه‌اندازی شود. تا زمانی که این پرچم به صورت دستی در دستگاه غیرفعال نشود، Activity دیگری مجدداً راه‌اندازی نخواهد شد.

برای غیرفعال کردن این پرچم، دستور adb زیر را اجرا کنید:

adb shell settings delete global debug_view_attributes

روش دیگر این است که گزینه‌ی «فعال کردن بازرسی ویژگی نما» را از گزینه‌های توسعه‌دهنده‌ی دستگاه خود خاموش کنید.

بازرس طرح‌بندی مستقل

برای عملکرد بهینه، توصیه می‌کنیم از Layout Inspector در حالت پیش‌فرض تعبیه‌شده استفاده کنید. اگر می‌خواهید Layout Inspector را از حالت تعبیه‌شده خارج کنید، به File ( Android Studio در macOS)> Settings > Tools > Layout Inspector بروید و تیک گزینه Enable embedded Layout Inspector را بردارید.

در حالت مستقل، با کلیک روی « به‌روزرسانی‌های زنده»، به‌روزرسانی‌های زنده را فعال کنید. گزینه از نوار ابزار Layout Inspector .