LavaFab یه منو دایره ای همه فن حریف برای اندروید هستش.

منوها توی رابط کاربری اندروید خیلی مهم هستن، مخصوصا زمانی که کاربر بخواد با توجه به آیتم های مختلف وارد صفحات مخصوصی بشه و کارها مورد نظرش رو انجام بده.

اندروید منوهای مختلفی داره، منو عمودی که از کنار صفحه باز میشه، منوهایی که مثل یک popup باشن و کلی منوهای دیگه.

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

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

این کتا‌بخونه بینظیر قابلیت های خیلی خوبی داره.

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

دمو کتابخونه LavaFab اندروید

ویژگی های این کتابخانه

اضافه کردن کتا‌بخونه به پروژه

برای اینکه بتونی از کتا‌بخونه LavaFab استفاده کنی باید کد زیر رو به فایل build.gradle پروژه اضافه کنی.

implementation 'com.bitvale:lavafab:1.0.1'

سپس باید پروژه رو sync کنی.

حالا کتا‌بخونه به پروژه اضافه شده و میتونی ازش استفاده کنی?.

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

این کتا‌بخونه هم مثل اکثر کتا‌بخونه های مربوط به رابط کاربری یکسری کد داره که باید اونا رو توی فایل XML مورد نظرت اضافه کنی.

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

<com.bitvale.lavafab.LavaFab
    android:id="@+id/lava_fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:lavaBackgroundColor="@color/color_pink"
    app:lavaChild="left|top"
    app:lavaParentSize="@dimen/fab_size"
    app:lavaParentIcon="@drawable/ic_parent"
    app:lavaLeftIcon="@drawable/ic_left"
    app:lavaTopIcon="@drawable/ic_right" 
    app:lavaDrawShadow="true" />

اگر به کد بالا توجه کنی، این کتا‌بخونه یکسری خصوصیت هایی داره که به واسطه اون خصوصیت ها میتونی منو دلخواهت رو درست کنی.

و اما هر کدوم از این خصوصیت ها چه کارهایی رو انجام میدن؟

بررسی خصوصیت های کتا‌بخونه

نمونه کد استفاده شده در دمو

<com.bitvale.lavafab.LavaFab
    android:id="@+id/lava_fab_center"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintStart_toEndOf="@+id/lava_fab_left_center"
    app:layout_constraintTop_toTopOf="parent"
    lava:lavaBottomIcon="@drawable/ic_html"
    lava:lavaChild="all"
    lava:lavaLeftBottomIcon="@drawable/ic_javascript"
    lava:lavaLeftIcon="@drawable/ic_python"
    lava:lavaLeftTopIcon="@drawable/ic_kotlin"
    lava:lavaParentIcon="@drawable/ic_android"
    lava:lavaParentSize="@dimen/fab_size"
    lava:lavaRightBottomIcon="@drawable/ic_swift"
    lava:lavaRightIcon="@drawable/ic_cpp"
    lava:lavaRightTopIcon="@drawable/ic_git"
    lava:lavaTopIcon="@drawable/ic_java" />

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

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

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

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

مثلا اگه روی فلان منو کلیک شد چه عملیاتی رو انجام بده.

اول از همه با دستور with که جز Scope function های مربوط به کاتلین هستش، باید ID مربوط به اون منو رو انتخاب کنی.

مثل کد زیر :

with(lava_fab_center){}

حالا داخل {} میتونی از متدهای مربوط به کتابخونه استفاده کنی و اکشن ها رو بنویسی.

مدیریت کردن دکمه اصی

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

setParentOnClickListener {}

مثلا من میخوام با زدن روی دکمه اصلی، منوهای برنامه باز و بسته بشن.

یعنی اگه بسته بودن باز بشن و اگه باز بودن بسته بشن، اصطلاحا حالت toggle رخ بده.

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

setParentOnClickListener { lava_fab_center.trigger() }

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

setChildOnClickListener(Child.TOP) {}

اگه توجه کنی داخل پرانتز عبارت Child.Top استفاده شده. این در واقع همون منوها ای هستش که بالا توی خصوصیت ها توضیح دادم.

با این کد مشخص میکنی که روی کدوم منو کلیک شده.

داخل {} هم میتونی دستور مورد نظرت رو بنویسی و اجرا کنه.

مثلا من میخوام با زدن روی منو بالا یک متنی رو در قالب Toast نشون بده.

setChildOnClickListener(Child.TOP) { Toast.makeText(this, "Nouri.Academy", Toast.LENGTH_SHORT).show() }

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

with(lava_fab_center) {
    setParentOnClickListener { lava_fab_center.trigger() }
    setChildOnClickListener(Child.TOP) { showToast() }
    setChildOnClickListener(Child.RIGHT_TOP) { showToast() }
    setChildOnClickListener(Child.RIGHT) { showToast() }
    setChildOnClickListener(Child.RIGHT_BOTTOM) { showToast() }
    setChildOnClickListener(Child.BOTTOM) { showToast() }
    setChildOnClickListener(Child.LEFT_BOTTOM) { showToast() }
    setChildOnClickListener(Child.LEFT) { showToast() }
    setChildOnClickListener(Child.LEFT_TOP) { showToast() }
}