Debug کردن رابط کاربری در اندروید استودیو با Layout Inspector

Debug کردن ui بعضی از مواقع می‌تواند مشکل باشد. اندروید استودیو‌ی 4.0 دارای یک layout inspector بروز شده است، که به شما امکان می‌دهد (Ui( user interface اپلیکیشن خود را شبیه به ابزار Chrome dev ،debug کنید. Layout inspector با دستگاه یا شبیه‌ساز شما کار می‌کند و سلسله مراتب view را نشان می‌دهد. این کمک می‌کند که مشکل اصلی را پیدا کنید. برخلاف نسخه‌ی قبلی، layout inspector بروز شده می‌تواند سلسله مراتب view را به صورت سه ‌بعدی نمایش دهد که به شما امکان می‌دهد که ببینید که view چگونه نمایش داده می‌شود. با این کار می‌توانید، سلسله مراتب را به صورت لایه‌ای مشاهده کنید. همچنین تمام ویژگی های view ازجمله مواردی که از والدینشان به ارث برده‌اند نشان می‌دهد.

بیایید ببینیم که آخرین نسخه‌ی layout inspector چگونه کار می‌کند. برای باز کردن آن بر روی view کلیک کرده و گزینه‌ی layout inspector را از منوی tool windows انتخاب کنید.

Layout inspector فقط سلسله مراتب Ui فرایند در حال اجرا را نشان می‌دهد. این بدان معنی است که شما باید به یک برنامه‌ی درحال اجرای قابل debug بر روی دستگاه یا شبیه‌ساز وصل شوید، دو راه برای این کار وجود دارد:

• اگر یک فرایند درحال اجرا ندارید، به دستگاه خود وصل شوید و یا شبیه‌ساز خود را اجرا کنید و بر روی run کلیک کنید تا اپلیکیشن اجرا شود.
• اگر فرایند درحال اجرا دارید، کافیست بر روی select process کلیک کنید، دستگاه خود را انتخاب کنید و اپلیکیشن در حال اجرا را از لیست انتخاب کنید.

بعد از انتخاب فرایند اپلیکیشن، layout inspector یک تصویر از سلسله مراتب Ui فعلی تهیه می‌کند. اگر گزینه‌ی live update را انتخاب کنید، تصویر به صورت پویا هنگام تعامل با اپلیکیشن بروزرسانی می‌شود.

این نسخه از layout inspector شباهت زیادی به نسخه‌ی قبلی دارد، اما قابلیت بسیار بیشتری را ارائه می‌دهد. برای شروع، layout inspector می‌تواند سلسله مراتب رابط کاربری را به دو روش نمایش دهد: در قالب معمول 2D یا در حالت 3D به نام rotation mode.

با کلیک بر روی دکمه‌ی چرخش بین سلسله مراتب view، 2D و 3D جابجا شوید. وقتی در حالت چرخش هستید می‌توانید تصویر Ui را بچرخانید. چرخش به شما کمک می‌کند تا نحوه‌ی نمایش view راببینید. توجه داشته باشید که چرخش فقط در دستگاه‌های Api 29 و بالاتر در دسترس است.

همچنین می‌توانید یک view را انتخاب کنید و با راست کلیک کردن بر روی آن فقط فرزندان آن را ببینید.

به طور مشابه می‌توانید والدین یک view را نمایش دهید.

پنل سمت راست تمام ویژگی‌های گفته شده و همچنین ویژگی‌های به ارث برده‌ی view انتخاب شده را نشان می‌دهد. می‌توانید با کلیک بر روی لینک زیر هر ویژگی به فایل xml آن بروید. مانند ویژگی چرخش که فقط در دستگاه‌هایی که دارای Api 29 و بالاتر کار می‌کند.

با layout inspector، همچنین می‌توانید یک طراحی جدید بارگذاری کنید و با Ui فعلی مقایسه کنید.

برای بارگذاری یک طرح، روی load overlay کلیک کنید و یک طرح را انتخاب کنید. پس از بارگذاری تصویر، می‌توانید مقدار alpha روی آن را کاهش دهید تا تفاوت بین layout فعلی و طرح را ببینید.

Layout Inspector در عمل

تاکنون ما چگونگی کارکرد layout inspector را بررسی کردیم، حال ببینیم چگونه در حل مشکلات برنامه به ما کمک می‌کند. اینجا ما یک برنامه‌ی ساده داریم که از یک فرگمنت با محتوای ثابت متن و تصویر تشکیل شده است.

اگر می‌خواهید در حین خواندن متن تلاش کنید، مراحل زیر را دنبال کنید:

• اندروید استودیوی نسخه‌ی 4.0 را باز کنید و از منوی file یک پروژه‌ی جدید بسازید
• اکتیویتی Bottom Navigation را انتخاب کنید، و بر روی next و سپس finish کلیک کنید
• محتوای activity_main.xml و fragment_home.xml را جایگزین کنید
• محتوای HomeFragment.kt را جایگزین کنید

هنگامی که برنامه را اجرا می‌کنید، یک اندروید زیبا مشاهده می‌کنید  اما یک چیز از دست رفته است که آن Bottom Navigation tabs است. وقتی به فایل layout نگاه کنید می‌توانید ببینید که Bottom Navigation وجود دارد، اما به نوعی رو صفحه نمایش داده نمی‌شود.

به نظر می‌رسد که این یک فرصت خوب برای امتحان کردن layout inspector است. بیایید برنامه را اجرا کنیم و این موضوع را بررسی کنیم. انتقال به view چرخش پس از اتصال به فرایند برنامه، نشان می‌دهد که در رابط کاربری برنامه مشکلی وجود دارد.

آنچه در ابتدا می‌بینیم این است که toolbar درون linearLayout است، که توسط navigation host دنبال می‌شود. در زیر آن، navigation tab را در پایین مشاهده می‌کنید. که به نظر می‌رسد نوار پایین از صفحه خارج شده است.

شاید اندازه‌ی navigation host اشتباه باشد. سعی کنید ارتفاع navigation host را روی 'wrap_content' تنظیم کنید.

<!-- Copyright 2019 Google LLC.
SPDX-License-Identifier: Apache-2.0 -->

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <fragment
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:defaultNavHost="true"
        android:layout_weight="9"
        app:navGraph="@navigation/mobile_navigation" />
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="?android:attr/windowBackground"
        app:menu="@menu/bottom_nav_menu" />
</LinearLayout>

با بازگشت به layout inspector، می‌بینید که linearLayout از اندازه‌ی صحیح برخوردار است، اما BottomNavigation tabs در موقعیت صحیح قرار نگرفته است.

روش‌های مختلفی برای رفع این مشل وجود دارد. ما می‌توانیم که layout weight به navigation host و bottom navigation tabs اضافه کنیم، یا می‌توانیم به جای استفاده از linear layout از constraint layout استفاده کنیم اما تغییر layout در محدوده‌ی این پست نیست، بنابراین بیایید layout weight را اضافه کنیم.

<!-- Copyright 2019 Google LLC.
SPDX-License-Identifier: Apache-2.0 -->

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <fragment
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:defaultNavHost="true"
        android:layout_weight="9"
        app:navGraph="@navigation/mobile_navigation" />
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="?android:attr/windowBackground"
        app:menu="@menu/bottom_nav_menu" />
</LinearLayout>

و این هم از نتیجه:

اکنون وقتی برنامه را اجرا می‌کنیم همه چیز در جای مناسب قرار دارد.

منبع