ساخت منو کشویی (Navigation Drawer) متریال دیزاین

یکی از قابلیت‌های پرکاربرد در برنامه‌های موبایلی و بخصوص اپلیکیشن‌های اندرویدی، استفاده از منوی کشویی است که در حالت پیش فرض مخفی بوده و با کشیدن انگشت از حاشیه صفحه نمایش به سمت چپ یا راست، ظاهر می‌شود. البته باز شدن این منو می‌تواند توسط لمس یک آیتم درون تولبار نیز انجام شود. در این بخش به نحوه در این فصل به نحوه ساخت منوی کشویی یا Navigation Drawer (Sliding Menu) در اندروید می پردازیم که شامل مباحث زیر می باشد:

این مبحث در قالب PDF و در ۳۰ صفحه تهیه شده که در ادامه چند صفحه ی ابتدایی آن قرار داده شده:

معرفی Navigation Drawer یا منوی کشویی:

Navigation Drawer یا Sliding Menu یا منوی کشویی به پنلی گفته می شود که منوی اصلی اپلیکیشن را نمایش می دهد. این منو در حالت عادی از دید کاربر مخفی است که با کشیدن صفحه به سمت راست و یا لمس آیکون موجود در تولبار، ظاهر می شود. منو کشویی از یک Header و Menu تشکیل می شود. NavigationDrawer توسط اندروید معرفی شده و به راحتی و با استفاده از کتابخانه Design Support قابل اجراست.
جزئیات بیشتر در لینک زیر:

https://material.io/guidelines/patterns/navigation-drawer.html

ساخت Navigation Drawer:

یک پروژه با نام NavigationDrawer و MinimumSDK 17 ساخته و مراحل ساخت منوی کشویی را شرح می دهم.
همانطور که در پاراگراف قبل اشاره شد، برای استفاده از NavigationDrawer پیش فرض اندروید لازم است ابتدا کتابخانه design را به پروژه اضافه کنیم. یعنی علاوه بر کتابخانه appcompat به کتابخانه design هم نیاز داریم. به build.gradle رفته و مانند مبحث تولبار که appcompat را به پروژه اضافه کردیم، کتابخانه design را اضافه می کنم:

dependencies {
    implementation fileTree(include: ['*.jar'], dir: 'libs')
    implementation 'com.android.support:appcompat-v7:26.1.0'
    implementation 'com.android.support.constraint:constraint-layout:1.0.2'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.1'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:2.2.2'
    implementation 'com.android.support:design:26.1.0'
}

در این پروژه من فقط به appcompat-v7 و design نیاز دارم بنابراین سایر موارد را حذف می کنم تا درک آن برای شما نیز ساده تر باشد:

dependencies {
    implementation fileTree(include: ['*.jar'], dir: 'libs')
    implementation 'com.android.support:appcompat-v7:26.1.0'
    implementation 'com.android.support:design:26.1.0'
}

نکته: در نسخه ۳ اندروید استودیو که گریدل نیز ارتقا یافته، در افزودن کتابخانه ها بجای compile از implementation استفاده شده که البته فعلا هردو گزینه قابل استفاده است./

NavigationDrawer را در اکتیویتی اصلی پروژه تعریف می کنم و سایر اکتیویتی ها یا فرگمنتها و… از طریق گزینه های منوی کشویی در دسترس خواهند بود. محتوای activity_main.xml را حذف کرده و layout از جنس android.support.v4.widget.DrawerLayout جایگزین آن می کنم:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout>

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

حالا DrawerLayout را به صورت زیر تکمیل می کنم:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

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

در ابتدا عرض و ارتفاع را برابر match_parent تنظیم کرده، سپس برای آن یک id درنظر گرفتم. خاصیت android:fitsSystemWindows و مقدار true باعث می شود تا DrawerLayout تمام سطح اکتیویتی را دربر گیرد. در نهایت tools:openDrawer با مقدار start به این معنی است که منو از سمت چپ صفحه باز شود (با مقدار end منو از سمت راست باز می شود).
در قدم بعد لازم است یک NavigationView به DraweLayout اضافه کنم. NavigationView در کتابخانه design تعریف شده بنابراین به این صورت به اکتیویتی اضافه می شود:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <android.support.design.widget.NavigationView />


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

header و menu در NavigationView قرار می گیرد. ابتدا attribute های لازم را به تگ اضافه کرده و سپس اقدام به ساخت header و menu و افزودن آنها به NavigationView خواهم کرد.
در قسمت Preview پنل منو با پس زمینه سفید مشاهده می شود:

در ادامه ابتدا لازم است اکشن بار پیش فرض اندروید را حذف کرده و با تولبار جایگزین کنم که در مبحث قبل به صورت کامل به این موضوع پرداخته شد.
در تم AppTheme و در قسمت parent، DarkActionBar را با NoActionBar جایگزین کردم تا اکشن بار حذف شود. سپس در رایرکتوری layout یک لایه مخصوص تولبار با نام دلخواه toolbar.xml ایجاد می کنم که من نوع این لایه را RelativeLayout تعیین کرده ام:

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

    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary"
        android:id="@+id/m_toolbar"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

</RelativeLayout>

سپس توسط تگ include فایل layout تولبار را به layout اکتیویتی اصلی پروژه اضافه می کنم:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <include
        layout="@layout/toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.NavigationView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        android:id="@+id/navigation_view"/>

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

عرض و ارتفاع این تگ را نیز match_parent تعیین کردم تا تولبار به صورت کامل نمایش داده شود.
در نهایت Toolbar را درون MainActivity.java تعریف می کنم:

package ir.android_studio.navigationdrawer;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;

public class MainActivity extends AppCompatActivity {

    Toolbar mToolbar;

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

        mToolbar = (Toolbar) findViewById(R.id.m_toolbar);
        setSupportActionBar(mToolbar);

    }
}

پروژه را اجرا می کنم:

با کشیدن صفحه نمایش به سمت راست، یک پنل خالی با پس زمینه سفید ظاهر می شود که تولبار نیز زیر آن قرار گرفته است.
در قدم بعد باید محتویات NavigationView را کامل کنم. ابتدا Header را می سازم.
یک فایل با نام دلخواه nav_header.xml و از نوع LinearLayout به دایرکتوری layout پروژه اضافه می کنم:

اگر منوی چند اپلیکیشن را بررسی کنید در قسمت هدر عموما یک تصویر (آواتار) به همراه اطلاعات شخص قرار گرفته است. من ابتدا یک تصویر پس زمینه برای هدر تعیین کرده و سپس آواتار، نام و ایمیل را اضافه می کنم:

<?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="160dp"
    android:padding="16dp"
    android:background="@drawable/nav_header"
    android:gravity="bottom"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">

</LinearLayout>

ارتفاع استاندارد برای هدر ۱۶۰dp است. یک padding نیز اضافه کردم تا عناصر از دیواره هدر فاصله داشته باشند. در خط بعد تصویری که به دایرکتوری drawable اضافه کرده ام را به عنوان background تعریف کردم. خاصیت gravity با مقدار bottom نیز باعث می شود تا عناصری که به هدر اضافه می کنیم، به جای آنکه از بالای هدر به سمت پایین زیر یکدیگر قرار گیرد، از انتهای هدر به طرف بالا چینش انجام شود.
هدر را به اینصورت تکمیل می کنم:

<?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="160dp"
    android:padding="16dp"
    android:background="@drawable/nav_header"
    android:gravity="bottom"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <ImageView
        android:layout_width="56dp"
        android:layout_height="56dp"
        android:src="@drawable/avatar"
        android:scaleType="centerCrop"
        android:contentDescription="Profile Picture"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="SeyedMahdi Motahhari"
        android:paddingTop="8dp"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="info@android-studio.ir"
        android:paddingTop="4dp"/>

</LinearLayout>

یک ImageView برای نمایش تصویر پروفایل (آواتار) و دو TextView برای نام و ایمیل.
خاصیت contentDescription به عنوان توضیحات تصویر و textAppearance برای استایل دهی به متن بکار رفته که مقادیر زیادی برای استفاده در قسمت های مختلف پروژه در اختیار داریم:

واضح است که هر تغییراتی اعم از تغییر رنگ متون، اندازه و … را به راحتی می توان روی اینها انجام داد که به سلیقه و هدف توسعه دهنده بستگی دارد.

هدر به اینصورت تکمیل شد:

تصویر نهایی پروژه:

جهت مطالعه ادامه آموزش، فایل PDF را دانلود نمائید

توجه : سورس پروژه داخل پوشه Exercises قرار داده شده است.

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