Android仿微信底部导航栏实现完整项目

原创于 2025-11-04 10:30:21 发布 · 1.1k 阅读

本内容遵循CC 4.0 BY-SA版权协议

简介：在Android应用开发中，底部导航栏是提升用户体验的重要UI组件，微信的底部导航栏因其直观和易用而成为设计典范。本项目“Android仿微信底部导航栏.zip”提供了一套完整的实现方案，涵盖BottomNavigationView使用、Fragment切换、手势滑动交互、颜色渐变动画及自定义View等核心技术。通过该实战项目，开发者可深入掌握Android底部导航的构建方法，学习如何结合动画、事件监听与响应式布局打造流畅的多页面切换效果，适用于希望提升界面交互能力的中级开发者。

1. Android底部导航栏的核心设计思想与架构解析

在移动应用开发中，底部导航栏作为用户交互的核心组件之一，直接影响用户体验的流畅性与直观性。本章将从微信底部导航栏的设计理念出发，深入剖析其交互逻辑与视觉结构，揭示Android平台实现此类功能的整体技术路径。通过分析Material Design规范中的 BottomNavigationView 设计原则，结合现代Android应用的模块化架构趋势，阐述如何构建一个高内聚、低耦合的导航体系。

graph TD
    A[MainActivity] --> B[BottomNavigationView]
    A --> C[FragmentContainer]
    B --> D{选中事件监听}
    D --> E[切换目标Fragment]
    E --> F[FragmentTransaction管理]
    F --> G[hide()/show()策略]
    G --> H[状态保留与内存优化]

同时，介绍项目整体结构的组织方式，包括Activity与Fragment的职责划分、页面状态管理机制以及组件间通信的最佳实践，为后续章节的技术实现打下坚实的理论基础。

2. BottomNavigationView基础与自定义使用

在现代 Android 应用中，底部导航栏已成为主流交互模式的核心组成部分。 BottomNavigationView 是 Material Design 组件库中提供的一个高度封装的控件，专为实现底部标签式导航而设计。它不仅遵循 Google 的设计规范，还内置了动画、状态管理与触摸反馈机制，极大简化了开发者的工作量。然而，若仅停留在默认样式和基本用法层面，难以满足实际项目中对个性化体验的需求。因此，深入掌握其标准配置方式，并进一步探索如何突破默认限制进行深度自定义，是构建高质量应用的关键一步。

本章将从 BottomNavigationView 的基础集成出发，系统性地讲解控件引入、菜单定义、事件监听等核心流程；随后逐步过渡到主题定制、颜色状态管理以及夜间模式适配等视觉层面的优化技巧；最后通过扩展行为控制能力，展示如何禁用动画、动态修改项状态并处理兼容性问题，最终完成仿微信底部导航栏的初步集成。整个过程既涵盖声明式 XML 配置，也涉及运行时 Java/Kotlin 逻辑操作，力求为后续复杂功能（如 Fragment 切换、手势联动）打下坚实基础。

2.1 BottomNavigationView的标准用法与属性配置

作为 Material Design 库的重要组件之一， BottomNavigationView 提供了一种简洁高效的方式来实现底部导航功能。它的设计理念是“约定优于配置”，即通过预设的行为规则减少开发者的编码负担。但在实际开发中，理解其底层工作原理和关键配置项，才能灵活应对各种业务场景需求。

2.1.1 引入Material Design库并初始化控件

要使用 BottomNavigationView ，首先需要在项目中引入 Google 官方的 Material Components for Android 库。该库提供了丰富的 UI 控件集合，支持最新的设计语言与交互规范。

在模块级别的 build.gradle 文件中添加依赖：

dependencies {
    implementation 'com.google.android.material:material:1.11.0'
}

同步 Gradle 后即可在布局文件中使用 <com.google.android.material.bottomnavigation.BottomNavigationView> 标签。

接下来，在主界面布局 activity_main.xml 中嵌入控件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

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

这里使用了 app:menu 属性绑定一个菜单资源文件，这是 BottomNavigationView 的核心数据源。同时注意命名空间 xmlns:app 的声明，用于访问 Material 库中的自定义属性。

在 MainActivity.java 中获取引用并完成初始化：

public class MainActivity extends AppCompatActivity {

    private BottomNavigationView bottomNavigation;

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

        bottomNavigation = findViewById(R.id.bottom_navigation);
    }
}

上述代码完成了最基础的控件接入。此时运行应用会显示底部导航栏，但尚未具备交互功能。下一步需定义菜单项内容。

参数说明 ：
- app:menu : 指定菜单资源 ID，系统会自动解析并生成对应的导航按钮。
- android:layout_height="wrap_content" : 推荐保持此值，Material 规范建议高度约为 56dp。
- implementation 'com.google.android.material:material:1.11.0' : 建议始终使用最新稳定版本以获得最佳兼容性和性能优化。

2.1.2 menu资源文件的定义与图标文字设置

BottomNavigationView 的菜单项由位于 res/menu/ 目录下的 XML 资源文件定义。每个 <item> 对应一个可点击的导航标签，包含标题、图标及唯一 ID。

创建 res/menu/bottom_nav_menu.xml ：

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/nav_chat"
        android:icon="@drawable/ic_chat"
        android:title="微信"
        android:enabled="true"/>
    <item
        android:id="@+id/nav_contacts"
        android:icon="@drawable/ic_contacts"
        android:title="通讯录"
        android:enabled="true"/>
    <item
        android:id="@+id/nav_discover"
        android:icon="@drawable/ic_discover"
        android:title="发现"
        android:enabled="true"/>
    <item
        android:id="@+id/nav_me"
        android:icon="@drawable/ic_me"
        android:title="我"
        android:enabled="true"/>
</menu>

每个 <item> 支持以下关键属性：

属性	说明
`android:id`	唯一标识符，用于事件回调判断选中项
`android:icon`	图标资源引用（建议使用 VectorDrawable 提高清晰度）
`android:title`	显示文本，最多支持三个字符宽度（Material 设计限制）
`android:enabled`	是否启用该条目，默认 true

⚠️ 注意：根据 Material Design 准则，底部导航栏最多支持 3~5 个顶级视图，超过 5 个应改用 NavigationRailView 或抽屉菜单。

图标推荐使用 SVG 转换的 VectorDrawable 资源，例如 ic_chat.xml ：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24"
    android:tint="?attr/colorOnSurface">
  <path
      android:fillColor="@android:color/white"
      android:pathData="M20,2L4,2c-1.1,0-2,0.9-2,2v18l4-4h14c1.1,0,2-0.9,2-2L22,4C22,2.9,21.1,2,20,2z"/>
</vector>

其中 android:tint="?attr/colorOnSurface" 可实现主题色自动适配，提升可维护性。

2.1.3 监听导航项选中事件（setOnItemSelectedListener）

为了响应用户点击操作，必须注册选择监听器。 setOnItemSelectedListener 是官方推荐的方式（替代已弃用的 setOnNavigationItemSelectedListener ），返回布尔值表示是否消费该事件。

bottomNavigation.setOnItemSelectedListener(item -> {
    int itemId = item.getItemId();
    if (itemId == R.id.nav_chat) {
        // 切换到聊天页面
        switchToFragment(chatFragment);
        return true;
    } else if (itemId == R.id.nav_contacts) {
        switchToFragment(contactsFragment);
        return true;
    } else if (itemId == R.id.nav_discover) {
        switchToFragment(discoverFragment);
        return true;
    } else if (itemId == R.id.nav_me) {
        switchToFragment(meFragment);
        return true;
    }
    return false;
});

此处假设已提前创建四个 Fragment 实例并缓存。 switchToFragment() 方法将在第三章详细展开，当前只需关注事件分发机制。

事件传递机制分析

flowchart TD
    A[用户点击底部菜单项] --> B{OnItemSelectedListener触发}
    B --> C[获取被点击Item的ID]
    C --> D[匹配ID执行对应逻辑]
    D --> E[切换Fragment或跳转Activity]
    E --> F[返回true表示已处理]
    F --> G[更新选中状态UI]
    B -- 返回false --> H[不更新选中状态]

逻辑解读 ：
- Lambda 表达式 item -> { ... } 实现 OnItemSelectedListener 接口。
- item.getItemId() 获取当前选中项的资源 ID。
- 必须返回 true 才能激活选中态动画与视觉反馈；否则控件会恢复原状。
- 回调发生在主线程，适合直接操作 UI，但避免在此执行耗时任务。

此外，可通过代码动态设置默认选中项：

bottomNavigation.setSelectedItemId(R.id.nav_chat);

这行代码通常用于恢复上次停留页面或启动页引导逻辑。

2.2 自定义样式与主题适配

虽然 BottomNavigationView 提供了良好的默认外观，但在品牌化设计或深色主题适配中往往需要深度定制。通过结合 styles.xml 、 colors.xml 和资源限定符目录，可以实现细粒度的视觉控制。

2.2.1 通过styles.xml定制背景色、字体大小与选中效果

可在 res/values/styles.xml 中定义专用样式：

<style name="Widget.App.BottomNavigationView" parent="Widget.MaterialComponents.BottomNavigationView">
    <item name="android:background">@color/nav_bg_color</item>
    <item name="itemIconSize">24dp</item>
    <item name="itemTextAppearanceActive">@style/TextAppearance.BottomNav.Active</item>
    <item name="itemTextAppearanceInactive">@style/TextAppearance.BottomNav.Inactive</item>
    <item name="elevation">8dp</item>
</style>

<style name="TextAppearance.BottomNav.Active" parent="TextAppearance.Design.BottomSheet.Header">
    <item name="android:textSize">12sp</item>
    <item name="android:fontFamily">@font/roboto_medium</item>
</style>

<style name="TextAppearance.BottomNav.Inactive" parent="TextAppearance.Design.Caption">
    <item name="android:textSize">10sp</item>
    <item name="android:textColor">@color/text_secondary</item>
</style>

然后在布局中引用：

<com.google.android.material.bottomnavigation.BottomNavigationView
    ...
    style="@style/Widget.App.BottomNavigationView" />

属性	功能说明
`android:background`	设置整体背景色
`itemIconSize`	统一图标尺寸
`itemTextAppearanceActive/Inactive`	分别定义激活与非激活状态的文字样式
`elevation`	控件阴影层级，增强层次感

这种方式实现了结构与样式的分离，便于多页面复用。

2.2.2 利用colors.xml管理状态选择器（ColorStateList）

文字与图标的颜色不应写死，而应基于“选中”、“未选中”等状态动态变化。为此需使用 ColorStateList 。

创建 res/color/nav_item_color.xml ：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/colorPrimary" android:state_checked="true"/>
    <item android:color="@color/text_hint" android:state_checked="false"/>
</selector>

并在 styles.xml 中应用：

<item name="itemTextColor">@color/nav_item_color</item>
<item name="itemIconTint">@color/nav_item_color</item>

这样就能实现文字与图标同色联动变色效果。

✅ 最佳实践：将所有颜色抽取至 colors.xml ，便于统一管理和主题切换。

2.2.3 夜间模式下的颜色切换与资源配置

Android 支持通过资源限定符实现夜间模式适配。创建 res/values-night/colors.xml ：

<resources>
    <color name="nav_bg_color">#121212</color>
    <color name="text_secondary">#B0B0B0</color>
    <color name="colorPrimary">#BB86FC</color>
</resources>

同时确保在 AndroidManifest.xml 中启用主题切换：

<application
    android:theme="@style/Theme.MyApp">
</application>

其中 Theme.MyApp 继承自 Theme.MaterialComponents.DayNight 系列主题，即可自动响应系统亮度变化。

也可手动切换模式：

AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES); // 强制夜间

2.3 突破默认限制：扩展BottomNavigationView行为

尽管 BottomNavigationView 功能完善，但某些场景下仍需突破其默认行为约束。

2.3.1 禁用位移动画与文字缩放效果

默认情况下，选中项会有轻微上浮动画和文字放大效果。若想关闭这些动效以追求极简风格：

bottomNavigation.setItemHorizontalTranslationEnabled(false);

此方法禁止选中项的横向位移动画（默认启用），使所有图标保持静止。

若想彻底去除所有动画，可反射修改内部字段或继承重写，但更推荐使用 LabelVisibilityMode ：

bottomNavigation.setLabelVisibilityMode(LabelVisibilityMode.LABEL_VISIBILITY_LABELED);
// 或 LABEL_VISIBILITY_UNLABELED / LABEL_VISIBILITY_SELECTED

LABELED : 始终显示文字（默认）
UNLABELED : 永远隐藏文字
SELECTED : 仅选中项显示文字

2.3.2 动态修改标签可见性与启用禁用状态

有时需要根据权限或登录状态动态控制某一项是否可用：

Menu menu = bottomNavigation.getMenu();
MenuItem discoverItem = menu.findItem(R.id.nav_discover);
discoverItem.setEnabled(false); // 灰化不可点击
discoverItem.setVisible(false);  // 完全隐藏

🔍 注意： setVisible(false) 会导致其他项重新均分空间，可能引起布局抖动。

若需保留占位但仍不可用，建议使用 setEnabled(false) 配合自定义 ColorStateList 显示灰色图标。

2.3.3 结合AppCompatDelegate实现版本兼容性处理

为确保旧设备正常显示 Material 组件，应在 Application 或 BaseActivity 中设置委托：

@Override
protected void onCreate(Bundle savedInstanceState) {
    AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM);
    super.onCreate(savedInstanceState);
}

同时使用 AppCompatActivity 作为基类，确保主题继承链完整。

2.4 实践案例：仿微信底部导航栏初步集成

现在整合前述知识，实现一个接近微信风格的底部导航栏。

2.4.1 创建主界面MainActivity并嵌入BottomNavigationView

已完成布局定义与控件初始化。

2.4.2 定义四个导航项（微信、通讯录、发现、我）

已在 bottom_nav_menu.xml 中正确定义四个条目及其图标。

2.4.3 实现基本页面跳转与初始选中状态设置

// 初始化Fragment
chatFragment = new ChatFragment();
contactsFragment = new ContactsFragment();
discoverFragment = new DiscoverFragment();
meFragment = new MeFragment();

// 默认加载第一个Fragment
getSupportFragmentManager()
    .beginTransaction()
    .add(R.id.container, chatFragment)
    .commit();

// 设置默认选中
bottomNavigation.setSelectedItemId(R.id.nav_chat);

// 注册监听
bottomNavigation.setOnItemSelectedListener(item -> {
    Fragment selectedFragment = null;
    int id = item.getItemId();
    if (id == R.id.nav_chat) selectedFragment = chatFragment;
    else if (id == R.id.nav_contacts) selectedFragment = contactsFragment;
    else if (id == R.id.nav_discover) selectedFragment = discoverFragment;
    else if (id == R.id.nav_me) selectedFragment = meFragment;

    if (selectedFragment != null) {
        getSupportFragmentManager()
            .beginTransaction()
            .replace(R.id.container, selectedFragment)
            .commit();
        return true;
    }
    return false;
});

执行逻辑说明 ：
- 使用 replace() 替换容器内容，简单直接但会销毁重建 Fragment。
- 更优方案见第三章——使用 hide() 与 show() 保留状态。

至此，一个具备基本导航功能的底部栏已搭建完毕，为后续高级特性奠定了坚实基础。

3. Fragment动态切换与页面状态管理

在现代 Android 应用开发中，单 Activity 多 Fragment 架构已成为主流设计模式。尤其是在具备底部导航栏的场景下（如微信、支付宝等应用），通过在一个主 Activity 中管理多个 Fragment 的显示与隐藏，能够有效降低内存开销、提升页面切换效率，并实现页面状态的持久化保留。本章将深入探讨 Fragment 的生命周期控制机制、事务管理策略以及如何结合 ViewPager2 实现高性能的页面切换系统。我们将从底层原理出发，逐步构建一个既能响应 BottomNavigationView 点击事件，又能支持手势滑动并保持页面状态完整的导航架构。

3.1 Fragment生命周期与事务管理机制

Fragment 是 Android 中用于模块化 UI 组件的重要组件，其生命周期与宿主 Activity 紧密关联，但又具备独立的状态流转过程。理解 Fragment 的生命周期是实现高效页面切换的前提。当使用 FragmentTransaction 进行页面操作时，不同的方法调用会触发不同生命周期状态的变化，进而影响用户体验和性能表现。

3.1.1 FragmentTransaction的add、hide、show操作原理

传统的页面切换通常采用 replace() 方法替换容器中的 Fragment，但这会导致每次切换都销毁旧实例并创建新实例，造成数据丢失和频繁初始化。相比之下，使用 add() + hide() + show() 的组合方式可以实现 Fragment 的缓存复用，避免重复创建。

class MainActivity : AppCompatActivity() {

    private lateinit var homeFragment: HomeFragment
    private lateinit var contactFragment: ContactFragment
    private var currentFragment: Fragment? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // 初始化 Fragment
        homeFragment = HomeFragment()
        contactFragment = ContactFragment()

        supportFragmentManager.beginTransaction().also { tx ->
            tx.add(R.id.fragment_container, homeFragment, "home")
            tx.add(R.id.fragment_container, contactFragment, "contact")
            tx.hide(contactFragment) // 隐藏非当前页
            tx.commit()
        }

        currentFragment = homeFragment

        bottomNavigationView.setOnItemSelectedListener { item ->
            when (item.itemId) {
                R.id.nav_home -> switchTo(homeFragment)
                R.id.nav_contact -> switchTo(contactFragment)
                else -> false
            }
        }
    }

    private fun switchTo(target: Fragment): Boolean {
        if (currentFragment !== target) {
            supportFragmentManager.beginTransaction().apply {
                hide(currentFragment!!)
                show(target)
                currentFragment = target
                commit()
            }
        }
        return true
    }
}

代码逻辑逐行解读分析：

第 6~9 行：声明 Fragment 引用变量，确保在整个 Activity 生命周期内可访问。
第 14~15 行：首次创建两个 Fragment 实例，注意此时并未添加到界面。
第 17~21 行：开启事务，先 add() 所有 Fragment 到同一容器（如 FrameLayout），然后 hide() 非默认页，最后提交事务。
第 23 行：记录当前显示的 Fragment，便于后续判断是否需要切换。
第 32~38 行： switchTo() 方法执行真正的切换动作，仅需 hide() 当前页、 show() 目标页，无需重新创建对象。

操作	是否触发 onCreateView	是否保留实例	性能影响
replace()	是	否	高（重建视图）
add/hide/show	否（已存在）	是	低（仅显示/隐藏）

该方案的优势在于：
- 页面状态自动保留（如 RecyclerView 滚动位置、输入框内容）；
- 减少网络请求或数据库查询次数；
- 提升用户感知流畅度。

mermaid 流程图展示 Fragment 显示流程

sequenceDiagram
    participant User
    participant Activity
    participant FragmentManager
    participant Transaction

    User->>Activity: 点击底部菜单项
    Activity->>FragmentManager: beginTransaction()
    FragmentManager->>Transaction: hide(当前Fragment)
    Transaction->>Transaction: show(目标Fragment)
    Transaction->>FragmentManager: commit()
    FragmentManager->>Activity: 更新UI
    Activity->>User: 完成页面切换

此流程清晰地体现了 Fragment 切换过程中各组件间的协作关系：用户交互驱动 Activity 发起事务，FragmentManager 协调多个 Fragment 的可见性变化，最终完成无感知的页面跳转。

3.1.2 避免重复创建Fragment的缓存策略

为防止因配置变更（如屏幕旋转）或任务栈恢复导致 Fragment 被多次实例化，必须实施有效的缓存机制。推荐做法是在 onCreate() 中检查是否存在已有实例：

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    val fm = supportFragmentManager

    homeFragment = fm.findFragmentByTag("home") as? HomeFragment
        ?: HomeFragment().also {
            fm.beginTransaction()
                .add(R.id.fragment_container, it, "home")
                .commit()
        }

    contactFragment = fm.findFragmentByTag("contact") as? ContactFragment
        ?: ContactFragment().also {
            fm.beginTransaction()
                .add(R.id.fragment_container, it, "contact")
                .hide(it)
                .commit()
        }
}

参数说明：
- findFragmentByTag() ：根据标签查找已存在的 Fragment；
- as? Type ：安全类型转换，失败返回 null；
- commit() ：异步提交事务，适合初始化阶段；
- .also {} ：Kotlin 作用域函数，用于链式构造对象。

这种“查重即用”的策略极大提升了稳定性。此外，还可以通过 ViewModel 共享数据，进一步解耦 UI 层与业务逻辑。

3.1.3 利用commitAllowingStateLoss保证异步安全

在某些场景下（如异步回调、Handler 延迟执行），若直接调用 commit() 可能抛出 IllegalStateException: Can not perform this action after onSaveInstanceState 。这是因为 FragmentManager 已经保存了状态，不能再修改事务队列。

解决方案是使用 commitAllowingStateLoss() ：

handler.postDelayed({
    val transaction = supportFragmentManager.beginTransaction()
    transaction.replace(R.id.container, newFragment)
    transaction.commitAllowingStateLoss() // 允许状态丢失
}, 2000)

注意事项：
- 此方法可能导致 Fragment 状态不一致，仅建议用于非关键路径；
- 若涉及用户输入或敏感数据更新，应优先使用 isStateSaved 判断：

if (!supportFragmentManager.isStateSaved) {
    transaction.commit()
} else {
    transaction.commitNowAllowingStateLoss()
}

表格对比三种提交方式：

方法	安全性	适用场景
`commit()`	高	正常生命周期内
`commitNow()`	高	需立即生效（阻塞主线程）
`commitAllowingStateLoss()`	中	异步任务、通知响应等非核心操作

合理选择事务提交方式，是保障 Fragment 系统稳定运行的关键环节。

3.2 基于单Activity多Fragment的页面架构

随着 App 功能复杂度上升，传统的多 Activity 结构已难以满足快速导航与状态保留的需求。基于“单 Activity + 多 Fragment”的架构成为大型应用的标准范式。它不仅简化了路由管理，还便于统一处理主题、权限、动画等全局行为。

3.2.1 主Activity中维护Fragment容器与引用数组

为了高效管理多个 Fragment，应在主 Activity 中建立统一的引用池。以下是一个典型的结构设计：

class MainActivity : AppCompatActivity() {

    private val fragments = arrayOf(
        HomeFragment(),
        ContactsFragment(),
        DiscoverFragment(),
        ProfileFragment()
    )

    private var currentIndex = 0

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val fm = supportFragmentManager
        val tx = fm.beginTransaction()

        // 添加所有 Fragment 并隐藏非首页
        fragments.forEachIndexed { index, fragment ->
            if (index == 0) {
                tx.add(R.id.fragment_container, fragment, "frag_$index")
            } else {
                tx.add(R.id.fragment_container, fragment, "frag_$index")
                tx.hide(fragment)
            }
        }
        tx.commit()
    }
}

优势分析：
- 使用数组集中管理 Fragment 实例，便于索引；
- 批量添加减少事务开销；
- 标签命名规范（frag_0, frag_1）利于调试追踪。

表格：Fragment 管理方式对比

方式	内存占用	切换速度	状态保留	扩展性
数组预加载	较高	快	完整	高
懒加载工厂	低	中	依赖 ViewModel	中
replace 模式	低	慢	无	低

对于底部导航类应用，推荐采用预加载 + 缓存模式，在启动时一次性加载常用页面，换取后续使用的极致流畅体验。

3.2.2 封装切换方法实现平滑过渡与状态保留

为了增强可维护性，应将页面切换逻辑封装成通用方法，并支持动画过渡：

private fun switchFragment(index: Int) {
    if (currentIndex == index) return

    val fm = supportFragmentManager
    val tx = fm.beginTransaction()

    // 添加淡入淡出动画
    tx.setCustomAnimations(
        android.R.anim.fade_in,
        android.R.anim.fade_out,
        android.R.anim.fade_in,
        android.R.anim.fade_out
    )

    tx.hide(fragments[currentIndex])
    tx.show(fragments[index])
    tx.commit()

    currentIndex = index
}

参数说明：
- setCustomAnimations(int enter, int exit) ：设置进入/退出动画；
- 支持重载版本传入 popEnter/popExit，适用于回退栈；
- 动画资源可自定义（如缩放、位移）以匹配品牌风格。

同时，可通过监听器同步 BottomNavigationView 的选中状态：

bottomNavigationView.setOnItemSelectedListener { item ->
    val newIndex = when (item.itemId) {
        R.id.nav_home -> 0
        R.id.nav_contacts -> 1
        R.id.nav_discover -> 2
        R.id.nav_profile -> 3
        else -> -1
    }
    if (newIndex != -1) {
        switchFragment(newIndex)
        true
    } else false
}

3.2.3 处理返回键逻辑与当前页面判断

在单 Activity 架构中，返回键不应退出应用，而应交给当前 Fragment 决定是否拦截：

override fun onBackPressed() {
    val current = fragments[currentIndex]
    if (current is OnBackPressedListener) {
        if (current.onBackPressed()) return // 被消费
    }
    // 默认行为：双击退出
    if (!doubleBackToExit()) {
        Toast.makeText(this, "再按一次退出", Toast.LENGTH_SHORT).show()
    } else {
        finish()
    }
}

interface OnBackPressedListener {
    fun onBackPressed(): Boolean
}

Fragment 可实现接口处理内部返回逻辑（如 WebView 回退、弹窗关闭）：

class BrowserFragment : Fragment(), OnBackPressedListener {
    private lateinit var webView: WebView

    override fun onBackPressed(): Boolean {
        if (webView.canGoBack()) {
            webView.goBack()
            return true
        }
        return false
    }
}

这种方式实现了职责分离，使 Activity 不关心具体页面逻辑，提高了系统的可扩展性。

3.3 ViewPager2与PagerAdapter协同控制

尽管手动管理 Fragment 切换灵活可控，但在需要支持左右滑动的场景中，引入 ViewPager2 能大幅简化开发工作量。它不仅内置滑动支持，还能与 BottomNavigationView 实现双向绑定。

3.3.1 使用ViewPager2替代旧版ViewPager的优势

ViewPager2 是 Google 推荐的新一代页面滑动控件，相较于旧版 ViewPager ，具有以下改进：

支持垂直滑动（orientation 设置）
基于 RecyclerView 架构，性能更优
支持 DiffUtil 实现局部刷新
更好的 RTL（从右到左）语言兼容

布局文件示例：

<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1" />

3.3.2 实现FragmentStateAdapter进行高效页面管理

FragmentStateAdapter 是专为 ViewPager2 设计的适配器，能自动管理 Fragment 的创建与销毁：

class MainViewPagerAdapter(activity: FragmentActivity) :
    FragmentStateAdapter(activity) {

    private val fragments = listOf(
        HomeFragment::class.java,
        ContactsFragment::class.java,
        DiscoverFragment::class.java,
        ProfileFragment::class.java
    )

    override fun getItemCount(): Int = fragments.size

    override fun createFragment(position: Int): Fragment {
        return fragments[position].newInstance()
    }
}

扩展功能：传递参数

override fun createFragment(position: Int): Fragment {
    return fragments[position].newInstance().apply {
        arguments = Bundle().apply {
            putInt("page_index", position)
        }
    }
}

Adapter 内部利用 FragmentFactory 管理实例化过程，避免反射开销。

3.3.3 同步ViewPager2滑动与BottomNavigationView选中状态

为实现联动效果，需监听 ViewPager2 的页面变化，并更新 BottomNavigationView：

viewPager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
    override fun onPageSelected(position: Int) {
        super.onPageSelected(position)
        bottomNavigationView.menu.getItem(position).isChecked = true
    }
})

// 反向同步：点击 BottomNav 控制 ViewPager
bottomNavigationView.setOnItemSelectedListener { item ->
    val position = when (item.itemId) {
        R.id.nav_home -> 0
        R.id.nav_contacts -> 1
        R.id.nav_discover -> 2
        R.id.nav_profile -> 3
        else -> return@setOnItemSelectedListener false
    }
    if (viewPager.currentItem != position) {
        viewPager.currentItem = position
    }
    true
}

mermaid 流程图：双向同步机制

graph LR
    A[用户点击BottomNav] --> B{设置ViewPager.currentItem}
    B --> C[ViewPager触发onPageSelected]
    C --> D[更新BottomNav选中项]
    E[用户滑动ViewPager] --> F{onPageSelected回调}
    F --> G[更新BottomNav状态]

这种双向绑定机制确保了无论哪种操作方式，UI 状态始终保持一致。

3.4 实践案例：构建完整的页面切换系统

本节将整合前述知识，打造一个仿微信级别的页面切换系统。

3.4.1 创建四个对应页面的Fragment类

每个 Fragment 继承 BaseFragment ，统一处理懒加载与数据恢复：

abstract class BaseFragment : Fragment() {
    private var isLoaded = false

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        if (!isLoaded) {
            loadData()
            isLoaded = true
        }
    }

    abstract fun loadData()
}

子类实现具体逻辑：

class HomeFragment : BaseFragment() {
    override fun loadData() {
        // 请求消息列表
    }
}

3.4.2 实现点击导航栏切换页面且保持状态

完整集成 ViewPager2 + BottomNavigationView ：

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        val adapter = MainViewPagerAdapter(this)
        binding.viewPager.adapter = adapter

        binding.viewPager.registerOnPageChangeCallback(...)
        binding.bottomNavigation.setOnItemSelectedListener(...)
    }
}

XML 布局结构清晰分层，便于后期优化。

3.4.3 解决ViewPager2预加载导致的数据刷新问题

默认情况下，ViewPager2 会预加载相邻页面，可能引发不必要的网络请求。解决办法是在 Fragment 中加入懒加载判断：

override fun setUserVisibleHint(isVisibleToUser: Boolean) {
    super.setUserVisibleHint(isVisibleToUser)
    if (isVisibleToUser && !isLoaded) {
        loadData()
    }
}

或使用 lifecycle.addObserver() 监听 ON_START 状态：

override fun onResume() {
    super.onResume()
    if (!isLoaded) loadData()
}

综合运用这些技巧，即可构建一个既高效又稳定的页面切换系统，完美支撑底部导航栏的核心交互需求。

4. 手势滑动与动画渐变的深度实现

在现代Android应用中，用户对交互体验的要求早已超越了简单的点击跳转。以微信为代表的头部应用，其底部导航栏不仅支持点击切换，更实现了 滑动联动、颜色渐变、图标缩放、文字位移 等细腻动画效果，营造出高度流畅且富有层次感的操作反馈。这种“手势驱动+视觉同步”的交互范式已成为高质量App的标准配置。本章将深入探讨如何通过 ViewPager2 、属性动画系统以及手势识别机制，构建一套媲美微信级别的滑动体验体系。

我们将从底层技术选型出发，解析Android平台提供的多种手势处理方式，并结合 ValueAnimator 与 ArgbEvaluator 实现颜色插值过渡；进一步利用 ObjectAnimator 和 ScaleX/ScaleY 完成图标的动态缩放；最终整合所有动画逻辑，在页面滑动过程中实现底部导航项的 联动渐变与同步响应 ，打造真正意义上的沉浸式导航体验。

4.1 手势驱动页面切换的技术选型

移动设备的核心交互方式之一是触摸手势，尤其是左右滑动操作，广泛应用于内容浏览场景。在实现底部导航栏与页面滑动联动时，必须准确捕捉用户的滑动手势，并将其映射为页面切换行为。为此，Android提供了多种技术路径来实现手势识别，开发者需根据具体需求选择最优方案。

4.1.1 OnGestureListener识别左右滑动手势

最基础的手势识别方式是使用 GestureDetector.OnGestureListener 接口，它能够监听常见的触摸事件如滑动（Fling）、长按、双击等。通过重写 onFling() 方法，可以判断用户是否进行了有效的左右滑动操作。

private GestureDetectorCompat mGestureDetector;

mGestureDetector = new GestureDetectorCompat(this, new GestureDetector.SimpleOnGestureListener() {
    @Override
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
        float deltaX = e2.getX() - e1.getX();
        float threshold = 150; // 最小滑动距离阈值
        float velocityThreshold = 100; // 最小速度阈值

        if (Math.abs(deltaX) > threshold && Math.abs(velocityX) > velocityThreshold) {
            if (deltaX > 0) {
                // 向右滑动 → 返回上一页
                navigateBack();
            } else {
                // 向左滑动 → 进入下一页
                navigateForward();
            }
            return true;
        }
        return false;
    }
});

// 在 onTouchEvent 中传递事件
@Override
public boolean onTouchEvent(MotionEvent event) {
    return mGestureDetector.onTouchEvent(event);
}

代码逻辑逐行分析：

第3行 ：创建一个 GestureDetectorCompat 实例，兼容旧版本 Android。
第4行 ：使用 SimpleOnGestureListener 避免实现全部接口方法，仅关注 onFling 。
第6–13行 ： onFling 接收起始点 e1 和结束点 e2 ，计算 X 轴位移 deltaX 。
第10–11行 ：设置两个阈值 —— 滑动距离和速度，防止误触。
第12–17行 ：根据 deltaX 正负判断方向，调用对应导航方法。
第24行 ： onTouchEvent 将原始触摸事件交给 GestureDetector 处理。

⚠️ 注意：此方式适用于自定义容器或非 ViewPager 场景，但在 ViewPager2 中已内置滑动支持，无需手动监听。

4.1.2 GestureDetectorCompat兼容不同Android版本

由于原始 GestureDetector 在某些低版本系统中存在兼容性问题（如 API < 14），推荐始终使用 Support Library 提供的 GestureDetectorCompat 。该类自动适配不同 SDK 版本，确保在老旧设备上也能正常工作。

属性	描述
`context`	应用上下文环境
`listener`	实现 `OnGestureListener` 或 `SimpleOnGestureListener`
`handler` （可选）	自定义 Handler 控制事件调度线程

此外，可通过资源限定符（如 values-v14 ）为不同 API 级别提供差异化实现策略，例如在高版本中启用更灵敏的惯性检测算法。

<!-- res/values/dimens.xml -->
<dimen name="swipe_threshold">150dp</dimen>

<!-- res/values-v21/dimens.xml -->
<dimen name="swipe_threshold">120dp</dimen>

上述配置允许在 Material Design 设备上降低滑动门槛，提升用户体验一致性。

4.1.3 在ViewPager2中内置滑动支持无需额外监听

对于大多数多页导航结构而言，直接使用 ViewPager2 是最佳实践。它原生支持左右滑动切换页面，并提供 registerOnPageChangeCallback() 方法用于监听滑动过程中的状态变化。

viewPager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
    override fun onPageScrolled(
        position: Int,
        positionOffset: Float,
        positionOffsetPixels: Int
    ) {
        // 核心回调：获取当前滑动比例
        updateBottomNavigation(position, positionOffset)
    }

    override fun onPageSelected(position: Int) {
        // 页面完全选中时更新底部导航选中项
        bottomNavigationView.menu.getItem(position).isChecked = true
    }
})

参数说明：

position : 当前正在离开的页面索引（从0开始）
positionOffset : 浮点值 [0,1) ，表示从 position 到 position + 1 的滑动进度
positionOffsetPixels : 像素级偏移量，通常不用于动画控制

mermaid流程图展示事件流转：

graph TD
    A[用户手指滑动] --> B{ViewPager2捕获Touch事件}
    B --> C[触发onPageScrolled回调]
    C --> D[传入position和positionOffset]
    D --> E[调用updateBottomNavigation()]
    E --> F[执行颜色渐变/图标缩放动画]
    F --> G[页面切换完成]
    G --> H[onPageSelected触发]
    H --> I[同步BottomNavigationView选中状态]

该流程体现了 事件驱动架构 的优势：无需主动轮询手势状态，而是由系统在恰当时机推送数据，极大简化了开发复杂度并提升了性能效率。

4.2 字体颜色渐变动画实现机制

在微信风格的底部导航栏中，当用户滑动页面时，两个相邻标签的文字颜色会随着滑动比例平滑过渡 —— 例如，“微信”由深色变为浅色的同时，“通讯录”由浅色渐变为深色。这种渐变效果增强了视觉连续性，使用户感知到页面间的关联关系。

4.2.1 使用ArgbEvaluator配合ValueAnimator插值颜色变化

Android 动画系统提供了 ArgbEvaluator 类，专门用于在两个 ARGB 颜色之间进行插值计算。结合 ValueAnimator 可实现任意属性的颜色渐变动效。

ValueAnimator colorAnim = ValueAnimator.ofObject(new ArgbEvaluator(), colorFrom, colorTo);
colorAnim.addUpdateListener(animation -> {
    int currentColor = (int) animation.getAnimatedValue();
    textView.setTextColor(currentColor);
});
colorAnim.setDuration(300);
colorAnim.start();

参数说明：

ArgbEvaluator() : 计算红、绿、蓝、透明度四个通道的中间值
colorFrom/colorTo : 起始与目标颜色（需为 Color.RED , 0xFFRRGGBB 或资源引用）
setDuration(300) : 动画持续时间为300毫秒，符合Material Design建议

逻辑分析：

该动画在内部每隔几毫秒计算一次当前颜色值，并通过 addUpdateListener 回调刷新 TextView 的文本颜色。相比直接修改 RGB 分量， ArgbEvaluator 能保证色彩过渡自然无跳跃。

4.2.2 ObjectAnimator对TextView textColor属性直接动画

更简洁的方式是使用 ObjectAnimator 直接针对 textColor 属性执行动画：

val animator = ObjectAnimator.ofInt(textView, "textColor", startColor, endColor)
animator.setEvaluator(ArgbEvaluator())
animator.duration = 300
animator.start()

对比表格：两种颜色动画方式优劣

方式	优点	缺点	适用场景
`ValueAnimator + ArgbEvaluator`	灵活控制每帧逻辑	代码较多，需手动绑定属性	复杂动画链、条件判断
`ObjectAnimator`	写法简洁，自动绑定属性	仅支持具备setter方法的属性	单一属性动画

✅ 推荐在简单颜色过渡中使用 ObjectAnimator ，而在需要精确控制动画节奏时采用 ValueAnimator 。

4.2.3 计算滑动比例映射到颜色过渡区间

关键在于将 ViewPager2 的 positionOffset 映射为颜色权重。假设我们有四个页面，则每次滑动影响的是 position 和 position + 1 两个标签。

private fun updateBottomNavigation(position: Int, offset: Float) {
    val menu = bottomNavigationView.menu
    val itemCurrent = menu.getItem(position)
    val itemNext = menu.getItem(position + 1)

    val tvCurrent = findTextViewByItemId(itemCurrent.itemId)
    val tvNext = findTextViewByItemId(itemNext.itemId)

    val colorInactive = ContextCompat.getColor(this, R.color.text_inactive)
    val colorActive = ContextCompat.getColor(this, R.color.text_active)

    // 当前标签：从 active -> inactive
    val currentColor = evaluateColor(colorActive, colorInactive, offset)
    tvCurrent?.setTextColor(currentColor)

    // 下一个标签：从 inactive -> active
    val nextColor = evaluateColor(colorInactive, colorActive, offset)
    tvNext?.setTextColor(nextColor)
}

private fun evaluateColor(from: Int, to: Int, fraction: Float): Int {
    return ArgbEvaluator().evaluate(fraction, from, to) as Int
}

表格：滑动过程中颜色变化示例（fraction = positionOffset）

Fraction	当前标签颜色	下一标签颜色
0.0	Active (#000000)	Inactive (#999999)
0.25	#333333	#777777
0.5	#666666	#555555
0.75	#999999	#333333
1.0	Inactive (#999999)	Active (#000000)

这一线性插值模型确保了颜色过渡的平滑性与可预测性，完美还原微信级别的视觉反馈。

4.3 图标缩放与位移动画同步处理

除了颜色渐变，微信底部导航还包含图标的 放大缩小 与 垂直位移 效果。当前页面对应的图标会被略微放大并上移，形成“浮起”感，增强焦点提示。

4.3.1 利用setScaleX/scaleY实现图标的放大缩小

每个导航项通常由 ImageView 和 TextView 组成。我们可以通过设置 scaleX 与 scaleY 属性实现等比缩放：

val scaleDown = PropertyValuesHolder.ofFloat(View.SCALE_X, 1f, 0.8f)
val scaleUp = PropertyValuesHolder.ofFloat(View.SCALE_X, 0.8f, 1f)

// 缩小动画
val animDown = ObjectAnimator.ofPropertyValuesHolder(imageView, scaleDown)
animDown.duration = 150
animDown.interpolator = AccelerateDecelerateInterpolator()

// 放大动画
val animUp = ObjectAnimator.ofPropertyValuesHolder(imageView, scaleUp)
animUp.duration = 150
animUp.interpolator = AccelerateDecelerateInterpolator()

参数说明：

PropertyValuesHolder : 允许同时动画多个属性
View.SCALE_X/Y : 控件在X/Y轴上的缩放比例（1.0为原始大小）
AccelerateDecelerateInterpolator : 先加速后减速，模拟自然运动

4.3.2 属性动画链式执行与插值器选择

为了实现“缩放+位移”复合动画，可使用 AnimatorSet 进行编排：

val set = AnimatorSet()
val scaleX = ObjectAnimator.ofFloat(view, View.SCALE_X, 1f, 1.2f)
val scaleY = ObjectAnimator.ofFloat(view, View.SCALE_Y, 1f, 1.2f)
val translationY = ObjectAnimator.ofFloat(view, View.TRANSLATION_Y, 0f, -10f)

set.playTogether(scaleX, scaleY, translationY)
set.duration = 200
set.interpolator = OvershootInterpolator(1.5f) // 超出目标再回弹
set.start()

插值器对比表：

插值器	效果	适用场景
`LinearInterpolator`	匀速运动	机械式动画
`AccelerateDecelerateInterpolator`	先快后慢	页面切换、淡入淡出
`OvershootInterpolator`	超出目标后回弹	强调动作完成
`AnticipateOvershootInterpolator`	先回拉再冲过再回弹	夸张反馈

选择合适的插值器能显著提升动画质感。

4.3.3 多个View动画的同步协调机制

当多个导航项需同时响应滑动比例时，必须保证所有动画的时间轴一致。可通过共享 TimeInterpolator 和统一 duration 来实现：

fun animateTabTransition(
    currentIcon: ImageView,
    nextIcon: ImageView,
    offset: Float
) {
    val scaleCurrent = 1.0f - 0.2f * offset  // 从1.0→0.8
    val scaleNext = 0.8f + 0.2f * offset     // 从0.8→1.0

    currentIcon.scaleX = scaleCurrent
    currentIcon.scaleY = scaleCurrent
    nextIcon.scaleX = scaleNext
    nextIcon.scaleY = scaleNext
}

💡 此处未使用 ObjectAnimator 而是直接赋值，是因为该方法在 onPageScrolled 中高频调用（每帧一次），使用轻量级属性设置可避免频繁创建动画对象带来的性能损耗。

4.4 实践案例：打造微信级滑动体验

现在我们将前述所有技术整合，实现一个完整的滑动联动系统。

4.4.1 滑动过程中底部导航项颜色渐变联动

完整 onPageScrolled 实现如下：

viewPager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
    override fun onPageScrolled(position: Int, offset: Float, offsetPixels: Int) {
        if (position >= menu.size() - 1) return

        val activeColor = getColor(R.color.bottom_nav_active)
        val inactiveColor = getColor(R.color.bottom_nav_inactive)

        val currentItem = bottomNav.menu.getItem(position)
        val nextItem = bottomNav.menu.getItem(position + 1)

        updateTextColorAndIcon(currentItem, nextItem, offset, activeColor, inactiveColor)
    }
})

private fun updateTextColorAndIcon(
    current: MenuItem,
    next: MenuItem,
    offset: Float,
    active: Int,
    inactive: Int
) {
    val currentLabel = getTextViewForMenuItem(current.itemId)
    val nextLabel = getTextViewForMenuItem(next.itemId)
    val currentIcon = getImageViewForMenuItem(current.itemId)
    val nextIcon = getImageViewForMenuItem(next.itemId)

    // 颜色渐变
    currentLabel?.setTextColor(evaluateColor(active, inactive, offset))
    nextLabel?.setTextColor(evaluateColor(inactive, active, offset))

    // 图标缩放
    val scale = 1f - 0.2f * offset
    currentIcon?.scaleX = scale
    currentIcon?.scaleY = scale

    val nextScale = 0.8f + 0.2f * offset
    nextIcon?.scaleX = nextScale
    nextIcon?.scaleY = nextScale
}

说明：

getTextViewForMenuItem() 需通过反射或封装获取 BottomNavigationView 内部 TextView（因私有访问限制）
实际项目中建议替换为自定义 BottomNavigation 以获得完全控制权

4.4.2 松手后自动完成页面翻页或回弹判定

虽然 ViewPager2 自动处理滑动终点判断，但有时需干预其行为。例如设置最小滑动距离决定是否翻页：

override fun onPageScrolled(position: Int, offset: Float, offsetPixels: Int) {
    val shouldSnapToNext = offset > 0.3f
    if (shouldSnapToNext) {
        viewPager.currentItem = position + 1
    } else {
        viewPager.currentItem = position
    }
}

⚠️ 注意：不应在此处频繁调用 setCurrentItem ，否则会导致滑动卡顿。应仅在 onPageScrollStateChanged(STATE_SETTLING) 中做最终决策。

4.4.3 滑动时图标与文字的联动动画效果还原

最终效果应满足以下标准：

文字颜色随滑动比例线性渐变
图标大小平滑缩放（1.0 ↔ 0.8）
动画频率与滑动帧率同步（60fps）
无内存泄漏，动画结束后资源释放

通过合理运用 ValueAnimator 、 ObjectAnimator 与 ViewPager2 的滑动回调机制，完全可以复刻微信级别的交互细节，为用户提供极致流畅的导航体验。

本章所构建的滑动动画系统不仅适用于底部导航，还可推广至顶部标签栏、轮播图、侧边栏等任何需要视觉联动的组件中，具有极强的通用性与扩展潜力。

5. 自定义View绘制高性能底部导航栏

在现代Android应用开发中，随着用户体验要求的不断提升，标准控件已难以满足复杂、个性化的交互需求。尤其是在高频率使用的底部导航区域，开发者对性能、动画流畅性以及视觉一致性提出了更高要求。虽然 BottomNavigationView 提供了开箱即用的功能，但其内部实现依赖于较多嵌套布局与默认动画机制，在极端场景下容易引发过度绘制或帧率下降问题。为突破这些限制，构建一个完全自定义的底部导航栏成为进阶开发者的必然选择。

本章将深入探讨如何通过继承 View 并重写 onDraw() 方法，从零开始绘制高性能的底部导航栏。相比组合控件方案，这种纯绘制方式能够最大限度减少视图层级、避免冗余测量与布局过程，并实现更精细的颜色渐变、图标缩放和文字渲染控制。我们将系统分析图形绘制流程、触摸事件响应机制及自定义属性配置方法，最终完成一个可直接在XML中声明、支持主题化配置且具备微信级交互体验的底部导航组件。

5.1 自定义组合控件 vs 全新onDraw绘制方案对比

在构建自定义底部导航栏时，开发者通常面临两种技术路径的选择：一种是基于现有 ViewGroup 进行封装（如 LinearLayout 或 ConstraintLayout），另一种则是直接继承 View 类并手动调用 Canvas 绘制所有内容。这两种方式各有优劣，适用于不同的业务场景和技术目标。

5.1.1 继承LinearLayout/ConstraintLayout实现布局封装

该方案的核心思想是将每个导航项抽象为独立的组合控件（例如 BottomNavigationItemView ），每个子项包含一个 ImageView 和 TextView，再将其整体放入水平排列的 LinearLayout 或 ConstraintLayout 中作为容器。

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="56dp"
    android:orientation="horizontal">
    <com.example.ui.BottomNavigationItemView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        app:icon="@drawable/ic_wechat"
        app:text="微信" />

    <!-- 其他三项类似 -->
</LinearLayout>

这种方式的优势在于开发成本低、结构清晰、易于调试。由于使用了标准控件，可以复用 Android 系统自带的点击反馈（如 Ripple 效果）、文本自动换行、字体适配等功能。此外，借助 Data Binding 或 View Binding 可以轻松实现状态同步。

然而，其缺点也十分明显。每一项都是一个独立的 ViewGroup，导致整个导航栏至少产生 4~5 层嵌套（每项可能还有内层容器）。这不仅增加了 measure 和 layout 的耗时，还可能导致 过度绘制（Overdraw） ，特别是在低端设备上表现更为显著。同时，若需实现滑动过程中的颜色渐变或图标缩放联动动画，必须遍历所有子 View 手动更新属性，逻辑复杂且性能开销大。

方案	视图层级	性能	可定制性	开发效率
组合控件（LinearLayout）	高（>3层）	中等	中等	高
组合控件（ConstraintLayout）	中（2~3层）	较好	良好	高
自定义View（onDraw）	极低（单View）	优秀	高	中等

注：视图层级越低，GPU渲染压力越小；性能评分基于典型中端设备测试结果。

5.1.2 继承ViewGroup进行子View排布与事件分发

为了提升灵活性，部分开发者会选择继承 ViewGroup （如 HorizontalScrollView 或自定义 FlowContainer ），自行管理子 View 的添加、测量与布局逻辑。这种方式允许更自由地控制子元素的位置与尺寸，也能更好地处理滑动冲突。

public class CustomBottomBar extends ViewGroup {
    private List<BottomTab> tabs = new ArrayList<>();

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int width = MeasureSpec.getSize(widthMeasureSpec);
        int height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
        int itemWidth = width / tabs.size();

        for (int i = 0; i < getChildCount(); i++) {
            View child = getChildAt(i);
            measureChildWithMargins(child, 
                MeasureSpec.makeMeasureSpec(item7Width, MeasureSpec.EXACTLY),
                MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY));
        }
        setMeasuredDimension(width, height);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int childLeft = 0;
        int height = b - t;

        for (int i = 0; i < getChildCount(); i++) {
            View child = getChildAt(i);
            child.layout(childLeft, 0, childLeft + child.getMeasuredWidth(), height);
            childLeft += child.getMeasuredWidth();
        }
    }
}

此代码展示了如何在 onMeasure 和 onLayout 中手动分配子 View 的空间。优点是可以精确控制每个 tab 的宽度比例，甚至支持动态增减项目数量而不影响整体布局稳定性。此外，可通过重写 onInterceptTouchEvent 实现横向滑动拦截，防止与 ViewPager 冲突。

但这也带来了更高的维护成本。需要手动处理 TouchEvent 分发逻辑、焦点管理、无障碍支持等问题。一旦涉及复杂的动画联动（如滑动时渐变），仍需回调到各个子 View 更新 Paint 属性，无法从根本上解决层级过深的问题。

graph TD
    A[CustomBottomBar] --> B[Child Tab 1]
    A --> C[Child Tab 2]
    A --> D[Child Tab 3]
    A --> E[Child Tab 4]

    B --> F[ImageView]
    B --> G[TextView]
    C --> H[ImageView]
    C --> I[TextView]

    style A fill:#f9f,stroke:#333
    style B fill:#bbf,stroke:#333
    style F fill:#dfd,stroke:#333
    style G fill:#ffd,stroke:#333

    subgraph "View Hierarchy"
        A --> B --> F & G
        A --> C --> H & I
    end

上述 mermaid 图展示了一个典型的 ViewGroup 嵌套结构，可见即使优化后仍存在多层嵌套。

5.1.3 完全继承View重写onDraw实现绘制裁剪优化

当性能成为核心指标时，最彻底的解决方案是继承 View 并完全通过 Canvas 绘制所有内容。这意味着不再使用任何 ImageView 或 TextView，而是利用 Paint 、 Bitmap 、 StaticLayout 等工具在 onDraw() 中直接输出图标与文字。

public class PureDrawBottomBar extends View {
    private Paint iconPaint, textPaint;
    private Bitmap[] icons;
    private String[] texts;
    private int selectedItem = 0;

    public PureDrawBottomBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        iconPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        textPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        textPaint.setTextAlign(Paint.Align.CENTER);
        textPaint.density = getResources().getDisplayMetrics().density;

        // 加载图标资源
        icons = new Bitmap[] {
            BitmapFactory.decodeResource(getResources(), R.drawable.ic_wechat),
            BitmapFactory.decodeResource(getResources(), R.drawable.ic_contacts),
            BitmapFactory.decodeResource(getResources(), R.drawable.ic_discover),
            BitmapFactory.decodeResource(getResources(), R.drawable.ic_me)
        };
        texts = new String[]{"微信", "通讯录", "发现", "我"};
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int width = getWidth();
        int height = getHeight();
        int itemWidth = width / icons.length;
        int iconSize = (int) (height * 0.5f);
        int textY = (int) (height - getPaddingBottom() - 8 * textPaint.density);

        for (int i = 0; i < icons.length; i++) {
            float fraction = (i == selectedItem) ? 1.0f : 0.0f; // 简化状态表示
            int centerX = itemWidth * i + itemWidth / 2;
            int top = (height - iconSize) / 2;

            // 绘制图标
            Rect src = new Rect(0, 0, icons[i].getWidth(), icons[i].getHeight());
            Rect dst = new Rect(centerX - iconSize/2, top, centerX + iconSize/2, top + iconSize);
            canvas.drawBitmap(icons[i], src, dst, iconPaint);

            // 绘制文字
            textPaint.setAlpha((int)(255 * (0.6f + 0.4f * fraction)));
            textPaint.setTextSize(14 * textPaint.density * (0.8f + 0.2f * fraction));
            canvas.drawText(texts[i], centerX, textY, textPaint);
        }
    }
}

代码逻辑逐行解读：

第6-13行 ：初始化 Paint 对象并设置抗锯齿标志，确保绘制边缘平滑。
第15-22行 ：预加载四个导航项的图标位图和对应文字数组，便于后续绘制。
第28-29行 ：获取控件宽高，计算每个 tab 的宽度和文字垂直位置。
第31-45行 ：循环绘制每个 tab：
计算中心 X 坐标和图标顶部 Y 坐标；
使用 Rect 映射源图像到目标区域，实现等比缩放；
根据是否选中调整文字透明度与字号，模拟默认选中效果。

该方案的最大优势是 视图层级极简 ——整个导航栏仅由一个 View 构成，极大降低了 GPU 渲染负担。同时，所有绘制操作集中在 onDraw() 中，便于统一管理动画插值、颜色渐变和布局偏移。更重要的是，可以通过 invalidate(left, top, right, bottom) 局部刷新特定区域，避免全屏重绘。

综上所述，三种方案适用场景如下：

若追求快速上线且无严苛性能要求 → 推荐 组合控件 + ConstraintLayout
若需灵活布局与动态管理 → 推荐 自定义 ViewGroup
若面向中高端机型、追求极致流畅体验 → 必须采用 onDraw 全绘制方案

接下来的小节将重点剖析 onDraw 中的关键图形绘制技术，揭示如何高效渲染图标与文本。

5.2 onDraw中的图形绘制流程

在自定义 View 的 onDraw() 方法中，Canvas 是绘图的核心载体，而 Paint 则决定了绘制的样式与质量。要实现一个媲美原生控件甚至超越其表现力的底部导航栏，必须深入掌握 Canvas.drawText() 、 Canvas.drawBitmap() 的坐标计算规则，以及如何利用 RectF 、 StaticLayout 等辅助类提升渲染效率。

5.2.1 Canvas与Paint基础配置（抗锯齿、字体对齐）

在开始绘制前，必须对 Paint 进行合理配置。错误的设置会导致文字模糊、图标失真或严重性能损耗。

private void setupPaint() {
    textPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);
    textPaint.setStyle(Paint.Style.FILL);
    textPaint.setTextAlign(Paint.Align.CENTER);
    textPaint.setTypeface(Typeface.DEFAULT_BOLD);

    iconPaint = new Paint(Paint.FILTER_BITMAP_FLAG | Paint.DITHER_FLAG);
    iconPaint.setAntiAlias(true);
}

参数说明：

ANTI_ALIAS_FLAG ：启用抗锯齿，使曲线和斜线边缘更平滑，适用于文本和圆角图形。
DITHER_FLAG ：抖色处理，增强颜色过渡自然度，尤其在低色彩深度屏幕上有效。
FILTER_BITMAP_FLAG ：开启位图过滤，放大图片时不出现马赛克。
setTextAlign(CENTER) ：设置文本水平对齐方式为中心对齐，简化 drawText(x, y) 的 X 坐标计算。

值得注意的是，尽管这些标志能提升视觉质量，但也增加 GPU 负担。建议仅在必要时启用，并考虑通过 setLayerType(LAYER_TYPE_SOFTWARE, null) 强制使用软件渲染以规避某些硬件加速 bug。

5.2.2 drawText与drawBitmap精准定位坐标计算

Android 的 drawText() 方法接收 (x, y) 参数，其中 y 是基线（baseline）位置，而非顶部 。若直接传入 top + height/2 ，会导致文字偏高。

正确的居中绘制方式如下：

// 获取文本边界
Rect bounds = new Rect();
textPaint.getTextBounds(text, 0, text.length(), bounds);
int textHeight = bounds.bottom - bounds.top;
int baselineY = centerY + textHeight / 2 - bounds.bottom;

canvas.drawText(text, centerX, baselineY, textPaint);

对于图标，推荐使用 Rect 映射方式进行缩放绘制，避免创建新的 Matrix 对象带来的内存开销：

Rect dst = new Rect(
    centerX - iconSize / 2,
    top,
    centerX + iconSize / 2,
    top + iconSize
);
canvas.drawBitmap(bitmap, null, dst, iconPaint);

通过预计算每个 tab 的 centerX 与 top ，可实现均匀分布与垂直居中。

5.2.3 利用RectF与StaticLayout优化文本渲染性能

当需要支持富文本（如带 Span 的描述）或多行文本时，应使用 StaticLayout 替代多次 drawText() 调用。

CharSequence styledText = Html.fromHtml("<b>发现</b><br><small>朋友圈</small>");
StaticLayout layout = new StaticLayout(
    styledText,
    textPaint,
    widthPerItem,
    Layout.Alignment.ALIGN_CENTER,
    1.0f,
    0.0f,
    false
);
canvas.save();
canvas.translate(centerX - widthPerItem / 2, textY);
layout.draw(canvas);
canvas.restore();

StaticLayout 在构造时完成断行与测量，后续 draw() 操作极为高效，适合静态内容重复绘制场景。

此外，使用 RectF 定义每个 tab 的点击区域，便于在 onTouchEvent 中进行命中检测：

private RectF[] itemBounds;

private void createItemBounds() {
    itemBounds = new RectF[4];
    int w = getWidth() / 4;
    int h = getHeight();
    for (int i = 0; i < 4; i++) {
        itemBounds[i] = new RectF(i * w, 0, (i+1)*w, h);
    }
}

表格总结常用绘制类对比：

类型	用途	是否缓存测量	适用场景
`Paint.getTextBounds()`	单行文本边界	是	精确定位
`StaticLayout`	多行/富文本	是	复杂文本
`DynamicLayout`	动态变化文本	否	输入框预览
`Canvas.clipRect()`	局部裁剪	—	防止溢出

结合以上技术，可在保证高质量绘制的同时，将每次 onDraw() 的 CPU 占用控制在 1ms 以内（在骁龙 888 设备上实测）。

5.3 触摸事件的精确响应机制

一个完整的自定义 View 不仅要会“画”，更要能“感知”用户操作。 onTouchEvent() 的正确实现是实现点击反馈、滑动联动的基础。

5.3.1 onTouchEvent中获取触摸点位置并判断点击区域

@Override
public boolean onTouchEvent(MotionEvent event) {
    float x = event.getX();
    float y = event.getY();

    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            for (int i = 0; i < itemBounds.length; i++) {
                if (itemBounds[i].contains(x, y)) {
                    currentTouchIndex = i;
                    startPressAnimation(i);
                    return true;
                }
            }
            break;

        case MotionEvent.ACTION_UP:
        case MotionEvent.ACTION_CANCEL:
            if (currentTouchIndex != -1) {
                stopPressAnimation();
                if (itemBounds[currentTouchIndex].contains(x, y)) {
                    performClick(currentTouchIndex);
                }
                currentTouchIndex = -1;
            }
            break;
    }
    return true;
}

通过遍历 itemBounds 数组判断触点归属，确保点击判定准确无误。

5.3.2 实现区域命中检测与反馈动画（如波纹效果）

可结合 RippleDrawable 或手动绘制圆形扩散动画：

private ValueAnimator rippleAnimator;
private float rippleRadius;

private void startRippleAt(int index) {
    rippleRadius = 0f;
    rippleAnimator = ValueAnimator.ofFloat(0, itemBounds[index].width() * 1.2f);
    rippleAnimator.addUpdateListener(anim -> {
        rippleRadius = (float) anim.getAnimatedValue();
        invalidate(); // 触发 onDraw 重绘涟漪
    });
    rippleAnimator.setDuration(300).start();
}

在 onDraw() 中添加：

if (rippleRadius > 0) {
    canvas.drawCircle(centerX, centerY, rippleRadius, ripplePaint);
}

形成水波纹点击反馈。

5.3.3 多点触控防误触与事件拦截处理

为防止多指误操作，可在 ACTION_POINTER_DOWN 时中断当前手势：

case MotionEvent.ACTION_POINTER_DOWN:
    getParent().requestDisallowInterceptTouchEvent(true);
    break;

并通过 getParent().requestDisallowInterceptTouchEvent(false) 在抬起时恢复滑动权限。

最终形成的交互模型如下图所示：

stateDiagram-v2
    [*] --> Idle
    Idle --> Pressed: ACTION_DOWN hit area
    Pressed --> RippleStart: start animation
    RippleStart --> Animating: animator running
    Pressed --> Idle: outside release
    Pressed --> ItemSelected: inside release
    ItemSelected --> Callback: invoke listener

这一机制确保了操作的准确性与反馈的及时性。

5.4 实践案例：从零绘制仿微信底部导航View

5.4.1 定义自定义属性attrs.xml支持外部配置

<declare-styleable name="PureBottomBar">
    <attr name="tabTextSize" format="dimension"/>
    <attr name="tabTextColor" format="color"/>
    <attr name="selectedColor" format="color"/>
    <attr name="iconSize" format="dimension"/>
    <attr name="activeScaleFactor" format="float"/>
</declare-styleable>

在构造函数中解析：

TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.PureBottomBar);
float textSize = a.getDimension(R.styleable.PureBottomBar_tabTextSize, 14f);
int textColor = a.getColor(R.styleable.PureBottomBar_tabTextColor, 0xFF999999);
a.recycle();

5.4.2 实现图标与文字垂直居中对齐

关键在于统一图标与文本的垂直基准线：

int totalHeight = iconSize + (int)(textPaint.getTextSize() * 1.2f);
int iconTop = (height - totalHeight) / 2;
int textBaseline = iconTop + iconSize + (int)(textPaint.getTextSize() * 1.2f);

确保两者间距固定，不随字号变化错位。

5.4.3 支持XML直接使用并与现有架构无缝集成

在布局中声明：

<com.example.widget.PureDrawBottomBar
    android:id="@+id/bottom_bar"
    android:layout_width="match_parent"
    android:layout_height="56dp"
    app:tabTextSize="12sp"
    app:selectedColor="#07C160" />

并通过接口暴露选中事件：

public interface OnItemSelectedListener {
    void onItemSelected(int position);
}

最终实现与 Fragment 切换系统的对接，完成闭环。

本章通过层层递进的方式，揭示了从组合控件到纯绘制的技术演进路径，辅以详尽的代码示例、图表与性能分析，帮助开发者构建真正高性能、可扩展的底部导航解决方案。

6. 响应式布局优化与项目级实战整合

6.1 多屏幕适配策略与资源分离

在Android开发中，设备碎片化是长期存在的挑战。从低分辨率的入门级手机到高密度平板，屏幕尺寸、像素密度（dpi）和系统字体设置千差万别。为了确保底部导航栏在所有设备上都具备一致且美观的视觉表现，必须采用科学的多屏幕适配策略。

首先，应通过 dimens.xml 文件实现尺寸资源的分离。可以在 res/ 目录下创建多个限定符目录：

res/
├── values/dimens.xml
├── values-sw320dp/dimens.xml    # 小屏手机
├── values-sw360dp/dimens.xml    # 主流手机
├── values-sw480dp/dimens.xml    # 大屏手机
├── values-sw600dp/dimens.xml    # 平板
└── values-xhdpi/, xxhdpi/, xxxhdpi/  # 图标尺寸适配

每个 dimens.xml 定义统一的尺寸变量，例如：

<!-- res/values/dimens.xml -->
<resources>
    <dimen name="bottom_nav_height">56dp</dimen>
    <dimen name="bottom_nav_icon_size">24dp</dimen>
    <dimen name="bottom_nav_text_size">12sp</dimen>
</resources>

<!-- res/values-sw600dp/dimens.xml -->
<resources>
    <dimen name="bottom_nav_height">64dp</dimen>
    <dimen name="bottom_nav_icon_size">28dp</dimen>
    <dimen name="bottom_nav_text_size">14sp</dimen>
</resources>

注意使用 sp 单位定义字体大小，以支持用户在系统中调整字体偏好，提升可访问性。

此外，图标资源应按不同 dpi 提供：

dpi 分类	倍率	示例目录	图标尺寸建议
mdpi	1x	drawable-mdpi	24x24 px
hdpi	1.5x	drawable-hdpi	36x36 px
xhdpi	2x	drawable-xhdpi	48x48 px
xxhdpi	3x	drawable-xxhdpi	72x72 px
xxxhdpi	4x	drawable-xxxhdpi	96x96 px

通过上述资源分离机制，BottomNavigationView 的高度、图标大小和文字尺寸均可实现弹性适配，避免在大屏设备上显得过小或在小屏上溢出。

6.2 布局层级优化减少过度绘制

复杂的视图嵌套会导致 UI 性能下降，尤其是在低端设备上容易出现卡顿。为提升渲染效率，需对布局结构进行深度优化。

推荐使用 ConstraintLayout 替代传统的 LinearLayout 或 RelativeLayout ，其扁平化的结构可显著降低测量与布局耗时。示例如下：

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/fragment_container"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/bottom_navigation"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:menu="@menu/bottom_nav_menu" />

</androidx.constraintlayout.widget.ConstraintLayout>

同时，利用 <merge> 和 <include> 标签提高复用性：

<!-- common_bottom_nav.xml -->
<merge xmlns:android="http://schemas.android.com/apk/res/android">
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true" />
</merge>

<!-- activity_main.xml -->
<RelativeLayout ... >
    <include layout="@layout/common_bottom_nav" />
</RelativeLayout>

对于非立即显示的内容（如“我的”页面中的设置项），可使用 ViewStub 延迟加载：

<ViewStub
    android:id="@+id/stub_settings"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout="@layout/layout_settings_panel"
    android:inflatedId="@+id/inflated_settings" />

调用时动态展开：

View settingsPanel = findViewById(R.id.stub_settings).inflate();

此方式可有效减少初始布局解析时间与内存占用。

6.3 性能监控与内存泄漏防范

尽管 BottomNavigationView 本身轻量，但在复杂 Fragment 切换场景下仍可能引发性能问题或内存泄漏。

常见 Fragment 内存泄漏场景包括：

在 Fragment 中持有 Activity 强引用（如静态变量）
注册广播接收器或监听器未在 onDestroyView 解除注册
使用匿名内部类启动异步任务导致生命周期错乱

解决方案示例：

public class HomeFragment extends Fragment {
    private Handler handler = new Handler(Looper.getMainLooper());

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        // 避免使用 getActivity()
        String appName = requireContext().getString(R.string.app_name);

        // 启动延迟任务，使用弱引用防止泄漏
        handler.postDelayed(new SafeRunnable(this), 5000);
    }

    private static class SafeRunnable implements Runnable {
        private final WeakReference<HomeFragment> ref;

        SafeRunnable(HomeFragment fragment) {
            ref = new WeakReference<>(fragment);
        }

        @Override
        public void run() {
            HomeFragment fragment = ref.get();
            if (fragment != null && !fragment.isDetached()) {
                // 安全执行逻辑
            }
        }
    }

    @Override
    public void onDestroyView() {
        super.onDestroyView();
        handler.removeCallbacksAndMessages(null); // 及时清理消息
    }
}

动画资源也需谨慎管理。若使用 ValueAnimator 实现颜色渐变，务必在页面销毁时取消并置空：

private ValueAnimator colorAnimator;

private void startColorAnimation(int from, int to) {
    if (colorAnimator != null && colorAnimator.isRunning()) {
        colorAnimator.cancel();
    }
    colorAnimator = ValueAnimator.ofObject(new ArgbEvaluator(), from, to);
    colorAnimator.addUpdateListener(animator -> {
        int color = (int) animator.getAnimatedValue();
        textView.setTextColor(color);
    });
    colorAnimator.start();
}

@Override
public void onDestroyView() {
    if (colorAnimator != null) {
        colorAnimator.cancel();
        colorAnimator = null;
    }
    super.onDestroyView();
}

使用 Android Studio Profiler 工具实时监控 CPU、内存和 GPU 渲染帧率。重点关注以下指标：

指标	推荐阈值	检测方式
FPS	≥55 fps	GPU Rendering Profile
堆内存增长	稳定无持续上升	Memory Profiler
布局深度	≤5 层	Layout Inspector
过度绘制	≤2x 覆盖	GPU Overdraw 调试模式

6.4 完整项目结构搭建与发布准备

构建一个可复用、易维护的底部导航模块，需要良好的代码组织结构。推荐采用如下模块化目录设计：

app/
├── ui/
│   ├── main/
│   │   ├── MainActivity.java
│   │   ├── MainViewModel.java
│   │   └── adapter/MainActivityAdapter.java
│   └── fragments/
│       ├── ChatFragment.java
│       ├── ContactsFragment.java
│       ├── DiscoverFragment.java
│       └── ProfileFragment.java
├── utils/
│   ├── ThemeUtils.java
│   └── AnimationHelper.java
├── widgets/
│   └── CustomBottomNavigationView.java
├── resources/
│   ├── dimens/
│   │   ├── nav_height.xml
│   │   └── icon_sizes.xml
│   └── menus/bottom_nav_menu.xml
└── AppApplication.java

编写清晰的 README.md 文档说明集成方式：

## BottomNavigation Library

### 集成步骤
1. 将 AAR 导入项目 `/libs` 目录
2. 在 `build.gradle` 添加：
   ```gradle
   implementation files('libs/bottomnav-core-v1.2.aar')
   ```
3. 在布局中引用：
   ```xml
   <com.example.bottomnav.CustomBottomNavigationView
       android:layout_width="match_parent"
       android:layout_height="wrap_content"/>
   ```
4. 支持接口：
   - `setOnNavigationItemSelectedListener(...)`
   - `setCurrentItem(int index)`

最终可通过 Gradle 打包为 AAR 并发布至远程仓库（如 GitHub Packages 或 Nexus）：

// build.gradle (Module: library)
android {
    ...
    defaultConfig {
        minSdkVersion 21
        targetSdkVersion 34
    }
    libraryVariants.all { variant ->
        variant.outputs.all {
            outputFileName = "bottomnav-${variant.name}-${variant.versionName}.aar"
        }
    }
}

执行打包命令：