如何从Storyboard修改Tab Bar按钮顺序

看来你想把Tab Bar里的Home按钮挪到最左边，其他按钮保持原有顺序（只把Notification移到最后）。下面分主流平台给你具体的实现步骤：

iOS（Swift） #

如果你的项目用的是UITabBarController，可以通过两种方式调整顺序：

方式1：代码动态调整 #

先获取当前所有子控制器，把Home控制器移到首位：

// 假设你在TabBarController的子类里操作，或者能拿到tabBarController实例
guard var currentVCs = tabBarController?.viewControllers else { return }

// 找到Home对应的控制器（可以通过类名、title或者tag判断，这里用title举例）
if let homeIndex = currentVCs.firstIndex(where: { $0.title == "Home" }) {
    let homeVC = currentVCs.remove(at: homeIndex)
    currentVCs.insert(homeVC, at: 0)
    // 重新赋值给TabBarController
    tabBarController?.viewControllers = currentVCs
}

方式2：Storyboard可视化调整 #

如果是在Storyboard里配置的Tab Bar，直接拖动Tab Bar Controller的子控制器列表，把Home对应的控制器拖到最顶部就行，操作起来更直观。

Android（Kotlin） #

如果是用BottomNavigationView实现的Tab Bar，同样有两种调整方式：

方式1：修改XML布局文件 #

直接在对应的menu资源文件里调整item的顺序，把Home的<item>放到最前面：

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/home_tab"
        android:title="Home"
        android:icon="@drawable/ic_home"/>
    <item
        android:id="@+id/message_tab"
        android:title="Message"
        android:icon="@drawable/ic_message"/>
    <item
        android:id="@+id/friend_tab"
        android:title="Friend"
        android:icon="@drawable/ic_friend"/>
    <item
        android:id="@+id/fav_tab"
        android:title="My fav."
        android:icon="@drawable/ic_fav"/>
    <item
        android:id="@+id/notification_tab"
        android:title="Notification"
        android:icon="@drawable/ic_notification"/>
</menu>

方式2：代码动态调整 #

如果需要在运行时修改顺序，可以通过重新排列menu的item实现：

val bottomNav = findViewById<BottomNavigationView>(R.id.bottom_nav)
val originalMenu = bottomNav.menu

// 把所有item存入列表
val itemList = mutableListOf<MenuItem>()
for (i in 0 until originalMenu.size()) {
    itemList.add(originalMenu.getItem(i))
}

// 清空原menu，按新顺序添加
originalMenu.clear()
val newOrderTitles = listOf("Home", "Message", "Friend", "My fav.", "Notification")
newOrderTitles.forEach { targetTitle ->
    itemList.find { it.title == targetTitle }?.let {
        originalMenu.add(it.groupId, it.itemId, it.order, it.title)
        // 同步设置图标
        originalMenu.findItem(it.itemId)?.setIcon(it.icon)
    }
}

小提醒 #

调整顺序后记得检查每个Tab的图标、文字和对应的页面是否匹配，避免出现错位的情况；如果是自定义的Tab Bar，还要同步调整自定义View里的子控件顺序哦。

内容的提问来源于stack exchange，提问作者Vivek