UITabBarButtonLabel 设置选中字体颜色 iOS

原创

mob649e8162c013 2024-10-30 04:53:16 ©著作权

©著作权归作者所有：来自51CTO博客作者mob649e8162c013的原创作品，请联系作者获取转载授权，否则将追究法律责任

UITabBarButtonLabel 设置选中字体颜色 iOS

作为一名初入iOS开发的小白，今天我们将学习如何在iOS中的 UITabBar 控件里设置选中状态的字体颜色。整个过程分为几个简明的步骤，接下来，我们将详细解读每一步的实现。

整体流程

首先，让我们看看实现的流程图：

flowchart TD
    A[开始] --> B[创建UITabBarController]
    B --> C[设置TabBarItem属性]
    C --> D[使用UITabBar的appearance]
    D --> E[实现UIColor]
    E --> F[完成]

下面是每一步的具体说明：

步骤	描述
A	创建一个UITabBarController
B	配置每个TabBarItem的[selectedImage]和[image]
C	定义UITabBar的appearance
D	设置选中状态的颜色
E	测试确认效果

逐步实现

步骤1：创建UITabBarController

这是iOS程序的起始步骤，我们需要创建一个Tab Bar Controller。

import UIKit

@main
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // 创建窗口
        window = UIWindow(frame: UIScreen.main.bounds)
        
        // 创建TabBarController
        let tabBarController = UITabBarController()

        // 创建视图控制器
        let firstViewController = UIViewController()
        firstViewController.view.backgroundColor = .red
        let secondViewController = UIViewController()
        secondViewController.view.backgroundColor = .blue
        
        // 设置TabBarItem属性
        firstViewController.tabBarItem = UITabBarItem(title: "第一", image: UIImage(systemName: "house"), tag: 0)
        secondViewController.tabBarItem = UITabBarItem(title: "第二", image: UIImage(systemName: "star"), tag: 1)
        
        // 配置TabBarController的视图控制器
        tabBarController.viewControllers = [firstViewController, secondViewController]
        
        // 设置窗口根视图控制器
        window?.rootViewController = tabBarController
        window?.makeKeyAndVisible()
        
        return true
    }
}

上述代码会初始化一个简单的UI，并创建两个标签。每个标签都有一个对应的控制器。

步骤2：设置TabBarItem属性

在设置每个TabBarItem的title和image后，我们要定义它在选中状态下的样式。

// 设置选中的颜色
if let tabBar = tabBarController.tabBar as? UITabBar {
    tabBar.tintColor = .green // 设置选中状态的字体颜色
}

这段代码通过给 tabBar.tintColor 赋值来改变所有选中的Tab字体颜色。

步骤3：定义UITabBar的appearance

为了实现全局样式，可以使用 UITabBar.appearance() 进行设置。

UITabBar.appearance().tintColor = UIColor.green // 选中状态字体颜色
UITabBar.appearance().unselectedItemTintColor = UIColor.gray // 未选中状态字体颜色

在代码中，我们设置了选中状态为绿色，未选中状态为灰色。

关系图

接下来，我们用ER图的形式展示各个组件之间的关系。

erDiagram
    UITabBarController ||--o{ UIViewController : contains
    UIViewController ||--o{ UITabBarItem : has
    UITabBarItem ||--o{ UITabBar : associated_with