夜雨聆风
Ruoyi-Android-App 首页配置多样化
🚀 RuoYi Android App 首页导航定制化方案全解析
🔥 项目简介
RuoYi Android App 是基于 Kotlin 开发的移动端解决方案，完美对接 RuoYi-Go、RuoYi-Vue、RuoYi-Cloud 三大后端版本！目前已落地登录、个人中心、工作台、资料编辑、头像 / 密码修改、常见问题、关于我们等核心功能，为企业级移动端开发提供开箱即用的基础能力。
🎨 首页导航核心特性
首页支持三种灵活的定制模式，兼顾默认体验、个性化样式和网络动态配置，满足不同场景的 UI 需求：
-
模式 1：经典 Tab 样式（图文结合） -
模式 2：仿支付宝样式（纯图标展示） -
模式 3：网络动态配置（图标 / 颜色远程下发）
下面为你拆解首页导航的实现逻辑和配置方式：
一、核心布局结构（LinearLayout）
首页采用垂直布局拆分「内容区 + 底部导航栏」，保证布局层级清晰、适配全屏幕：
这样是普通的tab效果。
效果1
效果2
效果3
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent" <!-- 宽度占满屏幕 -->android:layout_height="match_parent" <!-- 高度占满屏幕 -->android:orientation="vertical" <!-- 垂直方向布局 -->tools:context=".activity.MainActivity"> <!-- 关联主活动 --><!-- 页面内容区域（ViewPager） --><com.ruoyi.app.widget.NoScrollViewPagerandroid:id="@+id/vp_home_pager"android:layout_width="match_parent"android:layout_height="0px" <!-- 高度由weight分配 -->android:layout_weight="1" /> <!-- 占满剩余高度 --><!-- 底部导航栏（RecyclerView） --><androidx.recyclerview.widget.RecyclerViewandroid:id="@+id/rv_home_navigation"android:layout_width="match_parent"android:layout_height="55dp" <!-- 导航栏固定高度55dp -->android:background="@color/white" <!-- 白色背景 -->android:elevation="10dp" <!-- 阴影效果提升立体感 -->android:orientation="vertical"app:layoutManager="androidx.recyclerview.widget.GridLayoutManager" <!-- 网格布局 -->app:spanCount="3" <!-- 3列分布（对应首页/工作台/我的） -->tools:itemCount="3" <!-- 预览时显示3个item -->tools:listitem="@layout/main_navigation_item" /> <!-- 导航项布局文件 --></LinearLayout>
二、导航数据初始化（Adapter 适配）
通过 Kotlin 简洁的语法初始化导航项数据，统一管理颜色、文字、图标资源：
// 初始化底部导航栏数据列表private val list = ArrayList<ButtomItemEntity>().apply {// 1. 首页导航项add(ButtomItemEntity(Constant.theme_default_color, // 默认颜色（未选中）Constant.theme_select_color, // 选中颜色Frame.getString(R.string.index_nav_index), // 文字：首页"", // 预留字段（默认图标地址）"", // 预留字段（选中图标地址）Frame.getDrawable(R.drawable.index_selector) // 首页选择器资源))// 2. 工作台导航项add(ButtomItemEntity(Constant.theme_default_color, // 默认颜色（未选中）Constant.theme_select_color, // 选中颜色Frame.getString(R.string.work_nav_index), // 文字：工作台"", // 预留字段（默认图标地址）"", // 预留字段（选中图标地址）Frame.getDrawable(R.drawable.work_selector) // 工作台选择器资源))// 3. 我的导航项add(ButtomItemEntity(Constant.theme_default_color, // 默认颜色（未选中）Constant.theme_select_color, // 选中颜色Frame.getString(R.string.mine_nav_index), // 文字：我的"", // 预留字段（默认图标地址）"", // 预留字段（选中图标地址）Frame.getDrawable(R.drawable.mine_selector) // 我的选择器资源))}
三、导航切换逻辑（页面联动）
点击导航项同步切换 ViewPager 页面，保证交互体验流畅：
/*** 底部导航项选中事件处理方法* @param position 选中的导航项下标（0=首页，1=工作台，2=我的）* @return Boolean 是否处理了该选中事件*/override funonNavigationItemSelected(position: Int): Boolean {return when (position) {// 选中首页(0)、工作台(1)、我的(2)时触发0, 1, 2 -> {// 切换ViewPager到对应下标页面binding.vpHomePager.currentItem = positiontrue // 表示已处理该事件}// 其他下标（无匹配项）else -> false // 表示未处理该事件}}
所有配置均在 Constant.kt 中一键切换，无需修改核心逻辑：
模式 1：默认经典样式（图文结合）
// 首页动态设置const val mainStyle = mainStyleDefault // 1 首页图片和文字 2 首页图片，仿照支付宝const val isPersonalization = false //首页个性化，从网络获取
// 首页动态设置const val mainStyle = mainStyleAlipay // 1 首页图片和文字 2 首页图片，仿照支付宝const val isPersonalization = false //首页个性化，从网络获取
// 首页动态设置const val mainStyle = mainStyleDefault // 1 首页图片和文字 2 首页图片，仿照支付宝const val isPersonalization = true //首页个性化，从网络获取
{"code": 200, // 接口状态码：200表示请求成功"msg": "查询成功", // 接口提示信息"data": [ // 导航栏核心配置列表（共3个导航项）{"id": 1, // 导航项ID：首页"name": "首页", // 导航项名称"defaultColor": "#A4A4A4", // 未选中时文字/图标颜色"selectColor": "#d81e06", // 选中时文字/图标颜色（红色）"defaultIcon": "https://gitee.com/OptimisticDevelopers/Ruoyi-Android-App/raw/ui_1.1.0/api/icon/home.png", // 未选中图标地址"selectIcon": "https://gitee.com/OptimisticDevelopers/Ruoyi-Android-App/raw/ui_1.1.0/api/icon/home_.png", // 选中图标地址"drawable": null // 本地图标资源（预留字段，暂未使用）},{"id": 2, // 导航项ID：工作台"name": "工作台","defaultColor": "#A4A4A4","selectColor": "#d81e06","defaultIcon": "https://gitee.com/OptimisticDevelopers/Ruoyi-Android-App/raw/ui_1.1.0/api/icon/work.png","selectIcon": "https://gitee.com/OptimisticDevelopers/Ruoyi-Android-App/raw/ui_1.1.0/api/icon/work_.png","drawable": null},{"id": 3, // 导航项ID：我的"name": "我的","defaultColor": "#A4A4A4","selectColor": "#d81e06","defaultIcon": "https://gitee.com/OptimisticDevelopers/Ruoyi-Android-App/raw/ui_1.1.0/api/icon/mine.png","selectIcon": "https://gitee.com/OptimisticDevelopers/Ruoyi-Android-App/raw/ui_1.1.0/api/icon/mine_.png","drawable": null}]}
四、Fragment 页面绑定
将首页、工作台、我的三个核心页面绑定到 ViewPager，完成内容载体初始化：
// 初始化ViewPager适配器，绑定3个核心页面FragmentpagerAdapter = FragmentPagerAdapter<Fragment>(this).apply {// 添加首页Fragment（单例创建）addFragment(HomeFragment.newInstance())// 添加工作台Fragment（单例创建）addFragment(WorkFragment.newInstance())// 添加我的Fragment（单例创建）addFragment(MineFragment.newInstance())// 将适配器绑定到ViewPager控件binding.vpHomePager.adapter = this}
💡 开发小贴士
-
所有样式常量集中在 Constant.kt，修改后无需重构页面逻辑，降低维护成本； -
网络配置模式支持动态更新图标 / 颜色，无需发版即可调整 UI； -
Fragment 采用 newInstance()单例创建，符合 Android 生命周期最佳实践； -
导航栏使用 RecyclerView + 网格布局，可灵活扩展更多导航项（仅需调整 spanCount）。
🎯 总结
RuoYi Android App 的首页导航方案兼顾「易用性」和「扩展性」：
-
基础层：通过 LinearLayout+ViewPager+RecyclerView 构建稳定的布局结构； -
适配层：支持三种样式一键切换，满足不同 UI 需求； -
扩展层：网络动态配置支持远程定制，适配企业级个性化场景。
到此结束，希望可以帮助到您。
