در این قسمت آموزش ساخت navigation drawer را به شما ارائه می‌دهیم.

مثال navigation drawer

در اکثر نرم افزارهای اندروید از این navigation drawer استفاده می‌شود. برای آموزش این بخش باید آموزش‌های قبلی دوره طراحی متریال را به خوبی فرا گرفته باشید.

ابتدا به برنامه خود باید یک Toolbar اضافه کنیم. آموزش کامل را در اینجا ببینید.

از آن جا که navigation drawer شامل یک لیست می‌باشد یک نمونه لیست را با نام listview_item به layout‌ها اضافه می‌کنیم. محتویات درون این listview_item مانند زیر خواهد بود:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="New Text"
        android:id="@+id/listItem"
        android:textColor="#000000"
        android:padding="10dip"/>
</LinearLayout>

فایل activity_main.xml باید مانند زیر ویرایش شود:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/my_drawer"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="hitos.ir.hitosapp.MainActivity">

        <include layout="@layout/toolbar"
                 android:id="@+id/toolbar" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!"
            android:layout_below="@id/toolbar"
            android:id="@+id/textView"/>
    </RelativeLayout>

    <ListView
        android:layout_width="280dp"
        android:layout_height="match_parent"
        android:id="@+id/listView"
        android:background="#ffffff"
        android:layout_gravity="end"/>

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

همانطور که در بالا می‌بینید کل محتویات درون صفحه را درون دو تگ با نام android.support.v4.widget.DrawerLayout قرار می‌گیرد. در خط 5 شناسه my_drawer را به این تگ می‌دهیم.

تگ RelativeLayout که حاوی تمام محتویات صفحه است را درون تگ فوق قرار دادیم. درون این تگ نیز toolbar را include کردیم. toolbar را در بخش‌های پیش رو به Activity نیز اضافه می‌کنیم.

در سطرهای 24 تا 29 نیز یک ListView اضافه کردیم. این ListView آیتم‌های درون Navigation Drawer را شامل می‌شود. عرض این آیتم را 280 و به آن زمینه سفید اضافه کردیم. android:layout_gravity نیز جهت باز شدن Navigation Drawer را مشخص می‌کند. اگر مقدار end را به این خاصیت بدهید منو از سمت راست به چپ و اگر مقدار start را بدهیم منو از سمت چپ به راست باز می‌شود.

MainActivity را مانند زیر به صورت کامل ویرایش کردیم، در ادامه به شرح کدهای نوشته شده در این بخش می‌پردازیم:

public class MainActivity extends AppCompatActivity{

  private Toolbar toolbar;
  String[] list_items;
  private DrawerLayout my_drawer;
  private ActionBarDrawerToggle my_drawer_toggle;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);


    toolbar= (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    list_items= new String[]{
      "Home", "Settings", "Contact Us", "About Us"
    };

    myAdapter myNewAdapter = new myAdapter(getApplicationContext());
    ListView listView = (ListView) findViewById(R.id.listView);
    listView.setAdapter(myNewAdapter);

    my_drawer= (DrawerLayout) findViewById(R.id.my_drawer);
    my_drawer_toggle= new ActionBarDrawerToggle(this, my_drawer, toolbar, R.string.drawer_open, R.string.drawer_close){
      @Override
      public void onDrawerOpened(View drawerView) {
        super.onDrawerOpened(drawerView);
      }

      @Override
      public void onDrawerClosed(View drawerView) {
        super.onDrawerClosed(drawerView);
      }
    };
  }

  private class myAdapter extends BaseAdapter {

    private LayoutInflater myInflater;

    public myAdapter(Context context){
      myInflater = LayoutInflater.from(context);
    }

    @Override
    public int getCount() {
      return list_items.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 viewitem;
      if(convertView == null){
        viewitem = myInflater.inflate(R.layout.listview_item, null);
      }else{
        viewitem = convertView;
      }

      TextView textView= (TextView) viewitem.findViewById(R.id.listItem);
      textView.setText(list_items[position]);

      return viewitem;
    }
  }
}

در سطرهای 3 تا 6 سه متغیر جدید را تعریف کردیم که در ادامه به کارکرد آن‌ها پی می‌برید.

در سطرهای 14 و 15 تولبار خود را به برنامه اضافه کردیم.

در سطرهای 17 تا 19 آیتم‌های Navigation Drawer را در قالب یک آرایه ایجاد کردیم.

در سطرهای 21 تا 23 کدهای لازم برای اتصال به Adapter ایجاد شده در سطرهای 39 تا 76 را درج کرده ایم.

در سطر 25 از شناسه my_drawer برای اتصال Navigation Drawer موجود در لایه اصلی به اکتیویتی استفاده کردیم.

در سطر 26 با متد ActionBarDrawerToggle شروع به فراخوانی و فعال سازی Navigation Drawer خود می‌کنیم. این متد 5 ورودی دارد که اولی به کلاس اشاره دارد، دومی شناسه Navigation، سومی شناسه toolbar، چهارمی متنی برای حالت باز بودن و پنجمی متنی برای حالت بسته بودن Navigation از ما دریافت می‌کند. متن باز بودن و بسته بودن را باید از فایل strings دریافت کرد.

اگر این برنامه را در ماشین مجازی اجرا کنید و در سمت راست صفحه کلیک کرده و به سمت چپ بکشید خواهید دید Navigation Drawer با آیتم‌های داده شده توسط ما نمایان خواهد شد:

هیتوس navigation drawer

قسمت‌های بعدی را از دست ندهید.