ابزارهایی برای اشکال‌زدایی رابط کاربری Compose شما در اندروید استودیو موجود است.
بازرس طرح‌بندی
Layout Inspector به شما امکان می‌دهد یک طرح‌بندی Compose را درون یک برنامه در حال اجرا در یک شبیه‌ساز یا دستگاه فیزیکی بررسی کنید. می‌توانید از Layout Inspector برای بررسی اینکه یک composable چند وقت یکبار دوباره ترکیب می‌شود یا از آن صرف نظر می‌شود، استفاده کنید، که می‌تواند به شناسایی مشکلات برنامه شما کمک کند. به عنوان مثال، برخی از خطاهای کدنویسی ممکن است رابط کاربری شما را مجبور به ترکیب مجدد بیش از حد کنند، که می‌تواند باعث عملکرد ضعیف شود. برخی از خطاهای کدنویسی می‌توانند مانع از ترکیب مجدد رابط کاربری شما شوند و بنابراین، از نمایش تغییرات رابط کاربری شما روی صفحه جلوگیری کنند. اگر در Layout inspector تازه کار هستید، راهنمای نحوه اجرای آن را بررسی کنید.
تعداد ترکیبات جدید را دریافت کنید
هنگام اشکال‌زدایی طرح‌بندی‌های Compose خود، دانستن زمان recompose شدن composableها برای درک اینکه آیا رابط کاربری شما به درستی پیاده‌سازی شده است یا خیر، مهم است. به عنوان مثال، اگر بیش از حد recompose شود، ممکن است برنامه شما کار بیشتری از حد لازم انجام دهد. از طرف دیگر، کامپوننت‌هایی که در زمان پیش‌بینی شده recompose نمی‌شوند، می‌توانند منجر به رفتارهای غیرمنتظره شوند.
Layout Inspector به شما نشان می‌دهد که چه زمانی Composableهای گسسته در سلسله مراتب layout شما، هنگام تعامل با برنامه، دوباره ترکیب شده‌اند یا از آن صرف نظر شده است. در اندروید استودیو، recompositionهای شما هایلایت می‌شوند تا به شما کمک کنند تعیین کنید که composableهای شما در کجای رابط کاربری در حال ترکیب مجدد هستند.
شکل ۱. ترکیب‌بندی‌های مجدد در Layout Inspector هایلایت شده‌اند.
بخش هایلایت شده، یک پوشش گرادیان از ترکیب‌پذیر را در بخش تصویر Layout Inspector نشان می‌دهد و به تدریج ناپدید می‌شود تا بتوانید ایده‌ای از محل ترکیب‌پذیری با بالاترین ترکیب‌پذیری در رابط کاربری پیدا کنید. اگر یک ترکیب‌پذیر با سرعت بالاتری نسبت به ترکیب‌پذیر دیگر در حال ترکیب‌پذیری مجدد باشد، اولین ترکیب‌پذیر رنگ پوشش گرادیان قوی‌تری دریافت می‌کند. اگر روی یک ترکیب‌پذیر در layout inspector دوبار کلیک کنید، برای تجزیه و تحلیل به کد مربوطه هدایت می‌شوید.
پنجره‌ی Layout Inspector را باز کنید و به فرآیند برنامه‌ی خود متصل شوید. در Component Tree ، دو ستون در کنار سلسله مراتب طرح‌بندی ظاهر می‌شوند. ستون اول تعداد ترکیب‌ها برای هر گره و ستون دوم تعداد پرش‌ها برای هر گره را نشان می‌دهد. انتخاب یک گره‌ی composable، ابعاد و پارامترهای composable را نشان می‌دهد، مگر اینکه یک تابع درون‌خطی باشد که در این صورت پارامترها قابل نمایش نیستند. همچنین می‌توانید اطلاعات مشابهی را در پنل Attributes هنگام انتخاب یک composable از Component Tree یا Layout Display مشاهده کنید.
تنظیم مجدد تعداد می‌تواند به شما در درک ترکیب‌های مجدد یا پرش‌ها در طول یک تعامل خاص با برنامه‌تان کمک کند. اگر می‌خواهید تعداد را مجدداً تنظیم کنید، روی تنظیم مجدد در بالای پنجره درخت اجزا کلیک کنید.
شکل 3. فعال کردن شمارنده ترکیب و رد کردن در Layout Inspector.
معناشناسی ترکیب
در Compose، Semantics رابط کاربری شما را به شیوه‌ای جایگزین توصیف می‌کند که برای سرویس‌های دسترسی و چارچوب Testing قابل فهم باشد. می‌توانید از Layout Inspector برای بررسی اطلاعات معنایی در طرح‌بندی‌های Compose خود استفاده کنید.
هنگام انتخاب یک گره Compose، از پنجره Attributes استفاده کنید تا بررسی کنید که آیا اطلاعات معنایی را مستقیماً اعلام می‌کند، معانی را از فرزندانش ادغام می‌کند، یا هر دو را انجام می‌دهد. برای تشخیص سریع اینکه کدام گره‌ها شامل معانی هستند، چه اعلام شده و چه ادغام شده، از منوی کشویی View options در پنجره Component Tree استفاده کنید و Highlight Semantics Layers را انتخاب کنید. این کار فقط گره‌هایی را در درخت برجسته می‌کند که شامل معانی هستند و می‌توانید از صفحه کلید خود برای پیمایش سریع بین آنها استفاده کنید.
بررسی رابط کاربری نوشتن
برای کمک به شما در ساخت رابط‌های کاربری سازگارتر و در دسترس‌تر در Jetpack Compose، اندروید استودیو یک حالت بررسی رابط کاربری (UI Check) در پیش‌نمایش Compose ارائه می‌دهد. این ویژگی مشابه اسکنر دسترسی برای نماها است.
وقتی حالت بررسی رابط کاربری نوشتن (Compose UI) را در پیش‌نمایش نوشتن (Compose Preview) فعال می‌کنید، اندروید استودیو (Android Studio) به طور خودکار رابط کاربری نوشتن شما را بررسی می‌کند و بهبودهایی را برای دسترسی‌پذیرتر و تطبیق‌پذیرتر کردن رابط کاربری پیشنهاد می‌دهد. اندروید استودیو بررسی می‌کند که رابط کاربری شما در اندازه‌های مختلف صفحه نمایش کار می‌کند. در پنل مشکلات (Problems) ، این ابزار مشکلاتی را که تشخیص می‌دهد، مانند کشیده شدن متن در صفحه نمایش‌های بزرگ یا کنتراست رنگ پایین، نشان می‌دهد.
برای دسترسی به این ویژگی، روی آیکون UI Check در Compose Preview کلیک کنید:
بررسی رابط کاربری به طور خودکار رابط کاربری شما را در پیکربندی‌های مختلف پیش‌نمایش می‌دهد و مشکلات موجود در پیکربندی‌های مختلف را برجسته می‌کند. در پنل مشکلات ، وقتی روی یک مشکل کلیک می‌کنید، می‌توانید جزئیات مشکل، راه‌حل‌های پیشنهادی و رندرهایی را که ناحیه مشکل را برجسته می‌کنند، مشاهده کنید.
