آموزش 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>

کد بالا آیکون منو سمت راست ما را ایجاد خواهد کرد و در بالا ممکن است برای شما یک خطا داشته باشد باید یک عکس برای منو خود قرار دهید.
برای اینکه خطا بالای شما رفع شود عکس زیر را دانلود کرده و در پوشه 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>

کد بالا لیست از آیتم های منوی ما خواهد بود فعلا تغییری در آن ایجاد نکنید خواهید دید چگونه به صورت 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>

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

 
بعد از اینکار وارد اکتیویتی که می خواهید منو نمایش داده شوید ما در اینجا در 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>

نباید در کد بالا هیچ تغییری ایجاد کنید ! کد های خودتان را در بخش 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;
    }
}

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

مطالعه بیشتر