在iOS中实现中间凸起的TabBar

在现代iOS开发中，一个吸引用户的界面设计是至关重要的。中间凸起的TabBar不仅美观，同时也能提升用户的交互体验。本文将带领你逐步实现中间凸起的TabBar，并且为每一个步骤提供详细的代码示例和解释。

流程概述

下面是实现中间凸起TabBar的主要步骤，我们将通过表格来展示流程：

步骤 操作
1 创建一个新的iOS项目
2 自定义TabBarController
3 创建自定义TabBar
4 配置TabBarItems
5 添加凸起的效果
6 测试效果

详细步骤

1. 创建一个新的iOS项目

打开Xcode，选择“Create a new Xcode project”，然后选择“App”模板，设置项目名称，如“CustomTabBar”。

2. 自定义TabBarController

我们将创建一个新的TabBarController，用于承载我们的TabBar。

在项目中创建一个新的Swift文件，命名为CustomTabBarController.swift，并加入如下代码：

import UIKit

class CustomTabBarController: UITabBarController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let firstVC = FirstViewController()
        let secondVC = SecondViewController()
        
        // 设置Tab Bar的视图控制器
        self.viewControllers = [firstVC, secondVC]
        
        // 配置Tab Bar的Item
        configureTabBarItems()
    }
    
    func configureTabBarItems() {
        // 设置Tab Bar的样式和图片
        let firstItem = UITabBarItem(title: "首页", image: UIImage(named: "homeIcon"), tag: 0)
        let secondItem = UITabBarItem(title: "设置", image: UIImage(named: "settingsIcon"), tag: 1)
        
        viewControllers?[0].tabBarItem = firstItem
        viewControllers?[1].tabBarItem = secondItem
    }
}

代码解释：

  • CustomTabBarController类继承自UITabBarController。
  • 设置了两个视图控制器FirstViewController和SecondViewController作为TabBar的Item。

3. 创建自定义TabBar

接下来，我们需要创建一个自定义的TabBar。打开Main.storyboard，选择TabBarController，然后将Class设置为CustomTabBarController。

4. 配置TabBarItems

在Class: CustomTabBarController中添加Tab Bar Items，代码已在上一步提供。确保你的图片资源已经添加到Xcode项目中。

5. 添加凸起的效果

为了使中间的Tab条凸出，我们将自定义TabBar的布局。在CustomTabBarController中，添加如下代码：

class CustomTabBar: UITabBar {
    
    override func layoutSubviews() {
        super.layoutSubviews()
        
        let tabBarHeight: CGFloat = 70 // 设置TabBar的高度
        let tabBarInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
        
        for (index, item) in self.items!.enumerated() {
            let tabButtonWidth = self.bounds.width / CGFloat(self.items!.count)
            let tabButtonHeight = tabBarHeight
            
            let tabButtonX = CGFloat(index) * tabButtonWidth
            let tabButtonY: CGFloat = self.bounds.height - tabButtonHeight
            
            let tabButtonFrame: CGRect = CGRect(x: tabButtonX, y: tabButtonY, width: tabButtonWidth, height: tabButtonHeight)
            item.accessibilityFrame = tabButtonFrame.inset(by: tabBarInset)
        }
        
        // 凸起效果的设置
        let centerButton = UIButton(frame: CGRect(x: (self.bounds.width / 2) - 30, y: -20, width: 60, height: 60))
        centerButton.setImage(UIImage(named: "addIcon"), for: .normal)
        centerButton.backgroundColor = .white
        centerButton.layer.cornerRadius = 30
        centerButton.layer.borderColor = UIColor.white.cgColor
        centerButton.layer.borderWidth = 4
        centerButton.addTarget(self, action: #selector(centerButtonTapped), for: .touchUpInside)
        
        self.addSubview(centerButton)
    }
    
    @objc func centerButtonTapped() {
        print("Center Button Tapped")
    }
}

代码解释：

  • 我们自定义了一个CustomTabBar，并重写了layoutSubviews方法，以改变TabBar和Item的位置。
  • 设置中心按钮的大小和位置，并添加点击事件。

6. 测试效果

现在，你可以运行项目，查看中间凸起的TabBar效果。确保所有的配置和图片都设置正确。

类图

classDiagram
    class CustomTabBarController {
        +void viewDidLoad()
        +void configureTabBarItems()
    }
    class CustomTabBar {
        +void layoutSubviews()
        +void centerButtonTapped()
    }
    CustomTabBarController --> CustomTabBar

状态图

stateDiagram
    [*] --> Idle
    Idle --> Action
    Action --> End
    End --> Idle

结论

通过以上步骤，我们成功地实现了一个中间凸起的TabBar。这个设计不仅提升了用户体验，还展示了我们对iOS UI组件定制的能力。不断实践和尝试，将使你在iOS开发的道路上走得更远。希望你在实现自己的应用时能借鉴这一实现方案，并创造出更好的用户界面！