快速實現底部導航欄及未讀消息

當咱們開始一個新項目的時候，有一個很重要的步驟就是肯定咱們的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~~~~。