متریال دیزاین یک سبک و زبان جدید طراحی هست که در سال ۲۰۱۴ توسط گوگل توی یکی از کنفرانس های خبریش معرفی شد، توی این نوع طراحی، از انیمیشین ها، سایه ها، حرکت و انتقال المان ها و طراحی های زیبا خاص استفاده شده و تا به اینجا میشه گفت بهترین نوع سبک طراحی هست که جلوه های زیبایی میتونه به طرحتون بده!

این سبک طراحی بروز و مدرن، به سیستم گرید ها و انیمیشن ها اهمیت زیادی داده و سایه ها و عمق ها هم توی طراحی المان ها خیلی براش مهمه! یه جورایی میتونیم بگیم نسخه بروزشده ای از طراحی تخت یا همون فلت (Flat Design) هست ولی با تغییرات گسترده تر به طوری که خیلی زیباتر و حرفه ای تر با انیمیشین ها و جابجایی المان ها کار کرده است.

راه اندازی پروژه

فایل build.gradle پروژه خود را باز کنید و کتابخانه Design Support را در بخش وابستگی ها(dependencies) اضافه کنید. سپس پروژه را Sync(همگام سازی) کنید.

تم AppCompat و رنگ ها

در جدیدترین نسخه های اندروید استودیو به طور پیش فرض استایلی به نام  AppTheme برای کل برنامه در AndroidManifest.xml تنظیم شده است:
بر روی style/AppTheme@ کلیک کرده تا فایل منبع که در پوشه /res/values/styles.xml برنامه شما قرار دارد را ببینید.

تم AppCompat و رنگ ها

همانطور که می توانید ببینید، تم ما یک والد به نام Theme.AppCompat.Light.Dark ActionBar دارد (به راحتی می توانید این مورد را با استفاده از تکمیل خودکار کد(autocompletion) برای دیدن دیگر تم های موجود اصلاح کنید) و سه رنگ سفارشی را تعریف می کند: colorPrimary، colorPrimaryDark و colorAccent.

این یک قرارداد معرفی شده با استفاده از متریال دیزاین و AppCompat است که به ما اجازه می دهد تا الگوی رنگ کل برنامه را تغییر دهیم. تم AppCompat یک خروجی پشتیبان از تم متریال (تنها در Android ۵.۰ و بالاتر) برای استفاده در پلت فرم های قدیمی تر و بهترین راه برای سازگاری با نسخه های پایین اندروید است.
توجه داشته باشید که ویرایشگر تمام موضوعات پروژه را در بخش اصلاح تم ویرایش می کند. اگر بر روی Open editor کلیک کنید، ویرایشگر تصویری را نشان می دهد که با پیش نمایشی از اجزای بصری به پیدا کردن الگوی رنگ مناسب کمک می کند. این ابزاری بسیار مفید است.

متریال دیزاین و AppCompat
برای اینکه یک طرح رنگ را به صورت دستی طراحی کنید، همیشه می توانید به /res/values/colors.xml بروید و مقادیر را اصلاح کنید و یا آن هایی را که به ویژگی های پوسته شباهت دارند را درstyles.xml اضافه کنید.

تولبار

تولبار جایگزینی برای اکشن بار است که در اندروید API 21) Lollipop) معرفی شد. بر خلاف اکشن بار، تولبار یک view است و مانند سایر view ها در layout تعریف می شود. به همین دلیل توسعه دهنده به سادگی می تواند تولبار را در هرجای اکتیویتی که مدنظر دارد اضافه کند و خواص مورد نیاز را نیز به تولبار اختصاص دهد. تولبار و اکشن بار در ظاهر تفاوتی با یکدیگر ندارند و فقط نحوه اضافه کردن آنها به اکتیویتی متفاوت است. در واقع تولبار Extends شده از ViewGroup هست که می تواند حاوی ویجت های دل خواه در درون خود باشد و در هر جایی از چیدمان برنامه شما قرار داده شود.

Include(افزودن) کردن تولبار

پوسته و تم Theme.AppCompat.Light.DarkActionBar که ما در حال حاضر از آن استفاده می کنیم نوار اکشن را ارایه می دهد. اکنون میخواهیم آن را در styles.xml به Theme.AppCompat.Light.NoActionBar تغییر دهیم. در حال حاضر هیچ نوار اکشن مشخصی به صفحه اکتیویتی ما اضافه نشده است، بنابراین باید آن را به عنوان ویجتی دیگر در لایوت اضافه کنیم.

ما نوار ابزار(تولبار) را اضافه کرده و تکست ویوی متناظر با آن را با خاصیت android:layout_below=”@id/toolbar به زیر آن جابجا کردیم. همانطور که می بینید در حال حاضر چیزی وجود ندارد.

تولبار متریال دیزاین

نوار ابزار می تواند به عنوان اکشن بار برای اکتیویتی تنظیم شود، اما این کار باید از طریق کد انجام شود. فایل MainActivity.java را اصلاح کنید. توجه کنید همانند کدهای زیر پکیج پشتیبان شامل ویجت تولبار می باشد:

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

مورد popupTheme در قسمت بعدی کارساز است.

راه اندازی اکشن منو

به منظور فراهم کردن اقدامات سفارشی در نوار ابزار، باید همان مراحلی که نوار اکشن به آن نیاز دارد را انجام دهیم:

  • تعریف XML
  • پیاده سازی متد های callback در اکتیویتی

یک فایل منبع res/menu/main.xml ایجاد کنید.

دو متد لازم را در MainActivity.java اضافه کنید.

اکنون باید آیتم های اکشن را در تولبار ببینید.

 

 شخصی سازی تولبار

از آنجا که این یک جزء عادی ViewGroup است، می توانیم سلسله مراتب دلخواه را درون آن ایجاد کنیم. محل نوار ابزار را در activity_main.xml اصلاح کنید.

در MainActivity.java، به متد ()onCreate مراجعه کنید و عنوان تولبار را پنهان کنید:

لطفا توجه کنید که ما از SupportActionBar استفاده می کنیم. این به ما در این مورد خاص یک ارجاع به اکتیویتی اکشن بار می دهد. این یک نمونه تولبار است که کاملا با API اکشن بار سازگار است. نتیجه نهایی باید شبیه این باشد:

شخصی سازی تولبار

TextInputLayout

برچسب های شناور (floating labels) یکی دیگر از قابلیت های متریال است. این قابلیت همانند یک اشاره (hint) روی EditText ها وجود دارد و هنگام لمس و کلیک بر روی آن با حالتی متحرک (animating) به بالای EditText رفته و دید بسیار جالبی به برنامه می‌دهد. با استفاده از این عنصر میتوانیم طرحی جذاب و کاربر پسند را به برنامه‌ی خود اضافه کنیم. میخواهیم با استفاده از عنصر TextInputLayout این ویژگی را به برنامه ی خود اضافه کنیم:

کد زیر را در انتهای متد ()onCreate اضافه کنید.

این کد:

  • یک شمارشگر به تکست ویو اضافه کرده و حداکثر تعداد کاراکتر را تنظیم و فعال می کند.
  • یک پیغام خطا را اضافه کرده که به طور معمول باید به صورت پویا در پاسخ به نوعی از روش اعتبار سنجی انجام شود.

نتیجه نهایی چیزی شبیه این است:

TextInputLayout

Floating Action Button

Floating Action Button یا دکمه شناور که به اختصار FAB نیز نامیده می شود یکی دیگر از کامپوننت های معرفی شده در متریال دیزاین اندروید است. همانطور که از نام آن پیداست، یک دکمه شناور است که مکان قرارگیری آن در صفحه توسط توسعه دهنده تعیین شده و با اسکرول کردن صفحه جابجا نمی شود (مگر به خواست خود توسعه دهنده). این نوع دکمه عموما در اپ هایی مانند پیام رسانها و مدیریت ایمیل استفاده می شود. مانند اپلیکیشن Gmail:

FAB را در انتهای فایل لایوت اضافه کنید.

 

بیایید OnClickListener را در متد ()onCreate اکتیویتی اصلی(MainActivity) اضافه کنیم.

همانطور که می توانید ببینید، FAB ویژگی های اضافی انیمیشن در هنگام پنهان شدن و یا به نمایش در آمدن را دارد.

Floating Action Button

Snackbar

یکی از ابزار هایی که در طراحی Material بسیار مورد استفاده قرار می‌گیرد، اسنک بار است. کاربرد SnackBar مانند Toast است. در واقع برای نمایش یک پاسخ و یا بازخورد استفاده می‌شود اما در شیوه نمایش متفاوت هستند.

Snackbar را میتوان level بعدی Toast دانست که می تواند به طور خلاصه بر روی صفحه ظاهر شود و هنگام کلیک کردن بر روی آن یک اقدام اختیاری داشته باشد. معمولا برای تایید اقدامات، مانند بایگانی کردن یک ایمیل و یا ارسال یک پیغام استفاده می شود و علاوه بر این، یک عمل باز سازی (undo) برای آنچه که انجام داده ایم را فراهم می کند. کاربرد آن به این دلیل ساده است که رابط کاربری(API) مشابه نمونه های قبلی خود دارد. بخشی از کد مربوط به FAB را از بخش قبلی تغییر دهید:

پارامترهای Snackbar.LENGTH، را با کمک تنظیم کننده کمکی(helper setters) اندروید استودیو برای تنظیم رنگ های مختلف متن و مدت زمان سفارشی نمایش اسنک بار به روش های متفاوت تغییر دهید. همانطور که می بینید:

  • به جای Context، یک View برای ساختار Snackbar فراهم می کنیم (بخش بعدی را ببینید).
  • متن اکشن با حروف بزرگ نوشته شده است(Hide).
  • نوار Snackbar بدون هیچ تغییری در چیدمان XML در پایین صفحه ظاهر شد.
  • به طور پیش فرض، همه چیز را تحت پوشش قرار می دهد. در اینجا استفاده از FAB خوب نیست، اما ما در بخش بعدی آن را رفع خواهیم کرد

Snackbar

CoordinatorLayout

چیزی که ما در بخش قبلی کم داشتیم یک CoordinatorLayout بود. CoordinatorLayout  لایه قدرت و توسعه یافته FrameLayout است در CoordinatorLayout برنامه نویس به راحتی می تواند view های child را کنترل کند و همینطور انیمیشن ها مختلف بهتر پشتیبانی می شود و به سادگی می توان animations و transitions را به صورت sequence های پشت سرهم بدون هیچ تیک و گیری اجرا کرد همینطور این layout (لایه) امکان کنترل پیشرفته کلیک (Touch) بین child views فراهم می کند و ما اکنون می خواهیم از آن استفاده کنیم.
فایل activity_main.xml را برای مطابقت با CoordinatorLayout اصلاح کنید و fab را از RelativeLayout مرتبط که حاوی اجزای دیگر است استخراج کنید.

ما FAB را به یک CoordinatorLayout در XML متصل کردیم، حالا باید آن را به عنوان یک view مرجع برای Snackbar در ()onCreate تنظیم کنیم.

به لطف رفتارهای پیش فرض و CoordinatorLayout، وقتی اسنک بار روی صفحه ظاهر می شود fab را به سمت بالا هل می دهد.

CoordinatorLayout

 

PercentRelativeLayout

PercentRelativeLayout یک مورد اضافی منظم از SupportLibrary است که (در نهایت) به ما اجازه می دهد تا ابعاد نسبی را به عنوان درصدی از فضای موجود تعریف کنیم.
وابستگی لازم را به فایل build.gradle اضافه کنید.

RelativeLayout را به PercentRelativeLayout تغییر داده و عرض نوار ابزار (فقط برای سرگرمی) را با جایگزین کردن مشخصه “app:layout_widthPercent=”80% با “android:layout_width=”wrap_content تغییر دهید.

صفحه نمایش را بچرخانید تا ببینید آیا عرض تولبار برنامه همچنان با عرض کلی برابر است یا خیر. نتیجه نهایی باید شبیه این باشد.

PercentRelativeLayout
شما می توانید با استفاده از این ویژگی ها با خطاها برخورد کنید:

متریال دیزاین
این خطاها زمانی از بین می روند که ابزار به روزرسانی شوند و کتابخانه درصد را تشخیص دهد، با این حال کامپایل واقعی باید بسیار خوب انجام شود.

خلاصه:
در این مقاله آموزشی اصول اولیه متریال دیزاین را یاد گرفتید که به طور قابل توجهی ظاهر برنامه های کاربردی مدرن اندروید و نیز تعامل با کاربران را تغییر داده است. شما اکنون می توانید از محبوب ترین بلوک های کاربردی ارائه شده توسط اندروید برای استفاده از کتابخانه Design Support در جدیدترین و قدیمی ترین دستگاه های اندروید استفاده کنید. کد منبع برای این مقاله آموزشی را می توانید بر روی GitHub پیدا کنید.

این خبر را به اشتراک بگذارید :