ساخت Navigation Drawer با طراحی متریال

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

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

توی این آموزش میخوام استفاده از Navigation Drawer (ازین به بعد خلاصه مینویسم nav) رو یاد بدم. برای این‌کار چندتا روش وجود داره.

اول اینکه موقع ساخت پروژه، templateـی که nav داره رو انتخاب کنیم. اینجوری به طور پیش‌فرض داخل پروژه generate میشه و میتونیم اون رو شخصی سازی کنیم و استفاده کنیم. من این کار رو نکردم بنابراین نظری در خصوصش نمیتونم بدم. روش بعدی پیاده‌سازی یک nav طبق مستندات گوگل از ابتداست. خوبیِ این روش اینه که درک درستی از نحوه کارکردش پیدا میکنیم ولی ایرادش هم تا حدی وقت گیر بودن و شلوغ کردن کد هست.

اگر دوست دارید از پایه یاد بگیرید چطور میشه یک nav رو پیاده کرد بهترین کار دانلود این پروژه و بررسی کدهاست.

اما من میخوام از یک روش خیلی سریع و بسیار حرفه‌ای پرده برداری کنم! استفاده از کتابخونه MaterialDrawer.

ابتدا باید خط زیر رو به gradle اضافه کنید:

کد

در این مرحله ممکنه موقع sync کردن به مشکل بربخورید. برای رفع مشکل از از همون چراغ زرد یا قرمز کناری استفاده کنید و طبق خواسته خودِ اندروید استودیو  Android Support Repository رو نصب کنید. برای دانلود و نصب توجه کنید که ip ایران تحریمه. چیزی که نصب میکنید شبیه عکسِ زیره:

navigation drawer install

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

بخش هیجان انگیز داره شروع میشه. به ActivityMainـه آموزش قبلی برید و کد‌های زیر رو اضافه کنید:

کد

پروژه رو اجرا کنید. چقدر ساده بود؟ این روش رو مقایسه کنید با روش‌های پیچیده و دست و پاگیرِ دیگه.

حالا میخوایم یک مقدار navـمون رو شخصی سازی می‌کنیم.

ابتدا کدهایی که در قسمت بالا به کلاس MainActivity اضافه کردید رو حذف کنید. سپس یک کلاس private به اسم createNav بسازید و در انتهای کلاس MainActivity.java اضافه کنید. سپس این تابع رو در onCreate صدا کنید. در آخر (با توجه به کدهایی که در آموزش قبلی زدیم) کلاسِ MainActivity به شکل زیر خواهد درآمد:

کد

من برای header و profile از دو تصویر استفاده کردم که می‌تونید از اینجا و اینجا دریافت کنید. در نهایت nav شما باید به شکل زیر باشه:

 

navigation drawer متریال دیزاین

برای راست چین کردنِ منو کافیه خط زیر رو به کد اضافه کنید. خط اول رو پاک نکردم که بدونید کجا اضافه کنید.

فقط توجه کنید که در حال حاضر با راستچین کردنِ Navigation Drawer، عکس‌ها در سمت چپ قرار میگیرن. شاید در نسخه‌های بعدی این مشکل رفع بشه اما چندان مهم هم نیست چرا که با ساختنِ یک CustomDrawerItem میشه این مشکل رو حل کرد. برای ساخت CustomDrawerItem به بخشِ سوالاتِ کتابخونه مراجعه کنید. در آینده خودم هم سعی میکنم آموزشش رو قرار بدم.

تبریک میگم تموم شد، سریع نبود؟

12 دیدگاه برای “ساخت Navigation Drawer با طراحی متریال

  1. سلام ممنون از شما . من توی انجمن uncoxهم از طرفداراتونم واقعا عالیه.ولی من دوتا راه دیگه یرای نوگیشن بار دارم. و نیاز به هیچ کتابخونه ای نداره . خیلی راحته …. اینم راحت بود ولی چیزی که من بلدم هم خیلی خوبه . ولی اون تیکه ی اخر گفتین که” فقط توجه کنید که در حال حاضر با راستچین کردنِ Navigation Drawer، عکس‌ها در سمت چپ قرار میگیرن. ”
    بله منم با گذاشتن نوگیشنم در سمت چپ همین مشکلو دارم چیکار کنم ؟
    این customکه میگید برام زیاد روشن نیست ….

    1. طبق توضیحات برنامه‌نویس کتابخونه اگر برنامه شما از rtl mode پشتیبانی کنه، یعنی توی منیفست rtl support رو true گذاشته باشید، در apiهای ۱۷ به بالا هیچ مشکلی نخواهید داشت. اما به شرطی که تنظیمات گوشی کاربر روی فارسی (که rtlـه) باشه. اما خب یقینا همه گوشیشون رو فارسی نیست و rtl support خودش یکسری مشکلات دیگه داره برای همین برای اینکه nav شما از راست باز بشه باید gravity رو right بذارید. اما در این حالت هم باز آیکون‌ها سمت چپ نوشته‌ها هستن. برای اینکه این مشکل برطرف بشه نیاز دارید خودتون لایه‌ای رو دیزاین کنید که یک imageview و یک textview داره و اون رو به عنوان لایه برای navتون معرفی کنید. برای کارهای دیگه هم باز به Custom Drawer Layout نیاز خواهید داشت. لزوما که منو یک تصویر و متن نیست. ممکنه بخواید چک باکس هم براش بذارید. برای طراحی custom هم به این لینک مراجعه کنید.

  2. سوالی که مطرحه اینه که چطور میشه آیکن های دراور رو در سمت راست تکستشون قرار داد مثلا آیکن home در سمت راست “خانه ” قرار بگیره

  3. با سلام و خسته نباشید خدمت شما
    من روی پروژه ی شخصی ای کار میکنم که تعداد آیتم های nav نزدیک به ۱۵عدده. و برای هر کدوم از آیتم ها اکتیویتی جدیدی باید بسازم.
    آیا راه ساده ای برای این که nav رو در تمام اکتیویتی ها import کنم وجود داره؟؟ چون منطقی نیست تمام کد هایnav رو در فایل جاوای تمام اکتیویتی ها کپی کنم.
    ممنون میشم راهنمایی کنید

  4. سلام.
    اول از مطلب مفیدتون تشکر میکنم .
    یه مشکل من دارم . آیتم های navigation من با فونت iranian sans هست . اما انگار بخش بالایی بخش ایتم ها میره زیر و نمایش نمی ده . مثلا آکولاد در آ نمایش نمی دهد . انگار height آیتم کمه و wrap نیست . چجور میتونم اونو حلش کنم . ممنونم

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

پاسخ دهید

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