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

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

آنچه در این آموزش می‌خوانید:

  • معرفی Navigation Drawer در اندروید
  • نحوه کار با DrawerLayout و NavigationView
  • معرفی Header و Menu در منوی کشویی
  • حذف اکشن بار پیش فرض اندروید و جایگزینی ان با تولبار برای استفاده در منوی کشویی
  • کار با متدهای addDrawerListener، ActionBarDrawerToggle، setNavigationItemSelectedListener، onNavigationItemSelected، onBackPressed
  • Transparent یا شفاف کردن استاتوس بار
  • نمایش تصویر پروفایل به صورت دایره ای

این مبحث در قالب 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 پنل منو با پس زمینه سفید مشاهده می شود:

Sliding Menu به اکتیویتی اضافه شد

در ادامه ابتدا لازم است اکشن بار پیش فرض اندروید را حذف کرده و با تولبار جایگزین کنم که در مبحث قبل به صورت کامل به این موضوع پرداخته شد.
در تم 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 پروژه اضافه می کنم:

اضافه کردن Header به Navigation Drawer

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

<?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 برای استایل دهی به متن بکار رفته که مقادیر زیادی برای استفاده در قسمت های مختلف پروژه در اختیار داریم:

خاصیت textAppearance در اندروید

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

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

پیش نمایش Header

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

پیش نمایش نهایی پروژه ساخت منوی کشویی در اندروید

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

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

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

دانلود نسخه کامل این آموزش به همراه سورس پروژه
تعداد صفحات : ۳۰
حجم : ۲ مگابایت
قیمت : ۱۶ هزار تومان
توجه: صرفا در صورتی از درگاه پشتیبان استفاده کنید که قادر به پرداخت از طریق سبد دانلود نباشید.
افزودن به سبد دانلود درگاه پشتیبان
این مطلب چقدر برایتان مفید بود؟ لطفا امتیاز دهید
4.1/5 - (15 امتیاز)
پرسش‌ها و دیدگاه‌های کاربران
دوره آموزش برنامه نویسی اندروید
دوره آموزش برنامه نویسی اندروید

با دریافت این دوره به تمامی آموزش‌های غیر رایگان و رایگان موجود در وب سایت دسترسی دارید که تخفیفی برای آموزش‌های غیر رایگان نیز درنظر گرفته شده. این پکیج به دو صورت دانلودی و ارسال پستی ارائه می‌گردد.
آموزش‌های اندروید استودیو در دو دسته «پایه» و «تکمیلی» منتشر می‌شوند.
آموزش‌های پایه شامل مباحث اصلی و ضروری و آموزش‌های تکمیلی مطالبی است که می‌بایست در کنار مطالب اصلی بررسی شود.
با خرید این دوره، به تمامی آموزش‌های غیر رایگانی که در آینده منتشر می‌شود نیز به صورت رایگان دسترسی خواهید داشت!

یک دیدگاه بنویسید

پرسش‌های زیر تایید و پاسخ داده نـــخواهند شد:
۱: جزء موارد مطرح شده در صفحات مشکلات و پرسش‌های رایج و بروزرسانی‌های محتوای آموزشی باشد
۲: سوال قبلا توسط کاربران در دیدگاه‌ها مطرح و پاسخ داده شده باشد
۳: پرسش خارج از مبحث آموزشی موجود در این صفحه باشد