در مطلب قبلی درباره بخش‌هایی از امکانات کتابخانه پشتیبان طراحی یا همان Design Support Library نوشتم. در این مطلب بخش‌هایی دیگر از امکانات این کتابخانه را توضیح می‌دهم و در مطلب بعدی با هم یک پروژه واقعی با این کتابخانه خواهیم ساخت.

Snackbar

برای دادن یک بازخورد سریع و آسان برای یک عملیات به طوری که مزاحم عملکرد عادی کاربر نباشد و اصطلاحاً دست و پای او را نبندد تا الان از Toast استفاده می‌کردیم. Snackbar همان Toast است با امکانات بیشتر و اجرای روان‌تر.

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

[iframe src=”http://material-design.storage.googleapis.com/publish/material_v_3/material_ext_publish/0B6Okdz75tqQsLVVnZlF4UEtKRU0/components_snackbar_specs_fabtablet_002.webm” allowFullScreen=”true” webkitallowfullscreen=”true” mozallowfullscreen=”true” height=”360″ width=”640″ iframe]

برای نشان دادن اسنک‌بار در برنامه کدی مشابه زیر باید بنویسید:

Snackbar
  .make(parentLayout, R.string.snackbar_text, Snackbar.LENGTH_LONG)
  .setAction(R.string.snackbar_action, myOnClickListener)
  .show(); // Don’t forget to show!

Tabs یا قفسه‌ها

جابجایی بین نماهای مختلف در برنامه از طریق Tabs مفهوم جدیدی در طراحی متریال نیست و از قدیم به عنوان یک الگوی جابجایی سطح بالا یا برای سازماندهی گروه‌های مختلفی از محتوا در برنامه از آن استفاده می‌شده است. مثلاً در یک برنامه پخش‌کننده موسیقی برای جدا کردن فهرست موسیقی‌ها بر اساس خواننده، سبک، آلبوم و … از Tabs استفاده می‌کنیم.

TabLayout یکی از اجزای این کتابخانه است که هم تب‌های با عرض ثابت که عرض کل صفحه به صورت مساوی بین تب‌ها تقسیم می‌شود و هم تب‌های افقی اسکرول شدنی که در آن عرض تب‌ها ثابت نیست و تب‌ها به صورت افقی اسکرول می‌شوند را پیاده‌سازی کرده است. تب‌ها را در برنامه به صورت زیر به TabLayout اضافه می‌کنیم:

TabLayout tabLayout = ...;
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));

در بخش بعدی این مطلب یک مثال کاربردی از ترکیب Tab و ViewPager را به شما نشان خواهم داد.

CoordinatorLayout، حرکت‌ها و اسکرول کردن

نمایش‌های دیداری متمایز فقط یکی از اجزای طراحی متریال است: حرکت از دیگر اجزای مهم ساختن یک برنامه متریالی است. کتابخانه پشتیبان طراحی (Design Support Library) چیدمان یا Layout جدیدی را معرفی کرده است که کنترل بیشتری بر حرکت اجزای مرتبط با هم در صفحه در اختیار برنامه‌نویس می‌گذارد: CoordinatorLayout

در این قسمت ارتباط CoordinatorLayout با تعدادی از عناصر طراحی متریال را بررسی می‌کنیم:

CoordinatorLayout و floating action buttons

اگر FAB را در چیدمان خود استفاده می‌کنید، ممکن است گاهی سایر عناصر صفحه بر روی آن قرار بگیرند. مثال بارز این مورد اسنک‌بار است. اسنک‌بار و FAB هر دو در پایین صفحه قرار می‌گیرند و زمانی که اسنک بار نشان داده می‌شود، اسنک بار قسمت عمده FAB را می‌پوشاند که مشکل بزرگی در طراحی و تجربه کاربری به وجود می‌آورد. برای حل این مشکل چیدمان کل صفحه را از نوع CoordinatorLayout انتخاب می‌کنیم و این Layout را به عنوان والد یا parent به اسنک‌بار می‌دهیم. حالا هر زمان که اسنک‌بار نمایش داده می‌شود، FAB به صورت خودکار بالا می‌رود و با محو شدن اسنک‌بار دوباره به جای اصلی خود برمی‌گردد:

[iframe src=”http://material-design.storage.googleapis.com/publish/material_v_3/material_ext_publish/0B6Okdz75tqQsLWFucDNlYWEyeW8/components_snackbar_usage_fabdo_002.webm” allowFullScreen=”true” webkitallowfullscreen=”true” mozallowfullscreen=”true” height=”360″ width=”640″ iframe]

CoordinatorLayout و app bar (نوار برنامه)

یکی دیگر از کاربردهای اصلی CoordinatorLayout مربوط به نوار برنامه یا App Bar است که جایگزین ActionBar شده است. شما ممکن است همین حالا از Toolbar در برنامه‌تان استفاده کرده باشید. Toolbar امکانات فراوانی برای شخصی سازی دارد و مزایای آن بر ActionBar نیاز به توضیح اضافه ندارد. حالا به کمک CoordinatorLayout و App Bar می‌توانید بین Toolbar و سایر اجزای صفحه ارتباط برقرار کنید و حرکت‌های نرم و زیبایی به اجزای صفحه بدهید.

برای مثال فرض کنید شما یک لیست از عناصر اسکرول‌شدنی با RecyclerView ساخته‌اید. صفحه شامل Toolbar و Tab Bar است. احتمالا در بعضی برنامه‌ها دیده‌اید که با اسکرول کردن لیست، Toolbar به آرامی از صفحه خارج می‌شود تا جای بیشتری برای سایر عناصر لیست در صفحه باز شود. این کار با کمک CoordinatorLayout و AppBarLayout و بدون یک خط کد برای کنترل اسکرول لیست و … انجام می‌شود. قطعه کد زیر می‌تواند به درک این موضوع کمک کند:

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto" ...>

     <! -- Your Scrollable View -->
    <android.support.v7.widget.RecyclerView
        app:layout_behavior="@string/appbar_scrolling_view_behavior" ... />

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

        <android.support.v7.widget.Toolbar ...
                  app:layout_scrollFlags="scroll|enterAlways">

        <android.support.design.widget.TabLayout ...
                  app:layout_scrollFlags="scroll|enterAlways">

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

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

حالا CoordinatorLayout مسئولیت کنترل اسکرول همه اجزا را بر عهده می‌گیرد و شما بدون هیچ کدی و هیچ کار بیشتری می‌توانید به سادگی حرکتی که در برنامه‌هایی مثل Gmail و Google Play Store می‌بینید در برنامه خودتان داشته باشید. البته با کمک app:layout_scrollFlags و مقادیری که برای آن تعیین می‌:نید می‌توانید این رفتار را کنترل بکنید که در مطلب بعدی با مقادیر مختلف این ویژگی بیشتر آشنا می‌شوید.

ویدئوهای زیر را ببینید:

[iframe src=”http://material-design.storage.googleapis.com/publish/material_v_3/material_ext_publish/0B0NGgBg38lWWcFhaV1hiSlB4aFU/patterns-scrollingtech-scrolling-070801_Flexible_Space_xhdpi_003.webm” allowFullScreen=”true” webkitallowfullscreen=”true” mozallowfullscreen=”true” height=”360″ width=”640″ iframe]

[iframe src=”http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQscXNQY3dNdVlYeTQ/patterns-scrolling-techniques_flex_space_image_xhdpi_003.webm” allowFullScreen=”true” webkitallowfullscreen=”true” mozallowfullscreen=”true” height=”360″ width=”640″ iframe]

چطور از Design Support Library در برنامه استفاده کنیم؟

فرض می‌کنم از اندروید استودیو استفاده می‌کنید (بالاخره مجبور خواهید شد به Android Studio کوچ کنید، پس هر چه زودتر بهتر!) برای استفاده از  Design Support Library در اندروید استودیو کافی است خط زیر را به گریدل (Gradle) برنامه اضافه کنید:

compile 'com.android.support:design:23.0.0'

به زودی در یک مطلب جداگانه نحوه کار با اندروید استودیو را توضیح خواهم داد. نگران نباشید!