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

笑葉林發表於2019-01-04

當我們開始一個新專案的時候，有一個很重要的步驟就是確定我們的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~~~~。

相關文章