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

ابزار Layout Inspector در اندروید استودیو به شما امکان می‌دهد طرح‌بندی (layout) را درون یک برنامه در حال اجرا در یک شبیه‌ساز یا دستگاه فیزیکی بررسی و اشکال‌زدایی کنید. می‌توانید ویژگی‌های هر جزء را بررسی کنید، طرح‌بندی برنامه خود را با مدل‌های طراحی مقایسه کنید و یک نمای بزرگنمایی شده از برنامه خود را نمایش دهید.

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

برای اطلاعات بیشتر، به اشکال‌زدایی رابط کاربری Compose خود مراجعه کنید.

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

شروع کنید

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

منابع اضافی

محتوا را مشاهده می‌کند