آموزش Navigation Drawer متریال دیزاین در اندروید

سلام دوستان در این سری از آموزش برنامه نویسی اندروید به آموزش Navigation Drawer متریال دیزاین در اندروید می پردازیم قبلا آموزش های متفاوتی از Navigation Drawer مانند Navigation Drawer فارسی , Navigation Drawer متریال دیزاین را برای شما قرار دادیم در این آموزش نمونه ای دیگر از Navigation Drawer متریال دیزاین را برای شما قرار می دهیم در ادامه می توانید پیش نمایشی از Navigation Drawer را مشاهده کنید در ادامه با ما همراه باشید تا نحوه استفاده از Navigation Drawer متریال را یاد گیرید.

ابتدا باید کتاب خانه ای به پروژه خود اضافه کنید برای این منظور همانند زیر عمل کنید.
وارد فایل Build.gradle از نوع Top-Level شده و آن را همانند زیر ویرایش کنید.

allprojects {
  repositories {
   ...
   maven { url 'https://jitpack.io' }
  }
 }

allprojects {

repositories {

...

maven { url 'https://jitpack.io' }

}

وارد فایل Build.grdle از نوع Module شده سپس در بخش dependencies خط زیر را اضافه کنید.

dependencies {
         compile 'com.github.shrikanth7698:Custom-Navigation-Drawer:v0.0.1'
 }

dependencies {

compile 'com.github.shrikanth7698:Custom-Navigation-Drawer:v0.0.1'

}

پروژه را sync کنید قند شکن فراموش نشود تحریم ها شدیدتر شده است 😐
استفاده از این کتاب خانه بسیار ساده است.
ابتدا لازم است شما در root لایه ای که می خواهید این منو نمایش داده شود مثلا یکی از layout هاتون کد زیر را تعریف کنید.

    <com.shrikanthravi.customnavigationdrawer2.widget.SNavigationDrawer
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/navigationDrawer">
        <FrameLayout
            android:id="@+id/frameLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </com.shrikanthravi.customnavigationdrawer2.widget.SNavigationDrawer>

<com.shrikanthravi.customnavigationdrawer2.widget.SNavigationDrawer

android:layout_width="match_parent"

android:layout_height="match_parent"

android:id="@+id/navigationDrawer">

<FrameLayout

android:id="@+id/frameLayout"

android:layout_width="match_parent"

android:layout_height="match_parent"/>

</com.shrikanthravi.customnavigationdrawer2.widget.SNavigationDrawer>

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

آموزش Fragment در اندروید

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

    //Global Declaration
        SNavigationDrawer sNavigationDrawer;
        Class fragmentClass;
        public static Fragment fragment;
        //Inside onCreate()
        sNavigationDrawer = findViewById(R.id.navigationDrawer);
        //Creating a list of menu Items
        List<MenuItem> menuItems = new ArrayList<>();
        menuItems.add(new MenuItem("News",R.drawable.news_bg));
        menuItems.add(new MenuItem("Feed",R.drawable.feed_bg));
        menuItems.add(new MenuItem("Messages",R.drawable.message_bg));
        menuItems.add(new MenuItem("Music",R.drawable.music_bg));
        sNavigationDrawer.setMenuItemList(menuItems);
        fragmentClass =  NewsFragment.class;
        try {
            fragment = (Fragment) fragmentClass.newInstance();
        } catch (Exception e) {
            e.printStackTrace();
        }
        if (fragment != null) {
            FragmentManager fragmentManager = getSupportFragmentManager();
            fragmentManager.beginTransaction().setCustomAnimations(android.R.animator.fade_in, android.R.animator.fade_out).replace(R.id.frameLayout, fragment).commit();
        }
        //Listener to handle the menu item click. It returns the position of the menu item clicked. Based on that you can switch between the fragments.
        sNavigationDrawer.setOnMenuItemClickListener(new SNavigationDrawer.OnMenuItemClickListener() {
            @Override
            public void onMenuItemClicked(int position) {
                System.out.println("Position "+position);
                switch (position){
                    case 0:{
                        fragmentClass = NewsFragment.class;
                        break;
                    }
                    case 1:{
                        fragmentClass = FeedFragment.class;
                        break;
                    }
                    case 2:{
                        fragmentClass = MessagesFragment.class;
                        break;
                    }
                    case 3:{
                        fragmentClass = MusicFragment.class;
                        break;
                    }
                }
                sNavigationDrawer.setDrawerListener(new SNavigationDrawer.DrawerListener() {
                    @Override
                    public void onDrawerOpened() {
                    }
                    @Override
                    public void onDrawerOpening(){
                    }
                    @Override
                    public void onDrawerClosing(){
                        System.out.println("Drawer closed");
                        try {
                            fragment = (Fragment) fragmentClass.newInstance();
                        } catch (Exception e) {
                            e.printStackTrace();
                        }
                        if (fragment != null) {
                            FragmentManager fragmentManager = getSupportFragmentManager();
                            fragmentManager.beginTransaction().setCustomAnimations(android.R.animator.fade_in, android.R.animator.fade_out).replace(R.id.frameLayout, fragment).commit();
                        }
                    }
                    @Override
                    public void onDrawerClosed() {
                    }
                    @Override
                    public void onDrawerStateChanged(int newState) {
                        System.out.println("State "+newState);
                    }
                });
            }
        });

//Global Declaration

SNavigationDrawer sNavigationDrawer;

Class fragmentClass;

public static Fragment fragment;

//Inside onCreate()

sNavigationDrawer = findViewById(R.id.navigationDrawer);

//Creating a list of menu Items

List<MenuItem> menuItems = new ArrayList<>();

menuItems.add(new MenuItem("News",R.drawable.news_bg));

menuItems.add(new MenuItem("Feed",R.drawable.feed_bg));

menuItems.add(new MenuItem("Messages",R.drawable.message_bg));

menuItems.add(new MenuItem("Music",R.drawable.music_bg));

sNavigationDrawer.setMenuItemList(menuItems);

fragmentClass = NewsFragment.class;

try {

fragment = (Fragment) fragmentClass.newInstance();

} catch (Exception e) {

e.printStackTrace();

}

if (fragment != null) {

FragmentManager fragmentManager = getSupportFragmentManager();

fragmentManager.beginTransaction().setCustomAnimations(android.R.animator.fade_in, android.R.animator.fade_out).replace(R.id.frameLayout, fragment).commit();

}

//Listener to handle the menu item click. It returns the position of the menu item clicked. Based on that you can switch between the fragments.

sNavigationDrawer.setOnMenuItemClickListener(new SNavigationDrawer.OnMenuItemClickListener() {

@Override

public void onMenuItemClicked(int position) {

System.out.println("Position "+position);

switch (position){

case 0:{

fragmentClass = NewsFragment.class;

break;

}

case 1:{

fragmentClass = FeedFragment.class;

break;

}

case 2:{

fragmentClass = MessagesFragment.class;

break;

}

case 3:{

fragmentClass = MusicFragment.class;

break;

}

sNavigationDrawer.setDrawerListener(new SNavigationDrawer.DrawerListener() {

@Override

public void onDrawerOpened() {

}

@Override

public void onDrawerOpening(){

}

@Override

public void onDrawerClosing(){

System.out.println("Drawer closed");

try {

fragment = (Fragment) fragmentClass.newInstance();

} catch (Exception e) {

e.printStackTrace();

}

if (fragment != null) {

FragmentManager fragmentManager = getSupportFragmentManager();

fragmentManager.beginTransaction().setCustomAnimations(android.R.animator.fade_in, android.R.animator.fade_out).replace(R.id.frameLayout, fragment).commit();

}

@Override

public void onDrawerClosed() {

}

@Override

public void onDrawerStateChanged(int newState) {

System.out.println("State "+newState);

}

});

}

});

در ابتدای کار sNavigationDrawer را find کردیم بعد از آن ما باید لیستی از MenuItem درست کنیم در این لیست باید یک icon یک متن به آن بدهیم هر تعداد که دوست داشته باشید می توانید منو اضافه کنید در بالا ما چهار منو در نظر گرفتیم برای اینکه این لیست در منو نمایش داده شود باید از متد setMenuItemList استفاده کنیم که ورودی آن لیستی از MenuItem که ما در بالا ساختیم در بالا ما برای تغییر هر فرگمنت یک انیمیشن از راست به چپ استفاده کردیم انیمیشن ها برای خود اندروید است چیز سفارشی استفاده نشده است.
از متد setOnMenuItemClickListener به منظور اینکه متوجه شویم کدام یک از آیتم ها کلیک شده است استفاده شده است.
در بالا باید به جای NewsFragment , FeedFragment , MessagesFragment و MusicFragment فرگمنت های خودتان را که ساختید جایگزین کنید. برای اینکه متوجه شوید چه زمانی فرگمنت در حال باز شدن یا باز شده است و یا بسته شده است می توانید از متد setDrawerListener استفاده کنید.

این آموزش هم به پایان رسید.
موفق و پیروز باشید.

مطالعه بیشتر

مطالب مشابه

ادامه مطلب

telephony manager در اندروید

ادامه مطلب

آموزش FontDialog در سی شارپ

ادامه مطلب

تبدیل PNG & JPEG به WebP در اندروید استودیو

ادامه مطلب

آموزش ساخت View سفارشی در اندروید

ادامه مطلب

آموزش تبدیل ArrayList به String Array در جاوا

ادامه مطلب

چگونه یک برنامه نویس حرفه ای شویم ؟

ادامه مطلب

آموزش GroupBox در سی شارپ

ادامه مطلب

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

6 پاسخ به “آموزش Navigation Drawer متریال دیزاین در اندروید”

سلام ممنون از اموزش خوبتون ..2 تا سوال داشتم
1- button گذاشتم تو صفحه اصلی ولی تو همه اکتیویتیا نشونشون میده؟!!!!
2-بک گراند هم میذارم ولی نشون نمیده
ممنون میشم راهنمایی بفرمایید برای پروژه ای لازم دارم

پاسخ

سلام و درود برای اینکه رنگ menu تغییر کند لازم است background لیست را تغییر دهید ویژگی background خود navigationdrawer پشتیبانی می کند. و سوال دومتون رو متوجه نمیشم دکمه را در navigation drawer تعریف کردید ؟

پاسخ

من میخوام بتونم تو هر ایتم های این منو که روش کلیک میکنم محتوای همون اکتیویتی رو نشون بده
ولی
مثلا الان من تو اکتیویتی NEWS چندتا دکمه گذاشتم ، تو اکتیویتي feed یه سری برنامه نوشتم و به همین صورت توی هر ایتم این منو یه سری برنامه نوشتم…
ولی موقع اجرای برنامه ، فقط چیزایی که تو اکتیویتی news , هست رو واسه همه اکتیویتیام نشون میده
انگار که هرچی رو تو صفحه اصلی میزارم سراسری واسه همه اکتیویتیا تعریف میشه …

پاسخ

سلام و درود شما باید از فرگمنت استفاده کنید چون نمیشه با استفاده از اکیتیویتی همچین کاری رو انجام داد شما باید navigationdrawer رو توی اکتیویتی بالا بیارید و صفحه وسط رو framelayout در نظر بگیرید سپس fragment ها را باهم replace کنید در هنگام کلیک بروی nav item
این کد رو ببینید متوجه می شوید.

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import com.shrikanthravi.customnavigationdrawer2.data.MenuItem;
import com.shrikanthravi.customnavigationdrawer2.widget.SNavigationDrawer;
import java.util.ArrayList;
import java.util.List;
public class Main2Activity extends AppCompatActivity {
    SNavigationDrawer sNavigationDrawer;
    int color1=0;
    Class fragmentClass;
    public static Fragment fragment;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        if(getSupportActionBar()!=null) {
            getSupportActionBar().hide();
        }
        sNavigationDrawer = findViewById(R.id.navigationDrawer);
        List<MenuItem> menuItems = new ArrayList<>();
        menuItems.add(new MenuItem("News",R.drawable.news_bg));
        menuItems.add(new MenuItem("Feed",R.drawable.feed_bg));
        menuItems.add(new MenuItem("Messages",R.drawable.message_bg));
        menuItems.add(new MenuItem("Music",R.drawable.music_bg));
        sNavigationDrawer.setMenuItemList(menuItems);
        fragmentClass =  NewsFragment.class;
        try {
            fragment = (Fragment) fragmentClass.newInstance();
        } catch (Exception e) {
            e.printStackTrace();
        }
        if (fragment != null) {
            FragmentManager fragmentManager = getSupportFragmentManager();
            fragmentManager.beginTransaction().setCustomAnimations(android.R.animator.fade_in, android.R.animator.fade_out).replace(R.id.frameLayout, fragment).commit();
        }
        sNavigationDrawer.setOnMenuItemClickListener(new SNavigationDrawer.OnMenuItemClickListener() {
            @Override
            public void onMenuItemClicked(int position) {
                System.out.println("Position "+position);
                switch (position){
                    case 0:{
                        color1 = R.color.red;
                        fragmentClass = NewsFragment.class;
                        break;
                    }
                    case 1:{
                        color1 = R.color.orange;
                        fragmentClass = FeedFragment.class;
                        break;
                    }
                    case 2:{
                        color1 = R.color.green;
                        fragmentClass = MessagesFragment.class;
                        break;
                    }
                    case 3:{
                        color1 = R.color.blue;
                        fragmentClass = MusicFragment.class;
                        break;
                    }
                }
                sNavigationDrawer.setDrawerListener(new SNavigationDrawer.DrawerListener() {
                    @Override
                    public void onDrawerOpened() {
                    }
                    @Override
                    public void onDrawerOpening(){
                    }
                    @Override
                    public void onDrawerClosing(){
                        System.out.println("Drawer closed");
                        try {
                            fragment = (Fragment) fragmentClass.newInstance();
                        } catch (Exception e) {
                            e.printStackTrace();
                        }
                        if (fragment != null) {
                            FragmentManager fragmentManager = getSupportFragmentManager();
                            fragmentManager.beginTransaction().setCustomAnimations(android.R.animator.fade_in, android.R.animator.fade_out).replace(R.id.frameLayout, fragment).commit();
                        }
                    }
                    @Override
                    public void onDrawerClosed() {
                    }
                    @Override
                    public void onDrawerStateChanged(int newState) {
                        System.out.println("State "+newState);
                    }
                });
            }
        });
    }
}

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentManager;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import com.shrikanthravi.customnavigationdrawer2.data.MenuItem;

import com.shrikanthravi.customnavigationdrawer2.widget.SNavigationDrawer;

import java.util.ArrayList;

import java.util.List;

public class Main2Activity extends AppCompatActivity {

SNavigationDrawer sNavigationDrawer;

int color1=0;

Class fragmentClass;

public static Fragment fragment;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main2);

if(getSupportActionBar()!=null) {

getSupportActionBar().hide();

}

sNavigationDrawer = findViewById(R.id.navigationDrawer);

List<MenuItem> menuItems = new ArrayList<>();

menuItems.add(new MenuItem("News",R.drawable.news_bg));

menuItems.add(new MenuItem("Feed",R.drawable.feed_bg));

menuItems.add(new MenuItem("Messages",R.drawable.message_bg));

menuItems.add(new MenuItem("Music",R.drawable.music_bg));

sNavigationDrawer.setMenuItemList(menuItems);

fragmentClass = NewsFragment.class;

try {

fragment = (Fragment) fragmentClass.newInstance();

} catch (Exception e) {

e.printStackTrace();

}

if (fragment != null) {

FragmentManager fragmentManager = getSupportFragmentManager();

fragmentManager.beginTransaction().setCustomAnimations(android.R.animator.fade_in, android.R.animator.fade_out).replace(R.id.frameLayout, fragment).commit();

}

sNavigationDrawer.setOnMenuItemClickListener(new SNavigationDrawer.OnMenuItemClickListener() {

@Override

public void onMenuItemClicked(int position) {

System.out.println("Position "+position);

switch (position){

case 0:{

color1 = R.color.red;

fragmentClass = NewsFragment.class;

break;

}

case 1:{

color1 = R.color.orange;

fragmentClass = FeedFragment.class;

break;

}

case 2:{

color1 = R.color.green;

fragmentClass = MessagesFragment.class;

break;

}

case 3:{

color1 = R.color.blue;

fragmentClass = MusicFragment.class;

break;

}

sNavigationDrawer.setDrawerListener(new SNavigationDrawer.DrawerListener() {

@Override

public void onDrawerOpened() {

}

@Override

public void onDrawerOpening(){

}

@Override

public void onDrawerClosing(){

System.out.println("Drawer closed");

try {

fragment = (Fragment) fragmentClass.newInstance();

} catch (Exception e) {

e.printStackTrace();

}

if (fragment != null) {

FragmentManager fragmentManager = getSupportFragmentManager();

fragmentManager.beginTransaction().setCustomAnimations(android.R.animator.fade_in, android.R.animator.fade_out).replace(R.id.frameLayout, fragment).commit();

}

@Override

public void onDrawerClosed() {

}

@Override

public void onDrawerStateChanged(int newState) {

System.out.println("State "+newState);

}

});

}

});

}

موفق باشید.

پاسخ

مهدیه گفت:
مرداد 17, 1397 در 12:37 ب.ظ
ممنون از پاسختون
میتونم ایمیلتون رو داشته باشم؟؟
برای پروژه ی مهمی دارم این منو رو درست میکنم ولی خیلی ایراد دارم در بخش فرگمنت ،ارتباطشون دادم ولی ارور های عجیب غریبی میده که حتی سرچ کردم هم ،جواب پیدا نکردم
خواستم اگه میشه پروژه ام رو ایمیل کنم که راهنمایی بفرمایید..
امکانش هست؟؟
محمد حسین جعفری پور مدیر سایت گفت:
مرداد 17, 1397 در 12:39 ب.ظ
خواهش می کنم
info@programchi.ir

آموزش Fragment در اندروید

مطالب مشابه

6 پاسخ به “آموزش Navigation Drawer متریال دیزاین در اندروید”

دیدگاهتان را بنویسید لغو پاسخ

اشتراک گذاری در شبکه های اجتماعی