سبد خرید

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

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

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

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

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

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

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

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

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

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

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

نسخه کتابخانه 1.0.1
حداقل API پشتیبانی شده 19
ساخته شده با زبان کاتلین
میزان فشار بر رو منابع سخت افزاری کم

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

برای اینکه بتونی از کتا‌بخونه 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" />

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

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

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

توضیحات نام خصوصیت مقدار پیشفرض
رنگ پسزمینه app:lavaBackgroundColor ?attr/colorAccent
اندازه دکمه اصلی app:lavaParentSize 56dp
آیکن دکمه اصلی app:lavaParentIcon مقدار پیشفرض ندارد
نمایش سایه منوها app:lavaDrawShadow false
محل قرارگیری منوها app:lavaChild left|top
آیکن منو سمت چپ app:lavaLeftIcon مقدار پیشفرض ندارد
آیکن منو سمت چپ بالا app:lavaLeftIcon مقدار پیشفرض ندارد
آیکن بالا app:lavaTopIcon مقدار پیشفرض ندارد
آیکن سمت راست بالا app:lavaRightTopIcon مقدار پیشفرض ندارد
آیکن سمت راست app:lavaRightIcon مقدار پیشفرض ندارد
آیکن سمت راست پایین app:lavaRightBottomIcon مقدار پیشفرض ندارد
آیکن پایین app:lavaBottomIcon مقدار پیشفرض ندارد
آیکن سمت چپ پایین app:lavaLeftBottomIcon مقدار پیشفرض ندارد

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

<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() }
نکته
lava_fab_center درواقع همون آیدی دکمه اصلی هستش.

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

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() }
}
دیدگاه‌ها ۰