快速实现底部导航栏及未读消息

当咱们开始一个新项目的时候，有一个很重要的步骤就是肯定咱们的APP首页框架，也就是用户从桌面点击APP 图标，进入APP 首页的时候展现给用户的框架，好比微信，展现了有四个Tab，分别对应不一样的板块（微信、通信录、发现、我），如今市面出了少部分的Material Design 风格的除外，大部分都是这样的一个框架，称之为底部导航栏，分为3-5个Tab不等。以前也采用了其它方式实现过（TabLayout + Fragment，RadioGroup + RadioButton等等），但总以为不够优雅，今天咱们采用 BottomNavigationView + Fragment 的方式实现。

首先，须要添加依赖库

implementation 'com.google.android.material:material:1.0.0-rc01'
复制代码

如何在项目中快速引入BottomNavigationBar呢？

1. Add the JitPack repository to your build file

Add it in your root build.gradle at the end of repositories:

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}
复制代码

2. Add the dependency

The latest version shall prevail.

dependencies {
    implementation 'com.github.huangziye:BottomNavigationBar:${latest_version}'
}
复制代码

看看是否是很简单！！！

下面咱们看看效果图

那么在代码中怎么使用呢？

xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity">

    <androidx.viewpager.widget.ViewPager android:id="@+id/viewpager" android:layout_above="@+id/bottom_navigation" android:overScrollMode="never" android:layout_width="match_parent" android:layout_height="match_parent"/>

    <View android:layout_width="match_parent" android:layout_height="1px" android:layout_above="@+id/bottom_navigation" android:background="@android:color/darker_gray"/>

    <com.google.android.material.bottomnavigation.BottomNavigationView android:id="@+id/bottom_navigation" android:layout_width="match_parent" android:layout_height="56dp" android:layout_alignParentBottom="true"/>


</RelativeLayout>
复制代码

Kotlin 代码

BottomNavigationBar.Companion.Builder().with(this)
    .bottomNavigationView(bottom_navigation)
    .viewpager(viewpager)
    .addMenuItem(R.id.action_wechat, getString(R.string.wechat), R.mipmap.ic_wechat)
    .addMenuItem(R.id.action_contact, getString(R.string.contact), R.mipmap.ic_contact)
    .addMenuItem(R.id.action_find, getString(R.string.find), R.mipmap.ic_find)
    .addMenuItem(R.id.action_me, getString(R.string.me), R.mipmap.ic_me)
    .notCanScroll(false)
    .addFragment(WechatFragment())
    .addFragment(ContactFragment())
    .addFragment(FindFragment())
    .addFragment(MeFragment())
    .build()
复制代码

设置未读消息

BadgeView(this).bindTargetView(itemView).setBadgeCount(120)
    .setOnDragStateChangedListener(object : Badge.OnDragStateChangedListener {
        override fun onDragStateChanged(dragState: DragState, badge: Badge, targetView: View) {
            if (dragState == DragState.STATE_SUCCEED) {
                Toast.makeText(this@MainActivity, "success", Toast.LENGTH_SHORT).show()
            }
        }
    })
复制代码

BadegeView 方法说明

方法	说明
setBadgeCount	设置Badge数字
setBadgeText	设置Badge文本
setBadgeTextSize	设置文本字体大小
setBadgeTextColor	设置文本颜色
setExactMode	设置是否显示精确模式数值
setBadgeGravity	设置Badge相对于TargetView的位置
setGravityOffset	设置外边距
setBadgePadding	设置内边距
setBadgeBackgroundColor	设置背景色
setBadgeBackground	设置背景图片
setShowShadow	设置是否显示阴影
setOnDragStateChangedListener	打开拖拽消除模式并设置监听
stroke	描边
hide	隐藏Badge

最后附上Github地址，若是你喜欢，欢迎Start~~~~。