آموزش صفر تا صد کار با Navigation Editor

آموزش صفر تا صد Navigation Architecture Component در اندروید استودیو ، همه چیز در مورد کار با Navigation Editor ، آموزش Navigation Component در اندروید استودیو ، همه ی این ها می تونن عنوان این آموزش باشن ، Navigation Architecture Component باز هم افتخاری دیگر از خانواده Android Jetpack ! (به طور کامل درباره خانواده Jetpack در این پست های قبلی توضیح داده ایم و پیشنهاد میشود حتمااا مطالعه کنید و لذت ببرید از قدرت گوگل و اندرویدش  😀 )

آموزش کار با Navigation Editor

برای مشاهده تصاویر در سایز واقعی برروی آنها کلیک کنید 🙂

آموزش صفر تا صد Navigation Architecture Component

با Navigation Editor شما قادر خواهید بود که شمای کلی اپ خود را از جابجایی بین اکتیویتی ها و حتی خیلی جزئی تر -> فرگمنت ها مشخص کنید ! همچینین میتوانید هرنوع دیتایی که میخواید (بصورت Bundle) در این جابجایی برای انتقال مشخص کنید تا همراه با جابجایی این دیتاها نیز منتقل شوند و در مقصد آنها را دریافت کنید.

آموزش صفر تا صد Navigation Architecture Component

علاوه بر اون قابلیت دیگه ای مثل deeplink نیز هستش که خیلی راحت میتونیم برای هر اکتیویتی در نویگیشن ادیتور مشخص کنیم .
این مولفه بشدت دوست داشتنی از اندروید استودیو ۳ ارائه شد.
در این آموزش من از

android studio => 3.3

kotlin => 1.3.20

gradle => 3.3.0

compileSdkVersion => 28

targetSdkVersion => 28

navigation dependency => 1.0.0-alpha11

استفاده میکنم.

خب بی درنگ بریم سراغ شروع پروژه Navigation Editor ! 🙂

اولین مرحله اینکه وابستگی های نویگیشن ادیتور رو به گردل اضافه کنیم

implementation "android.arch.navigation:navigation-fragment:1.0.0-alpha09"
implementation "android.arch.navigation:navigation-ui:1.0.0-alpha09"

یه نکته خیلی مهم اینکه اگر مثل من دارید کاتلین کد میزنید بهتره که به این وابستگی ها یه -ktx اضافه کنید بمنظور اضافه شدن کدهای ساده و مختصر تر برای کاتلین (برای اطلاعات بیشتر حتما به این پست که کاملا توضیح داده شده برید و مطالعه کنید:) )
پس این وابستگی ها به این صورت تغییر میکنن

implementation "android.arch.navigation:navigation-fragment-ktx:1.0.0-alpha09"
implementation "android.arch.navigation:navigation-ui-ktx:1.0.0-alpha09"

نکته مهم دیگه اینکه اگر از اندروید استودیو ورژن زیر ۳٫۳ استفاده میکنید حتما به این مسیر برید

File/Setting/Experimental

و گزینه Enable Navigation Editor رو فعال کنید.

آموزش Navigation Editor در اندروید استودیو

حالا داخل مود اندروید روی دایرکتوری res کلیک راست کنید و گزینه New / Android resourse File رو انتخاب کنید
و مطابق تصویر زیر اطلاعات رو وارد کنید

کار با Navigation Editor

دقت کنید که ما میخوایم navigation کار کنیم پس خود اندروید استودیو هم یه دایرکتوری مجزا براش درنظر گرفته پس حتما اون رو انتخاب کنید.
صفحه نویگیشن ادیتور ما که الان خیلی باهاش کار داریم بصورت زیر هستش

آموزش Navigation Editor در اندروید استودیو

مشخصا ۳ بخش اصلی داریم که به شرح زیر هستن

Destinations:

لیستی از host نویگیشن یا به اصطلاح خانه نویگیشن و مجموعه اهداف فعلی آن در Graph Editor

Graph Editor:

شامل نمایی ویژوال از فرگمنت ها و اکتیویتی که بصورت ویژوال با آنها کار خواهیم کرد

Attributes :

نمایش خصیصه ها و پراپرتی ها برای آیتم انتخاب شده در Graph Editor

حالا در قدم اول باید یک هاست یا خانه برای گراف خود ایجاد کنیم که ما میخوایم MainActivity بشه خانه first_nav_graph پس به لایه مربوطه آن یعنی activity_main میریم و در زبانه design در پلت به دنبال NavHostFragment میگردیم

کار با Navigation Editor

سپس اون رو درگ میکنیم برروی صفحه میکشیم.
یک پنجره برامون باز میشه که میخواد مشخص کنه این خانه مربوط به کدم گراف هستش

آموزش Navigation Editor در اندروید استودیو

خب ما گرافی که داریم و میخوام این اکتیویتی خونش بشه رو انتخاب میکنیم.
و لایه مون به این شکل میشه .

کار با Navigation Editor

کدی که ایجاد میشه بدین صورته که یک پراپرتی اون برای ما خیلی مهمه
پراپرتی app:defaultNavHost که مشخص میکنه دکمه بک گوشی برای این فرگمنت کار کنه یا خیر
بطور پیشفرض اگر این پراپرتی حذف شود دکمه بک کار نخواهد کرد.

<fragment
android:id="@+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="395dp"
android:layout_height="715dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
app:defaultNavHost="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="@navigation/first_nav_graph" />

اما برای اطمینان از اینکه این دکمه کار میکند علاوه بر اینکه این پراپرتی را مقدار ture میدهیم در MainActivty هم این دستور را مینویسیم

override fun onSupportNavigateUp() =
findNavController(this, R.id.nav_host_fragment).navigateUp()

درسته خاکستریه به معنی اینکه محتوی خاصی نداره و ناشناخته ست (اما مطابق چیزی که داخلش نوشته fragment مشخصه که داخلش فقط فرگمنت میتونه باشه) اما در ادامه خواهید دید که این رنگ خاکستری از بین میره و محتوی میگیره 😉

الان اگر به first_nav_graph برگردیم خواهیم دید که بخش Host در قسمت Destination با لایه activity_main پرشده !

آموزش Navigation Editor در اندروید استودیو

این یعنی این اکتیویتی باموفقیت به عنوان خانه این گراف معرفی شد ! 😀

حالا بریم ادامه کار ..

ما میخوایم در این اکتیویتی ۲ فرگمنت داشته باشیم پس هم میتونیم به روش عادی یک فرگمنت ایجاد کنیم یعنی کلیک راست برروی پکیج و انتخاب Fragment و هم میتونیم میتونیم از داخل خود گراف مون یک فرگمنت ایجاد کنیم که الان از روش جدید استفاده میکنیم و در فایل گراف خودمون برروی آیکن به علاوه سبز بالا کلیک میکنیم

کار با Navigation Editor

و الان میتونیم لیست تمام آیتم هایی (فرگمنت ها و اکتیویتی ها) که میتونیم در گراف استفاده کنیم رو ببینیم که الان آیتم خاصی نداریم !
اما دو بخش در این پنجره هست که همیشه ثابته یکی آیتم اول که یک هدف یا آیتم رو میسازه Create New Destination و یکی هم placeholder که همونطور که از اسمش مشخصه یک آیتم خالیه فقط برای اینکه بدونیم بعدا یک فرگمنت یا اکیتیوتی جای این آیتم قرار میگیره و باید پرش کنیم !
پس روی گزینه اول Create New Destination کلیک میکنیم و خواهیم دید پنجره زیر برامون باز میشه

آموزش Navigation Editor در اندروید استودیو

که میگه یک فرگمنت بسازید ما بصورت تصویر فوق اطلاعات رو وارد میکنیم همچنین میگیم که لایه مربوط به فرگمنت هم برامون بساز !
اما تیک مربوط به گزینه include interface callback رو برداشتم چون فعلا نیازی نیست که یک کالبک برای فرگمنت ایجاد بشه
بعد از ساخت فرگمنت خواهیم دید که در بخش Graph Editor یک لایه ایجاد میشه که مربوط به همون فرگمنتی هست که ساختیم

کار با Navigation Editor

خود آیتم لایه رو نشون میده و نوشته بالای اون اسم فرگمنت مربوطه ش رو نشون میده و یک آیکن خونه هست که در ادامه متوجه میشیم چی هست… !
و جالب اینکه اگر به لایه activity_main بریم میبینیم که فرگمنتی که ساختیم اومده و داخل nav_host قرار گرفته
دیدید گفتم رنگ خاکستریش میپره 😀 !!

خب این به چه معنیه؟؟
به این معنی که این فرگمنتی که ما ساختیم و عنوان فرگمنت اول(معنی آیکن خانه کنار اسم فرگمنت در Graph Editor) و نقطه شروع این اکتیویتی شناخته شده یا به عبارتی دیگه زمانی که این اکتیویتی روی صفحه موبایل نشون داده میشه درواقع اولین فرگمنتی هست که در اکتیوتی لود میشه !
این رو میشه از یه جای دیگه هم متوجه شد و حتی ادیتش کرد ! بریم به مود text مربوط به first_nav_graph و در تگ navigation این پراپرتی رو ببینیم

<navigation 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/first_nav_graph"
app:startDestination="@id/AFirstFragment">

در این تگ پراپرتی app:startDestination مدنظر ما هست که نشون دهنده فرگمنت استارتر یا اولین فرگمنتی که در اکتیویتی لود میشه هستش که همونطور که میبینید مقداری که گرفته یک ایدی هستش که در واقع ایدی همون فرگمنتی هست که ما در گراف ایجاد کردیم

<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/first_nav_graph"
app:startDestination="@id/AFirstFragment">

<fragment
android:id="@+id/AFirstFragment"
android:name="dn.marjan.navigationeditor.AFirstFragment"
android:label="fragment_a_first"
tools:layout="@layout/fragment_a_first" />
</navigation>

که این ایدی میتونه به ایدی هر فرگمنتی که به گراف اضافه میکنیم تغییر کنه و هیچ اجباری در اون نیست پس ما میایم و به همین ترتیب یک فرگمنت دیگه میسازیم

آموزش Navigation Editor در اندروید استودیو

و نتیجه در گراف ادیتور بصورت زیر میشه

و اما پراپرتی هایی که برای fragment ایجاد شده به چه معنی هستند ؟!
android:id : یک شناسه یکتا برای این ویو
android:name : آدرس دقیق فرگمنت مورد نظر
android:label : یک عنوان برای فرگمنت
tools:layout: لایه مرتبط به فرگمنتی که به آن اشاره داریم
همچنین اگر باز به زبانه design گراف برگردیم و به پنل Attributes نگاهی کنیم میبینیم که همین مشخصات در این بخش هم هست به علاوه یک مشخصه Type که نوع آیتم انتخابی رو مشخص میکنه (اون سه بخش پایین Argumants , Actions , DeepLinks رو فعلا کاری نداریم و در ادامه درباره شون صحبت خواهیم کرد)

کار با Navigation Editor

همونطور که میبینید کنار اسم فرگمنت جدید یعنی ASecondFragment آیکن خونه نیست بدین معنی که این فرگمنت تا زمانی که ما فلشی بهش وصل نکنیم جایی نمایش داده نمیشه حتی کدهارو هم ببینیم به این صورت شده

<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/first_nav_graph"
app:startDestination="@id/AFirstFragment">

<fragment
android:id="@+id/AFirstFragment"
android:name="dn.marjan.navigationeditor.AFirstFragment"
android:label="fragment_a_first"
tools:layout="@layout/fragment_a_first" />
<fragment
android:id="@+id/ASecondFragment"
android:name="dn.marjan.navigationeditor.ASecondFragment"
android:label="fragment_a_second"
tools:layout="@layout/fragment_a_second" />
</navigation>

حالا که دوتا فرگمنت داریم میتونیم پراپرتی startDestination رو به هرکدوم از فرگمنت هایی که میخوایم تغییر بدیم و خواهیم دید ایکن خونه هم جابجا میشه!
حتی از در زبانه Design در قسمت Attributes هم میتونیم Start Destination رو تغییر بدیم.
حالا محتوی لایه fragment_a_first.xml رو بصورت زیر تغییرمیدیم

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".AFirstFragment">

<TextView
android:text="This is AFirstFragmet"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

<Button
android:id="@+id/btn_go_sec"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Go to ASecondFragment" />

</FrameLayout>
و همینطور لایه fragment_a_second.xml که بصورت زیر خواهد بود
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ASecondFragment">
<TextView
android:text="This is ASecondFragmet"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

</FrameLayout>

خب حالا فقط کافیه که فلش فرگمنت اول رو به فرگمنت دوم وصل بصورت زیر

آموزش Navigation Editor در اندروید استودیو

همچنین به زبانه Text میریم و خواهیم دید که یک تگ action درون fragment ایجاد شده و طبیعتا مشخص میکنه که به کدوم فرگمنت وصل میشه

<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/first_nav_graph"
app:startDestination="@id/AFirstFragment">

<fragment
android:id="@+id/AFirstFragment"
android:name="dn.marjan.navigationeditor.AFirstFragment"
android:label="fragment_a_first"
tools:layout="@layout/fragment_a_first">
<action
android:id="@+id/action_AFirstFragment_to_ASecondFragment"
app:destination="@id/ASecondFragment" />
</fragment>
<fragment
android:id="@+id/ASecondFragment"
android:name="dn.marjan.navigationeditor.ASecondFragment"
android:label="fragment_a_second"
tools:layout="@layout/fragment_a_second" />
</navigation>

الان گراف میدونه که یک ارتباط از فرگمنت اول به فرگمنت دوم برقرار شده الان فقط باید دستورشو بنویسیم
پس میریم به AFirstFragment و محتویات رو بصورت زیر تغییر میدیم

package dn.marjan.navigationeditor

import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.navigation.fragment.findNavController
import kotlinx.android.synthetic.main.fragment_a_first.view.*

class AFirstFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
// Inflate the layout for this fragment
val view= inflater.inflate(R.layout.fragment_a_first, container, false)

view.btn_go_sec.setOnClickListener { findNavController().navigate(R.id.ASecondFragment) }

return view
}

}

دستور مورد نظر ما

findNavController().navigate(R.id.ASecondFragment)

هستش که مشخص میکنه زمان کلیک شدن برروی دکمه به چه مقصدی باید حرکت کند.

الان اگر برنامه رو ران کنیم مطابق گیف پایین میبینیم که اپ که بالا میاد فرگمنت AFirstFragment.kt لود میشه (به معنی این که نقطه استارت فرگمنت هاست) و اگر روی دکمه داخل فرگمنت کلیک کنیم میریم به فرگمنت بعدی که یعنی برنامه درست کار میکنیه

کار با Navigation Editor

ایجاد انیمیشن زمان انتقال بین صفحات

حتی میتونیم یک سری انیمیشن خاص درست زمانی که فلش رو بین صفحات وصل میکنیم برای اون انتقال تعریف کنیم.
برای اینکار باید ابتدا فلشی که میخوایم برای اون نتقال انیمیشن بذاریم رو انتخاب میکنیم و به پنل Attributes در بخش Animations میریم

آموزش Navigation Editor در اندروید استودیو

قبل از اینکه مقادیر رو تغییر بدیم بهتره که بدونیم هرکدوم به چه معنی هستش
enterAnim :‌ انیمیشینی برای ورود به یک مقصد
exitAnim : انیمیشنی برای خروج از یک مقصد
popEnterAnim : انیمیشینی برای ورود به یک مقصد زمان backstack
popExitAnim : انیمیشینی برای خروج از یک مقصد زمان backstack

خب میتونیم در پنل Attributes بخش Animation این مقادیر رو تغییر بدیم و خواهیم دید که کدشون هم در بخش کد های گراف نوشته میشه.

تعریف آرگومان هایی جهت ارسال به مقصد

برای ارسال آرگومان به مقصد دوراه داریم که در ادامه هردورو باهم بررسی میکنیم.

راه اول انتقال داده در Navigation Editor

راه اول اینکه با استفاده از قابلیت Argumants خود نویگیشن ادیتور دیتارو منتقل کنیم
برای اینکار به بخش design نویگیشن ادیتور میریم و فرگمنت مبدا رو انتخاب میکنیم حالا در پنل Attributes بخش Argumants مطابق تصویر زیر

کار با Navigation Editor

علامت + را میزنیم و خواهیم دید یک پنجره باز خواهد شد که اطلاعات ارگومان را از ما میخواد پس اطلاعات رو مطابق تصویر زیر پر خواهیم کرد

کار با Navigation Editor

در عکس بالا ما یک ارگومان string ساختیم و حالا یک integer هم میسازیم

آموزش Navigation Editor در اندروید استودیو

حالا خواهیم دید که این دو ارگومان در پنل Argumants نمایش داده میشوند.
همچنین درکدها نیز ارگومان ها چنین ایجاد شدند.

<fragment
android:id="@+id/AFirstFragment"
android:name="dn.marjan.navigationeditor.AFirstFragment"
android:label="fragment_a_first"
tools:layout="@layout/fragment_a_first">
<action
android:id="@+id/action_AFirstFragment_to_ASecondFragment2"
app:destination="@id/ASecondFragment"
app:enterAnim="@anim/nav_default_enter_anim"
app:exitAnim="@anim/nav_default_exit_anim"
app:launchSingleTop="false"
app:popEnterAnim="@anim/nav_default_pop_enter_anim"
app:popExitAnim="@anim/nav_default_pop_exit_anim"
app:popUpToInclusive="false"/>
<argument
android:name="str1"
app:argType="string" />
<argument
android:name="integ1"
android:defaultValue="0"
app:argType="integer" />

</fragment>

اما برای این روشی که مامیخوایم دیتا رو انتقال بدیم باید دو تگ argumant رو داخل action هم کپی کنیم پس بدین صورت تغییر پیدا میکنه

<fragment
android:id="@+id/AFirstFragment"
android:name="dn.marjan.navigationeditor.AFirstFragment"
android:label="fragment_a_first"
tools:layout="@layout/fragment_a_first">
<action
android:id="@+id/action_AFirstFragment_to_ASecondFragment"
app:destination="@id/ASecondFragment"
app:enterAnim="@anim/nav_default_enter_anim"
app:exitAnim="@anim/nav_default_exit_anim"
app:launchSingleTop="false"
app:popEnterAnim="@anim/nav_default_pop_enter_anim"
app:popExitAnim="@anim/nav_default_pop_exit_anim"
app:popUpToInclusive="false">
<argument
android:name="str1"
app:argType="string" />
<argument
android:name="integ1"
android:defaultValue="0"
app:argType="integer" />
</action>
<argument
android:name="str1"
app:argType="string" />
<argument
android:name="integ1"
android:defaultValue="0"
app:argType="integer" />

</fragment>

حالا دپندنسی های Sage Args رو به گردل اضافه کنیم.

در فایل build.gradle مربوط به project

buildscript {
repositories {
google()
}
dependencies {
classpath "android.arch.navigation:navigation-safe-args-gradle-plugin:1.0.0-alpha11"
}
}

و در فایل build.gradle مربوط به module هم باید پلاگین safeargs رو به بالای فایل اضافه کنیم که اگر از جاوا استفاده میکنید

androidx.navigation.safeargs

و اگر از کاتلین استفاده میکنید

androidx.navigation.safeargs.kotlin

و نتیجه بصورت زیر

apply plugin: 'com.android.application'
apply plugin: 'androidx.navigation.safeargs.kotlin'

android {
//...
}

حالا اصلا این دپندسی ها چیکار میکنن برای ما؟!!

این پلاگین و دپندسی ها برای ساخت یا به اصطلاح generate کردن کلاس ها و builder های موردنظر برای ارسال آرگومان با Navigation Editor هستش.

بعد از اضافه کردن و sync کردن فایل های زیر generate میشن :

• یک کلاس برای هر مقصد یا destination ایجاد شده. به این صورت که نام کلاس + Directions
  برای مثال فرگمنت ما که AFirstFragment هست و چون براش آرگومان ساختیم یک کلاس با نام AFirstFragmentDirections ایجاد شده.
•  برای هر actionی که یک سری ارگومان در بدنه خود دارد به جهت انتقال هم یک کلاس با نام ایدی همان اکشن ایجاد میشه
  برای مثال ما در اکشنی با ایدی action_AFirstFragment_to_ASecondFragment دو آرگومان ایجاد کردیم پس کلاسی که برای این اکشن generate شده با عنوان actionAFirstFragmentToASecondFragment هستش
• کلاسی برای فرگمنتی که درون بدنه آن آرگومان تعریف شده.
  که نام کلاس ایجاد شده ترکیبی از نام کلاس + Args هستش.
  برای مثال ما در فرگمنت AFirstFragment در گراف دو آرگومان ایجاد کردیم پس کلاسی با عنوان AFirstFragmentArgs.kt برای اون ایجاد شده

حالا برای ارسال دیتا برای اون دو آرگومانی که در گراف ایجاد کردیم کافیه که دستور زیر رو برای زمان ClickListener دکمه درون فرگمنت اول بنویسیم

view.btn_go_sec.setOnClickListener {
val action = AFirstFragmentDirections.actionAFirstFragmentToASecondFragment("hello world",20)
findNavController().navigate(action)
}

و در فرگمنت دوم هم بدین صورت دیتا هارو در متد onCreate بگیریم

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val args: AFirstFragmentArgs by navArgs()
param1 = args.str1
param2 = args.integ1
}

به همین سادگی :)‌ !

راه دوم ارسال دیتا در Navigation Editor

راه دوم اینکه با استفاده از Bundle مقادیر رو ارسال کنیم
پس متد listener بصورت زیر خواهد شد

view.btn_go_sec.setOnClickListener {
val bundle = Bundle()
bundle.putString("str1","hello world !")
bundle.putInt("integ1",20)
findNavController().navigate(R.id.ASecondFragment,bundle)
}

با استفاده از Bundle مقادیر رو تعریف کردیم و همراه با متد navigate ارسال کردیم
حالا کافیه در فرگمنت ASecondFragment به این صورت مقادیر رو بگیریم

import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup

class ASecondFragment : Fragment() {
private var param1: String? = null
private var param2: Int? = 0

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
arguments?.let {
param1 = it.getString("str1")
param2 = it.getInt("integ1",0)
}
}

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?): View? {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_a_second, container, false)
}

}

که در این بخش ما مقادیر دریافتی رو گرفتیم

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
arguments?.let {
param1 = it.getString("str1")
param2 = it.getInt("integ1",0)
}
}

ایجاد Deep Link برای یک فرگمنت

یک توضیح کوتاه درباره deep link بدیم این ست که با فراخوانی یک لینک مشخص بتونیم از خارج از برنامه به یک صفحه خاص در برنامه بریم.
در navigation editor پس از انتخاب یک فرگمنت
میتونیم در پنل Attributes به بخش Deep Links بریم و دکمه + رو کلیک کنیم

کار با Navigation Editor

بعد از اون در پنجره ای که برامون باز میشه یک لینک کاملا دلخواه مینویسیم

کار با Navigation Editor

اگر به کدهای گراف هم نگاه کنیم خواهیم دید چنین کدی برای فرگمنت انتخابی ایجاد شده

<deepLink
android:id="@+id/deepLink"
app:uri="http://naveditor" />

حالا کافیه که در manifest برنامه چنین دستوری رو در تگ actvity خونه مون بنویسیم

<nav-graph android:value="@navigation/first_nav_graph" />

و پروژه رو build کنیم
حالا اگر روی زبانه Merged Manifest کلیک کنید مانند عکس زیر خواهید دید که اطلاعات deep link ایجاد شدند.

کار با Navigation Editor

و خواهیم دید با فراخوانی این لینک در هرکجای موبایل این صفحه از اپلیکیشن باز خواهد شد.

برای مدیریت deep link کافیه که این خط کدرو در onCreate اکتیوتی بنویسید

findNavController(this, R.id.navHostFragment).onHandleDeepLink(intent)

و در نهایت در متد onNewIntent مربوط به اکتیویتی هم دستور زیر رو بنویسید

override fun onNewIntent(intent: Intent?) {
super.onNewIntent(intent)
findNavController(this, R.id.navHostFragment).onHandleDeepLink(intent)
}

هر گراف مشخص کننده شمای کلی یک اکتیویتی و فرگمنت های داخلشه و برای اینکه بخوایم دو اکتیویتی رو به هم وصل کنیم میتونیم اکتیویتی هارو در ۲ گراف پیاده کنیم و بعد گراف هارو به هم متصل کنیم.
برای مثال من مطابق آموزش ها یک اکتیویتی و یک گراف دیگه میسازم و اکتیویتی دومم با نام SecondActivity رو به واسطه NavHostFragment خونه اون گراف میکنم
و همچنین یک فرگمنت هم برای این گراف ایجاد میکنم در نتیجه گراف بصورت زیر خواهد شد

آموزش Navigation Editor در اندروید استودیو

حالا گراف دوم با نام Second_nav_graph رو بصورت زیر به گراف اول با نام first_nav_graph اضافه میکنم

عکس

و خواهید دید که همچین کدی به هم به گراف اضافه شده

<include app:graph="@navigation/second_nav_graph"/>

و فلش انتقال رو به این صورت تغییر میدم

آموزش Navigation Editor در اندروید

و در انتها فقط کافیست در فایل AFirstFragment.kt در بلاک listener چنین تغییراتی ایجاد کنیم

view.btn_go_sec.setOnClickListener {
// val action = AFirstFragmentDirections.actionAFirstFragmentToASecondFragment("hello world",20)
findNavController().navigate(R.id.second_nav_graph)
}

برنامه رو اجرا کنید و دکمه درون فرگمنت اول رو بزنید خواهید دید که که به اکتیویتی SecondActivity.kt منتقل خواهد شد. 🙂

امیدوارم این پست براتون مفید بوده باشه و ازش استفاده کنید. از طریق راه های ارتباطی زیر میتونید با ما برای درخواست آموزش های اختصاصی و انواع پروژه ها در ارتباط باشید.