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

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

شکل 1. بازرس طرح بندی جاسازی شده برای برنامه Jetchat.

شروع کنید

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

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

  • برای مشاهده سلسله مراتب و بررسی خصوصیات هر نما، از پنجره های ابزار Component Tree و Attributes استفاده کنید. Layout Inspector ممکن است برای دسترسی به ویژگی ها نیاز به راه اندازی مجدد فعالیت داشته باشد. برای اطلاعات بیشتر، به جلوگیری از شروع مجدد فعالیت مراجعه کنید.
  • برای انتخاب نماها با یک کلیک مستقیم روی نماها یا رفتن به کد با دوبار کلیک کردن روی نماها، Toggle Deep Inspect را فعال کنید. دکمه بازرسی عمیق را تغییر دهید .
  • برای تعامل با برنامه، Toggle Deep Inspect را غیرفعال کنید دکمه بازرسی عمیق را تغییر دهید .
  • برای بازرسی دستگاه‌های فیزیکی، انعکاس دستگاه را فعال کنید.
  • برای فعال کردن به‌روزرسانی‌های زنده هنگام به‌روزرسانی رابط کاربری برنامه، بررسی کنید که «ویرایش زنده» فعال باشد.
  • برای استفاده از حالت سه بعدی ، یک عکس فوری از Layout Inspector بگیریدعکس فوری بازرس طرح و سپس روی 3D Mode کلیک کنید دکمه سه بعدی .

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

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

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

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

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

مرزهای طرح بندی را مخفی کنید و برچسب ها را مشاهده کنید

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

عکس های فوری سلسله مراتبی طرح بندی را بگیرید

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

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

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

حالت سه بعدی

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

Layout Inspector: نمای سه بعدی
شکل 2. نمای سه بعدی چرخانده شده از یک Layout.
Layout Inspector: نمای فاصله بین لایه ها
شکل 3. برای گسترش یا انقباض لایه های Layout، از نوار لغزنده Layer Spacing استفاده کنید.

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

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

  • برای بارگذاری همپوشانی، Load Overlay را انتخاب کنید گزینه ای از نوار ابزار Layout Inspector . روکش برای تناسب با چیدمان کوچک شده است.
  • برای تنظیم شفافیت روکش، از نوار لغزنده Overlay Alpha استفاده کنید.
  • برای حذف همپوشانی، روی Clear Overlay کلیک کنید

نوشتن را بازرسی کنید

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

درباره Layout Inspector for Compose بیشتر بیاموزید

از شروع مجدد فعالیت خودداری کنید

Layout Inspector برای عملکرد صحیح به یکی از تنظیمات کلی زیر نیاز دارد. اگر یک تنظیم کلی را مشخص نکنید، Layout Inspector به طور خودکار یک تنظیم را تنظیم می کند.

  1. adb shell settings put global debug_view_attributes_application_package <processname>

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

  2. adb shell settings put global debug_view_attributes 1

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

تغییر یک تنظیم کلی ممکن است باعث شروع مجدد فعالیت شود. برای جلوگیری از شروع مجدد فعالیت، می‌توانید تنظیمات را در Android Studio تغییر دهید یا گزینه‌های برنامه‌نویس را در تنظیمات دستگاه خود تغییر دهید.

برای فعال کردن به‌روزرسانی خودکار در Android Studio، با انتخاب Run > Edit Configurations از منو ، Run/Debug Configurations را باز کنید. سپس، به برگه Miscellaneous بروید و کادر Connect to Layout Inspector را بدون راه اندازی مجدد فعالیت در زیر Layout Inspector Options علامت بزنید.

گزینه Restart Activity در Run configurations
شکل 4. بازخوانی خودکار را از پنجره Run/Debug Configurations فعال کنید.

از طرف دیگر، گزینه‌های برنامه‌نویس دستگاهتان را فعال کنید و سپس بازرسی ویژگی مشاهده را از تنظیمات برنامه‌نویس دستگاه فعال کنید .

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

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

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