تحديث مكونات واجهة المستخدم

الإعلانات

تحديث مكونات واجهة المستخدم بإستخدام واجهة مستخدم التنقل

 

 

 

تحديث مكونات واجهة المستخدم

يحتوي مكون بنية الملاحه، على فئة “واجهة مستخدم الملاحه” NavigationUI.

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

 

 

 

 

الإستماع إلى أحداث الملاحة “التنقل”


التفاعل مع “وحدة تحكم التنقل” NavController ، وهي الدالة الأساسية للتنقل بين الوجهات.

NavController مسؤولة عن إستبدال محتويات NavHost بالوجهة الجديدة. في العديد من الحالات، تعمل عناصر واجهة المستخدم ..

مثل شريط التطبيق العلوي، أو عناصر التحكم في التنقل الأخرى، المستمرة مثل “شريط التنقل السفلي” BottomNavigationBar ..

التي هي خارج NavHost وتحتاج إلى التحديث أثناء تنقلك بين الوجهات.

وحدة تحكم التنقل NavController توفر واجهة OnDestinationChangedListener التي تُستدعى عندما تتغير الوجهة الحاليه، أو المعطيات الخاصة بـ NavController .

يمكن تسجيل مستمع جديد عبر دالة ()addOnDestinationChangedListener، كما هو موضح في المثال أدناه.

لاحظ أنه عند إستدعاء ()addOnDestinationChangedListener، إذا كانت الوجهة الحالية موجودة، يتم إرسالها مباشرة إلى المستمع الخاص بك.

KOTLIN

navController.addOnDestinationChangedListener { navController, destination, arguments ->
  textView.setText(destination.label)
}

JAVA

navController.addOnNavigatedListener(new NavController.OnNavigatedListener() {
  @Override
  public void onNavigated(@NonNull NavController navController,
          @NonNull NavDestination destination,
          @Nullable Bundle arguments) {
    textView.setText(destination.getLabel());
  }
});

 

واجهة مستخدم التنقل NavigationUI تستخدم  OnDestinationChangedListener لجعل مكونات واجهة المستخدم الشائعة مدركة للتنقل.

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

 

 

 

 

 

تحديث مكونات واجهة المستخدم

 

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


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

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

مثال، واجهة مستخدم التنقل NavigationUI تستخدم تسميات الوجهة، من مخطط التنقل للحفاظ على عنوان شريط التطبيق العلوي محدثاً.

عند إستخدام NavigationUI مع دوال شريط التطبيق العلوي، الموضحة أدناه، الملصق “المسمى” الذي ترفقه بالوجهات..

يمكن ملئه تلقائياً من الوسيطات المقدمة إلى الوجهة، بإستخدام صيغة {argName} في المسمى الخاص بك.

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

Toolbar
CollapsingToolbarLayout
ActionBar

واجهة مستخدم التنقل تستخدم كائن “تهيئة شريط التطبيق” AppBarConfiguration لإدارة سلوك زر التنقل، في الزاوية العلوية اليسرى من منطقة عرض التطبيق.

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

ويظهر على هيئة زر ينقل “للأعلى” في أي من الوجهات الأخرى.

لإستخدام وجهة البداية، من مخطط التنقل الخاص بك، كالوجهة الوحيدة ذات المستوى الأعلى، يمكنك إنشاء كائن..

 AppBarConfiguration وتمريره إلى مخطط التنقل المناسب، كما هو موضح أدناه:

val appBarConfiguration = AppBarConfiguration(navController.graph)

 

إذا كنت ترغب في تخصيص الوجهات، التي تعتبر وجهات ذات مستوى أعلى، فبدلاً من ذلك يمكنك تمرير مجموعة من معرفات الوجهات إلى المُنشئ، كما هو موضح أدناه:

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

 

 

 

 

 

 

 

تحديث مكونات واجهة المستخدم

 

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

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

<LinearLayout>
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar" />
    <fragment
        android:id="@+id/nav_host_fragment"
        ... />
    ...
</LinearLayout>

 

ثم قم بإستدعاء  ()setupWithNavController من دالة النشاط الرئيسي ()onCreate ، كما هو موضح أدناه:

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)
}

 

ملاحظة: عند إستخدام شريط الأدوات، يتعامل التنقل تلقائياً مع أحداث النقر، لزر التنقل، لذلك لا يلزمك تجاوز ()onSupportNavigateUp .

 

 

 

 

 

تضمين CollapsingToolbarLayout

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

<LinearLayout>
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/tall_toolbar_height">

        <android.support.design.widget.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">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"/>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

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

 

ثم، قم بإستدعاء ()setupWithNavController  من دالة ()onCreate للنشاط الرئيسي، كما هو موضح أدناه:

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 navController = findNavController(R.id.nav_host_fragment)
    val appBarConfiguration = AppBarConfiguration(navController.graph)
    layout.setupWithNavController(toolbar, navController, appBarConfiguration)
}

 

 

 

شريط الإجراء Action bar

لتضمين دعم التنقل بإستخدام شريط الإجراءات الإفتراضي، قم بإستدعاء ()setupActionBarWithNavController  ..

من دالة ()onCreate للنشاط الرئيسي، كما هو موضح أدناه. لاحظ أنك تحتاج إلى الإعلان عن “تهيئة شريط التطبيق” AppBarConfiguration خارج دالة ()onCreate..

حيث أنك سوف تستخدمه أيضاً عند تجاوز ()onSupportNavigateUp :

private lateinit var appBarConfiguration: AppBarConfiguration

...

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

    val navController = findNavController(R.id.nav_host_fragment)
    appBarConfiguration = AppBarConfiguration(navController.graph)
    setupActionBarWithNavController(navController, appBarConfiguration)
}

بعد ذلك، قم بتجاوز ()onSupportNavigateUp للتعامل مع التنقل لأعلى:

override fun onSupportNavigateUp(): Boolean {
    return navController.navigateUp(appBarConfiguration) || super.onSupportNavigateUp()
}

 

 

 

 

 

تحديث مكونات واجهة المستخدم

 

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

واجهة مستخدم التنقل توفر أيضاً مساعدين، لربط الوجهات بمكونات واجهة المستخدم المستنده إلى القوائم.

واجهة مستخدم التنقل NavigationUI تحتوي على دالة مساعده، ()onNavDestinationSelected، والتي تأخذ “عنصر القائمه” MenuItem ..

مع “وحدة تحكم التنقل” NavController التي تستضيف الوجهة المرتبطة. إذا كان معرف id عنصر القائمه MenuItem مطابق لمعرف id الوجهة..

فيمكن لوحدة تحكم التنقل NavController، الإنتقال إلى تلك الوجهة.

مثال، مقتطفات XML أدناه تقوم بتعريف عنصر قائمة و وجهة، بمعرف مشترك، 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 ، كما هو موضح أدناه:

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

 

الآن، عندما ينقر المستخدم على عنصر القائمة detail_page_fragment، ينتقل التطبيق تلقائياً إلى الوجهة ذات المعرف المتطابق نفسه.

 

 

 

 

 

تحديث مكونات واجهة المستخدم

 

إضافة درج التنقل


درج التنقل هو عبارة عن لوحة واجهة مستخدم، تعرض قائمة التنقل الرئيسية لتطبيقك.

يظهر الدرج عندما يلمس المستخدم أيقونة الدرج ، في شريط التطبيق، أو عندما يقوم المستخدم بتمرير إصبعه من الحافة اليسرى من الشاشة.

 

يتم عرض أيقونة الدرج، في جميع الوجهات ذات المستوى الأعلى، التي تستخدم DrawerLayout.

وجهات المستوى الأعلى، هي الوجهات الأساسية في تطبيقك. وهي لا تعرض زر “الأعلى” في شريط التطبيق.

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

و طريقة عرض أخرى، تحتوي على محتويات درج التنقل.

على سبيل المثال، يستخدم المخطط التالي DrawerLayout مع عرضين تابعين: ملف NavHostFragment ..

ليحتوي على المحتوى الرئيسي و NavigationView لمحتويات درج التنقل.

<?xml version="1.0" encoding="utf-8"?>
<!-- Use DrawerLayout as root container for activity -->
<android.support.v4.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) -->
    <fragment
        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 -->
    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true" />

</android.support.v4.widget.DrawerLayout>

 

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

KOTLIN

val appBarConfiguration = AppBarConfiguration(navController.graph, drawerLayout)

JAVA

AppBarConfiguration = new AppBarConfiguration.Builder(navController.getGraph())
    .setDrawerLayout(drawerLayout)
    .build();
ملاحظه: عند إستخدام NavigationUI، يقوم مساعد شريط التطبيق العلوي، تلقائياً بالتحويل بين أيقونة الدرج و أيقونة أعلى، بينما تتغير الوجهة الحاليه.

لست بحاجة إلى إستخدام ActionBarDrawerToggle.

 

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

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

    ...

    val navController = findNavController(R.id.nav_host_fragment)
    findViewById<NavigationView>(R.id.nav_view)
        .setupWithNavController(navController)
}

 

 

 

 

 

تحديث مكونات واجهة المستخدم

 

التنقل للأسفل


يمكن لواجهة مستخدم التنقل أيضاً، التعامل مع التنقل السفلي. عندما يقوم المستخدم بتحديد عنصر قائمة..

فإن وحدة تحكم التنقل NavController تقوم بإستدعاء ()NavDestinationSelected وتحديث العنصر المحدد تلقائياً، في شريط التنقل السفلي.

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

<LinearLayout>
    ...
    <fragment
        android:id="@+id/nav_host_fragment"
        ... />
    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_nav"
        app:menu="@menu/menu_bottom_nav" />
</LinearLayout>

 

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

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

    ...

    val navController = findNavController(R.id.nav_host_fragment)
    findViewById<BottomNavigationView>(R.id.bottom_nav)
        .setupWithNavController(navController)
}

 

 


للإطلاع على المقال باللغة الإنجليزية أضغط هنا.

الإعلانات