自定义底部导航栏

app/src/main/java/jx/cn/escort/ui/activity/MainActivity.kt

@@ -4,6 +4,7 @@ package jx.cn.escort.ui.activity
 import android.content.Context
 import android.content.SharedPreferences
 import android.content.res.ColorStateList
+import android.graphics.Color
 import android.os.Bundle
 import android.view.MenuItem
 import android.view.View
@@ -12,9 +13,11 @@ import android.widget.Toast
 import androidx.appcompat.app.AppCompatActivity
 import androidx.appcompat.view.menu.MenuItemImpl
 import androidx.appcompat.widget.AppCompatTextView
+import androidx.core.view.children
 import androidx.fragment.app.Fragment
 import androidx.fragment.app.FragmentContainerView
 import androidx.fragment.app.FragmentTransaction
+import com.google.android.material.bottomnavigation.BottomNavigationItemView
 import com.google.android.material.bottomnavigation.BottomNavigationView
 import com.google.android.material.floatingactionbutton.FloatingActionButton
 import com.google.android.material.navigation.NavigationBarView
@@ -70,10 +73,27 @@ class MainActivity : AppCompatActivity(), KoinComponent {
 
         var bottomNav= findViewById<BottomNavigationView>(R.id.bottom_nav)
 
-//        var colorStateList =  ColorStateList(
-//            IntArray()
-//
-//        )
+        bottomNav.setSelectedItemId(R.id.index)
+
+       var ckColor=Color.parseColor("#3ADD5C")
+
+        var color=Color.parseColor("#5e5656")
+
+
+        // 设置图标颜色
+        val colorStateList = ColorStateList(
+            arrayOf(
+                intArrayOf(android.R.attr.state_checked),
+                intArrayOf(-android.R.attr.state_checked)
+            ),
+            intArrayOf(ckColor,color) // 这里设置为你想要的颜色
+        )
+        bottomNav.itemIconTintList = colorStateList
+
+        // 设置文字颜色
+        bottomNav.itemTextColor = colorStateList
+        bottomNav.isItemActiveIndicatorEnabled=false
+        bottomNav.setItemBackgroundResource(R.drawable.nav_item_bg)
 
 
         bottomNav.setOnItemSelectedListener(object: NavigationBarView.OnItemSelectedListener {
@@ -83,10 +103,13 @@ class MainActivity : AppCompatActivity(), KoinComponent {
 
                 when(id){
                    jx.cn.escort.R.id.index-> {
-                      var indexMenu=bottomNav.menu.findItem(R.id.index);
-                       indexMenu.setIcon(R.drawable.ic_nav_index_ck);
-                       var  fragmentContainerView=findViewById<FragmentContainerView>(R.id.nav_content)
 
+
+
+                       var indexMenu=bottomNav.menu.findItem(R.id.index);
+
+                       indexMenu.menuInfo
+                       var  fragmentContainerView=findViewById<FragmentContainerView>(R.id.nav_content)
 //                       var density=resources.displayMetrics.density
 //                       fragmentContainerView.setPadding(
 //                           fragmentContainerView.paddingLeft,
@@ -98,11 +121,9 @@ class MainActivity : AppCompatActivity(), KoinComponent {
                        switchFragment(BaseNavFragment(R.layout.fragment_index, context = baseContext),item)
                    }
                     R.id.tasks->{
-                        bottomNav.menu.findItem(R.id.tasks).setIcon(R.drawable.ic_nav_tasks_ck);
                         switchFragment(BaseNavFragment(R.layout.fragment_tasks, context = baseContext),item)
                     }
                     R.id.mine->{
-                        bottomNav.menu.findItem(R.id.mine).setIcon(R.drawable.ic_nav_mine_ck);
                         switchFragment(BaseNavFragment(R.layout.fragment_mine,context = baseContext),item)
                     }
                 }
@@ -114,8 +135,8 @@ class MainActivity : AppCompatActivity(), KoinComponent {
 
         })
 
-        bottomNav.setSelectedItemId(R.id.index)
-       // bottomNav.setItemBackgroundResource(R);
+
+
 
 
 

app/src/main/java/jx/cn/escort/ui/widget/CustomBottomNav.kt

@@ -0,0 +1,122 @@
+package jx.cn.escort.ui.widget
+
+import android.animation.ValueAnimator
+import android.content.Context
+import android.graphics.Canvas
+import android.graphics.Color
+import android.graphics.Paint
+import android.util.AttributeSet
+import android.util.TypedValue
+import android.view.*
+import android.view.animation.DecelerateInterpolator
+import android.widget.FrameLayout
+import com.google.android.material.bottomappbar.BottomAppBarTopEdgeTreatment
+import com.google.android.material.bottomnavigation.BottomNavigationMenuView
+import com.google.android.material.bottomnavigation.BottomNavigationView
+import com.google.android.material.navigation.NavigationView
+import com.google.android.material.shape.MaterialShapeDrawable
+import com.google.android.material.shape.ShapePathModel
+import jx.cn.escort.R
+
+class CustomBottomNav: BottomNavigationView, NavigationView.OnNavigationItemSelectedListener {
+
+
+
+    private val height: Float
+
+
+
+    private var selectedItem = 0
+
+    private var selectionAnimator: ValueAnimator? = null
+
+
+
+    constructor(context: Context) : this(context, null)
+    constructor(context: Context, attrs: AttributeSet?) : this(context, attrs, 0)
+
+    private var bottomNavigationMenuView: View?
+
+    constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs,
+        defStyleAttr) {
+        val a = resources.obtainAttributes(attrs, R.styleable.CustomBottomNav)
+
+        val typedValue = TypedValue()
+        //context.theme?.resolveAttribute(R.attr.colorPrimary, typedValue, true)
+        val backgroundTint = a.getColor(R.styleable.CustomBottomNav_backgroundTint, typedValue.data)
+
+        a.recycle()
+        height = dpToPx(56f)
+
+
+
+        bottomNavigationMenuView =getChildAt(0)
+
+
+
+
+
+
+        val menuParams = bottomNavigationMenuView?.layoutParams as FrameLayout.LayoutParams
+        menuParams.gravity = (Gravity.BOTTOM or Gravity.CENTER_HORIZONTAL)
+
+
+
+        setWillNotDraw(false)
+    }
+
+
+
+
+    override fun onNavigationItemSelected(item: MenuItem): Boolean {
+        val indexOfItemSelected = menu.indexOfItem(item)
+        if (indexOfItemSelected != selectedItem) {
+           // topEdgeTreatment.lastSelectedItem = selectedItem
+            //topEdgeTreatment.selectedItem = indexOfItemSelected
+            selectedItem = indexOfItemSelected
+
+            selectionAnimator?.end()
+            selectionAnimator?.cancel()
+
+            selectionAnimator = ValueAnimator.ofFloat(0f, 1f)
+            selectionAnimator?.addUpdateListener {
+                //materialShapeDrawable.interpolation = it.animatedValue as Float
+            }
+
+            selectionAnimator?.duration = 200
+            selectionAnimator?.interpolator = DecelerateInterpolator()
+
+            selectionAnimator?.start()
+        }
+
+        return true
+    }
+
+    override fun onAttachedToWindow() {
+        super.onAttachedToWindow()
+        // Change height
+    }
+
+    override fun onDraw(canvas: Canvas) {
+        super.onDraw(canvas)
+
+
+
+    }
+
+    private fun dpToPx(dp: Float): Float {
+        return resources.displayMetrics.density * dp
+    }
+
+    private fun Menu.indexOfItem(item: MenuItem): Int {
+        for (i in 0 until this.size()) {
+            val menuItem = menu.getItem(i)
+            if (menuItem.itemId == item.itemId) {
+                return i
+            }
+        }
+        return -1
+    }
+
+
+}

app/src/main/res/drawable/nav_item_bg.xml

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <item   >
+        <inset
+                android:insetLeft="2dp"
+                android:insetTop="2dp"
+                android:insetRight="2dp"
+                android:insetBottom="2dp"
+                android:visible="true">
+            <shape>
+                <corners android:radius="8dp" />
+                <solid android:color="#eeeeee" />
+                <size   android:width="36dp"    android:height="36dp"/>
+            </shape>
+        </inset>
+    </item>
+
+
+
+
+
+</layer-list>

app/src/main/res/layout/layout_nav_bar.xml

@@ -27,17 +27,22 @@
             app:layout_constraintTop_toBottomOf="@id/top_nav"
             app:layout_constraintBottom_toTopOf="@+id/bottom_nav"
             android:background="#EFE9E9"
-           />
-    <com.google.android.material.bottomnavigation.BottomNavigationView
+            app:layout_constraintHorizontal_bias="0.0"/>
+    <jx.cn.escort.ui.widget.CustomBottomNav
             android:id="@+id/bottom_nav"
-            android:layout_width="match_parent"
-            android:layout_height="75dp"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintHorizontal_bias="0"
+            app:itemIconSize="20dp"
             app:layout_constraintStart_toStartOf="parent"
              android:background="#D7E8E8"
             app:itemBackground="@null"
-            app:menu="@menu/layout_nav_menu"/>
+            app:menu="@menu/layout_nav_menu"
+            style="@style/BottomNavigationView"
+
+    />
+
 
 </androidx.constraintlayout.widget.ConstraintLayout>

app/src/main/res/values/strings.xml

@@ -1,3 +1,26 @@
 <resources>
     <string name="app_name">escort-app</string>
+
+
+    <declare-styleable name="CustomBottomNav">
+        <attr format="color" name="backgroundTint"/>
+    </declare-styleable>
+
+
+    <style name="BottomNavigationView" parent="Widget.MaterialComponents.BottomNavigationView">
+        <item name="itemBackground">@drawable/nav_item_bg</item>
+        <item name="itemIconTint">#ececec</item>
+        <item name="itemTextColor"  >#ececec</item>
+        <item name="itemTextAppearanceActive">@style/BottomNavigation.Overline</item>
+        <item name="itemTextAppearanceInactive">@style/BottomNavigation.Overline</item>
+        <item name="android:textAllCaps">true</item>
+        <item name="paddingStart">32dp</item>
+        <item name="paddingEnd">32dp</item>
+    </style>
+
+
+    <style name="BottomNavigation.Overline" parent="TextAppearance.MaterialComponents.Overline">
+        <item name="android:textSize">8sp</item>
+    </style>
+
 </resources>