آموزش ساخت Navigation Drawer متریال دیزاین در برنامه نویسی اندروید

امتیاز 4.00 ( 3 رای )

سلام دوستان در این سری از آموزش برنامه نویسی اندروید به آموزش ساخت Navigation Drawer متریال دیزاین در برنامه نویسی اندروید می پردازیم در ادامه با ما همراه باشید.
در این جا ما 3 تا فرگمنت داریم که کاربر با کلیک کردن منو وانتخاب یکی از sub منو ها وارد آن فرگمنت ها میشه بدون افکت باز شدن اکتیویتی یعنی عملی شبیه به tab اتفاق می افتد. و ما برای بهتر شدن پروژه (متریال شدنش) از recyclerView نیز استفاده کردیم.
پس مثل همیشه وارد build.gradle شده (module) و در بخش dependencies کتاب خانه های زیر را اضافه کنید.

سپس پروژه را sync کنید علت خطاهای گریدل را قبلا بررسی کرده ایم.
در ایتدا باید فایل های مربوط به layout و Navigation Drawer و فرگمنت ها را ایجاد می کنیم.
پس فایل activity_main.xml ما همانند زیر می شود.

همانطور که میبیند یک LinearLayout است در ابتدا که همان صفحه اصلی ما میشود سپس داخل آن یک LinearLayout دیگر قرار دادیم تا Toolbar را در آن جا بندازیم و FrameLayout هم صفحه اصلی میشه در زیر toolbar هر چیزی در آن قرار دهید با اجرای برنامه به شما نمایش داده می شود و در آخر هم یک fragment ایجاد کردیم و این فرگمنت ما سفارشی است پس باید یک فایل به نام fragment_navigation_drawer.xml درست کرده و کد های زیر را در آن قرار دهید.

کد بالا همون بخش menu رو درست می کنه یعنی وقتی روی menu کلیک کنید Navigation در آور باز می شود و محتوایت آن می باشد که شامل یک عکس و یک RecyclerView است خود این Recyclerview سه بخش ایجاد می کند که با کلیک بروی آنها وارد فرگمنت های دیگه می شویم.
حالا باید ستون مربوط به Navigation Drawer رو درست کنیم پس یک فایل به نام nav_drawer_row.xml درست کنید کد زیر را در آن قرار دهید.

دوستان یادم رفت در ابتدا ما از Toolbar استفاده کردیم برای اینکه toolbar برای شما خطا ندهد در همان پوشه layout یک فایل به نام toolbar.xml درست کنید کد زیر رو در آن قرار دهید.

تا اینجا بخشی از کار تموم شده حالا ما باید سه تا فرگمنت درست کنیم این فرگمنت های میشه Layout هر کدام از منو ها یعنی وقتی وارد منو شدید سه تا آیتم میبینید با کلیک روی هر کدام یکی از این فرگمنت ها باز می شود.
پس فرگمنت هایی به نام fragment_friends.xml , fragment_home.xml و fragment_messages.xml ایجاد کنید.
پس فایل fragment_home.xml همانند زیر می شود.

و فایل fragment_friends.xml همانند زیر

و در آخر fragment_messages.xml هم همانند زیر می شود.

برویم به بخش کد برنامه برای handle کردن Navigation Drawer و بقیه کار ها ابتدا یک فایل به نام MainActivity.java ایجاد کنید کد زیر را در آن قرار دهید.

در ابتدا view مربوط به toolbar را به دست آوردیم و از setSupportActionBar برای قرار دادن (فعال کردن) toolbar استفاده کردیم ولی به زبان ساده تولباری را که ساپورت می شود فعال می کند سپس view مربوط به Navigation drawer را که ساختیم به دست آوردیم از setUp برای فعال کردن باز شدن meni در زمانی که بروی toolbar کلیک شد استفاده کردیم و کد زیر

باعث باز شدن تولبار در هنگام باز شدن اپ می شود.
از void که در بالا displayView نام دارد برای رفتن به فرگمنت های مختلف استفاده کردیم و برای بهتر شدن کار ما تایتل رو هم عوض می کنیم یعنی هر اکتیویتی که بریم Title مربوط به toolbar تغییر خواهد کرد.
از FragmentManager برای replace  کردن یک fragment جدید در هر بار استفاده کردیم. چون وقتی وارد اولین فرگمنت شوید اگر بخواهید وارد دومی شوید باید قبلی حذف شده و جدید جای آن را گیرد.
کد جاوای مربوط به فرگمنت Navigation Drawer هم همانند زیر می شود. پس یک فایل به نام FragmentDrawer.java ایجاد کرده و کد های زیر را در آن قرار دهید.

getData ایتم های Navigation Drawer را آماده می می کند.
setUp هم برای انجام عملیات ایجاد fragment و در بالا ما یک RecyclerView اگر یادتان باشید تعریف کردیم چون Recyclerview یک object خاص است باید از Touchevent استفاده کنیم تا زمانی که کاربر بروی ایتم های درون Recyclerview کلیک کرد ما بتوانیم position هر کدام از آنها را به دست آورده و fragment مربوط به آن را باز کنیم .
 
قبلا از اینکه ما کلاس بالا را ایجاد کنیم باید یک آداپتور و یک model ایجاد کنیم (علت ایجاد آنها را حدودا پنج بار گفته ایم می توانید در پست های قبلی آن را مطالعه کنید)

و کد مربوط به به Model همانند زیر می شود پس یک فایل به نام NavDrawerItem.java ایجاد کنید کد زیر را در آن قرار دهید.

کد بالا به getter و setter معروف است.
بیشتر کار تمام شده است حالا فقط باید Fragment ها رو ایجاد کنیم.
یک فرگمنت به نام FriendsFragment.java ایجاد کنید کد زیر را در آن قرار دهید.

کار خاصی در فرگمنت انجام نداده ایم در صورتی که کد بالا را متوجه نشدید آموزش فرگمنت در سایت هست.
فایل فرگمنت بعدی ما HomeFragment.java است پس کد زیر را در آن قرار دهید.

و آخرین فرگمن ما که نامش برابر با MessagesFragment.java را ایجاد کرده و کدهای زیر را در آن قرار دهید.

کد های مربوط به فایل dimes.xml که در فولدر res/values قرار دارد در صوتی که وجود نداشت فایلی با همین نام ایجاد کنید.

کد های مربوط به string.xml هم همانند زیر می باشد.

 
 
این آموزش هم به پایان رسید.
 
موفق باشید.

مطالعه بیشتر