معرفی MaterialDrawer با پشتیبانی از راست به چپ در اندروید

برنامه‌هایی که از Drawer استفاده می‌کنند زیاد هستن و اکثرا این منوی پرکاربرد رو در سمت چپ برنامه قرار دادن (برنامه‌های فارسی البته) که از چپ به راست باز می‌شه. مدتی قبل به دنبال یک کتابخونه خوب با پشتیبانی از RTL می‌گشتم که اتفاقی این کتابخونه رو پیدا کردم.

چندتا از ویژگی‌هاش رو میگم:

• به‌راحتی با هر پروژه‌ای که دارید در مدت زمان خیلی کم integrate میشه.
• از اندروید ورژن ۱۰ به بالا پشتیبانی می‌کنه.
• امکان معرفی چندین پروفایل کاربری مثل برنامه جیمیل رو داره.
• و از همه مهمتر اینکه به راحتی راست به چپ یا اصطلاحا RTL میشه.

مراحل کار و سورس برنامه رو در Github به همراه تمامی commit‌هایی که انجام شده قرار دادم. هر گونه pull request در جهت بهبود برنامه پذیرفته می‌شود 🙂

قبل از هر چیز با استفاده از Android Studio یک پروژه جدید با یک activity از نوع empty ایجاد می‌کنیم:

وقتی که پروژه ایجاد شد و کار gradle تموم شد، برنامه رو اجرا کنید تا خروجی برنامه رو ببینید:

ابتدا خطوط زیر رو به gradle.build برنامه اضافه می‌کنیم:

compile 'com.android.support:design:23.1.1'
compile('com.mikepenz:materialdrawer:4.5.8@aar') {
       transitive = true
}
compile 'com.mikepenz:google-material-typeface:2.2.0.1@aar'
compile 'com.mikepenz:fontawesome-typeface:4.4.0.1@aar'

منتظر باشید تا کار sync کتابخونه‌ها تموم بشه.
بعدش به کلاس MainActivity دو متغییر زیر رو اضافه می‌کنیم:

 private AccountHeader headerResult = null;
 private Drawer result = null;

اولین متغییر برای تعریف حساب کاربری و هدر Drawer و دومی هم برای تعریف لیست منو مورد استفاده قرار می‌گیره. در ادامه مقدار دهی و تنظیمات هر کدوم توضیح داده میشه.
برای استفاده از قالب‌های ارائه‌شده توسط این کتابخانه فایل activity_main.xml رو به صورت زیر ویرایش کنید:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="ir.bkhezr.materialdrawerrtl.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

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

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

با این تغییر می‌توان به toolbar برنامه دسترسی پیدا کرد و مقادیرش رو به دلخواه تغییر داد. نکته دیگه مربوط به styleهای استفاده شده هست، این استایل‌ها در فایل styles.xml به صورت زیر تعریف شده‌اند:

<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

هدف از این تغییرات استفاده از برنامه به صورت تمام‌صفحه هست که در تنظیمات المان CoordinatorLayout به صورت android:fitsSystemWindows=”true” مشخص شده.
سپس به MainActivity کد زیر رو برای دسترسی به toolbar اضافه می‌کنیم:

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

برای اعمال استایل کتابخونه به فایل AndroidManifest.xml خط زیر را در بخش MainActivity اضافه می‌کنیم:

android:theme="@style/MaterialDrawerTheme.Light.DarkToolbar"

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

IProfile profile = new ProfileDrawerItem().withName("Behrouz Khezry").withEmail("bkhezry@gmail.com").withIcon(R.drawable.profile);

سپس کدهای زیر رو اضافه می‌کنیم:

headerResult = new AccountHeaderBuilder()
              .withActivity(this)
              .withCompactStyle(true)
              .addProfiles(
                      profile,
                      new ProfileSettingDrawerItem().withName("Add Account").withDescription("Add new Gmail Account").withIcon(new IconicsDrawable(this, GoogleMaterial.Icon.gmd_plus).actionBar().paddingDp(5).colorRes(R.color.material_drawer_dark_primary_text)).withIdentifier(1),
                      new ProfileSettingDrawerItem().withName("Manage Account").withIcon(GoogleMaterial.Icon.gmd_settings)
                )
              .withSavedInstance(savedInstanceState)
              .withTextColor(Color.BLACK)
              .build();
result = new DrawerBuilder()
              .withActivity(this)
              .withAccountHeader(headerResult) //set the AccountHeader we created earlier for the header
              .addDrawerItems(
                      new PrimaryDrawerItem().withName("Home").withIcon(FontAwesome.Icon.faw_home).withIdentifier(1),
                      new PrimaryDrawerItem().withName("Free Play").withIcon(FontAwesome.Icon.faw_gamepad),
                      new PrimaryDrawerItem().withName("Custom").withIcon(FontAwesome.Icon.faw_eye),
                      new SectionDrawerItem().withName("Section Header"),
                      new SecondaryDrawerItem().withName("Settings").withIcon(FontAwesome.Icon.faw_cog),
                      new SecondaryDrawerItem().withName("Help").withIcon(FontAwesome.Icon.faw_question).withEnabled(false),
                      new SecondaryDrawerItem().withName("Source").withIcon(FontAwesome.Icon.faw_github),
                      new SecondaryDrawerItem().withName("Contact").withIcon(FontAwesome.Icon.faw_bullhorn)
              )
              .withOnDrawerItemClickListener(new Drawer.OnDrawerItemClickListener() {
                  @Override
                  public boolean onItemClick(View view, int position, IDrawerItem drawerItem) {
                      if (drawerItem != null && drawerItem.getIdentifier() == 1) {
                       }

                       if (drawerItem instanceof Nameable) {
                            toolbar.setTitle(((Nameable) drawerItem).getName().getText(MainActivity.this));
                        }

                        return false;
                    }
                })
            .withSavedInstance(savedInstanceState)
            .withDrawerGravity(Gravity.END)
            .build();

دقت کنید که با تغییر Gravity.END منو از سمت راست باز میشه با تغییر این مقدار به Gravity.START منو از سمت چپ باز خواهد شد.

تقریبا برنامه‌مون آماده‌ست، برنامه رو اجرا می‌کنیم و خروجی برنامه به صورت زیر هست:

اگه دقت کنید متن toolbar به سمت راست نیومده و هنوز سمت چپ هست برای جابجا کردنش به سمت راست، من خودم یه ایده دادم شاید روش بهتر و ساده‌تری وجود داشته باشه، اگه هست توی کامنت بهم بگید، ممنون میشم.
من از menu استفاده کردم، ابتدا فایل menu_main.xml رو ایجاد می‌کنیم و کد زیر رو داخلش وارد می‌کنیم:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="ir.bkhezry.materialdrawerrtl.MainActivity">
    <item
        android:id="@+id/title"
        android:orderInCategory="100"
        android:title="MaterialDrawer"
        app:showAsAction="always" />
    <item
        android:id="@+id/drawershow"
        android:orderInCategory="100"
        android:title=""
        android:icon="@mipmap/ic_view_headline_white_48dp"
        app:showAsAction="always" />
</menu>

با این کار یک عکس و یک متن به ActionBar اضافه میشه. از عکس برای باز کردن Drawer و از متن برای نمایش عنوان برنامه استفاده می‌کنیم. دقت کنید که باید عنوان اصلی toolbar رو هم به صورت خالی در نظر بگیریم:

toolbar.setTitle("");
...
@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.menu_main, menu);
    return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
     int id = item.getItemId();
     if (id == R.id.drawershow) {
          result.openDrawer();
          return true;
     }
     return super.onOptionsItemSelected(item);
 }

برنامه رو اجرا می‌کنیم، خروجی برنامه به صورت زیر هست:

حتما به لینک اصلی کتابخونه مراجعه کنید، توضیحات خیلی بیشتری ارائه شده، همچنین اگه به بخش issue مراجعه کنید متوجه خواهید شد که ارائه‌دهنده این کتابخونه هیچ سوالی رو بی‌جواب نگذاشته.