ربط مكونات واجهة المستخدم بـ NavController باستخدام واجهة مستخدم التنقل

يتضمن مكوِّن التنقل NavigationUI الصف. تحتوي هذه الفئة على طرق ثابتة تدير التنقل باستخدام الجزء العلوي شريط التطبيقات ودرج التنقل والتنقل السفلي.

شريط التطبيق العلوي

شريط التطبيق العلوي مكانًا ثابتًا في أعلى التطبيق لعرض المعلومات والإجراءات من الشاشة الحالية.

شاشة تعرض شريط التطبيق العلوي
الشكل 1. شاشة تعرض شريط التطبيق العلوي.

يحتوي NavigationUI على طرق يتم من خلالها تعديل المحتوى في أول ظهور تلقائيًا. شريط التطبيق أثناء تنقل المستخدمين في تطبيقك. على سبيل المثال، يستخدم NavigationUI تصنيفات الوجهات من الرسم البياني للتنقل لإبقاء عنوان أهم تطبيق تحديث الشريط.

<navigation>
    <fragment ...
              android:label="Page title">
      ...
    </fragment>
</navigation>

عند استخدام NavigationUI مع عمليات تنفيذ شريط التطبيق العلوي التي تمت مناقشتها أدناه، يمكن تعبئة التصنيف الذي تُرفِقه بالوجهات تلقائيًا من يتم توفير الوسيطات إلى الوجهة باستخدام تنسيق {argName} في التصنيف.

يتيح NavigationUI استخدام أهم أنواع أشرطة التطبيقات التالية:

لمزيد من المعلومات حول أشرطة التطبيقات، اطّلِع على مقالة إعداد شريط التطبيقات.

إعدادات AppBar

يستخدم NavigationUI AppBarConfiguration. لإدارة سلوك زر التنقل في الزاوية العلوية اليمنى من مساحة عرض التطبيق يتغير سلوك زر التنقل بناءً على بشأن ما إذا كان المستخدم في وجهة ذات مستوى أعلى.

وجهة المستوى الأعلى هي الجذر أو الوجهة ذات المستوى الأعلى في مجموعة من الوجهات ذات الصلة بالتسلسل الهرمي. لا تعرض وجهات المستوى الأعلى زرّ للأعلى في شريط التطبيق العلوي بسبب عدم توفّر وجهة بمستوى أعلى. من تكون وجهة البدء لتطبيقك هي وجهة المستوى الأعلى الوحيدة.

عندما يكون المستخدم في وجهة المستوى الأعلى، يصبح زر التنقل رمز الدرج في حال كانت الوجهة تستخدم DrawerLayout. إذا كانت الوجهة لا تستخدم DrawerLayout، زر التنقّل مخفيّ عندما يكون المستخدم في أي وجهة أخرى، يظهر زر التنقل كزر لأعلى لتهيئة زر التنقل باستخدام وجهة البدء فقط مثل وجهة من المستوى الأعلى، وإنشاء عنصر AppBarConfiguration، والتمرير في الرسم البياني للتنقل المناسب، كما هو موضح أدناه:

Kotlin

val appBarConfiguration = AppBarConfiguration(navController.graph)

Java

AppBarConfiguration appBarConfiguration =
        new AppBarConfiguration.Builder(navController.getGraph()).build();

وفي بعض الحالات، قد يكون عليك تحديد عدّة وجهات ذات مستوى أعلى بدلاً من ذلك من استخدام وجهة البدء الافتراضية. إنّ استخدام BottomNavigationView هو في حالات الاستخدام الشائعة لهذا النوع من الأجهزة، حيث قد تكون لديك شاشات تابعة غير وترتبط ببعضها البعض بشكل هرمي وقد يكون لكل منها مجموعة خاصة بها من المقصودة. في مثل هذه الحالات، يمكنك بدلاً من ذلك تمرير مجموعة من الوجهات معرفات الدالة الإنشائية، كما هو موضح أدناه:

Kotlin

val appBarConfiguration = AppBarConfiguration(setOf(R.id.main, R.id.profile))

Java

AppBarConfiguration appBarConfiguration =
        new AppBarConfiguration.Builder(R.id.main, R.id.profile).build();

إنشاء شريط أدوات

لإنشاء شريط أدوات باستخدام NavigationUI، حدد أولاً الشريط في النشاط، كما هو موضح:

<LinearLayout>
    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar" />
    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/nav_host_fragment"
        ... />
    ...
</LinearLayout>

بعد ذلك، يمكنك الاتصال بالرقم setupWithNavController(). من طريقة onCreate() لنشاطك الرئيسي، كما هو موضّح في ما يلي مثال:

Kotlin

override fun onCreate(savedInstanceState: Bundle?) {
    setContentView(R.layout.activity_main)

    ...

    val navController = findNavController(R.id.nav_host_fragment)
    val appBarConfiguration = AppBarConfiguration(navController.graph)
    findViewById<Toolbar>(R.id.toolbar)
        .setupWithNavController(navController, appBarConfiguration)
}

Java

@Override
protected void onCreate(Bundle savedInstanceState) {
    setContentView(R.layout.activity_main);

    ...

    NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);
    AppBarConfiguration appBarConfiguration =
            new AppBarConfiguration.Builder(navController.getGraph()).build();
    Toolbar toolbar = findViewById(R.id.toolbar);
    NavigationUI.setupWithNavController(
            toolbar, navController, appBarConfiguration);
}

لتهيئة زر التنقل ليظهر كزر لأعلى للجميع الوجهة، أدخِل مجموعة فارغة من معرّفات الوجهات للمستوى الأعلى. الوجهة عند إنشاء AppBarConfiguration. يمكن أن يكون هذا مفيدًا على سبيل المثال، إذا كان لديك نشاط ثانٍ يجب أن يعرض الزر "أعلى" في Toolbar في جميع الوجهات يتيح هذا للمستخدم الرجوع إلى الصفحة السابقة إلى النشاط الرئيسي عندما لا تكون هناك وجهات أخرى في الجهة الخلفية حزمة. يمكنك استخدام setFallbackOnNavigateUpListener() للتحكم في السلوك الاحتياطي للوقت الذي قد يتم فيه استخدام navigateUp() عدم اتخاذ أي إجراء، كما هو موضح في المثال التالي:

Kotlin

override fun onCreate(savedInstanceState: Bundle?) {
    ...

    val navHostFragment =
        supportFragmentManager.findFragmentById(R.id.nav_host_fragment) as NavHostFragment
    val navController = navHostFragment.navController
    val appBarConfiguration = AppBarConfiguration(
        topLevelDestinationIds = setOf(),
        fallbackOnNavigateUpListener = ::onSupportNavigateUp
    )
    findViewById<Toolbar>(R.id.toolbar)
        .setupWithNavController(navController, appBarConfiguration)
}

Java

@Override
protected void onCreate(Bundle savedInstanceState) {
    ...

    NavHostFragment navHostFragment = (NavHostFragment) supportFragmentManager.findFragmentById(R.id.nav_host_fragment);
    NavController navController = navHostFragment.getNavController();
    AppBarConfiguration appBarConfiguration = new AppBarConfiguration.Builder()
        .setFallbackOnNavigateUpListener(::onSupportNavigateUp)
        .build();
    Toolbar toolbar = findViewById(R.id.toolbar);
    NavigationUI.setupWithNavController(
            toolbar, navController, appBarConfiguration);
}

تضمين شريط الأدوات القابل للطي

لتضمين CollapsingToolbarLayout مع شريط الأدوات، حدد أولاً شريط الأدوات والتنسيق المحيط في نشاطك، كما هو موضح أدناه:

<LinearLayout>
    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/tall_toolbar_height">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleGravity="top"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"/>
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/nav_host_fragment"
        ... />
    ...
</LinearLayout>

بعد ذلك، يمكنك الاتصال بالرقم setupWithNavController(). من طريقة onCreate الخاصة بنشاطك الرئيسي، كما هو موضّح أدناه:

Kotlin

override fun onCreate(savedInstanceState: Bundle?) {
    setContentView(R.layout.activity_main)

    ...

    val layout = findViewById<CollapsingToolbarLayout>(R.id.collapsing_toolbar_layout)
    val toolbar = findViewById<Toolbar>(R.id.toolbar)
    val navHostFragment =
        supportFragmentManager.findFragmentById(R.id.nav_host_fragment) as NavHostFragment
    val navController = navHostFragment.navController
    val appBarConfiguration = AppBarConfiguration(navController.graph)
    layout.setupWithNavController(toolbar, navController, appBarConfiguration)
}

Java

@Override
protected void onCreate(Bundle savedInstanceState) {
    setContentView(R.layout.activity_main);

    ...

    CollapsingToolbarLayout layout = findViewById(R.id.collapsing_toolbar_layout);
    Toolbar toolbar = findViewById(R.id.toolbar);
    NavHostFragment navHostFragment = supportFragmentManager.findFragmentById(R.id.nav_host_fragment);
    NavController navController = navHostFragment.getNavController();
    AppBarConfiguration appBarConfiguration =
            new AppBarConfiguration.Builder(navController.getGraph()).build();
    NavigationUI.setupWithNavController(layout, toolbar, navController, appBarConfiguration);
}

شريط الإجراءات

لإضافة دعم التنقل إلى شريط الإجراءات التلقائي، اتصل setupActionBarWithNavController() من طريقة onCreate() الخاصة بنشاطك الرئيسي، كما هو موضّح أدناه. لاحظ أنه تحتاج إلى الإفصاح عن AppBarConfiguration خارج onCreate()، لأنك ويمكن استخدامها أيضًا عند تجاوز onSupportNavigateUp():

Kotlin

private lateinit var appBarConfiguration: AppBarConfiguration

...

override fun onCreate(savedInstanceState: Bundle?) {
    ...

    val navHostFragment =
        supportFragmentManager.findFragmentById(R.id.nav_host_fragment) as NavHostFragment
    val navController = navHostFragment.navController
    appBarConfiguration = AppBarConfiguration(navController.graph)
    setupActionBarWithNavController(navController, appBarConfiguration)
}

Java

AppBarConfiguration appBarConfiguration;

...

@Override
protected void onCreate(Bundle savedInstanceState) {
    ...

    NavHostFragment navHostFragment = supportFragmentManager.findFragmentById(R.id.nav_host_fragment);
    NavController navController = navHostFragment.getNavController();
    appBarConfiguration = new AppBarConfiguration.Builder(navController.getGraph()).build();
    NavigationUI.setupActionBarWithNavController(this, navController, appBarConfiguration);
}

بعد ذلك، يمكنك إلغاء onSupportNavigateUp() للتعامل مع التنقل لأعلى:

Kotlin

override fun onSupportNavigateUp(): Boolean {
    val navController = findNavController(R.id.nav_host_fragment)
    return navController.navigateUp(appBarConfiguration)
            || super.onSupportNavigateUp()
}

Java

@Override
public boolean onSupportNavigateUp() {
    NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);
    return NavigationUI.navigateUp(navController, appBarConfiguration)
            || super.onSupportNavigateUp();
}

دعم تباينات شريط التطبيق

تعمل إضافة شريط التطبيق العلوي إلى نشاطك بشكل جيد عندما يكون تنسيق شريط التطبيق متشابهة لكل وجهة في تطبيقك. مع ذلك، إذا تغيّر شريط التطبيق العلوي عبر الوجهات، يمكنك إزالة شريط التطبيق العلوي من نشاطك وتحديده في كل جزء وجهة، بدلاً من ذلك.

على سبيل المثال، قد تستخدم إحدى وجهاتك علامة Toolbar عادية، بينما والأخرى تستخدم AppBarLayout لإنشاء شريط تطبيق أكثر تعقيدًا يتضمن علامات تبويب، كما هو موضح في الشكل 2.

اثنين من أهم تباينات شريط التطبيق؛ شريط أدوات قياسي على اليسار appbarlayout مع شريط الأدوات وعلامات التبويب على اليمين
الشكل 2. شكلان لشريط التطبيق. على اليسار، يحتوي المقياس Toolbar على اليمين، يوجد AppBarLayout مع Toolbar وعلامات التبويب

لتنفيذ هذا المثال ضمن أجزاء الوجهة باستخدام NavigationUI، عليك أولاً تحديد شريط التطبيق في كل تنسيق من تنسيقات الأجزاء، بدءًا بجزء الوجهة الذي يستخدم شريط الأدوات القياسي:

<LinearLayout>
    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        ... />
    ...
</LinearLayout>

بعد ذلك، حدِّد الجزء الوجهة الذي يستخدم شريط التطبيق الذي يتضمّن علامات تبويب:

<LinearLayout>
    <com.google.android.material.appbar.AppBarLayout
        ... />

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            ... />

        <com.google.android.material.tabs.TabLayout
            ... />

    </com.google.android.material.appbar.AppBarLayout>
    ...
</LinearLayout>

فإن منطق تهيئة التنقل هو ذاته لكلا الجزأين، باستثناء أنه يجب عليك استدعاء setupWithNavController() من داخل طريقة onViewCreated() لكل جزء، بدلاً من التهيئة من النشاط:

Kotlin

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    val navController = findNavController()
    val appBarConfiguration = AppBarConfiguration(navController.graph)

    view.findViewById<Toolbar>(R.id.toolbar)
            .setupWithNavController(navController, appBarConfiguration)
}

Java

@Override
public void onViewCreated(@NonNull View view,
                          @Nullable Bundle savedInstanceState) {
    NavController navController = Navigation.findNavController(view);
    AppBarConfiguration appBarConfiguration =
            new AppBarConfiguration.Builder(navController.getGraph()).build();
    Toolbar toolbar = view.findViewById(R.id.toolbar);

    NavigationUI.setupWithNavController(
            toolbar, navController, appBarConfiguration);
}

ربط الوجهات بأصناف القائمة

توفّر NavigationUI أيضًا أدوات مساعدة لربط الوجهات بواجهة المستخدم المستندة إلى القائمة. والمكونات. يحتوي NavigationUI على طريقة مساعدة، onNavDestinationSelected(), الذي يأخذ MenuItem مع NavController التي تستضيف المرتبطة بها. إذا تطابق id من MenuItem مع id الوجهة، يمكن لـ NavController بعد ذلك الانتقال إلى تلك الوجهة.

على سبيل المثال، تحدِّد مقتطفات XML أدناه عنصرًا في قائمة ووجهة باستخدام قيمة id شائعة، details_page_fragment:

<?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"
    ... >

    ...

    <fragment android:id="@+id/details_page_fragment"
         android:label="@string/details"
         android:name="com.example.android.myapp.DetailsFragment" />
</navigation>

<menu xmlns:android="http://schemas.android.com/apk/res/android">

    ...

    <item
        android:id="@+id/details_page_fragment"
        android:icon="@drawable/ic_details"
        android:title="@string/details" />
</menu>

إذا تمت إضافة قائمتك عبر onCreateOptionsMenu() في النشاط، على سبيل المثال، يمكنك ربط عناصر القائمة بالوجهات من خلال إلغاء خيارات onOptionsItemSelected() للاتصال بـ onNavDestinationSelected()، كما هو موضح في في المثال التالي:

Kotlin

override fun onOptionsItemSelected(item: MenuItem): Boolean {
    val navController = findNavController(R.id.nav_host_fragment)
    return item.onNavDestinationSelected(navController) || super.onOptionsItemSelected(item)
}

Java

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);
    return NavigationUI.onNavDestinationSelected(item, navController)
            || super.onOptionsItemSelected(item);
}

والآن، عندما ينقر أحد المستخدمين على عنصر القائمة details_page_fragment، يبرز التطبيق الانتقال تلقائيًا إلى الوجهة المقابلة باستخدام id نفسه.

إضافة لائحة تنقُّل

لائحة التنقّل هي لوحة واجهة مستخدم تعرض قائمة التنقّل الرئيسية لتطبيقك. يظهر الدرج عندما يلمس المستخدم رمز الدرج في شريط التطبيقات أو عندما يمرر المستخدم إصبعًا من الحافة اليمنى الشاشة.

درج مفتوح يعرض قائمة تنقُّل
الشكل 3. درج مفتوح يعرض قائمة تنقّل القائمة.

يظهر رمز الدرج على جميع وجهات المستوى الأعلى التي تستخدم DrawerLayout.

لإضافة لائحة تنقُّل، عليك أولاً الإفصاح عن DrawerLayout كجذر مشاهدة. داخل DrawerLayout، أضِف تنسيقًا لمحتوى واجهة المستخدم الرئيسية طريقة عرض أخرى تحتوي على محتوى لائحة التنقل.

على سبيل المثال، يستخدم التنسيق التالي DrawerLayout مع طريقتَي عرض فرعيتَين: NavHostFragment إلى تحتوي على المحتوى الرئيسي NavigationView حول محتويات لائحة التنقل.

<?xml version="1.0" encoding="utf-8"?>
<!-- Use DrawerLayout as root container for activity -->
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <!-- Layout to contain contents of main body of screen (drawer will slide over this) -->
    <androidx.fragment.app.FragmentContainerView
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:id="@+id/nav_host_fragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:navGraph="@navigation/nav_graph" />

    <!-- Container for contents of drawer - use NavigationView to make configuration easier -->
    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true" />

</androidx.drawerlayout.widget.DrawerLayout>

بعد ذلك، عليك ربط DrawerLayout إلى الرسم البياني للتنقل من خلال تمريره إلى AppBarConfiguration، كما هو موضح في في المثال التالي:

Kotlin

val appBarConfiguration = AppBarConfiguration(navController.graph, drawerLayout)

Java

AppBarConfiguration appBarConfiguration =
        new AppBarConfiguration.Builder(navController.getGraph())
            .setDrawerLayout(drawerLayout)
            .build();

بعد ذلك، في صف النشاط الرئيسي، اتصل setupWithNavController() من طريقة onCreate() الخاصة بنشاطك الرئيسي، كما هو موضّح أدناه:

Kotlin

override fun onCreate(savedInstanceState: Bundle?) {
    setContentView(R.layout.activity_main)

    ...

    val navHostFragment =
        supportFragmentManager.findFragmentById(R.id.nav_host_fragment) as NavHostFragment
    val navController = navHostFragment.navController
    findViewById<NavigationView>(R.id.nav_view)
        .setupWithNavController(navController)
}

Java

@Override
protected void onCreate(Bundle savedInstanceState) {
    setContentView(R.layout.activity_main);

    ...

    NavHostFragment navHostFragment = supportFragmentManager.findFragmentById(R.id.nav_host_fragment);
    NavController navController = navHostFragment.getNavController();
    NavigationView navView = findViewById(R.id.nav_view);
    NavigationUI.setupWithNavController(navView, navController);
}

ستبدأ بعد التنقل 2.4.0-alpha01، كما يتم حفظ حالة كل عنصر من عناصر القائمة واستعادتها عند استخدام setupWithNavController

شريط التنقّل السفلي

يمكن لـ "NavigationUI" أيضًا التعامل مع شريط التنقّل السفلي. عندما يختار المستخدم قائمة العنصر، NavController onNavDestinationSelected() وتحدث تلقائيًا العنصر المحدد في شريط التنقل السفلي.

شريط التنقّل السفلي
الشكل 4. شريط التنقّل السفلي.

لإنشاء شريط تنقّل سفلي في تطبيقك، حدِّد أولاً الشريط في تطبيقك النشاط، كما هو موضح أدناه:

<LinearLayout>
    ...
    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/nav_host_fragment"
        ... />
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_nav"
        app:menu="@menu/menu_bottom_nav" />
</LinearLayout>

بعد ذلك، في صف النشاط الرئيسي، اتصل setupWithNavController() من طريقة onCreate() الخاصة بنشاطك الرئيسي، كما هو موضّح أدناه:

Kotlin

override fun onCreate(savedInstanceState: Bundle?) {
    setContentView(R.layout.activity_main)

    ...

    val navHostFragment =
        supportFragmentManager.findFragmentById(R.id.nav_host_fragment) as NavHostFragment
    val navController = navHostFragment.navController
    findViewById<BottomNavigationView>(R.id.bottom_nav)
        .setupWithNavController(navController)
}

Java

@Override
protected void onCreate(Bundle savedInstanceState) {
    setContentView(R.layout.activity_main);

    ...

    NavHostFragment navHostFragment = supportFragmentManager.findFragmentById(R.id.nav_host_fragment);
    NavController navController = navHostFragment.getNavController();
    BottomNavigationView bottomNav = findViewById(R.id.bottom_nav);
    NavigationUI.setupWithNavController(bottomNav, navController);
}

ستبدأ بعد التنقل 2.4.0-alpha01، كما يتم حفظ حالة كل عنصر من عناصر القائمة واستعادتها عند استخدام setupWithNavController

للحصول على مثال شامل يتضمن التنقل السفلي، راجع نموذج التنقّل المتقدّم في مكونات بنية Android على GitHub.

الاستماع إلى أحداث التنقّل

التفاعل مع NavController هو الوسيلة الأساسية للتنقل بين الوجهات. NavController مسؤول عن استبدال محتوى NavHost مع الوجهة الجديدة. في كثير من الحالات، لا يمكن لعناصر واجهة المستخدم — مثل شريط التطبيق العلوي أو عناصر تحكُّم دائمة أخرى في التنقّل، مثل BottomNavigationBar، يتم نشرها خارج من NavHost ويجب تعديلها أثناء تنقّلك بين الوجهات.

يوفّر NavController واجهة OnDestinationChangedListener يتم الاتصال عند الوجهة الحالية لـ NavController أو تتغير وسيطاتها. يمكن تسجيل مستمع جديد من خلال addOnDestinationChangedListener() . عند الاتصال بـ addOnDestinationChangedListener()، إذا كانت الوجهة الحالية، فيتم إرسالها على الفور إلى مستمعك.

يستخدم NavigationUI OnDestinationChangedListener لإنشاء واجهة المستخدم المشتركة هذه. والمكونات التنقلية. ومع ذلك، لاحظ أنه يمكنكم أيضًا استخدام OnDestinationChangedListener بمفرده لإنشاء أي واجهة مستخدم مخصّصة أو نشاط تجاري منطقيًا بأحداث التنقل.

على سبيل المثال، قد يكون لديك عناصر شائعة في واجهة المستخدم تنوي عرضها فيها بعض أقسام التطبيق مع إخفائها في مناطق أخرى استخدام نماذجك الخاصة OnDestinationChangedListener، يمكنك إظهار أو إخفاء واجهة المستخدم هذه بشكل انتقائي العناصر بناءً على الوجهة المستهدفة، كما هو موضح في المثال التالي:

Kotlin

navController.addOnDestinationChangedListener { _, destination, _ ->
   if(destination.id == R.id.full_screen_destination) {
       toolbar.visibility = View.GONE
       bottomNavigationView.visibility = View.GONE
   } else {
       toolbar.visibility = View.VISIBLE
       bottomNavigationView.visibility = View.VISIBLE
   }
}

Java

navController.addOnDestinationChangedListener(new NavController.OnDestinationChangedListener() {
   @Override
   public void onDestinationChanged(@NonNull NavController controller,
           @NonNull NavDestination destination, @Nullable Bundle arguments) {
       if(destination.getId() == R.id.full_screen_destination) {
           toolbar.setVisibility(View.GONE);
           bottomNavigationView.setVisibility(View.GONE);
       } else {
           toolbar.setVisibility(View.VISIBLE);
           bottomNavigationView.setVisibility(View.VISIBLE);
       }
   }
});

أدوات معالجة الأحداث التي تستند إلى الوسيطات

ويمكنك بدلاً من ذلك استخدام الوسيطات ذات القيم التلقائية داخل الرسم البياني للتنقل، والذي يمكن استخدامه بواسطة وحدة التحكم المناسبة في واجهة المستخدم لتحديث حالته. على سبيل المثال، بدلاً من جعل المنطق في OnDestinationChangedListener على رقم تعريف الوجهة وفقًا لما سبق يمكننا إنشاء وسيطة في NavGraph على سبيل المثال:

<?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/navigation\_graph"
    app:startDestination="@id/fragmentOne">
    <fragment
        android:id="@+id/fragmentOne"
        android:name="com.example.android.navigation.FragmentOne"
        android:label="FragmentOne">
        <action
            android:id="@+id/action\_fragmentOne\_to\_fragmentTwo"
            app:destination="@id/fragmentTwo" />
    </fragment>
    <fragment
        android:id="@+id/fragmentTwo"
        android:name="com.example.android.navigation.FragmentTwo"
        android:label="FragmentTwo">
        <argument
            android:name="ShowAppBar"
            android:defaultValue="true" />
    </fragment>
</navigation>

لا يتم استخدام هذه الوسيطة عندما الانتقال إلى الوجهة، كطريقة لإرفاق معلومات إضافية بالوجهة باستخدام defaultValue. في هذه الحالة، تشير القيمة إلى ما إذا كان شريط التطبيق عند التواجد في هذه الوجهة.

يمكننا الآن إضافة OnDestinationChangedListener في Activity:

Kotlin

navController.addOnDestinationChangedListener { _, _, arguments ->
    appBar.isVisible = arguments?.getBoolean("ShowAppBar", false) == true
}

Java

navController.addOnDestinationChangedListener(
        new NavController.OnDestinationChangedListener() {
            @Override
            public void onDestinationChanged(
                    @NonNull NavController controller,
                    @NonNull NavDestination destination,
                    @Nullable Bundle arguments
            ) {
                boolean showAppBar = false;
                if (arguments != null) {
                    showAppBar = arguments.getBoolean("ShowAppBar", false);
                }
                if(showAppBar) {
                    appBar.setVisibility(View.VISIBLE);
                } else {
                    appBar.setVisibility(View.GONE);
                }
            }
        }
);

NavController استدعاء رد الاتصال هذا كلما تغيرت وجهة التنقل. تشير رسالة الأشكال البيانية يمكن لتطبيق Activity الآن تعديل حالة مكونات واجهة المستخدم أو إذن الوصول إليها يمتلكها بناءً على الوسيطات التي تم استلامها في رد الاتصال.

تتمثل إحدى ميزات هذا المنهج في أنّ Activity لا يرى سوى الوسيطات في الرسم البياني للتنقل ولا يتعرّف على Fragment الفردية الأدوار والمسئوليات. وبالمثل، لا تعرف الأجزاء الفردية حول عنصر Activity المتضمن ومكونات واجهة المستخدم التي تمتلكها.

مصادر إضافية

لمعرفة المزيد من المعلومات حول التنقّل، يُرجى الاطّلاع على المراجع الإضافية التالية.

نماذج

الدروس التطبيقية حول الترميز

مشاركات المدونة

الفيديوهات