دوره های آموزشی
خانه / اندروید / آموزش اندروید متریال دیزاین (Material Design)

آموزش اندروید متریال دیزاین (Material Design)

آموزش اندروید متریال دیزاین (Material Design)

در این  آموزش اندروید به مبحث متریال دیزان می پردازیم ، احتمالا تا به حال عنوان متریال دیزاین را که در ورژن Lollipop اندروید معرفی شده شنیده اید . در متریال دیزاین ابزارهای زیادی همچون متریال تم (Material Theme) ویجکت های (widgets) جدید ، وکتور ها و انیمیشن های سفارشی معرفی شده اند. در صورتیکه علاقه مند به یادگیری این مبحث هستید این مقاله می تواند شروع خوبی برای شما باشد.

دانلود پروژه

این آموزش اندروید مراحل ایجاد تم های سفارشی در متریال دیزاین و همچنین نحوه اعمال  navigation drawer با استفاده از RecyclerView می پردازد.

  1. دانلود و نصب اندروید استدیو
    قبل از شروع آموزش نیاز به دانلود و نصب اندروید استدیو می باشد در صورتیکه اندروید استدیو نصب نیست می توانید برای آموزش و نصب آن از این لینک استفاده کنید . آموزش نصب Android Studio و آشنایی با آن
  2. رنگ های سفارشی شده در متریال دیزاین متریال دیزاین ویژگی های مختلفی را جهت سفارشی کردن رنگ ها در اختیار برنامه نویس قرار می دهد اما ما از  5 ویژگی اصلی برای سفارشی کردن تم استفاده خواهیم کرد .
    colorPrimaryDark : از این ویژگی برای اعمال رنگ تیره به notification bar استفاده می شود.
    colorPrimary : رنگ اصلی app را مشخص می کند.این رنگ به پس زمینه toolbar  اعمال می شود.
    textColorPrimary : رنگ اصلی برای متن ها می باشد. از آن برای اعمال رنگ برای عنوان تولبار استفاده خواهد شد.
    windowBackground : رنگ پیش فرض پس زمینه app را مشخص می کند.
    navigationBarColor : برای تعریف رنگ پس زمینه فوتر در navigation bar استفاده می شود.
    آموزش متریال دیزاین(اندروید)
  3. ایجاد theme با متریال دیزاین
    1- در اندروید استدیو به مسیر File => New Project رفته و تمام مراحل ایجاد پروژه را طی کرده و در هنگام ایجاد اکتیویتی نوع آن را Blank Activity  در نظر بگیرید.
    2 – فایل res ⇒ values ⇒ strings.xml را باز کرده و کد های زیر را در آن وارد کنید. این کدها مربوط به تعریف رشته ها در اپلیکیشن می باشند:
    3- فایل res ⇒ values ⇒ colors.xml را باز کرده و کدهای پایین را در آن وارد کنید این کدها مقادیر رنگ ها را در app ما مشخص می کنند در صورتیکه این فایل colors.xml وجود نداشت یک فایل منبع (resource file) با همین نام ایجاد کنید.
    4- فایل res ⇒ values ⇒ dimens.xml را باز کرده و کدهای پایین را به آن اضافه کنید این کدها مربوط به ابعاد آیتم ها (اکتیویتی ها و راهبر ها و ..) می باشد.
    5- فایل styles.xml را از مسیر res ⇒ values باز کرده و استایل های پایین را به آن اضافه کنید. style ها یا شیوه های نمایش در فایل styles.xml  تعریف شده و در تمام ورژن های اندروید وجود دارند همچنین نام این تم تعریف شده را MyMaterialTheme قرار می دهیم .
    6-  حال در داخل پوشه res ، پوشه ای با نام values-v21 ایجاد کنید . و سپس در داخل پوشه  values-v21 فایلی با نام styles.xml ایجاد کرده و کدهای استایل زیر را در آن وارد کنید . این استایل ها تنها در ورژن Android Lollipop تعریف شده اند.
    7- تا اینجا بخش های مقدماتی متریال دیزاین را آماده کرده ایم برای اعمال تم ایجاد شده به app فایل AndroidManifest.xml را باز کرده و ویژگی android:theme را در تگ <application> به مقدار زیر تغییر دهید  
    بعد از اعمال تم بالا فایل AndroidManifest.xml باید به شکل زیر باشد .
    حال اگر app را اجرا کنید باید رنگ notification bar  به رنگی که در  تم اعلام کردیم تغییر کرده باشد.
    آموزش android متریال دیزاین

     

    افزودن اکشن بار (Action Bar) نوار ابزار 
    افزودن نوار ابزار toolbar  بسیار ساده است .  تنها کاری که باید انجام شود،  ایجاد یک فایل لایوت برای نوار ابزار toolbar  و افزودن آن به لایوت هایی که قصد نمایش نوار ابزار را در آنها داریم .
    8- یک فایل xml  با نام toolbar.xml در مسیر res ⇒ layout ایجاد کرده  و سپس المان

    را به آن اضافه کنید

    فایل لایوت  اکتیویتی اصلی (activity_main.xml) را باز کرده و نوار ابزار toolbar  را با استفاده از تگ<include/> به آن اضافه کنید

    app را اجرا کنید و چک کنید که آیا نوار ابزار نمایش داده می شود یا خیر .

    متریال دیزاین اندروید
    حال عنوان نوار ابزار را مشخص کرده و یک آیتم به نوار ابزار اضافه خواهیم کرد .
    10- آیکن جستجو  را دانلود کرده و آنرا به اندروید استدیو ایمپورت کنید .
    11- برای ایمپورت کردن تصویر در اندروید استدیو برروی res راست کلیک کرده , و به  res ⇒ New ⇒ Image Asset   بروید سپس پنجره برای ایمپورت کردن منابع نمایش داده خواهد شد. در قسمت Image File مسیر فایل آیکون که در بخش قبل دانلود کردید را اعلام کنید و در قسمت Asset Type گزینه Action Bar and Tab Icons را انتخاب کرده و همچنین نام آنرا ic_search_action قرار دهید .

    آموزش متریال دیزاین
    بعد از ایمپورت کردن آیکون فایل menu_main.xml را از مسیر res ⇒ menu باز کرده و گزینه جستجو در منو را طبق کدهای زیر ایجاد کنید.

    13- حال فایل MainActivity.java را باز کرده و تغییرات زیر را در آن اعمال کنید:
    اکتیویتی از AppCompatActivity ارث بری داشته باشد.
    – با فراخوانی setSupportActionBar() و پاس دادن شئی toolbar  به ان نوار ابزار را فعال کنید.
    با دوباره نویسی متدهای onCreateOptionsMenu() و onOptionsItemSelected() آیتم های نوار ابزار را فعال کنید.

    بعد از اعمال تغییرات بالا و اجرای app  شما باید آیکون جستجو را در نوار ابزار ببینید.


    افزودن Navigation Drawer
    افزودن navigation drawer مانند روال های قبل از lollipop می باشد با این تفاوت که به جای استفاده از ListView  برای منو ما از   RecyclerView  متریال دیزاین استفاده خواهیم کرد . در ادامه نشان خواهیم داد که چگونه navigation drawer با استفاده از RecyclerView ایجاد کنیم .
    14-در پوشه جاوا سه پکیج activity, adapter, model ایجاد کرده و فایل MainActivity.java را به پکیج اکتیویتی انتقال دهید. این کار برای سازماندهی بهتر پروژه  است .
    15- فایل build.gradle که در مسیر ماژول app  قرار دارد باز کرده و وابستگی زیر را به آن اضافه کنید. بعد افزودن این وابستگی به مسیر Build ⇒ Rebuild Project رفته تا کتابخانه های مورد نیاز دانلود شوند.

    16. در پکیج model  کلاسی با نام NavDrawerItem.java با کدهای زیر ایجاد کنید. در این کلاس سطر های منوی navigation drawer تعریف شده است.

     

    17- در مسیر res ⇒ layout یک فایل لایوت xml  با نام nav_drawer_row.xml ایجاد کرده و کد های پایین را به آن اضافه کنید. لایوت ایجاد شده وظیفه رندر کردن هر سطر از منوی navigation drawer را بر عهده دارد. در صورتیکه می خواهید navigation drawer را با توجه به نیازتان تغییر دهید باید این فایل را تغییر دهید در حال حاضر این فایل تنها یک TextView دارد.

    18- آیکون پروفایل را دانلود کرده آن را در پوشه drawable کوپی کنید . البته این مرحله اختیاری است و ما از این آیکون برای استفاده در هدر navigation drawer استفاده می کنیم .
    19- یک فایل لایوت xml دیگر با نام fragment_navigation_drawer.xml ایجاد کرده و کدهای پایین را به آن اضافه کنید .  از این لایوت برای رندر کردن کامل navigation drawer استفاده خواهیم کرد . این فایل لایوت شامل بخش هدر برای نمایش اطلاعات کاربر و RecyclerView برای نمایش لیست ویو می باشد .

     

    20- تا به اینجا ی کار RecyclerView را با توجه به نیاز تغییر دادیم در مرحله بعد نیاز به یک کلاس adapter برای رندر کردن لایوت xml داریم . در پکیج adapter  یک کلاس با نام NavigationDrawerAdapter.java ایجاد کرده و کدهای پایین را به آن اضافه کنید. این  کلاس adapter  برای مرتبط کردن nav_drawer_row.xml و همچنین رندر کردن RecycleView با drawer می باشد .

    21- در پکیج activity ، یک فرگمنت با نام FragmentDrawer.java ایجاد کنید. برای ایجاد فرگنت در اندروید استدیو برروی activity راست کلیک کرده و به مسیر activity ⇒ New ⇒ Fragment ⇒ Fragment (Blank بروید و یک نام برای فرگمنت انتخاب کنید.

     

    22- در پایان فایل لایوت اکتیویتی اصلی (main activity) را باز کرده و آن را با توجه به کدهای پایین تغییر دهید. در این لایوت با  افزودن  android.support.v4.widget.DrawerLayout به لایوت ،  navigation drawer به نمایش در خواهد امد.
    همچنین دقت کنید که مسیر صحیح FragmentDrawer در المان <fragment> اعلام کنید.

     

    تا به اینجای کار تمام فایل های لایوت و کلاس های جاوا ایجاد شده و آماده استفاده می باشند. حال باید تغییرات لازم را در MainActivity برای شروع به کار navigation drawer اعمال کنیم.
    23- MainActivity.java را باز کرده و تغییرات زیر را در آن اعمال کنید.
    > اکتیویتی باید اینتر فیس FragmentDrawer.FragmentDrawerListener را Implement کرده و متد onDrawerItemSelected() را دوباره نویسی کنیم .
    > یک نمونه از FragmentDrawer را ایجاد کرده و drawer selected listeners ایجاد شده را برای ان ست کنید.

    اکنون اگر app را اجرا کنید  navigation drawer به همراه هدر آن و چند آیتم ایجاد شده در آن را خواهید دید.

    android-material-design
     پیاده سازی رویداد انتخاب گزینه های Navigation Drawer
    تا به اینجای پروژه Navigation Drawer کار خواهد کرد و به نمایش در خواهد امد اما در صورتیکه یک آیتم از لیست را انتخاب کنید عمل نخواهد کرد به این دلیل که هنوز listener مربوط به آیتم های RecyclerView را پیاده سازی نکردیم.
    از آنجایی ما سه آیتم در منوی navigation drawer به نام های Home و Friends و Message داریم نیاز به ایجاد 3 فرگمنت جدا برای هر یک از آیتم های منو وجود دارد .
    24- در قسمت res لایوت ، یک فایل xml با نام fragment_home.xml ایجاد کرده و کدهای زیر را به آن اضافه کنید .

    25- در پکیج activity ، یک فرگمنت با نام HomeFragment.java ایجاد کرده و کدهای پایین را به آن اضافه کنید.

    26- دو فرگمنت دیگر با نام های FriendsFragment.java ، MessagesFragment.java به همراه فایل های لایوت با نام های fragment_friends.xml و fragment_messages.xml ایجاد کرده و کدهای 2 مرحله قبل را به آن اضافه کنید.
    27-
    حال فایل MainActivity.java را باز کرده و تغییرات زیر را در ان اعمال کنید:
    >
    متد displayView() فرگمنت انتخاب شده در navigation menu را نمایش خواهد داد. این متد باید onDrawerItemSelected() را فراخوانی کند تا بر اساس انتخاب کاربر ویو مورد نظر را نمایش دهد.

     

    حال اگر app را اجرا کنید خواهید دید  انتخاب گزینه های   navigation drawer  عمل خواهد کرد.

    آموزش متریال دیزاین
    متریال دیزاین

  4. دانلود پروژه

درباره ی محمد آذرنیوا

من محمد آذرنیوا، نویسنده و مدرس دوره های برنامه نویسی ، طراحی وب و تحلیل گر پایگاه داده هستم و قصد دارم در این وبسایت مطالب کاربردی در این زمینه را با شما به اشتراک بگذارم. بیشتر از یک برنامه نویس باشید...

همچنین ببینید

فیلم آموزش برنامه نویسی

فیلم آموزشی ساخت اپلیکیشن اندروید (اپلیکیشن چت)

با مشاهده فیلم آموزشی ساخت اپلیکیشن اندروید شما هر آنچه که نیاز برای ساخت اپلیکیشن ...

پاسخ دهید

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