كيفاش تصوب Drawer Menu بأندرويد

منذ 5 سنوات imadbelasri Android
AN

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


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


- ملفات الواجهة

أول حاجة غادي نفتح Android Studio وغادي نزيد مشروع جديد نسميه Navigation View من بعد غادي نمشي ل build.gradle ديال ل app وكنزيد هاد السطر compile'com.android.support:design:25.1.1' لي غادي يمكني باش نخدم بلAndroid Material Design هنا 25.1.1 حيت المشروع لي زدت انا target version ديالو هي sdk 25 يلى فتحتيه بقل من 25 يمكنلك تغيرها من بعد غادي نمشي ل res/layout/activity_main.xml وغادي نزيد فيه الكود لي غادي يمكني من إضافة toolbar و TextView لي غادي تعرض كل قائمة اختارها المستخدم ثم Navigation View لي هي القائمة ديالنا الكود ديال الملف هو :

                                                    
                                                        <?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    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">

    <RelativeLayout
        android:id="@+id/main_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:minHeight="?attr/actionBarSize"
            android:background="@color/colorPrimary"
            android:layout_alignParentTop="true"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            >
        </android.support.v7.widget.Toolbar>
        <TextView
            android:id="@+id/TextItemMenu"
            android:layout_centerInParent="true"
            android:text="Menu"
            android:textSize="35sp"
            android:textColor="@android:color/darker_gray"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </RelativeLayout>
    <android.support.design.widget.NavigationView
        android:id="@+id/main_drawer"
        android:layout_gravity="start"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:headerLayout="@layout/header"
        app:menu="@menu/menu_items">
    </android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>

                                                    
                                                

-الملف header.xml

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

                                                        
                                                            <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:background="@color/colorPrimary"
    android:layout_width="match_parent"
    android:layout_height="200dp">
    <ImageView
        android:id="@+id/profile"
        android:src="@drawable/profile"
        android:layout_centerInParent="true"
        android:layout_width="100dp"
        android:layout_height="100dp" />
    <LinearLayout
        android:layout_below="@+id/profile"
        android:orientation="vertical"
        android:layout_marginTop="5dp"
        android:paddingBottom="5dp"
        android:paddingLeft="15dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:id="@+id/TextName"
            android:text="www.darija-coding.com"
            android:textSize="15sp"
            android:textColor="@android:color/white"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <TextView
            android:id="@+id/TextEmail"
            android:text="contact@darija-coding.com"
            android:textSize="15sp"
            android:textColor="@android:color/white"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>
</RelativeLayout>
                                                        
                                                    

-الملف menu_item.xml

المجلد menu في حالة مكانش زيدو كتزيد فيه ملف جديد سميه menu_item.xml هو لي غادي يتضمن الكود ديال العناصر لي غادي تكون القائمة ديالنا بالإضافة للicone بجانب كل عنصر الكود ديالو هو :

                                                        
                                                            <?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/connect"
        android:title="Connexion"
        android:checkable="true"
        android:icon="@drawable/unlock_32px"></item>
    <item
        android:id="@+id/register"
        android:title="Inscription"
        android:checkable="true"
        android:icon="@drawable/add_user_32px"></item>
    <item
        android:id="@+id/contact"
        android:title="Contact"
        android:checkable="true"
        android:icon="@drawable/paper_plane_32px"></item>
    <item
        android:id="@+id/disconnect"
        android:title="Déconnexion"
        android:checkable="true"
        android:icon="@drawable/connected_32px"></item>
</menu>
                                                        
                                                    

- الملف MainActivity.java

هادا الملف الرئيسي ديالنا فيه الكود لي غادي يمكن من إضافة لmenu للملف الرئيسي وفيه الكودلي كيمكن من عرض العنصر لي ظغط عليه المستخدم ف TextView و أيضا الكود لي كيفتح ويسد لMenu من بعد مكيضغط المستخدم على الزر الخاص بلmenu الكود ديال الملف هو:

                                                        
                                                            package com.example.darijacoding.navigationview;

import android.app.Activity;
import android.support.annotation.NonNull;
import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Gravity;
import android.view.MenuItem;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity implements  NavigationView.OnNavigationItemSelectedListener {
    private DrawerLayout mDrawerLayout;
    private TextView mTextMenu;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mTextMenu = (TextView) findViewById(R.id.TextItemMenu);
        NavigationView navigationView = (NavigationView) findViewById(R.id.main_drawer);
        ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle(this,mDrawerLayout,toolbar,R.string.drawer_open,R.string.drawer_close);
        mDrawerLayout.addDrawerListener(actionBarDrawerToggle);
        actionBarDrawerToggle.syncState();
        navigationView.setNavigationItemSelectedListener(this);
    }

    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        String itemMenu = (String) item.getTitle();
        mTextMenu.setText(itemMenu);
        hideDrawer();
        return true;
    }
    public void hideDrawer(){
        mDrawerLayout.closeDrawer(GravityCompat.START);
    }
    public void openDrawer(){
        mDrawerLayout.openDrawer(GravityCompat.START);
    }

    @Override
    public void onBackPressed() {
        if(mDrawerLayout.isDrawerOpen(GravityCompat.START)){
             hideDrawer();
        }
        super.onBackPressed();
    }
}

                                                        
                                                    

- الملف strings.xml و styles.xml

آخر حاجة هي كنمشي للمجلد values وكنضيف بعض التغييرات على الملفين strings.xml و styles.xml الكود ديالهم :

                                                        
                                                            //strings.xml code 
<resources>
    <string name="app_name">Darija Coding</string>
    <string name="drawer_open">open</string>
    <string name="drawer_close">close</string>
</resources>
<resources>


//styles.xml code
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

</resources>
                                                        
                                                    

دروس ذات صلة

AN

كيفاش نصاوب آلة حاسبة ب Android

فهاد الدرس من سلسلة Android غادي نشوفو كيفاش نقادو واحد الآلة حاسبة بسيطة غادي تمكنا من القيام بع...


AN

كيفاش نصاوب Notes App

فهاد الدرس من سلسلة الأندرويد غادي نشوفو كيفاش نقادو واحد التطبيق كيمكن المستخدم من إمتلاك مذكرة يسج...


AN

كيفاش تصاوب Scanner Mood بالاندرويد

فهاد الدرس من سلسلة الاندرويد غادي نشوفو كيفاش نقادو واحد التطبيق كيمكن المستخدم من التعرف على الحا...


AN

كيفاش تصوب لعبة Brain Train بالاندرويد

فهاد الدرس من سلسلة الأندرويد غادي نشوفو كيفاش نصاوبو واحد اللعبة بسيطة سميتها Brain Train لعبة بسي...


AN

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

فهاد الدرس من سلسلة الاندرويد غادي نقادو واحد التطبيق كيمكن من تسجيل Contacts فقاعدة البيانات كما ك...


AN

كيفاش نصاوب Contacts App بالأندرويد الجزء الثاني

فهاد الجزء الثاني من هاد الدرس غادي نكملو الملفات الأخرى ولي غادي تمكن التطبيق ديالنا من الإشتغال ول...


AN

كيفاش تستعمل Volley باش ترسل البيانات الجزء الأول

فهاد الدرس من سلسلة الاندرويد غادي نشوفو كيفاش نستعملو ل volley library باش نديرو إتصال مع قاعدة بي...


AN

كيفاش تستعمل Volley باش ترسل البيانات الجزء الثاني

فهاد الجزء الثاني من هاد المشروع غادي نقادو الملفات لي غادي يمكننا من الإتصال بقاعدة البيانات والكود...


AN

كيفاش تستعمل Volley باش ترسل البيانات الجزء الثالت

فهاد الجزء الثالث من هاد المشروع غادي نزيدو واحد الدومين لي غادي يكون مجاني وغادي يعطينا واحد العنو...


AN

كيفاش تصاوب تطبيق Top 10 Downloads ب Android

فهاد الدرس غادي نصابو مشروع بسيط بandroid عبارة عن تطبيق كيعرض قائمة أفضل عشر تطبيقات مجانية فمتجر آ...