متریال دیزاین : بخش چهارم : ساخت منو کشویی (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 یا منوی کشویی به پنلی گفته می شود که منوی اصلی اپلیکیشن را نمایش می دهد. این منو در حالت عادی از دید کاربر مخفی است که با کشیدن صفحه به سمت راست و یا لمس آیکون موجود در تولبار، ظاهر می شود:

منوی کشویی | Navigation Drawer

منو کشویی از یک 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

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

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

توجه : سورس پروژه به همراه فایل آموزشی داخل پوشه Exercises قرار داده شده است.

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

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

در صورتی که در دانلود از طریق باکس زیر (سبد دانلود) با مشکل مواجه شدید، با مراجعه به این لینک گزینه NavigationDrawer به مبلغ ۵۰۰ تومان را انتخاب نمائید.

دانلود فایل آموزشی با فرمت PDF به همراه سورس پروژه
تعداد صفحات : ۳۰
حجم : ۱٫۳ مگابایت
قیمت : ۵۰۰ تومان

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

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

کد امنیتی *