Material Design 风格下实现渐入效果的 BottomNavigationView

在 Material Design 设计风格下，BottomNavigationView 是常见的导航栏控件。一般情况下，BottomNavigationView 的切换都是瞬间完成的，有时候这样的切换效果可能会显得不够流畅和自然。本文将介绍如何实现 BottomNavigationView 在切换时具有渐入效果。

渐入效果实现思路

实现 BottomNavigationView 渐入效果的基本思路是通过定义属性动画，控制 BottomNavigationView 的透明度，从而使其在切换时呈现出渐入的效果。具体的实现步骤如下：

1. 首先，我们需要为 BottomNavigationView 在 XML 中添加一个 id 属性，并在 Activity 中定义一个 BottomNavigationView 类型的全局变量：

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_navigation_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:menu="@menu/menu_bottom_navigation"/>

private BottomNavigationView bottomNavigationView;

1. 然后，我们在 Activity 的 onCreate 方法中获取 BottomNavigationView 实例，并定义一个属性动画，将动画的类型设置为透明度：

bottomNavigationView = findViewById(R.id.bottom_navigation_view);

ObjectAnimator fadeOut = ObjectAnimator.ofFloat(bottomNavigationView, "alpha", 1f, 0f);
ObjectAnimator fadeIn = ObjectAnimator.ofFloat(bottomNavigationView, "alpha", 0f, 1f);

AnimatorSet animationSet = new AnimatorSet();
animationSet.play(fadeIn).after(fadeOut);
animationSet.setDuration(500);

在上面的代码中，我们定义了两个属性动画 fadeOut 和 fadeIn，分别将 BottomNavigationView 的透明度从 1f 到 0f 和从 0f 到 1f。然后，我们使用 AnimatorSet 将这两个动画组合起来，并设置动画的时长为 500 毫秒。

1. 最后，在 BottomNavigationView 的 Item 点击事件中，调用属性动画实现渐入效果：

bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
        switch (menuItem.getItemId()) {
            case R.id.menu_home:
                // do something
                animationSet.start();
                return true;
            case R.id.menu_discover:
                // do something
                animationSet.start();
                return true;
            case R.id.menu_profile:
                // do something
                animationSet.start();
                return true;
            default:
                return false;
        }
    }
});

在上面的代码中，我们在每个 Item 的点击事件中，调用属性动画来实现渐入效果。

示例代码

完整的代码如下所示：

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_navigation_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:menu="@menu/menu_bottom_navigation"/>

private BottomNavigationView bottomNavigationView;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    bottomNavigationView = findViewById(R.id.bottom_navigation_view);

    ObjectAnimator fadeOut = ObjectAnimator.ofFloat(bottomNavigationView, "alpha", 1f, 0f);
    ObjectAnimator fadeIn = ObjectAnimator.ofFloat(bottomNavigationView, "alpha", 0f, 1f);

    AnimatorSet animationSet = new AnimatorSet();
    animationSet.play(fadeIn).after(fadeOut);
    animationSet.setDuration(500);

    bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
            switch (menuItem.getItemId()) {
                case R.id.menu_home:
                    // do something
                    animationSet.start();
                    return true;
                case R.id.menu_discover:
                    // do something
                    animationSet.start();
                    return true;
                case R.id.menu_profile:
                    // do something
                    animationSet.start();
                    return true;
                default:
                    return false;
            }
        }
    });
}

总结

在 Material Design 风格下，实现渐入效果的 BottomNavigationView 可以让 App 的切换效果更加自然和流畅。本文介绍了实现渐入效果的基本思路，代码简单易懂，可以直接使用。我们希望本文能够对初学者有所帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65ba47e4add4f0e0ff2d0ec4