闲来无事,记录下BottomNavigationView的使用,是design库下的控件,主要作用就是实现app主页面的底部导航效果
首先新建个项目选择Bottom Navigation Activity的mobile,如下图所示:
添加完项目主界面基本上也就完成了,看下运行效果:
是不是感觉超简单的,不用吹灰之力一个主界面就亮闪闪的登场了
下面我来讲讲在使用这个控件的时候遇到的问题
一、修改app的主题
新建项目默认的自带的主题是android:theme=”@style/AppTheme”,主题在清单文件application设置,应该不会不懂,啊哈哈!
很多时候我们不会用自带的bar,所以会修改主题为android:theme=”@android:style/Theme.NoTitleBar”,那么和我一样会这么做的人重新运行项目的时候一定会报错
Caused by: java.lang.IllegalStateException: You need to use a Theme.AppCompat theme (or descendant) with this activity.
这是因为我们的activity继承了 AppCompatActivity()只要修改继承activity或FragmentActivity,继续运行,又报一个新的错
Caused by: android.view.InflateException: Binary XML file line #0: Binary XML file line #0:
Error inflating class android.support.design.widget.BottomNavigationView
这是因为我们修改了application的主题导致,所以我们在BottomNavigationView中添加下主题,如下所示
<android.support.design.widget.BottomNavigationView
android:id="@+id/navigation"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="0dp"
android:layout_marginStart="0dp"
android:background="?android:attr/windowBackground"
android:theme="@style/AppTheme"
app:itemTextColor="@drawable/text_color"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="@menu/navigation" />
二、添加menu
直接来张图看问题
很明显每个item的占用比率不一致,选中的的item占了一个较大的位置,且未选中的item底下的文字也不见了
解决方式:
https://stackoverflow.com/questions/40176244/how-to-disable-bottomnavigationview-shift-mode这是别人写好的啦!我是帮运工
使用下面的类BottomNavigationViewHelper通过反射来修改
object BottomNavigationViewHelper {
@SuppressLint("RestrictedApi")
fun disableShiftMode(view: BottomNavigationView) {
val menuView = view.getChildAt(0) as BottomNavigationMenuView
try {
val shiftingMode = menuView.javaClass.getDeclaredField("mShiftingMode")
shiftingMode.isAccessible = true
shiftingMode.setBoolean(menuView, false)
shiftingMode.isAccessible = false
for (i in 0 until menuView.childCount) {
val item = menuView.getChildAt(i) as BottomNavigationItemView
item.setShiftingMode(false)
// set once again checked value, so view will be updated
item.setChecked(item.itemData.isChecked)
}
} catch (e: NoSuchFieldException) {
Log.e("BNVHelper", "Unable to get shift mode field", e)
} catch (e: IllegalAccessException) {
Log.e("BNVHelper", "Unable to change value of shift mode", e)
}
}
}
然后在activity中使用:BottomNavigationViewHelper.disableShiftMode(navigation)
navigation是控件BottomNavigationView,写的方式是kotlin所以如果直接用java的需要自己再去百度了。
看下效果,完美
三、修改选中颜色
BottomNavigationView为我们提供了两个属性itemIconTint、itemTextColor分别是给图片和文字修改颜色,假如我们未设置这两个属性默认颜色跟随主题颜色
app:itemIconTint="@color/bottom_icon_color"
app:itemTextColor="@color/bottom_icon_color"
主题颜色:蓝色
设置了两个属性的颜色:黑色
接下来设置选中和为选中的图片和文字颜色
新建一个选择器home_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="@mipmap/home_top"></item>
<item android:drawable="@mipmap/home"></item>
</selector>
对应的两张图片:
menu中添加item的icon为home_bg
运行看效果:
选中效果:未选中:
为什么我的粉粉少女心的图标也变黑色了,这是因为item的图标被设置为统一颜色,所以我们在代码中设置itemIconTintList为null,这样图标的原颜色就显示出来了
navigation.itemIconTintList = null
文字设置颜色
app:itemTextColor="@drawable/text_color"
第二种设置颜色的方法:
navigation.itemIconTintList = resources.getColorStateList(R.drawable.text_color, null);
navigation.itemTextColor = resources.getColorStateList(R.drawable.text_color, null);
text_color.xml文件:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="@color/colorAccent"></item>
<item android:color="@color/colorPrimary"></item>
</selector>
menu文件没变,collect这个item我只设置了一张图片,但是我在代码中设置了icon和text的颜色,看效果,一张图片实现了点击颜色变化
好像基本上遇到的问题就这些,不知道自己写了啥,做个记录