چکیده کوتاه مطلب
با BottomNavigationView یه منو حرفه ای درست مثل Pintreset درست کن.توی این آموزش میخوام برای این منو جذاب اندروید یه استایل خاص رو ست کنم.
اینجا آکادمی نوری هستش! سایت جدید. قراره اینجا کلی باهم بترکونیم. سایت nouri.academy جایگرین nouri.in شده.
برای مشاهده لیست علاقه مندی ها وارد شوید!
مشاهده محصولات فروشگاهBottomNavigationView جز یکی از ویوهای کاربردی توی اندروید بحساب میاد که باهاش میتونی یک منو حرفه ای درست کنی.
کار این ویو اینه که پایین صفحه یک منویی رو به کاربر نشون میده.
از این ویو توی اپلیکیشن های مختلفی مثل : اینستاگرام – کافه بازار – دیجیکالا و … استفاده شده.
ولی چیزی که توی این پست میخوام آموزش بدم، ساخت منو پایین شبیه Pinterest هستش.
اگر به این برنامه توجه کنی، به منو پایین یک حالت خاص که گوشه هاش گرد شده رو اعمال کردن، منم دقیقا همین حالت رو میخوام آموزش بدم.
توی ویدیو زیر دمو نهایی این پست رو میتونی ببینی.
خب حالا که دمو رو دیدی بهتره که بریم سراغ آموزش.?
برای نمایش دادن آیتم ها توی این ویو باید از menu استفاده کنی.
یعنی آیتم هایی که مدنظرت هست رو داخل یک فایل با نام menu درست کنی و آیتم ها رو داخل اون قرار بدی.
برای ساختن فایل menu اول از همه باید پوشه ای با همین نام توی res درست کنی.
برای اینکار روی res کلیک راست کن، سپس new و بعد Android Resource Directory رو انتخاب کن.
بعد از اون باید Resource type رو وری menu قرار بدی و به Directory name هم نباید دست بزنی.
درست مثل عکس زیر :
بعد که این پوشه رو درست کردی، یک فایل جدیدی با هر نامی که مدنظرت هست رو داخل این پوشه درست کن.
من نام menu_bottom رو درنظر گرفتم.
بعد که این فایل رو درست کردی باید آیتم هایی که میخوای رو داخلش قرار بدی.
درست مثل کد زیر:
<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/menuHome" android:icon="@drawable/ic_home" android:title="خانه"/> <item android:id="@+id/menuWork" android:icon="@drawable/ic_baseline_search_24" android:title="جستجو"/> <item android:id="@+id/menuFavorite" android:icon="@drawable/ic_baseline_favorite_24" android:title="علاقه مندی ها"/> <item android:id="@+id/menuCart" android:icon="@drawable/ic_baseline_shopping_cart_24" android:title="سبد خرید"/> </menu>
حالا که این فایل رو درست کردی، نوبت این میرسه که پسزمینه دلخواه رو برای BottomNavigationView درست کنی.
برای اینکار هم بایل یک فایل توی پوشه drawable درست کنی و از نوع shape قرار بدیش.
برای این فایل هم من نام bg_rounded_white رو درنظر گرفتم.
بعد از اینکه این فایل رو درست کردی حالا باید شکلی که میخوای رو درست کنی.
من یک شکلی مدنظرم بود که مستطیل باشه و گوشه هاش گرد باشه.
برای همین این کد زیر رو نوشتم :
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="@color/white" /> <corners android:radius="100dp" /> </shape>
حالا که این 2 فایل رو درست کردی، نوبت این رسیده که از ویو اصلی استفاده کنیم.
برای اینکار توی لایه ای که میخوای از منو استفاده کنی، باید کدهای زیر رو قرار بدی :
<com.google.android.material.bottomnavigation.BottomNavigationView android:id="@+id/bottomNav" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" android:layout_margin="30dp" android:background="@drawable/bg_rounded_white" app:elevation="4dp" app:itemIconSize="30dp" app:itemIconTint="@color/selector_bottom_nav" app:itemRippleColor="@android:color/transparent" app:labelVisibilityMode="unlabeled" app:layout_constraintBottom_toBottomOf="parent" app:menu="@menu/menu_bottom" />
اگه توجه کنی توی ویو بالا من از یکسری از خصوصیت ها استفاده کردم.
توضیحات | نام خصوصیت |
اعمال پسزمینه | android:background |
سایه مربوط به ویو | app:elevation |
سایز آیکن ها | app:itemIconSize |
رنگ مربوط به آیکن ها | app:itemIconTint |
حالت نمایش آیکن و متن | app:labelVisibilityMode |
قراردادن فایل منو | app:menu |
برای مدیریت کردن عملیات مربوط به کلیک کردن روی آیتم ها میتونی از کد زیر استفاده کنی.
bottomNav.setOnNavigationItemSelectedListener { item -> Toast.makeText(this, item.title, Toast.LENGTH_SHORT).show() true }
با عضویت در خبرنامه نوری آکادمی همیشه بروز باشید. مطمئن باشید که ایمیل شما در اختیار دیگران قرار نمیگیرد
دانلود سریع و آسان
بدون هیچ معطلی دوره را بلافاصله پس از پرداخت دانلود و آموزش را شروع کنید!دوره های فشرده و کاربردی
تمامی دوره های ما بصورت پروژه محور و کاملا کاربردی آموزش داده می شوند...همگام با استاندارد های جهانی
خیالت راحت باشه، آموزشهایی که اینجا قرار میدیم دقیقا منطبق با استانداردهای جهانی هستشدوره های کاملا فارسی
با دیدن دورهها به زبان فارسی، بجای حفظ کردن کدها خیلی راحت میتونی اونارو عمیق یاد بگیریتوی نوری آکادمی کمکت میکنم بتونی وارد حوزه برنامه نویسی موبایل بشی. الان دیگه موبایل از اون حالت لوکس بودن خارج شده و جز وسایل ضروری افزاد به حساب میاد. پس چه بهتر که بتونی اپلیکیشن هایی بنویسی که در دسترس عموم مردم قرار بگیره.خوشحال میشم توی این مسیر با من همراه باشی تا بتونم کمکت کنم.
به امید روزهای بهتر
با خبرنامه نوری آکادمی بهتر و راحت تر در دسترسیم...
از مشخصات شما برای مقاصد تبلیغاتی استفاده نخواهیم کرد.تمامی حقوق مطالب ، دوره ها و محصولات برای مدیریت سایت محفوظ است و کپی برداری پیگرد قانونی دارد.