ویرایشگر ناوبری

اندروید استودیو شامل یک رابط کاربری گرافیکی (GUI) است که به شما امکان ایجاد و ویرایش نمودار ناوبری را می‌دهد. این اساساً یک ویرایشگر برای فایل منبع XML اصلی است.

نمای کلی

بعد از اینکه یک نمودار XML به برنامه خود اضافه کردید، اندروید استودیو نمودار را در ویرایشگر ناوبری (Navigation Editor ) باز می‌کند. در ویرایشگر ناوبری، می‌توانید نمودارهای ناوبری را به صورت بصری ویرایش کنید یا مستقیماً XML زیرین را ویرایش کنید.

شکل ۱. ویرایشگر ناوبری
  1. پنل مقصدها : میزبان ناوبری شما و تمام مقصدها را در ویرایشگر نمودار فهرست می‌کند.
  2. ویرایشگر نمودار : شامل نمایش بصری نمودار ناوبری شما است. می‌توانید در نمای متن بین نمای طراحی و نمایش XML زیرین جابجا شوید.
  3. ویژگی‌ها : ویژگی‌های مورد انتخاب شده در نمودار ناوبری را نشان می‌دهد.

برای دیدن XML مربوطه، روی تب Text کلیک کنید که باید مشابه قطعه کد زیر باشد:

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/nav_graph">

</navigation>

عنصر <navigation> عنصر ریشه یک گراف ناوبری است. همانطور که مقصدها و اقدامات اتصال را به گراف خود اضافه می‌کنید، می‌توانید عناصر <destination> و <action> مربوطه را در اینجا به عنوان عناصر فرزند مشاهده کنید. اگر [graphs nested][2] داشته باشید، آنها به عنوان عناصر <navigation> فرزند ظاهر می‌شوند.

افزودن مقصدها

شما می‌توانید از یک فرگمنت یا اکتیویتی موجود، یک مقصد ایجاد کنید. همچنین می‌توانید از ویرایشگر ناوبری (Navigation Editor) برای ایجاد یک مقصد جدید یا ایجاد یک مکان‌نما (placeholder) برای جایگزینی بعدی با یک فرگمنت یا اکتیویتی استفاده کنید.

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

  1. در ویرایشگر ناوبری، روی نماد مقصد جدید کلیک کنید و سپس روی ایجاد مقصد جدید کلیک کنید.
  2. در پنجره‌ی محاوره‌ای New Android Component که ظاهر می‌شود، قطعه‌ی خود را ایجاد کنید. برای اطلاعات بیشتر در مورد قطعه‌ها، به [نمای کلی قطعات][3] مراجعه کنید.

به ویرایشگر ناوبری برگردید، توجه کنید که اندروید استودیو این مقصد را به نمودار اضافه کرده است.

شکل ۲ نمونه‌ای از یک مقصد و یک [مقصد جایگزین][۴] را نشان می‌دهد.

شکل ۲. یک مقصد و یک نگهدارنده مکان

برای روش‌های دیگر افزودن مقصد به نمودار ناوبری خود، به [مقصدهای اضافی][5] مراجعه کنید.

ایجاد یک مقصد از یک فرگمنت یا اکتیویتی موجود

در ویرایشگر ناوبری، اگر نوع مقصدی دارید که می‌خواهید به نمودار ناوبری خود اضافه کنید، روی «مقصد جدید» کلیک کنید. .

سپس، روی مقصد مربوطه در منوی کشویی که ظاهر می‌شود کلیک کنید. اکنون می‌توانید پیش‌نمایشی از مقصد را در نمای طراحی (Design view) به همراه XML مربوطه در نمای متن (Text view) نمودار ناوبری خود مشاهده کنید.

یک مقصد قطعه جدید ایجاد کنید

برای افزودن یک نوع مقصد جدید با استفاده از ویرایشگر ناوبری، موارد زیر را انجام دهید:

  1. در ویرایشگر ناوبری، روی نماد مقصد جدید کلیک کنید .

    در مرحله بعد، روی ایجاد مقصد جدید کلیک کنید.

  2. در پنجره‌ی New Android Component که ظاهر می‌شود، قطعه‌ی خود را ایجاد کنید.

به ویرایشگر ناوبری برگردید، توجه کنید که اندروید استودیو این مقصد را به نمودار اضافه کرده است.

شکل ۳ نمونه‌ای از یک مقصد و یک [مقصد جایگزین][۲] را نشان می‌دهد.

شکل ۳. یک مقصد و یک نگهدارنده مکان

آناتومی یک مقصد

برای انتخاب یک مقصد، روی آن کلیک کنید و ویژگی‌های زیر را در پنل ویژگی‌ها یادداشت کنید:

  • فیلد نوع (Type) نشان می‌دهد که آیا مقصد به عنوان یک فرگمنت، اکتیویتی یا کلاس سفارشی دیگر در کد منبع شما پیاده‌سازی شده است یا خیر.
  • فیلد Label شامل نام قابل خواندن توسط کاربر برای مقصد است. این نام ممکن است در رابط کاربری نمایش داده شود - برای مثال، اگر [ NavGraph ][10] را با استفاده از [ setupWithNavController() ][11] به یک Toolbar متصل کنید. به همین دلیل، از رشته‌های منبع برای این مقدار استفاده کنید.
  • فیلد ID شامل شناسه مقصد است که برای ارجاع به مقصد در کد استفاده می‌شود.
  • منوی کشویی Class نام کلاسی که با مقصد مرتبط است را نشان می‌دهد. برای تغییر کلاس مرتبط به نوع مقصد دیگر، روی این منوی کشویی کلیک کنید.

برای نمایش نمای XML نمودار ناوبری خود، روی تب Text کلیک کنید. XML شامل همان ویژگی‌های id ، name ، label و layout برای مقصد است، همانطور که در قطعه کد زیر آمده است:

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    app:startDestination="@id/blankFragment">
    <fragment
        android:id="@+id/blankFragment"
        android:name="com.example.cashdog.cashdog.BlankFragment"
        android:label="@string/label_blank"
        tools:layout="@layout/fragment_blank" />
</navigation>

همچنین می‌توانید با انجام موارد زیر از [ویرایشگر طرح‌بندی][1] برای اضافه کردن NavHostFragment به یک فعالیت استفاده کنید:

  1. در فهرست فایل‌های پروژه، روی فایل XML مربوط به طرح‌بندی فعالیت خود دوبار کلیک کنید تا در ویرایشگر طرح‌بندی باز شود.
  2. در پنل پالت ، دسته‌بندی کانتینرها (Containers) را انتخاب کنید؛ یا می‌توانید عبارت "NavHostFragment" را جستجو کنید.
  3. نمای NavHostFragment را به داخل activity خود بکشید.
  4. در پنجره‌ی نمودارهای ناوبری که ظاهر می‌شود، نمودار ناوبری مربوطه را برای مرتبط کردن با این NavHostFragment انتخاب کنید و سپس روی تأیید کلیک کنید.

اتصال مقصدها

یک اکشن ، یک ارتباط منطقی بین مقاصد است. اکشن‌ها در نمودار ناوبری به صورت فلش نمایش داده می‌شوند. اکشن‌ها معمولاً یک مقصد را به مقصد دیگر متصل می‌کنند، اگرچه می‌توانید [اکشن‌های سراسری][6] را نیز ایجاد کنید که شما را از هر کجای برنامه‌تان به یک مقصد خاص هدایت کنند.

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

شما می‌توانید با انجام موارد زیر از ویرایشگر ناوبری برای اتصال دو مقصد استفاده کنید:

  1. در تب Design ، اشاره‌گر را روی سمت راست مقصدی که می‌خواهید کاربران از آن به صفحه بعدی بروند، نگه دارید. همانطور که در شکل ۴ نشان داده شده است، یک دایره در سمت راست مقصد ظاهر می‌شود.

    شکل ۴. مقصدی با دایره اتصال عمل

  2. مکان‌نمای خود را روی مقصدی که می‌خواهید کاربران به آن هدایت شوند بکشید و رها کنید. خط حاصل بین دو مقصد، همانطور که در شکل ۵ نشان داده شده است، نشان دهنده یک عمل است.

    شکل ۵. اتصال مقصدها با یک اقدام

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

    • فیلد نوع شامل "عمل" است.
    • فیلد شناسه شامل شناسه‌ی مربوط به عمل مورد نظر است.
    • فیلد مقصد شامل شناسه (ID) قطعه یا فعالیت مقصد است.

  4. برای رفتن به نمای XML، روی تب Text کلیک کنید. اکنون یک عنصر action به مقصد مبدا اضافه شده است. این action دارای یک ID و یک ویژگی destination است که شامل ID مقصد بعدی است، همانطور که در مثال زیر نشان داده شده است:

    <?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   xmlns:android="http://schemas.android.com/apk/res/android"
   app:startDestination="@id/blankFragment">
   <fragment
       android:id="@+id/blankFragment"
       android:name="com.example.cashdog.cashdog.BlankFragment"
       android:label="@string/label_blank"
       tools:layout="@layout/fragment_blank" >
       <action
           android:id="@+id/action_blankFragment_to_blankFragment2"
           app:destination="@id/blankFragment2" />
   </fragment>
   <fragment
       android:id="@+id/blankFragment2"
       android:name="com.example.cashdog.cashdog.BlankFragment2"
       android:label="@string/label_blank_2"
       tools:layout="@layout/fragment_blank_fragment2" />
</navigation>

در نمودار ناوبری شما، اکشن‌ها توسط عناصر <action> نمایش داده می‌شوند. حداقل، یک اکشن شامل شناسه (ID) مخصوص به خود و شناسه مقصدی است که کاربر باید به آن هدایت شود.

مقصدهای جایگزین

شما می‌توانید از placeholderها برای نمایش مقصدهای پیاده‌سازی نشده استفاده کنید. یک placeholder به عنوان نمایش بصری یک مقصد عمل می‌کند. در ویرایشگر ناوبری، می‌توانید از placeholderها درست مانند هر مقصد دیگری استفاده کنید.

[1]: /studio/write/layout-editor [2]: /guide/navigation/navigation-nested-graphs [3]: /guide/components/fragments [4]: ​​/guide/navigation/navigation-create-destinations#placeholders [5]: /guide/navigation/navigation-create-destinations [6]: /guide/navigation/navigation-global-action [10]: /reference/androidx/navigation/NavGraph [11]: /reference/androidx/navigation/ui/NavigationUI#setupWithNavController(androidx.appcompat.widget.Toolbar,%20androidx.navigation.NavController)