دوره طراحی متریال Android قسمت سوم: تولبار و منو Navigation Drawer

در این قسمت مهم طراحی متریال قصد داریم دو مفهوم ToolBar و Navigation Drawer را به شما آموزش دهیم.

مفهوم Toolbar و پیاده سازی آن

در نسخه‌های قدیم اندروید مفهومی به نام ActionBar وجود داشت که در بالای نرم افزارهای اندروید مانند ظرفی برای منو و باکس جستجو به حساب می‌آمد.

این مفهوم در نسخه‌های جدید اندروید تبدیل به ToolBar شده است.

ActionBar‌های قدیم ساده و محدود بودند و امکان ویرایش بسیار کمی داشند، اما ToolBar‌ها انعطاف پذیر و قدرتمند هستند.

به صورت پیشفرض تمام پروژه‌های اندروید یک ActionBar در خود دارند که ابتدا باید این ActionBar را حذف سپس یک ToolBar ایجاد کرد.

اگر به فایل style پروژه سر بزنید خواهید دید یک تگ با نام AppTheme به صورت زیر وجود دارد:

    <style name="AppTheme" parent="Theme.AppCompat.Light">
        ...
    </style>

عبارت parent اعلام می‌کند که این استایل مشتقی از استایل Theme.AppCompat.Light است. به صورت پیش فرض استال ذکر شده یک ActionBar به پروژه اضافه می‌کند. بنابراین این استایل را به صورت زیر ویرایش می‌کنیم:

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        ...
    </style>

خاصیت NoActionBar باعث می‌شود ActionBar از برنامه حذف شود.

به لایه اصلی activity_main رفته و درون لایه CoordinatorLayout یک Toolbar به شکل زیر اضافه کنید:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary"
        android:elevation="20dp">
    </android.support.v7.widget.Toolbar>
</android.support.design.widget.CoordinatorLayout>

در سطر 10 با ?attr/actionBarSize ارتفاع پیشفرض Toolbar اندروید را به این تگ نسبت می‌دهیم.

جالب است که بدانید درون دو تگ Toolbar می‌توانید لایه‌های دیگری مانند باکس جستجو یا هر چیز دیگری را قرار دهید.

همانطور که می‌بینید تگ ریشه این بخش CoordinatorLayout نام دارد که در قسمت‌های بعدی به صورت تفصیلی به معرفی آن می‌پردازیم.

در MainActivity و در متد onCreate کدهای زیر را وارد کنید:

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

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

کدهای موجود در سطر‌های 6 و 7 toolbar را فراخوانی و اجرا می‌کنند. اگر برنامه فوق را در گوشی مجازی اجرا کنید خواهید دید یک Toolbar با نام برنامه ظاهر می‌شود:

برای تغییر رنگ Title کد زیر را اضافه می‌کنیم:

toolbar.setTitleTextColor(ContextCompat.getColor(this, R.color.white));

دستور ContextCompat.getColor یک دستور بسیار مهم است که تغییر رنگ را در تمام نسخه‌های اندروید امکان پذیر می‌کند. ورودی‌های این دستور Context و آدرس یک رنگ از فایل colors پوشه values است.

مفهوم Navigation Drawer و پیاده سازی آن

 Navigation Drawer به لیست کنار صفحه‌ای گفته می‌شود که شامل آیکون‌ها و گزینه‌هایی برای استفاد هر چه بیشتر از فضای نرم افزار اندروید است.

برای تنظیم گزینه‌های موجود در NavigationDrawer در مسیر res پروژه یک Android resource file ایجاد و نام آن را menu می‌گذاریم.

در این پوشه یک فایل به نام navigation_menu ایجاد کرده و سورس زیر را در آن می‌گذاریم:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:title="صفحه اصلی" android:id="@+id/menuitem1" />
    <item android:title="خروج" android:id="@+id/menuitem2" />
</menu>

 هر تگ item که در بالا می‌بینید شامل یک آیتم منو می‌باشد. هر تگ item یک title و یک id دارد.

می توان با اضافه کردن android:icon و دادن آدرس یک تصویر از Drawable پروژه یک آیکون به آیتم‌ها نسبت داد.

برای اضافه کردن قابلیت NavigationDrawer باید یک تگ ریشه به نام DrawerLayout داشته باشیم که درون آن یک تگ NavigationView استفاده کنیم.

لایه نمایش activity_main را به صورت زیر ویرایش می‌کنیم:

<?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:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawerlayout"
    android:layoutDirection="rtl">
    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="250dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/navigation_menu">
    </android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>

 تگ ریشه DrawerLayout نام دارد که layout_width و layout_height آن match_parent هستند. این لایه یک شناسه به نام drawerlayout و یک تگ layoutDirection با مقدار rtl در سطر 8 دارد.

درون تگ DrawerLayout یک تگ به نام NavigationView قرار داده که به آن یک شناسه، عرض 250dp و ارتفاع match_parent می‌دهیم.

همچنین layout_gravity این لایه را start قرار داده تا منو از سمت راست به چپ باز شود.

app:menu نیز آدرس فایل آیتم‌های منو را از ما دریافت می‌کند.

از آن جایی که NavigationDrawer برای اجرا شدن نیازمند Toolbar است تا دکمه باز شدن منو در Toolbar قرار بگیرد. 

 لایه activity_main را به صورت زیر ویرایش می‌کنیم. در این لایه DrawerLayout لایه CoordinatorLayout بخش قبل را که شامل Toolbarبود قرار می‌دهیم:

<?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:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawerlayout"
    android:layoutDirection="rtl">
    <android.support.design.widget.CoordinatorLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/colorPrimary"
            android:elevation="20dp">
        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.CoordinatorLayout>
    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="250dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/navigation_menu">
    </android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>

 به کلاس MainActivity رفته و متد onCreate را به شکل زیر ویرایش می‌کنیم:

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

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

        ActionBar actionBar= getSupportActionBar();
        actionBar.setDisplayHomeAsUpEnabled(true);
        actionBar.setHomeButtonEnabled(true);

        DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.drawerlayout);
        ActionBarDrawerToggle drawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, 0, 0);
        drawerToggle.syncState();
    }

 سطرهای 6 و 7: برای اضافه کردن Toolbar ایجاد شده اند.

سطرهای 9 تا 11: برای اضافه کردن و تنظیم کلید باز شدن منو اضافه شده اند.

سطر 13: لایه DrawerLayout را فراخوانی کردیم.

سطر 14: در این سطر منو Drawer را فراخوانی و اضافه می‌کنیم. متد ActionBarDrawerToggle پنج ورودی دارد که اولی Context که کلاس جاری است، دومی لایه DrawerLayout، سوم Toolbar و چهارم و پنجم عدد صفر.

سطر 15: فعالیت NavigationDrawer شروع می‌گردد.

نتیجه مانند زیر خواهد شد:

نکته: برای تغییر رنگ Toolbar به سفید می‌توان از یک Theme به شکل زیر استفاده کرد:

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

در سطر آخر خاصیت app:theme رنگ Toolbar را به سفید تغییر می‌دهد.

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

همانطور که در تصویر بالا می‌بینید، یک Header بالای آیتم‌های Navigation Drawer قرار دارد که توضیحات خاصی مانند اطلاعات پروفایل در آن قرار گرفته است.

طبیعتا در این Header می‌توانید لوگوی شرکت و یا هر اطلاعات دیگری را که مایل بودید قرار دهید. برای اضافه کردن این Header در مسیر لایه‌های خود، یک لایه به نام navigation_header اضافه می‌کنیم، و سورس زیر را در آن می‌گذاریم:

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

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="230dp"
        android:scaleType="centerCrop"
        app:srcCompat="@drawable/navigation" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="50dp"
        android:text="به نرم افزار خود خوش آمدید"
        android:textAlignment="center"
        android:textColor="#fff"
        android:textStyle="bold" />
</RelativeLayout>

در لایه فوق یک ImageView و یک TextView را درون ریشه RelativeLayout قرار دادیم و در نتیجه این لایه به شکل زیر شد:

حال به activity_main رفته و NavigationView را مانند زیر ویرایش می‌کنیم:

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="250dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/navigation_menu"
        app:headerLayout="@layout/navigation_header">
    </android.support.design.widget.NavigationView>

 در سطر 7 با خاصیت app:headerLayout لایه navigation_header را به این منو اضافه کردیم.

نتیجه مانند زیر خواهد شد:

 اضافه کردن Listener برای منوی آیتم‌های Navigation Drawer برنامه

طبیعتا هدف از قرار دادن آیتم‌ها در Navigation Drawer انجام یک کاری معین به ازای کلیک روی هر آیتم است. برای اضافه کردن یک Listener برای تمام کلید‌ها و انجام عملیات مورد نظر در MainActivity و متد onCreate کدهای زیر را اضافه می‌کنیم:

        NavigationView navigationView = (NavigationView) findViewById(R.id.navigation_view);
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener(){
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()){
                    case R.id.menuitem1:
                        Toast.makeText(MainActivity.this, "صفحه اصلی کلیک شده است", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.menuitem2:
                        Toast.makeText(MainActivity.this, "خروج کلیک شده است", Toast.LENGTH_SHORT).show();
                        break;
                }
                return true;
            }
        });

 در سطر اول NavigationView را فراخوانی کردیم و در سطر دوم یک Listener برای آن تعریف کردیم.

در سطر‌های 5 الی 12 یک switch case برای تشخیص آیتم کلیک شده در برنامه خود ایجاد کردیم، که به محض کلیک روی هر آیتم یک پیام Toast مناسب نمایش داده می‌شود.

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

مطالب پرطرفدار مرتبط

گوشی های هوشمند

6 گوشی ارزان قیمت ولی بسیار خوب اندروید

اخبار فناوری

دانلود تلگرام اندروید، ویندوز و تلگرام فارسی پلاس

برنامه نویسی اندروید

آموزش برنامه نویسی Android قسمت بیست و یکم: ارتباط با سرور برای دریافت اطلاعات بخش دوم

برنامه نویسی اندروید

آموزش برنامه نویسی Android قسمت بیست و دوم: ارسال اطلاعات به سرور

برنامه نویسی اندروید

آموزش برنامه نویسی Android قسمت هشتم: ساخت لیست با ListView

برنامه نویسی اندروید

آموزش برنامه نویسی Android قسمت بیست و سوم: اندروید و پایگاه داده بخش اول