ساخت منو BottomNavigationView با Fab بدون هیچ کتابخونه‌ای

bottom-navigation-view-with-fab-android
اندروید

ساخت منو BottomNavigationView با Fab بدون هیچ کتابخونه‌ای

یکی از رایج‌ترین طرح‌های اندروید نمایش Fab داخل BottomNavigationView هستش.

این روش ساخت آیتم‌ها جز یکی از پرطرفدارترین روش‌ها بین طراحان و برنامه نویسان هستش.

برای ساختن این نوع طرح‌ها کتابخونه‌های متنوع و زیادی وجود دارن.

کتابخونه‌هایی که بعضا باعث ایجاد اختلال در روند طراحی هم میشن و خیلی توصیه نمیشه که برای بخش‌های مختلف از این کتابخونه‌ها استفاده کرد.

توی این پست می‌خوام یاد بدم که چطور بدون هیچ کتابخونه‌ای و با ساده‌ترین روش ممکن بتونی مثل طرح زیر رو پیاده سازی کنی.

طرح نهایی

bottom-navigation-bar-with-fab-android-demo
طرح نهایی

پیش‌نیاز استفاده از BottomNavigationView

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

فقط باید کتابخونه مربوط به متریال دیزاین رو توی پروژه داشته باشید.

این کتابخونه اکثرا به محض ساختن پروژه جدید، خودش به کتابخونه‌های پیشفرض اضافه میشه.

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

این کد رو در app/build.gradle اضافه کنید و سپس پروژه رو sync کنید

implementation 'com.google.android.material:material:1.3.0'

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

اضافه کردن منو به BottomNavigationView

برای اینکه آیتم‌ها رو بتونی توی BottomNavigationView نشون بدی، باید توی پوشه menu یه فایل درست کنی و آیتم‌های مورد نظرت رو بهش اضافه کنی.

برای منو من از آیتم‌های زیر استفاده کردم

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/chatSetting"
        android:icon="@drawable/ic_settings"
        android:title="تنظیمات" />

    <item
        android:id="@+id/chatProfile"
        android:icon="@drawable/ic_person"
        android:title="پروفایل" />

    <item
        android:id="@+id/chatFab"
        android:title="" />

    <item
        android:id="@+id/chatMessage"
        android:icon="@drawable/ic_message"
        android:title="پیام ها" />

    <item
        android:id="@+id/chatHome"
        android:icon="@drawable/ic_home"
        android:title="خانه" />

</menu>
یادت باشه آیتم وسط رو خالی قرار بدین.
چون من 5 تا آیتم دارم، پس آیتم وسط هم منو سوم هستش.
برای همین خالی قرار دادم
کدهای مربوط به XML

برای اینکه طرحت درست مثل چیزی که بالا قرار دادم بشه باید لایه اصلیت رو با CoordinatorLayout درست کنی.

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

برای اینکار میتونی از کدهای زیر استفاده کنی

<com.google.android.material.bottomappbar.BottomAppBar
    android:id="@+id/chatPage_bottomAppBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:fabAlignmentMode="center"
    app:fabAnimationMode="scale"
    app:fabCradleMargin="10dp"
    app:fabCradleRoundedCornerRadius="20dp">

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/chatPage_bottomNavBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:background="@android:color/transparent"
        app:menu="@menu/menu_chat" />

</com.google.android.material.bottomappbar.BottomAppBar>

حالا نوبت این رسیده که Fab رو وسط BottomAppBar نشون بدیم.

برای اینکار هم میتونی از کد زیر استفاده کنی

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/chatPage_fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_add"
    app:backgroundTint="@color/lightGreen2"
    app:layout_anchor="@id/chatPage_bottomAppBar"
    app:tint="@color/aquaBlue"
    tools:ignore="ContentDescription" />
کد نهایی XML

من یه TextView هم اضافه کردم که بتونم نتیجه عملیات کلیک کردن روی آیتم‌های منو رو داخل اون نشون بدم.

پس کدنهایی مثل کد زیر میشه

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/aquaBlue"
    tools:context=".fab_bottom_nav.FabWithBottomNav">

    <TextView
        android:id="@+id/chatPage_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="خانه"
        android:textColor="@color/yellow"
        android:textSize="20sp" />

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/chatPage_bottomAppBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:fabAlignmentMode="center"
        app:fabAnimationMode="scale"
        app:fabCradleMargin="10dp"
        app:fabCradleRoundedCornerRadius="20dp">

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/chatPage_bottomNavBar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:background="@android:color/transparent"
            app:menu="@menu/menu_chat" />

    </com.google.android.material.bottomappbar.BottomAppBar>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/chatPage_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_add"
        app:backgroundTint="@color/lightGreen2"
        app:layout_anchor="@id/chatPage_bottomAppBar"
        app:tint="@color/aquaBlue"
        tools:ignore="ContentDescription" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>
کدهای مربوط به Activity

حالا که کدهای XML رو قرار دادیم، وقتش شده که سراغ Activity بریم و عملیاتی که مد نظرمون هست رو بنویسیم.

اول از همه یادت باشه که این کدها رو حتما قرار بدی

chatPage_bottomNavBar.background = null
chatPage_bottomNavBar.menu.getItem(2).isEnabled = false

با خط اول کدهای بالا برای BottomNavigationView پس‌زمینه ست میکنی، اگه اینکار رو نکنی رابط کاربریت به مشکل میخوره.

با خط دوم هم همون آیتم وسطی که بالا توضیح دادم رو غیرفعال میکنی.

بعد از انجام این کارها نیاز داریم که عملیات کلیک روی آیتم‌ها رو پیاده سازی کنیم.

برای اینکار میتونی از کد زیر استفاده کنی

chatPage_bottomNavBar.selectedItemId = R.id.chatHome
chatPage_bottomNavBar.setOnNavigationItemSelectedListener { item ->
    when (item.itemId) {
        R.id.chatHome -> pageName = "خانه"
        R.id.chatMessage -> pageName = "پیام ها"
        R.id.chatProfile -> pageName = "پروفایل"
        R.id.chatSetting -> pageName = "تنظیمات"
    }

    chatPage_txt.text = pageName

    true
}

اگه میخوای برای Fab هم عملیات مربوط به کلیک کردن رو پیاده‌سازی کنی از کد زیر میتونی استفاده کنی

chatPage_fab.setOnClickListener {
            chatPage_txt.text = "افزودن پست"
        }
کدنهایی Activity
class FabWithBottomNav : AppCompatActivity() {

    private lateinit var pageName: String

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_fab_with_bottom_nav)

        chatPage_bottomNavBar.background = null
        chatPage_bottomNavBar.menu.getItem(2).isEnabled = false
        chatPage_bottomNavBar.selectedItemId = R.id.chatHome
        chatPage_bottomNavBar.setOnNavigationItemSelectedListener { item ->
            when (item.itemId) {
                R.id.chatHome -> pageName = "خانه"
                R.id.chatMessage -> pageName = "پیام ها"
                R.id.chatProfile -> pageName = "پروفایل"
                R.id.chatSetting -> pageName = "تنظیمات"
            }

            chatPage_txt.text = pageName

            true
        }

        chatPage_fab.setOnClickListener {
            chatPage_txt.text = "افزودن پست"
        }
    }
}

خب دیگه کار تمومه و واقعا ساده‌تر از این نمیشه این طرح رو پیاده سازی کرد، اونم بدون هیچ کتابخونه اضافه‌ای! 😉😎

 

راستی، من یک دوره‌ای رو درست کردم که به رایگان برنامه‌نویسی کاتلین رو بهت آموزش میدم.

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

اگه به این زبان برنامه‌نویسی علاقه داری میتونی توی این دوره توسط بخش زیر به رایگان ثبت‌نام کنی.

ثبت‌نام رایگان در دوره کاتلین
رایگان

دوره مقدماتی کاتلین برای برنامه نویسان اندروید

4.5/5
(4 امتیاز)
20 درس
مبتدی
آنچه یاد خواهید گرفت
آموزش از صفر برنامه نویسی کاتلین

نظر (4)

  1. مهران امامی

    برای نمایش منو پایین باید از BottomAppBar و BottomNavigationView استفاده کرد.من این قسمتو متوجه نشدم میشه بگین کدهاشو کجا پیاده سازی کنم

    1. کدوم قسمت رو متوجه نشدید؟
      چون تمامی کدها رو قرار دادم.
      برای ساخت پوشه menu روی پوشه res کلیک راست کنید بعدش new و سپس Android Resource Directory رو انتخاب کنید.
      اونجا میتونید menu رو اضافه کنید.
      بعدش یه فایل به پوشه menu اضافه کنید و کدهای منو رو داخلش قرار بدین

  2. مهران امامی

    میشه پروژه اینو به اشتراک بزارین لطفا

    1. مهران جان تمامی کدها رو توی پست قرار دادم. خیلی راحت میتونی کپی کنی و ازشون استفاده کنی

دیدگاه خود را اینجا قرار دهید

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

فیلدهای نمایش داده شده را انتخاب کنید. دیگران مخفی خواهند شد. برای تنظیم مجدد سفارش ، بکشید و رها کنید.
  • عکس
  • شناسه محصول
  • امتیاز
  • قیمت
  • در انبار
  • موجودی
  • افزودن به سبد خرید
  • توضیحات
  • محتوا
  • عرض
  • اندازه
  • تنظیمات بیشتر
  • ویژگی ها
  • Custom attributes
  • زمینه های دلخواه
مقایسه
لیست علاقه مندی ها 0