آموزش Navigation Drawer فارسی (راست چین) در اندروید

سلام دوستان در این سری از آموزش برنامه نویسی اندروید به آموزش Navigation Drawer فارسی (راست چین) در اندروید می پردازیم به صورت پیشفرض اگر از منو (menu) یا NavigationDrawer در اندروید استفاده کنید چپ چین است در این آموزش ما NavigationDrawer را راست چین یا Rtl خواهیم کرد در ادامه با ما همراه باشید تا نحوه استفاده از Navigation Drawer فارسی (راست چین) را یاد گیرید .

در این آموزش لازم نیست یک اکتیویتی از نوع Navigation Drawer ایجاد کنید (Navigation drawer Activity) فقط لازم است کارهایی را ما انجام میدهیم انجام دهید ! این Navigation Drawer فارسی (Rtl ) توسط سایت ما طراحی و توسعه داده شده است و فکر می کنم هنوز منبع خاصی Navigation Drawer را به این گونه فارسی سازی کرده باشد.

ابتدا یک پوشه به نام menu در مسیر res ایجاد کنید و در داخل آن یک فایل به نام main_menu.xml ایجاد کرده و کدهای زیر را در آن قرار دهید.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_menu">
    <item
        android:id="@+id/action_settings"
        android:icon="@drawable/ic_menu"
        app:showAsAction="always"
        android:title="menu_icon" />
</menu>

<?xml version="1.0" encoding="utf-8"?>

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

xmlns:app="http://schemas.android.com/apk/res-auto"

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

<item

android:id="@+id/action_settings"

android:icon="@drawable/ic_menu"

app:showAsAction="always"

android:title="menu_icon" />

</menu>

کد بالا آیکون منو سمت راست ما را ایجاد خواهد کرد و در بالا ممکن است برای شما یک خطا داشته باشد باید یک عکس برای منو خود قرار دهید.
برای اینکه خطا بالای شما رفع شود عکس زیر را دانلود کرده و در پوشه drawable قرار دهید.
لینک دانلود عکس
یک فایل به نام list_items.xml ایجاد کرده و کدهای زیر را در آن قرار دهید.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/test"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:paddingBottom="10dp"
    android:paddingRight="15dp"
    android:paddingTop="10dp">
    <TextView
        android:id="@+id/list_text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:layout_weight="1"
        android:gravity="right"
        android:textColor="#5c5757"
        android:textSize="15sp" />
    <ImageView
        android:id="@+id/list_image"
        android:layout_width="17dp"
        android:layout_height="17dp"
        android:layout_gravity="center"
        android:layout_margin="6dp"
        android:tint="#686868" />
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

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

android:id="@+id/test"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="horizontal"

android:paddingBottom="10dp"

android:paddingRight="15dp"

android:paddingTop="10dp">

<TextView

android:id="@+id/list_text"

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_margin="5dp"

android:layout_weight="1"

android:gravity="right"

android:textColor="#5c5757"

android:textSize="15sp" />

<ImageView

android:id="@+id/list_image"

android:layout_width="17dp"

android:layout_height="17dp"

android:layout_gravity="center"

android:layout_margin="6dp"

android:tint="#686868" />

</LinearLayout>

کد بالا لیست از آیتم های منوی ما خواهد بود فعلا تغییری در آن ایجاد نکنید خواهید دید چگونه به صورت dynamic پر خواهد شد.
یک فایل دیگر به نام nav_header_main.xml ایجاد کرده و کدهای زیر را در آن قرار دهید.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="@dimen/nav_header_height"
    android:gravity="bottom"
    android:orientation="vertical"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">
    <ImageView
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_gravity="right"
        android:layout_marginRight="8dp"
        android:scaleType="fitXY" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:layout_marginBottom="8dp"
        android:layout_marginRight="8dp"
        android:text="سلام !"
        android:textColor="#000"
        android:textSize="18dp" />
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

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

android:layout_width="match_parent"

android:layout_height="@dimen/nav_header_height"

android:gravity="bottom"

android:orientation="vertical"

android:theme="@style/ThemeOverlay.AppCompat.Dark">

<ImageView

android:layout_width="120dp"

android:layout_height="120dp"

android:layout_gravity="right"

android:layout_marginRight="8dp"

android:scaleType="fitXY" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="right"

android:layout_marginBottom="8dp"

android:layout_marginRight="8dp"

android:text="سلام !"

android:textColor="#000"

android:textSize="18dp" />

</LinearLayout>

کد بالا در بالای لیست یک بخش شامل یک عکس و یک متن ایجاد می کند همانند زیر

بعد از اینکار وارد اکتیویتی که می خواهید منو نمایش داده شوید ما در اینجا در activity_main.xml قرار میدهیم.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="false">
    <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"
        android:orientation="vertical">
    </RelativeLayout>
    <ListView
        android:id="@+id/listView"
        android:layout_width="280dp"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_gravity="end"
        android:background="#eee" />
</android.support.v4.widget.DrawerLayout>

<?xml version="1.0" encoding="utf-8"?>

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/drawer_layout"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:fitsSystemWindows="false">

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

android:orientation="vertical">

</RelativeLayout>

<ListView

android:id="@+id/listView"

android:layout_width="280dp"

android:layout_height="match_parent"

android:layout_alignParentLeft="true"

android:layout_alignParentStart="true"

android:layout_alignParentTop="true"

android:layout_gravity="end"

android:background="#eee" />

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

نباید در کد بالا هیچ تغییری ایجاد کنید ! کد های خودتان را در بخش RelativeLayout قرار دهید البته توصیه ما این است که ابتد این آموزش را به صورت خام تست کنید سپس با پروژه خود ترکیب کنید.
بعد از اینکه کد بالا را قرار دادید وارد اکتیویتی مربوطه شوید در اینجا برای ما MainActivity.java است.

package com.samsung.nfctag.activity;
public class add_staffActivity extends AppCompatActivity {
    /*JFP-*/
    private Toolbar toolbar;
    private ListView listView;
    private DrawerLayout mDrawerLayout;
    private ActionBarDrawerToggle mDrawerToggle;
    String[] titles;
    int[] images;
    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_add_staff);
        find_view();
        /*nav*/
        ListView listView = findViewById(R.id.listView);
        LayoutInflater inflater = getLayoutInflater();
        ViewGroup header = (ViewGroup) inflater.inflate(R.layout.nav_header_main, listView, false);
        listView.addHeaderView(header, null, false);
        images = new int[]{
                R.drawable.ic_lock,
                R.drawable.ic_team,
                R.drawable.ic_report,
                R.drawable.ic_close
        };
         titles = new String[]{
                "ورود",
                "ثبت نام",
                "منو سوم",
                "منو چهارم"
         };
        MyAdapter myAdapter = new MyAdapter(getApplicationContext());
        listView.setAdapter(myAdapter);
        mDrawerLayout = findViewById(R.id.drawer_layout);
        mDrawerToggle = new ActionBarDrawerToggle(add_staffActivity.this, mDrawerLayout, toolbar, R.string.opened, R.string.closed) {
            @Override
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
            }
            @Override
            public void onDrawerClosed(View drawerView) {
                super.onDrawerClosed(drawerView);
            }
        };
        mDrawerLayout.addDrawerListener(mDrawerToggle);
        listView.setOnItemClickListener(new DrawerItemClickListener());
    }
    private class MyAdapter extends BaseAdapter {
        private LayoutInflater mInflaer;
        public MyAdapter(Context context) {
            mInflaer = LayoutInflater.from(context);
        }
        @Override
        public int getCount() {
            return titles.length;
        }
        @Override
        public Object getItem(int position) {
            return position;
        }
        @Override
        public long getItemId(int position) {
            return position;
        }
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            View view;
            Typeface typeface = Typeface.createFromAsset(getAssets(), "IRANSansMobile(FaNum).ttf");
            if (convertView == null) {
                view = mInflaer.inflate(R.layout.list_items, null);
            } else {
                view = convertView;
            }
            TextView textView = (TextView) view.findViewById(R.id.list_text);
            ImageView imageView = (ImageView) view.findViewById(R.id.list_image);
            textView.setText(titles[position]);
            textView.setTypeface(typeface);
            imageView.setImageResource(images[position]);
            return view;
        }
    }
    private class DrawerItemClickListener implements ListView.OnItemClickListener {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, final int position, long id) {
            selectitem(position);
        }
        private void selectitem(int position) {
            switch (position) {
                case 1:
                    //open another Activity :D -JFP
                    mDrawerLayout.closeDrawers();
                    break;
                case 2:
                   //open another Activity :D -JFP
                    mDrawerLayout.closeDrawers();
                    break;
                case 3:
                    //open another Activity :D -JFP
                    mDrawerLayout.closeDrawers();
                    break;
                case 4:
                    //open another Activity :D -JFP
                    mDrawerLayout.closeDrawers();
                    break;
            }
        }
    }
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            mDrawerLayout.openDrawer(GravityCompat.END);
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main_menu, menu);
        return true;
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

package com.samsung.nfctag.activity;

public class add_staffActivity extends AppCompatActivity {

/*JFP-*/

private Toolbar toolbar;

private ListView listView;

private DrawerLayout mDrawerLayout;

private ActionBarDrawerToggle mDrawerToggle;

String[] titles;

int[] images;

@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_add_staff);

find_view();

/*nav*/

ListView listView = findViewById(R.id.listView);

LayoutInflater inflater = getLayoutInflater();

ViewGroup header = (ViewGroup) inflater.inflate(R.layout.nav_header_main, listView, false);

listView.addHeaderView(header, null, false);

images = new int[]{

R.drawable.ic_lock,

R.drawable.ic_team,

R.drawable.ic_report,

R.drawable.ic_close

};

titles = new String[]{

"ورود",

"ثبت نام",

"منو سوم",

"منو چهارم"

};

MyAdapter myAdapter = new MyAdapter(getApplicationContext());

listView.setAdapter(myAdapter);

mDrawerLayout = findViewById(R.id.drawer_layout);

mDrawerToggle = new ActionBarDrawerToggle(add_staffActivity.this, mDrawerLayout, toolbar, R.string.opened, R.string.closed) {

@Override

public void onDrawerOpened(View drawerView) {

super.onDrawerOpened(drawerView);

}

@Override

public void onDrawerClosed(View drawerView) {

super.onDrawerClosed(drawerView);

}

};

mDrawerLayout.addDrawerListener(mDrawerToggle);

listView.setOnItemClickListener(new DrawerItemClickListener());

}

private class MyAdapter extends BaseAdapter {

private LayoutInflater mInflaer;

public MyAdapter(Context context) {

mInflaer = LayoutInflater.from(context);

}

@Override

public int getCount() {

return titles.length;

}

@Override

public Object getItem(int position) {

return position;

}

@Override

public long getItemId(int position) {

return position;

}

@Override

public View getView(int position, View convertView, ViewGroup parent) {

View view;

Typeface typeface = Typeface.createFromAsset(getAssets(), "IRANSansMobile(FaNum).ttf");

if (convertView == null) {

view = mInflaer.inflate(R.layout.list_items, null);

} else {

view = convertView;

}

TextView textView = (TextView) view.findViewById(R.id.list_text);

ImageView imageView = (ImageView) view.findViewById(R.id.list_image);

textView.setText(titles[position]);

textView.setTypeface(typeface);

imageView.setImageResource(images[position]);

return view;

}

private class DrawerItemClickListener implements ListView.OnItemClickListener {

@Override

public void onItemClick(AdapterView<?> parent, View view, final int position, long id) {

selectitem(position);

}

private void selectitem(int position) {

switch (position) {

case 1:

//open another Activity :D -JFP

mDrawerLayout.closeDrawers();

break;

case 2:

//open another Activity :D -JFP

mDrawerLayout.closeDrawers();

break;

case 3:

//open another Activity :D -JFP

mDrawerLayout.closeDrawers();

break;

case 4:

//open another Activity :D -JFP

mDrawerLayout.closeDrawers();

break;

}

@Override

public boolean onOptionsItemSelected(MenuItem item) {

int id = item.getItemId();

if (id == R.id.action_settings) {

mDrawerLayout.openDrawer(GravityCompat.END);

return true;

}

return super.onOptionsItemSelected(item);

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

getMenuInflater().inflate(R.menu.main_menu, menu);

return true;

}

خب کد بالا هرچند نیازی به توضیح ندارد ولی یک توضیح در مورد بخش های مختلف آن خواهم داد.
برای اینکه icon منو در صفحه نمایش داده شود از Contex Menu استفاده کردیم و برای اینکه list ما در سمت راست قرار گیرد در بخش layout آن را تنظیم کردیم (کافی است کد مربوط به layout اصلی را کمی بررسی کنید) بعد از اینکار یک ListView سفارشی ایجاد کردیم تا یک لیست از icon و همینطور متن منو را در صفحه نمایش دهیم (همانند Navigation Drawer چپ چین ) یک آداپتور داخلی برای پر کردن لیست ساختیم به نام MyAdapter که کارش پر کردن Listview ما خواهد بود.
برای اینکه عکس مربوط به هر منو را تغییر دهیم لازم است متغیر images را تغییر دهید. برای اینکه title مربوط به هر آیتم را مشخص می کند و در بخش آخر کلیک است که توسط خود Navigation Drawer هندل می شود.

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

موفق و پیروز باشید.

مطالعه بیشتر

مطالب مشابه

ادامه مطلب

مقایسه RecyclerView و ListView

ادامه مطلب

آموزش Navigation Drawer فارسی (Rtl) در اندروید

ادامه مطلب

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

ادامه مطلب

بررسی background و foreground بودن اپلیکیشن در اندروید

ادامه مطلب

Data Binding چیست ؟

ادامه مطلب

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

ادامه مطلب

آموزش ساخت عکس همراه با متن در اندروید

ادامه مطلب

آموزش تایید هویت با استفاده از اثر انگشت در اندروید

11 پاسخ به “آموزش Navigation Drawer فارسی (راست چین) در اندروید”

سعید گفت:
فروردین 8, 1397 در 8:12 ب.ظ
آموزشی که شما در سایتتون قرار داده اید بر اساس روش قدیمی که بر پایه لیست ویو می باشد قرار داده اید.
در روش جدید که برای این منظور خود گوگل در کتابخانه design قرار داده است، استفاده از ویجت NavigationView می باشد.
با تشکر از آموزش های خوبتون.
پاسخ
1. محمد حسین جعفری پور مدیر سایت گفت:
  فروردین 8, 1397 در 8:21 ب.ظ
  سلام و درود روشی که می فرمایید از Api 21 به بالا قابل استفاده است ولی روشی که قرار دادیم از api 10 به بالا پشتیبانی می شود ! و NavigationView سال 2015 عرضه شد و می توانید بخش report bug آن را بررسی کنید که چرا توسط برنامه نویسان استفاده نمی شود.
  موفق باشید.
  پاسخ
مهسا گلی گفت:
مرداد 9, 1397 در 12:41 ب.ظ
سلام آقای جعفری پور
من همه این کارایی که گفتین رو کردم ولی خیلی ارور تو فایل java. به وجود میاد…
بهتر نیست آموزش هایی که پیچیده هستند , سوروس آموزش رو هم بذارین?
من خیلی به این اموزشتون نیاز دارم , لطف کنید سورسش رو بذارین….
ممنونم
پاسخ
1. محمد حسین جعفری پور مدیر سایت گفت:
  مرداد 9, 1397 در 4:42 ب.ظ
  سلام به علت فضای کم امکان قرار دادن سورس فعلا نداریم
  موفق باشید.
  پاسخ
behnam گفت:
شهریور 5, 1397 در 4:37 ب.ظ
باسلام
ممنونم واقعا بابت این سایت خوبی که دارید … عالی هستید
فقط یک راهنممایی چهطور میتونم در تمامی اکتیویتی های خودم این منو رو داشته باشم فقط روی یک اکتیویتی نشون میده .
ممنون میشم راهنماییم کنید
پاسخ
1. محمد حسین جعفری پور مدیر سایت گفت:
  شهریور 7, 1397 در 2:43 ق.ظ
  سلام و درود
  شما باید هربار یا کد رو کپی پیشت کنید تا همه جا قرار گیرید یا یک فرگمنت درست کنید در هر اکتیویتی آن را include کنید تا همه جا نمایش داده شود.
  موفق و پیروز باشید.
  پاسخ
حسین گفت:
تیر 2, 1398 در 2:39 ب.ظ
سلام از آموزش خوبتون ممنونم آفرین به برنامه نویسای ایرانی خودمون امیدوارم بهترین برنامه نویسای دنیا باشیم که شرکتایی که مارو تحریم میکنن بیان از ما کمک بخوان برای برنامه نویسی همانطور که تو بعضی از رشته ها به سطوح بالایی تو دنیا رسیدیم
پاسخ
علی اعرابی گفت:
مرداد 16, 1398 در 2:22 ب.ظ
mDrawerToggle = new ActionBarDrawerToggle(MainPage.this, mDrawerLayout, toolbar, R.string.app_name, R.string.app_name)
این خط از کد نویگیشنتون ارور میده چرا ؟
پاسخ
حمیدرضا گفت:
اسفند 17, 1398 در 2:24 ب.ظ
سلام من همه چی رو ok کردم فقط میخوام ببینم با چی اون دکمه که منو رو باز میکنه ببرم سمت راست
پاسخ
1. حسین گفت:
  فروردین 12, 1399 در 0:19 ق.ظ
  اگر اشتباه نکنم، تولباری که دکمه ی منو رو داخلش میگذارید، یه گزینه به اسم LayoutDirection داره. اون رو روی حالت راست به چپ rtl قرار بدید درست میشه
  پاسخ
  1. کمال گفت:
    اسفند 11, 1399 در 6:21 ب.ظ
    خیلی ممنون , خیلی به دردم خورد
    پاسخ

مطالب مشابه

11 پاسخ به “آموزش Navigation Drawer فارسی (راست چین) در اندروید”

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

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