Android使用BottomNavigationView以及如何使用SVG图片

发表于 2020-04-15 更新于 2025-03-25 分类于 android

SVG图片的使用

iconfont:https://www.iconfont.cn/

我们经常在iconfont上找图片然后下载下载放在项目里面，为了适配我们还要下载不同尺寸的图片，但是明明iconfont上的图片就是矢量图，为何我们不用矢量图呢？

我们在下载图片的时候，最后有一项复制SVG 我们复制出来的如下

<svg t="1586934037521" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3927" width="80" height="80">
    <path d="M525.28 843.36c-11.36 0-22.72-0.64-34.08-1.92-140.96-15.52-254.4-129.12-270.08-270.08-9.6-87.2 18.08-174.56 76.32-239.36 58.08-64.96 141.44-102.24 228.64-102.24 57.76 0 187.52-0.16 246.08-0.32 17.12-0.32 32 6.4 43.68 18.08 11.68 11.68 18.08 27.2 17.92 43.68-0.32 58.4-0.96 187.52-0.96 245.12a307.264 307.264 0 0 1-307.52 307.04zM769.6 293.6c-59.68 0-186.72 0.32-243.68 0.32-68.96 0-134.88 29.44-180.96 80.8-46.72 52.16-68 119.36-60.32 189.6 12.32 111.36 102.08 201.12 213.44 213.44 70.08 7.84 137.6-13.6 189.6-60.32 51.36-46.08 80.8-112 80.8-180.96 0.16-56.8 0.8-183.2 1.12-242.88z" p-id="3928">
    </path>
    <path d="M418.56 576.8c-8.8 0-16-7.2-16-16v-73.92c0-8.8 7.2-16 16-16s16 7.2 16 16v73.92c0 8.96-7.2 16-16 16zM566.24 576.8c-8.8 0-16-7.2-16-16v-73.92c0-8.8 7.2-16 16-16s16 7.2 16 16v73.92c0 8.96-7.04 16-16 16z" p-id="3929">	
    </path>
</svg>

我们在Android中使用的格式如下

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M10,20v-6h4v6h5v-8h3L12,3 2,12h3v8z" />
</vector>

我们就可以将上面的转化为

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="1024"
    android:viewportHeight="1024">
    <path
        android:fillColor="#FF000000"
        android:pathData="M525.28 843.36c-11.36 0-22.72-0.64-34.08-1.92-140.96-15.52-254.4-129.12-270.08-270.08-9.6-87.2 18.08-174.56 76.32-239.36 58.08-64.96 141.44-102.24 228.64-102.24 57.76 0 187.52-0.16 246.08-0.32 17.12-0.32 32 6.4 43.68 18.08 11.68 11.68 18.08 27.2 17.92 43.68-0.32 58.4-0.96 187.52-0.96 245.12a307.264 307.264 0 0 1-307.52 307.04zM769.6 293.6c-59.68 0-186.72 0.32-243.68 0.32-68.96 0-134.88 29.44-180.96 80.8-46.72 52.16-68 119.36-60.32 189.6 12.32 111.36 102.08 201.12 213.44 213.44 70.08 7.84 137.6-13.6 189.6-60.32 51.36-46.08 80.8-112 80.8-180.96 0.16-56.8 0.8-183.2 1.12-242.88z" />

    <path
        android:fillColor="#FF000000"
        android:pathData="M418.56 576.8c-8.8 0-16-7.2-16-16v-73.92c0-8.8 7.2-16 16-16s16 7.2 16 16v73.92c0 8.96-7.2 16-16 16zM566.24 576.8c-8.8 0-16-7.2-16-16v-73.92c0-8.8 7.2-16 16-16s16 7.2 16 16v73.92c0 8.96-7.04 16-16 16z" />
</vector>

也就是说我们把viewBox="0 0 1024 1024" 换为android:viewportWidth="1024" android:viewportHeight="1024" path里的复制下来就行了

BottomNavigationView的使用

实现底部菜单常用的方式

RadioGroup + ViewPager + Fragment 加载相邻的Fragment
FragmentTabHost + Fragment 加载选中的Fragment
BottomNavigationView 有选中动画效果

之前我都是用前两种方式来做的既然官方有现成的还是推荐用官方的，毕竟有动画效果。

BottomNavigationView是一个底部导航栏控件，一般和fragment一起使用。

项目依赖

1 2	implementation 'com.android.support:appcompat-v7:27.1.1' implementation 'com.android.support:design:27.1.1'

MainActivity.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.activity.MainActivity">

    <FrameLayout
        android:id="@+id/mainFrame"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/navigation"/>

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="0dp"
        android:layout_marginEnd="0dp"
        android:background="?android:attr/windowBackground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:itemTextColor="@color/main_bottom_navigation"
        app:itemIconTint="@color/main_bottom_navigation"
        app:menu="@menu/navigation" />

</android.support.constraint.ConstraintLayout>

主要属性

app:iteamBackground指的是底部导航栏的背景颜色,默认是主题的颜色
app:menu指的是底部菜单（文字和图片都写在这个里面，推荐图片使用矢量图）
app:itemTextColor指的是导航栏文字的颜色
app:itemIconTint指的是导航栏中图片的颜色(我之前还以为只有矢量的才能着色,其实无论菜单中的图片是否为矢量图都可以设置着色)

res => color => main_bottom_navigation.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/zj_blue" android:state_checked="true"></item>
    <item android:color="@color/zj_gay_title" android:state_checked="false"></item>
</selector>

res => menu=> navigation.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/navigation_app"
        android:icon="@drawable/bottom_navi_app"
        android:title="应用" />

    <item
        android:id="@+id/navigation_news"
        android:icon="@drawable/bottom_navi_news"
        android:title="资讯" />

    <item
        android:id="@+id/navigation_me"
        android:icon="@drawable/bottom_nav_me"
        android:title="我的" />
</menu>

Activity代码

import android.os.Bundle
import android.support.design.widget.BottomNavigationView
import android.support.v4.app.Fragment
import android.support.v7.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*


class MainActivity : AppCompatActivity() {

    private var fragments = mutableListOf<Fragment>()
    private var lastfragment = 0
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        initView()
        navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener)
    }


    private val mOnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener { item ->
        when (item.itemId) {
            R.id.navigation_app -> {
                switchFragment(0)
                return@OnNavigationItemSelectedListener true
            }
            R.id.navigation_news -> {
                switchFragment(1)
                return@OnNavigationItemSelectedListener true
            }
            R.id.navigation_me -> {
                switchFragment(2)
                return@OnNavigationItemSelectedListener true
            }
        }
        false
    }


    private fun initView() {
        val appFragment = NaviAppFragment()
        val newsFragment = NaviNewsFragment()
        val meFragment = NaviMeFragment()

        fragments.add(appFragment)
        fragments.add(newsFragment)
        fragments.add(meFragment)
        //设置fragment到布局
        supportFragmentManager.beginTransaction()
            .replace(R.id.mainFrame, appFragment)
            .show(appFragment)
            .commit()

    }

    /**
     * 切换fragment
     */
    private fun switchFragment(index: Int) {
        if (lastfragment != index) {
            val transaction = supportFragmentManager.beginTransaction()
            //隐藏上个Fragment
            transaction.hide(fragments[lastfragment])
            if (!fragments[index].isAdded) {
                transaction.add(R.id.mainFrame, fragments[index])
            }
            transaction.show(fragments[index]).commitAllowingStateLoss()
            lastfragment = index
        }
    }
}