كيفاش نصاوب Navigation Drawer ب أندرويد الجزء الأول


فهاد الدرس الجديد من سلسلة أندرويد غادي نشوفو كيفاش نقادو Navigation Drawer ولي عبارة عن قائمة جانبية كنشوفوها فتطبيقات أندرويد بحال Gmail وغيرها فسبقنا درنا درس من قبل كنقادو فيه هاد القائمة ولكن درس اليوم أكثر احترافية من الدرس السابق لي شفنا.


نظرة سريعة بالفيديو

1- الملف activity_main.xml

أول حاجة غادي نفتح Android Studio وغادي تزيد مشروع جديد سميه Navigation View اختار Empty Activity من بعد ميتزاد غادي نمشي للملف activity_main.xml لي كاين ف res/layout من بعد غادي تزيد فيه toolbar ديال النطبيق ديالنا الكود ديال الملف هو :

                                <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.belasri.navigationdrawer.MainActivity">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        >
    </android.support.v7.widget.Toolbar>
</RelativeLayout>
                            

2- الملف navigation_header.xml

فنفس المجلد لي هو res/layout غادي تزيد ملف وسميه navigation_header.xml ولي غادي يكون فيه واحد صورة بروفايل و textview فيها إمايل وأخرى للإسم الكود  ديال الملف هو :

                                <?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"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="160dp"
    android:padding="16dp"
    android:gravity="bottom"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:background="@drawable/header"
    >

    <de.hdodenhof.circleimageview.CircleImageView
        android:layout_width="56dp"
        android:layout_height="56dp"
        android:src="@drawable/john"
        android:scaleType="centerCrop"
        android:contentDescription="@string/photo_de_profile"
        />
    <TextView
        android:id="@+id/name"
        android:text="John Doe"
        android:textColor="#FFFFFF"
        android:paddingTop="8dp"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:id="@+id/email"
        android:text="john@gmail.com"
        android:textColor="#FFFFFF"
        android:paddingTop="4dp"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>
                            

3- الملف navigation_drawer.xml

فنفس المجلد لي هو res/layout غادي تزيد ملف وسميه navigation_drawer.xml فهنا غادي تكون القائمة ديالنا فعندي DrawerLayout لي غادي تمكني باش نحدد منين القائمة كتفتح فهنا عطيناها start لي كتعني يسار التطبيق من بعد كندير include للملف activity_main.xml منبعد عندي Navigation View لي كتاخد ل header لي قادينا من قبل ول menu لي غادي نزيدوها من بعد الكود  ديال الملف هو :


                                <?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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/drawerLayout"
    android:fitsSystemWindows="true"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:openDrawer="start">

    <include layout="@layout/activity_main"></include>

    <android.support.design.widget.NavigationView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:id="@+id/navView"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/navigation_header"
        app:menu="@menu/menu_navigation"
        >
    </android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
                            

4- الملف menu_navigation.xml

فالمجلد menu لي كاين ف res في حالة مكانش زيدو كتزيد فيه ملف جديد سميه menu_navigation.xml هو لي غادي تكون فيه القائمة ديالنا ولي كل عنصر فيها عطيناه icon وعنوان وid ولي غادي نحتاجوه من بعد الكود ديال الملف هو :

                                    <?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/inbox"
            android:title="Boite de récéption"
            android:icon="@drawable/inbox"></item>

        <item
            android:id="@+id/draft"
            android:title="Brouillons"
            android:icon="@drawable/drafts"></item>

        <item
            android:id="@+id/sent"
            android:title="Envoyés"
            android:icon="@drawable/sent"></item>
        <item
            android:id="@+id/spam"
            android:title="Spams"
            android:icon="@drawable/spam"></item>
    </group>
    <item
        android:id="@+id/subMenu"
        android:title="Menu"
        >
        <menu>
            <item
                android:id="@+id/all"
                android:title="Spams"
                android:icon="@drawable/allmail"></item>
            <item
                android:id="@+id/bin"
                android:title="Corbeille"
                android:icon="@drawable/trash"></item>
            <item
                android:id="@+id/star"
                android:title="Favoris"
                android:icon="@drawable/starred"></item>
        </menu>
    </item>
</menu>
                                


إشترك في قناتنا على اليوتيوب

بحث في الموقع


إشترك للتوصل بالجديد