ساخت منو BottomNavigationView شبیه به برنامه Pinterest در اندروید

BottomNavigationView جز یکی از ویوهای کاربردی توی اندروید بحساب میاد که باهاش میتونی یک منو حرفه ای درست کنی.

کار این ویو اینه که پایین صفحه یک منویی رو به کاربر نشون میده.

از این ویو توی اپلیکیشن های مختلفی مثل : اینستاگرام – کافه بازار – دیجیکالا و … استفاده شده.

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

اگر به این برنامه توجه کنی، به منو پایین یک حالت خاص که گوشه هاش گرد شده رو اعمال کردن، منم دقیقا همین حالت رو میخوام آموزش بدم.

نمایش دمو

توی ویدیو زیر دمو نهایی این پست رو میتونی ببینی.

خب حالا که دمو رو دیدی بهتره که بریم سراغ آموزش.?

نحوه کارکرد BottomNavigationView

برای نمایش دادن آیتم ها توی این ویو باید از menu استفاده کنی.

یعنی آیتم هایی که مدنظرت هست رو داخل یک فایل با نام 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>

کدهای مربوط به لایه XML

حالا که این 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" />

اگه توجه کنی توی ویو بالا من از یکسری از خصوصیت ها استفاده کردم.

توضیحات مربوط به خصوصیت های ویو

مدیریت کردن کلیک روی آیتم ها

برای مدیریت کردن عملیات مربوط به کلیک کردن روی آیتم ها میتونی از کد زیر استفاده کنی.

bottomNav.setOnNavigationItemSelectedListener { item ->
    Toast.makeText(this, item.title, Toast.LENGTH_SHORT).show()
    true
}