在 Material Design 设计风格下，BottomNavigationView 是常见的导航栏控件。一般情况下，BottomNavigationView 的切换都是瞬间完成的，有时候这样的切换效果可能会显得不够流畅和自然。本文将介绍如何实现 BottomNavigationView 在切换时具有渐入效果。
渐入效果实现思路
实现 BottomNavigationView 渐入效果的基本思路是通过定义属性动画，控制 BottomNavigationView 的透明度，从而使其在切换时呈现出渐入的效果。具体的实现步骤如下：
- 首先，我们需要为 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;
- 然后，我们在 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 毫秒。
- 最后，在 BottomNavigationView 的 Item 点击事件中，调用属性动画实现渐入效果：
-- -------------------- ---- -------
------------------------------------------------------------ ------------------------------------------------------- -
---------
------ ------- --------------------------------- -------- --------- -
------ ---------------------- -
---- ---------------
-- -- ---------
---------------------
------ -----
---- -------------------
-- -- ---------
---------------------
------ -----
---- ------------------
-- -- ---------
---------------------
------ -----
--------
------ ------
-
-
---在上面的代码中，我们在每个 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"/>-- -------------------- ---- -------
------- -------------------- ---------------------
---------
--------- ---- --------------- ------------------- -
-----------------------------------
---------------------------------------
-------------------- - ------------------------------------------
-------------- ------- - -------------------------------------------- -------- --- ----
-------------- ------ - -------------------------------------------- -------- --- ----
----------- ------------ - --- --------------
-----------------------------------------
------------------------------
------------------------------------------------------------ ------------------------------------------------------- -
---------
------ ------- --------------------------------- -------- --------- -
------ ---------------------- -
---- ---------------
-- -- ---------
---------------------
------ -----
---- -------------------
-- -- ---------
---------------------
------ -----
---- ------------------
-- -- ---------
---------------------
------ -----
--------
------ ------
-
-
---
-总结
在 Material Design 风格下，实现渐入效果的 BottomNavigationView 可以让 App 的切换效果更加自然和流畅。本文介绍了实现渐入效果的基本思路，代码简单易懂，可以直接使用。我们希望本文能够对初学者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65ba47e4add4f0e0ff2d0ec4