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

ترجمه و تالیف : پوریا شریفی
تاریخ انتشار : 23 خرداد 99
خواندن در 2 دقیقه
دسته بندی ها : اندروید

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 انتخاب کنید.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

با 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 وجود دارد، اما به نوعی رو صفحه نمایش داده نمی‌شود.

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

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

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

آنچه در ابتدا می‌بینیم این است که 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 در موقعیت صحیح قرار نگرفته است.

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

روش‌های مختلفی برای رفع این مشل وجود دارد. ما می‌توانیم که 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>

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

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

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

منبع

گردآوری و تالیف پوریا شریفی
آفلاین
user-avatar

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

دیدگاه‌ها و پرسش‌ها

برای ارسال نظر لازم است ابتدا وارد سایت شوید
هیچ دیدگاهی تا به این لحظه برای این موضوع ثبت نشده است