Notice: Constant DISALLOW_FILE_EDIT already defined in /home/nouriin/public_html/wp-config.php on line 107
ساخت منو bottom sheet با کتابخونه BottomSheetMenu | محمد نوری

ساخت منو bottom sheet با کتابخونه BottomSheetMenu

bottomsheet-menu-library-android
کتابخانه

ساخت منو bottom sheet با کتابخونه BottomSheetMenu

همونطور که میدونید اندروید منوهای مختلفی داره، یکی از این منوها BottomSheet هستش.

منویی که چند وقت اخیر مورد توجه برنامه نویس‌ها قرار گرفته و ازش توی برنامه‌های خودشون استفاده میکنن.

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

چرا کتابخونه BottomSheetMenu ؟ 

  • راحتی استفاده از کتابخونه
  • سرعت بالا هنگام پیاده سازی
  • حجم کم کتابخونه
  • روون بودن
  • رابط کاربری ساده و جذاب

خب حالا که متوجه شدی چرا باید از این کتابخونه استفاده کنیم، بهتره که بریم سراغ نحوه پیاده سازی این کتابخونه.

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

توی اون ویدیو مرحله به مرحله آموزش دادم و تمامی موارد رو هم به طور کامل توضیح دادم

اضافه کردن کتابخونه BottomSheet

برای استفاده از این کتابخونه باید کد زیر رو به app/build.gradle اضافه کنی

implementation 'com.github.mazenrashed:BottomSheetMenu:1.0.0'

برای اینکه موقع استفاده از این کتابخونه پروژه با ارور روبرو نشه باید این کد رو هم به فایل app/build.gradle اضافه کنی

buildFeatures {
    dataBinding = true
}

اگه از کاتلین استفاده میکنی بهتره که kotlin-kapt رو هم به فایل بالا اضافه کنی.

برای اینکار کد زیر رو به بخش plugins توی فایل app/build.gradle اضافه کن

id 'kotlin-kapt'

بعد از اینکه این کارها رو انجام دادی، حالا باید پروژه رو sync کنی.

کدهای مربوط به صفحه XML

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

یعنی وقتی روی FAB زدم، منو رو از پایین میخوام نشون بدم.

برای اینکار نیاز به یه FAB دارم که کدش رو این پایین مینویسم.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".bottom_menu.BottomMenuPage">

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/menuPage_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@drawable/ic_baseline_menu_24"
        app:backgroundTint="@color/pink"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:tint="@color/white"
        tools:ignore="ContentDescription" />

</androidx.constraintlayout.widget.ConstraintLayout>

نتیجه نهایی مثل عکس زیر میشه

bottom-sheet-menu-library-android
تصویر برنامه بعد از قرار دادن FAB

خب حالا که کدهای XML رو نوشتیم، الان باید کدهای استفاده از کتابخونه رو اضافه کنیم.

ساختن منو در پوشه menu

برای اینکه این کتابخونه، منو مورد نظر ما رو نشون بده.

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

مثل کد زیر

<?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_work"
        android:title="محل کار"/>

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

</menu>

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

با کد زیر منویی که توی پوشه menu درست کردیم رو به این کتابخونه معرفی میکنیم

menuBottom = MenuBottomSheet.Builder()
    .setMenuRes(R.menu.menu_bottom)
    .closeAfterSelect(true)
    .build()

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

menuBottom.onSelectMenuItemListener = { position: Int, id: Int? ->
    when (id) {
        R.id.menuHome -> {
            Toast.makeText(this, "کلیک روی منو خانه", Toast.LENGTH_SHORT).show()
        }
        R.id.menuWork -> Toast.makeText(this, "کلیک روی منو محل کار", Toast.LENGTH_SHORT).show()
        R.id.menuProfile -> Toast.makeText(this, "کلیک روی منو پروفایل", Toast.LENGTH_SHORT).show()
    }
}

با کد زیر هم میتونی منو رو به کاربر نشون بدی.

مثلا اگه روی FAB زد منو رو به کاربر نشون بدی

menuPage_fab.setOnClickListener { menuBottom.show(this) }

کد نهایی

class BottomMenuPage : AppCompatActivity() {

    private lateinit var menuBottom: MenuBottomSheet

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_bottom_menu_page)
        //Init menu
        menuBottom = MenuBottomSheet.Builder()
            .setMenuRes(R.menu.menu_bottom)
            .closeAfterSelect(true)
            .build()
        //Set menu
        menuBottom.onSelectMenuItemListener = { position: Int, id: Int? ->
            when (id) {
                R.id.menuHome -> {
                    Toast.makeText(this, "کلیک روی منو خانه", Toast.LENGTH_SHORT).show()
                }
                R.id.menuWork -> Toast.makeText(this, "کلیک روی منو محل کار", Toast.LENGTH_SHORT).show()
                R.id.menuProfile -> Toast.makeText(this, "کلیک روی منو پروفایل", Toast.LENGTH_SHORT).show()
            }
        }
        //Fab
        menuPage_fab.setOnClickListener { menuBottom.show(this) }

    }
}

بعد از اینکه کدهای بالا رو نوشتی، اگه روی FAB بزنی منو مثل عکس زیر باز میشه

bottomsheet_menu_library_android_2
نمایش منو بعد از کلیک روی FAB
نمایش کامل ویدیو آموزشی 

 

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

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

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

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

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

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

 

لینک اصلی کتابخونه در سایت گیت‌هاب : BottomSheetMenu

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

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

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