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中使用的格式如下
代码语言：javascript复制<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>我们就可以将上面的转化为
代码语言：javascript复制<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加载相邻的FragmentFragmentTabHost Fragment加载选中的FragmentBottomNavigationView有选中动画效果
之前我都是用前两种方式来做的 既然官方有现成的 还是推荐用官方的，毕竟有动画效果。
BottomNavigationView是一个底部导航栏控件，一般和fragment一起使用。
项目依赖
代码语言：javascript复制implementation 'com.android.support:appcompat-v7:27.1.1'
implementation 'com.android.support:design:27.1.1'MainActivity.xml
代码语言：javascript复制<?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
代码语言：javascript复制<?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
代码语言：javascript复制<?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代码
代码语言：javascript复制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
}
}
}
