最近在学习BottomNavigationView的使用,但是有些时候我们有特殊需求
如:
[Android官方BottomNavigationView添加Badge(角标),全部tab显示文字自动铺满]

如:
不需要label的缩放效果咋办呢?

下面给大家分享一下,2句代码去掉这个效果:

直接上代码:

BottomNavigationView bottomNavigationView = findViewById(R.id.navigation);
bottomNavigationView.setItemTextAppearanceActive(R.style.bottom_selected_text);
bottomNavigationView.setItemTextAppearanceInactive(R.style.bottom_normal_text);

style部分:

<!--自定义的颜色部分-->
<color name=\"font_hint\">#989898</color>
<color name=\"colorPrimary\">#3F51B5</color>
<!--没有选中的样式-->
    <style name=\"bottom_normal_text\">
        <item name=\"android:textColor\">@color/font_hint</item>
        <item name=\"android:textSize\">14sp</item>
    </style>
<!--选中的样式-->
    <style name=\"bottom_selected_text\">
        <item name=\"android:textColor\">@color/colorPrimary</item>
        <item name=\"android:textSize\">14sp</item>
    </style>

如果只想实现效果,到此就可以实现去掉缩放动画了。

下面是解析为什么要这样做。有兴趣的小伙伴可以看看啊

首先要设置lable显示样式就要定位到源码BottomNavigationItemView类中,里面在进行点击切换时进行样式的修改,
由于我在 布局中设置了app:labelVisibilityMode=\"labeled\"

 <android.support.design.widget.BottomNavigationView
        android:id=\"@+id/navigation\"
        app:labelVisibilityMode=\"labeled\"
        app:menu=\"@menu/tt_navigation\"/>

所以源码部分,也就是case 1:的情况如下

// 源码:
 public void setChecked(boolean checked) {
     //...省略部分代码
        case 1:
            if (checked) {
                // 设置图片的样式,此处可以看出icon样式只是修改位置,大小没有变化
                this.setViewLayoutParams(this.icon, (int)((float)this.defaultMargin + this.shiftAmount), 49);
                // 对显示大文字的largeLabel进行缩放
                this.setViewValues(this.largeLabel, 1.0F, 1.0F, 0);
                // 对显示小文字的smallLabel进行缩放
                this.setViewValues(this.smallLabel, this.scaleUpFactor, this.scaleUpFactor, 4);
            } else {
                // 效果同上面相反
                this.setViewLayoutParams(this.icon, this.defaultMargin, 49);
                this.setViewValues(this.largeLabel, this.scaleDownFactor, this.scaleDownFactor, 4);
                this.setViewValues(this.smallLabel, 1.0F, 1.0F, 0);
            }
        //...省略部分代码
    }

由于在调用setChecked设置checked的时候调用了this.setViewValues(),对显示大文字largeLabel和小文字smallLabel进行了缩放

 private void setViewValues(@NonNull View view, float scaleX, float scaleY, int visibility) {
        view.setScaleX(scaleX);
        view.setScaleY(scaleY);
        view.setVisibility(visibility);
    }

但是缩放的比例却和this.scaleUpFactor和this.scaleDownFactor有关,此处就想了如果能让这2个缩放比例都是1或相等不就不用缩放了吗,。。。带着这样的疑问继续找这2个参数赋值的地方,来到了如下关键的地方

// 设置smallLabel的样式
 public void setTextAppearanceInactive(@StyleRes int inactiveTextAppearance) {
        TextViewCompat.setTextAppearance(this.smallLabel, inactiveTextAppearance);
        this.calculateTextScaleFactors(this.smallLabel.getTextSize(), this.largeLabel.getTextSize());
    }

// 设置largeLabel的样式
    public void setTextAppearanceActive(@StyleRes int activeTextAppearance) {
        TextViewCompat.setTextAppearance(this.largeLabel, activeTextAppearance);
        this.calculateTextScaleFactors(this.smallLabel.getTextSize(), this.largeLabel.getTextSize());
    }
    

在上面2个方法设置样式之后,通过calculateTextScaleFactors计算缩放比例并对this.scaleUpFactor和this.scaleDownFactor赋值

 private void calculateTextScaleFactors(float smallLabelSize, float largeLabelSize) {
        this.shiftAmount = smallLabelSize - largeLabelSize;
        this.scaleUpFactor = 1.0F * largeLabelSize / smallLabelSize;
        this.scaleDownFactor = 1.0F * smallLabelSize / largeLabelSize;
    }

如果想让this.scaleUpFactor和this.scaleDownFactor相同,从上面的代码中可以看出,只有this.smallLabel.getTextSize() == this.smallLabel.getTextSize()2个的字体大小一样就行。这样就好,问题就解决了
只需要通过BottomNavigationView 对他们设置相同的字体就可以了,问题完美解决2行代码

BottomNavigationView bottomNavigationView = findViewById(R.id.navigation);
bottomNavigationView.setItemTextAppearanceActive(R.style.bottom_selected_text);
bottomNavigationView.setItemTextAppearanceInactive(R.style.bottom_normal_text);
收藏 打印