详解iOS自定义UITabBar与布局

简介

UITabBarController 是 iOS 开发中常用的视图控制器之一，它的作用是实现应用程序的 Tab 切换，便于用户进行主要功能模块的选择。然而，UITabBarController 的默认布局可能不符合我们的设计需求，这时我们可以使用自定义 UITabBar 来达到定制化效果。

本文将详细阐述 iOS 自定义 UITabBar 的实现过程，包括自定义 TabBarItem 样式、自定义 TabBar 图标及选中效果以及布局调整等方面的内容。

自定义样式

在 UITabBarController 中，每个 TabBarItem 对应一个视图控制器，用 tabBarItem 属性来表示。

我们可以通过修改 tabBarItem 属性的实现，自定义 TabBarItem 的样式等。下面是一个示例：

let tabBarController = UITabBarController()

let item1 = UITabBarItem(title: "首页", image: UIImage(named: "home"), selectedImage: UIImage(named: "home_selected"))
let item2 = UITabBarItem(title: "发现", image: UIImage(named: "discover"), selectedImage: UIImage(named: "discover_selected"))

let homeVC = HomeViewController()
let discoverVC = DiscoverViewController()

homeVC.tabBarItem = item1
discoverVC.tabBarItem = item2

tabBarController.viewControllers = [homeVC, discoverVC]

在上述示例中，我们通过创建 UITabBarItem 对象，设置 title、image 和 selectedImage 属性，来自定义 TabBarItem 的样式。这里我们使用了 UIImage(named: String) 方法来加载图片，来自定义 TabBarItem 图标。

自定义图标及选中效果

针对上述示例中，通过 UIImage(named: String) 方法加载图片的方式，我们可以使用自定义的图片，使 TabBarItem 显示更加美观。

另外，我们可以调整 TabBarItem 的选中效果，以满足设计需求。可以通过代码来实现为当前选中的 TabBarItem 添加选中效果，以下是示例代码：

// 自定义 UITabBarController 类
class CustomTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // 遍历所有的子视图控制器
        for vc in self.viewControllers! {

            // 得到 TabBarItem
            let item = vc.tabBarItem
            item!.setTitleTextAttributes([NSForegroundColorAttributeName: UIColor(red:0.60, green:0.79, blue:0.99, alpha:1.00)], for: .selected)

            // 设置图片
            if let image = item?.image {
                item?.selectedImage = image.withRenderingMode(.alwaysOriginal)
                item?.image = image.withRenderingMode(.alwaysOriginal)
            }
        }

        // 自定义 TabBar 样式
        let customTabBar = CustomTabBar()
        self.setValue(customTabBar, forKey: "tabBar")

        // TabBar 的选中图标
        customTabBar.selectionIndicatorImage = UIImage(named: "tabbar_selected")
    }
}

// 自定义 TabBar 类
class CustomTabBar: UITabBar {

    var selectionIndicatorImage: UIImage? = nil

    override func draw(_ rect: CGRect) {
        let context = UIGraphicsGetCurrentContext()
        context?.setFillColor(UIColor.white.cgColor)
        context?.fill(CGRect(x: 0, y: 0, width: bounds.width, height: bounds.height))

        if let image = selectionIndicatorImage {
            let height = image.size.height
            let width = image.size.width / CGFloat(items!.count)
            let x = CGFloat(selectedItem!.tag) * width
            image.draw(in: CGRect(x: x, y: 0, width: width, height: height))
        }
    }
}

在上述示例中，我们自定义一个 CustomTabBarController 和 CustomTabBar 类，并通过 self.setValue(_: forKey:) 方法将其设置为当前 UITabBarController 的 tabBar。

CustomTabBar 类中的 draw(_ rect:) 方法中，根据当前选项卡的标签（selectedItem!.tag）计算出选项卡选中时的选中效果位置。并通过调整 image 的 draw(in:) 方法的参数，绘制出选中效果。

布局调整

默认情况下，UITabBarController 会将所有的 TabBarItem 均分为一份，即每个 TabBarItem 宽度相等。而我们有时可能需要对 TabBar 进行更加细致的布局调整。下面是一个示例：

// 自定义 TabBar 类
class CustomTabBar: UITabBar {

    override func layoutSubviews() {
        super.layoutSubviews()

        //调整TabBar的布局
        let width = self.bounds.width / 5
        let height: CGFloat = 49
        let y: CGFloat = 0

        var index = 0
        for view in self.subviews {
            if view.isKind(of: NSClassFromString("UITabBarButton")!) {
                let x = width * CGFloat(index)
                view.frame = CGRect(x: x, y: y, width: width, height: height)
                index = index + 1
                if index == 2 {
                    index = index + 1
                }
            }
        }
    }
}

在上述示例中，我们通过自定义 layoutSubviews() 方法，调整 UITabBar 中 UITabBarButton 的布局，以实现根据具体需求对 TabBarItem 做出更加精细的布局调整。

总结

本文较为详细地介绍了如何自定义 UITabBar 的样式、选中效果、自定义图标以及布局调整等。这对于个性化的应用程序设计来说是非常重要的。通过本文的学习，相信可以激发对 iOS 应用程序定制化效果的更多创造力。同时，我们还给出了相关的示例代码，供读者参考、借鉴。