شروع طراحی متریال

ساخت toolbar با طراحی متریال. تولبار متریال دیزاین style متریال استایل

سطح آموزش: #مقدماتی

برای داشتن یک برنامه متریال نیاز داریم که تم متریال رو روی برنامه‌مون اعمال کنیم. برای این منظور به پوشه styles.xml میریم و تمی که از متریال ارث‌بری میکنه رو انتخاب میکنیم.

قبل از پرداختن به بحث استایل توجه کنید که minimum skd رو روی ۱۵ یا بالاتر قرار بدید. sdk 15 در زمان نگارش این مقاله ۹۷٫۴% از کاربران رو پوشش میده.

بسیار خب. حالا باید کدهای زیر رو داخل کپی کنید:

کد

حالا یک فولدر داخل پوشه res درست کنید به اسمِ values-v21 و یک فایل styles.xml در آن ایجاد کنید و مقادیر زیر را در آن قرار دهید:

اگر با ورژن جدید اندروید استودیو کار میکنید فایل‌های colors.xml و dimens.xml به طور اتوماتیک برای شما ایجاد شده. در غیر اینصورت فایل‌ها را به شکل زیر ایجاد کنید:

کد

در فایل رنگ‌ها colorPrimary رنگ اکشن‌بار (یا تولبار در آینده‌ای نزدیک). colorPrimaryDark رنگ نوار ‌باریکِ بالای صفحه است که در گذشته همیشه سیاه بوده ولی اکنون میتوانیم آن را تغییر دهیم. navigationBarColor هم رنگ نوار باریک پایین صفحه‌ست که معمولا سیاه است و من نیز توصیه میکنم آن را تغییر ندهید.

اگر از ورژن جدید اندروید استودیو استفاده کنید به طور پیش فرض AppTheme روی برنامه اعمال می‌شود. در غیر اینصورت به manifest بروید و مطمئن شوید تم به درستی اعمال شده:

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

attributeهای مختلفِ تولبار کاملا مشخص هستند. مثلا ما رنگ background رو colorPrimary قرار دادیم یا طول اون رو اندازه سایز استانداردِ actionbar قرار داده‌ام. اگه بخوایم این مقادیر رو تغییر بدیم مشکلی نیست. فقط دقت کنید از استاندارد‌های طراحی فاصله نگیرید. مثلا یک تولبار دراز در بالای صفحه حالت مناسبی نداره. البته در آینده تولبارهایی رو آموزش میدم که با اسکرول جمع میشن.

بگذریم. حالا وقتش رسیده از داخل کد به تولبار دسترسی پیدا کنیم تا تغییرات دلخواه رو بدیم. قبل از اون به این سایت نگاهی بندازید. یک آیکون رو انتخاب و دانلود کنید. من در قسمت جستجو home رو وارد کردم و یک فایل فشرده از این آیکون رو دانلود کردم. آیکون‌ها رو به res اضافه کنید.

طراحی متریال طراحی متریال طراحی متریال

حال بیایید منوهای داخل تولبار رو طراحی کنیم. برای این منظور یک فولدر به اسم menu داخل پوشه res ایجاد کنید. سپس فایل menu_main.xml را در آن ایجاد کنید و کدهای زیر را وارد کنید:

کد

توجه کنید بخش title هارو به res/string اضافه کنید. میتوانید stringها رو بدون اضافه کردن به این پوشه و مستقیم وارد فایل xml کنید اما به این کار hard coding میگن. و چندان روش هوشمندانه‌ای نیست چون بعدا باید برای هر تغییر کوچیک تک تک فایل‌ها رو بگردید و stringها رو تغییر بدید.

 

حالا وارد فایل جاوا شده و کد‌های زیر رو کپی کنید:

کد

اکنون برنامه رو اجرا کنید. باید با تصویر زیر روبرو شوید:

طراحی متریال اندروید

 

ممکن هست که تولبار شما سایه ظریفی که تولبارِ من داخل این شکل داره رو نداشته باشه. برای اضافه کردنِ این سایه باید یک فایل جدید داخل res به اسمِ layout-v21 بسازید و فایل activity_main.xml رو در آنجا نیز مجددا بسازید. با این تفاوت که این بار یک attribute جدید نیز به آن اضافه میکنید:

با اضافه کردن این خط به تولبار یک سایه با ارتفاع ۲dp ایجاد میشود. توجه کنید این سایه یکی از اصلی‌ترین مفاهیم در طراحی متریال می‌باشد و شما حتما باید این کارو انجام بدید.

 

 

12 دیدگاه برای “شروع طراحی متریال

  1. با درود و باتشکر بابت زمانی که میگذارید
    یک پیشنهاد دارم که جزء برنامه های خودم در آینده است ولی چه بهتر که شما که دست به کار شده اید نیز بدانید شاید دوست داشته باشید و انجام دهید
    پیشنهادم اینه که به جای ذکر نکته ای و کلیدی مباحث طراحی یک پروژه طراحی استاندارد و جدید وحتی اندکی حرفه ای را انتخاب و از مرحله طراحی در فتوشاپ تا پیاده سازی در اندروید استودیو را آموزش دهید.
    این کار جدیدی خواهد بود و با اطمینان میگم نمونه ایرانی یا حتی خارجی بدین صورت تا کنون ندیده ام.
    موفق باشید.

    1. ممنون از توجه شما.
      پیشنهاد خیلی خوبیه. اتفاقا تصمیم داشتم آموزش‌هایی که الان میدم هم در ادامه هم باشه. مثلا بعد از این navigation drawer رو روی همین پروژه ادامه بدم. اما طراحی یک پروژه از پایه رو هم توی برنامه‌م قرار میدم.

    1. سلام.
      ممنون گفتی، فایل رو اشتباه گذاشته بودم. دوباره تست کن.
      سورس‌ کد رویِ گیت‌هاب هست. هروقت مشکل داشتی میتونی بری کد رو نیگا کنی. تو صفحه راهنما لینکش رو پیدا میکنی.
      البته مشکلی بود به منم بگو که تصحیح کنم 🙂

پاسخ دهید

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