وبلاگ

کتابخونه منو با SSCustomBottomNavigation

کتابخونه منو با SSCustomBottomNavigation
کتابخانه

کتابخونه منو با SSCustomBottomNavigation

منو یکی از مهمترین المان های طراحی اپلیکیشن هست.

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

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

اما توی این پست قصد دارم یه منو با انیمیشن جذاب رو معرفی کنم.

نمونه منو پیاده سازی شده :
منو برنامه با SSCustomBottomNavigation
نمونه منو پیاده سازی شده (تا بارگذاری کامل تصویر شکیبا باشید)

برای استفاده از این کتابخونه باید کدهای زیر رو به پروژه ت اضافه کنی.

اول از همه کد زیر رو به project/build.gradle اضافه کنید
allprojects {
    repositories {
        maven { url 'https://jitpack.io' }
    }
}
سپس کد زیر رو هم به app/build.gradle اضافه کنید
implementation 'com.github.simformsolutions:SSCustomBottomNavigation:1.0'

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

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

درضمن یادت باشه میتونی با سلیقه خودت از هرکدوم از Attributeها که مد نظرت بود استفاده کنی.

<com.simform.custombottomnavigation.SSCustomBottomNavigation
            android:id="@+id/bottomNavigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            app:ss_backgroundBottomColor="#ffffff"
            app:ss_circleColor="#ff6f00"
            app:ss_waveHeight="7"
            app:ss_countBackgroundColor="#ff6f00"
            app:ss_countTextColor="#ffffff"
            app:ss_countTypeface="fonts/graphik_semibold.ttf"
            app:ss_defaultIconColor="#6200EE"
            app:ss_iconTextColor="#6200EE"
            app:ss_iconTextTypeface="fonts/graphik_semibold.ttf"
            app:ss_rippleColor="#2f424242"
            app:ss_iconTextSize="14sp"
            app:ss_selectedIconColor="#ff6f00"
            app:ss_selectedIconTextColor="#ff6f00"
            app:ss_shadowColor="#1f212121" />
توضیحات مربوط به Attribute ها :
Attribute توضیحات مقدار پیشفرض
app:ss_defaultIconColor رنگ پیشفرض آیکن ها #757575
app:ss_selectedIconColor رنگ آیکن ها بعد از انتخاب #00C957
app:ss_iconTextColor رنگ پیشفرض نوشته ها #003F87
app:ss_iconTextTypeface فونت مخصوص به نوشته ها #none
app:ss_selectedIconTextColor رنگ پیشفرض نوشته ها بعد از انتخاب #003F87
app:ss_iconTextSize سایز نوشته ها 10sp
app:ss_waveHeight ارتفاع موج 7
app:ss_backgroundBottomColor رنگ پس زمینه #FF5733
app:ss_countBackgroundColor رنگ پس زمینه اعلان #ff0000
app:ss_countTextColor رنگ نوشته اعلان #9281c1
app:ss_countTypeface فونت مخصوص به نوشته اعلان none
app:ss_rippleColor رنگ موج انتخاب شده #757575
app:ss_shadowColor رنگ سایه پشتی shadowColor
نمونه کد استفاده شده در Activity مورد نظر :
class MainActivity : AppCompatActivity() {

    companion object {
        private const val ID_HOME = 1
        private const val ID_EXPLORE = 2
        private const val ID_MESSAGE = 3
        private const val ID_NOTIFICATION = 4
        private const val ID_ACCOUNT = 5
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val binding = DataBindingUtil.setContentView<ActivityMainBinding>(this, R.layout.activity_main)

        val tvSelected = binding.tvSelected
        //tvSelected.typeface = Typeface.createFromAsset(assets, "fonts/SourceSansPro-Regular.ttf")

        binding.bottomNavigation.apply {

            add(SSCustomBottomNavigation.Model(ID_HOME, R.drawable.ic_home, "Home"))
            add(SSCustomBottomNavigation.Model(ID_EXPLORE, R.drawable.ic_heart, "Favorite"))
            add(SSCustomBottomNavigation.Model(ID_MESSAGE, R.drawable.ic_message, "Chat"))
            add(
                SSCustomBottomNavigation.Model(
                    ID_NOTIFICATION,
                    R.drawable.ic_notification,
                    "Notification"
                )
            )
            add(SSCustomBottomNavigation.Model(ID_ACCOUNT, R.drawable.ic_account, "Profile"))

            setCount(ID_NOTIFICATION, "10")

            setOnShowListener {
                val name = when (it.id) {
                    ID_HOME -> "Home"
                    ID_EXPLORE -> "Explore"
                    ID_MESSAGE -> "Message"
                    ID_NOTIFICATION -> "Notification"
                    ID_ACCOUNT -> "Account"
                    else -> ""
                }

                val bgColor = when (it.id) {
                    ID_HOME -> ContextCompat.getColor(this@MainActivity, R.color.color_home_bg)
                    ID_EXPLORE -> ContextCompat.getColor(this@MainActivity, R.color.color_favorite_bg)
                    ID_MESSAGE -> ContextCompat.getColor(this@MainActivity, R.color.color_chat_bg)
                    ID_NOTIFICATION -> ContextCompat.getColor(this@MainActivity, R.color.color_notification_bg)
                    ID_ACCOUNT -> ContextCompat.getColor(this@MainActivity, R.color.color_profile_bg)
                    else -> ContextCompat.getColor(this@MainActivity, R.color.colorPrimary)
                }

                tvSelected.text = getString(R.string.main_page_selected, name)
                binding.lnrLayout.setBackgroundColor(bgColor)
            }

            setOnClickMenuListener {
                val name = when (it.id) {
                    ID_HOME -> "HOME"
                    ID_EXPLORE -> "EXPLORE"
                    ID_MESSAGE -> "MESSAGE"
                    ID_NOTIFICATION -> "NOTIFICATION"
                    ID_ACCOUNT -> "ACCOUNT"
                    else -> ""
                }
            }

            setOnReselectListener {
                Toast.makeText(context, "item ${it.id} is reselected.", Toast.LENGTH_LONG).show()
            }

        }

    }
}

 

دیدگاه خود را به ما بگویید

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

هشت − 7 =

فیلدهای دلخواه برای نمایش را انتخاب کنید. سایر فیلدها مخفی می شود. برای ترتیب دلخواه فیلدها را به محل دلخواه بکشید و رها کنید.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
مقایسه
علاقمندی ها 0