如何制作带图像的Tab Bar？自定义选中未选中状态样式

嘿，我来帮你搞定这个自定义Tab Bar的需求！要做出你想要的样式，我们可以完全摆脱系统默认的「选中蓝、未选中灰」配色，通过自定义图标和样式来实现，下面分步骤给你讲清楚：

• 首先给每个Tab准备好选中状态和未选中状态的独立图标（比如你图里的那种，选中时用彩色图标，未选中用对应风格的浅色/其他样式图标），建议用透明背景的PNG或SVG格式，避免底色干扰。

在设置每个Tab的TabBarItem时，直接指定两套图标，并且关闭系统的自动着色功能——这是摆脱默认配色的关键：

// 举个例子，在你的首页ViewController里设置TabBarItem
let homeTabItem = UITabBarItem(
    title: "首页",
    image: UIImage(named: "home_unselected")?.withRenderingMode(.alwaysOriginal), // 未选中图标，保持原图颜色
    selectedImage: UIImage(named: "home_selected")?.withRenderingMode(.alwaysOriginal) // 选中图标，保持原图颜色
)
self.tabBarItem = homeTabItem

withRenderingMode(.alwaysOriginal)这个方法会告诉系统：别给我的图标加滤镜，就显示它本来的样子！

如果连Tab的文字颜色也想自定义，不用系统默认的配色，可以通过TabBar的外观代理全局设置：

// 可以放在AppDelegate、SceneDelegate或者TabBarController的初始化方法里
// 设置未选中状态的文字颜色
UITabBar.appearance().unselectedItemTintColor = UIColor.lightGray
// 设置选中状态的文字颜色（换成你想要的颜色就行）
UITabBar.appearance().tintColor = UIColor.orange

要是还想调整字体大小、粗细，用下面的方式更精细：

// 未选中状态的文字属性
UITabBarItem.appearance().setTitleTextAttributes([
    NSAttributedString.Key.font: UIFont.systemFont(ofSize: 12, weight: .regular),
    NSAttributedString.Key.foregroundColor: UIColor.gray
], for: .normal)

// 选中状态的文字属性
UITabBarItem.appearance().setTitleTextAttributes([
    NSAttributedString.Key.font: UIFont.systemFont(ofSize: 12, weight: .medium),
    NSAttributedString.Key.foregroundColor: UIColor.yellow
], for: .selected)

如果你用的是SwiftUI，自定义TabView的TabBar同样简单：

TabView {
    HomeView()
        .tabItem {
            Image("home_unselected")
                .renderingMode(.original) // 保持图标原有颜色，不受系统配色影响
            Text("首页")
        }
        .tag(0)
    
    ProfileView()
        .tabItem {
            Image("profile_unselected")
                .renderingMode(.original)
            Text("我的")
        }
        .tag(1)
}
.accentColor(.orange) // 这里设置的是选中时的文字颜色，图标因为用了original所以不受影响

按照上面的步骤操作，你的Tab Bar就能完全变成你想要的样子，彻底告别系统默认的蓝灰配色啦~

内容的提问来源于stack exchange，提问作者A.Mathur