swiftui布局教程 swiftui tabbar

转载

架构魔法师 2023-08-11 11:38:01

文章标签 swiftui布局教程 Swift UITabBar 自定义 ide 文章分类 Swift 移动开发

前言

很多时候，系统原生的 UITabBar 并不能满足我们的需求，譬如我们想要给图标做动态的改变，或者比较炫一点的展示，原生的处理起来都很麻烦。所以很多时候都需要自定义一个 UITabBar，里面的图标、颜色、背景等等都可以根据需求去改变。

效果展示：

从零开始

先说一下思路

页面继承自 UITabBarController ，然后自定义一个 UIView ，添加到 TabBar 上。取消原本的控制按钮。创建自定义按钮，即重写 UIButton 的 imageView 、和 titleLabel 的 frame ，完成图片、文字的重新布局。最后实现不同按钮的协议方法。

效果图中，只有两边的两个页面在 UITabBarController 的管理下，中间三个都是通过自定义按钮实现的模态页面，即 present 过去的。多用于拍摄图片、录制视频、发表动态等功能。

代码实现：

首先不妨先建立三个基础文件，然后在丰富代码。其中， IWCustomButton 继承自 UIButton， IWCustomTabBarView 继承自 UIView ， IWCustomTabBarController 继承自 UITabBarController 。
修改 AppDelegate 文件中 didFinishLaunchingWithOptions 方法，保证启动时没有异常：

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {

    //  创建Window
    window = UIWindow(frame: UIScreen.main.bounds)
    //  初始化一个tabbar
    let customTabBar = IWCustomTabBarController()
    //  设置根控制器
    window?.rootViewController = customTabBar

    window?.makeKeyAndVisible()

    return true
}

首先在 IWCustomTabBarController 文件中添加代码：

//  IWCustomTabBarController.swift
import UIKit
class IWCustomTabBarController: UITabBarController {

//  MARK: - Properties
//  图片
fileprivate let tabBarImageNames = ["tb_home","tb_person"]
fileprivate let tabBarTitles = ["首页","我的"]

//  MARK: - LifeCycle
override func viewDidLoad() {
    super.viewDidLoad()

    //  自定义 TabBar 外观
    createCustomTabBar(addHeight: 0)

    //  创建子控制器
    addDefaultChildViewControllers()

    //  设置每一个子页面的按钮展示
    setChildViewControllerItem()
}

//  MARK: - Private Methods

/// 添加默认的页面
fileprivate func addDefaultChildViewControllers() {
    let vc1 = UIViewController()
    vc1.view.backgroundColor = UIColor.white

    let vc2 = UIViewController()
    vc2.view.backgroundColor = UIColor.lightGray

    viewControllers = [vc1, vc2]
}

/// 设置外观
///
/// - parameter addHeight: 增加高度，0 为默认
fileprivate let customTabBarView = IWCustomTabBarView()
fileprivate func createCustomTabBar(addHeight: CGFloat) {

    //  改变tabbar 大小
    var oriTabBarFrame = tabBar.frame
    oriTabBarFrame.origin.y -= addHeight
    oriTabBarFrame.size.height += addHeight
    tabBar.frame = oriTabBarFrame

    customTabBarView.frame = tabBar.bounds
    customTabBarView.frame.origin.y -= addHeight
    customTabBarView.backgroundColor = UIColor.groupTableViewBackground
    customTabBarView.frame.size.height = tabBar.frame.size.height + addHeight
    customTabBarView.isUserInteractionEnabled = true
    tabBar.addSubview(customTabBarView)
}

/// 设置子页面的item项
fileprivate func setChildViewControllerItem() {
    guard let containViewControllers = viewControllers else {
        print("⚠️  设置子页面 item 项失败  ⚠️")
        return
    }

    if containViewControllers.count != tabBarImageNames.count {
        fatalError("子页面数量和设置的tabBarItem数量不一致，请检查！！")
    }

    //  遍历子页面
    for (index, singleVC) in containViewControllers.enumerated() {
        singleVC.tabBarItem.image = UIImage(named: tabBarImageNames[index])
        singleVC.tabBarItem.selectedImage = UIImage(named: tabBarImageNames[index] + "_selected")
        singleVC.tabBarItem.title = tabBarTitles[index]
    }
}
}

上面就是一个基本的纯代码创建的 UITabBarController 的实际效果了，运行后，查看效果：

现在明显的问题就是我们的原始图片是红色的，为什么现在都是灰、蓝色，因为 UITabBar 使用图片时渲染了，如果我们需要使用原始图片，则对 UIImage 方法扩展：

extension UIImage {
var originalImage: UIImage {
    return self.withRenderingMode(.alwaysOriginal)
}
}

然后修改遍历子页面的代码：

//  遍历子页面
    for (index, singleVC) in containViewControllers.enumerated() {
        singleVC.tabBarItem.image = UIImage(named: tabBarImageNames[index]).originalImage
        singleVC.tabBarItem.selectedImage = UIImage(named: tabBarImageNames[index] + "_selected").originalImage
        singleVC.tabBarItem.title = tabBarTitles[index]
    }

运行后便可查看到原始的图片效果。

编写文件 IWCustomTabBarView :

import UIKit
//  自定义按钮功能
enum IWCustomButtonOperation {
case customRecordingVideo       //  录像
case customTakePhoto            //  拍照
case customMakeTape             //  录音
}
/// 页面按钮点击协议
protocol IWCustomTabBarViewDelegate {

/// 点击tabBar 管理下的按钮
///
/// - parameter customTabBarView:     当前视图
/// - parameter didSelectedButtonTag: 点击tag,这个是区分标识
func iwCustomTabBarView(customTabBarView: IWCustomTabBarView, _ didSelectedButtonTag: Int)

/// 点击自定义的纯按钮
///
/// - parameter customTabBarView:      当前视图
/// - parameter didSelectedOpertaionButtonType: 按钮类型，拍照、摄像、录音
func iwCustomTabBarView(customTabBarView: IWCustomTabBarView, _ didSelectedOpertaionButtonType: IWCustomButtonOperation)
}
class IWCustomTabBarView: UIView {
//  MARK: - Properties
//  协议
var delegate: IWCustomTabBarViewDelegate?
//  操作按钮数组
fileprivate var operationButtons = [IWCustomButton]()
//  tabbar 管理的按钮数组
fileprivate var customButtons = [IWCustomButton]()
//  自定义按钮图片、标题
fileprivate let operationImageNames = ["tb_normol","tb_normol","tb_normol"]
fileprivate let operationTitls = ["摄像", "拍照", "录音"]

//  MARK: - Init
override init(frame: CGRect) {
    super.init(frame: frame)

    //  添加自定义按钮
    addOperationButtons()
}

required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    print("IWCustomTabBarView 页面 init(coder:) 方法没有实现")
}

/// 布局控件
override func layoutSubviews() {
    super.layoutSubviews()

    //  设置位置
    let btnY: CGFloat = 0
    let btnWidth = bounds.width / CGFloat(subviews.count)
    let btnHeight = bounds.height

    //  这里其实就两个
    for (index, customButton) in customButtons.enumerated() {

        switch index {
        case 0:
            customButton.frame = CGRect(x: 0, y: 0, width: btnWidth, height: btnHeight)
            customButton.tag = index
        case 1:
            customButton.frame = CGRect(x: btnWidth * 4, y: 0, width: btnWidth, height: btnHeight)
            customButton.tag = index
        default:
            break
        }
    }

    //  这里有三个
    for (index, operBtn) in operationButtons.enumerated() {
        let btnX = (CGFloat(index) + 1) * btnWidth
        operBtn.frame = CGRect(x: btnX, y: btnY, width: btnWidth, height: btnHeight)
    }
}

//  MARK: - Public Methods
/// 根据原始的 TabBarItem 设置自定义Button
///
/// - parameter originalTabBarItem: 原始数据
func addCustomTabBarButton(by originalTabBarItem: UITabBarItem) {
    //  添加初始按钮
    let customButton = IWCustomButton()
    customButtons.append(customButton)
    addSubview(customButton)

    //  添加点击事件
    customButton.addTarget(self, action: #selector(customButtonClickedAction(customBtn:)), for: .touchUpInside)

    //  默认展示第一个页面
    if customButtons.count == 1 {
        customButtonClickedAction(customBtn: customButton)
    }
}

//  MARK: - Private Methods

/// 添加操作按钮
fileprivate func addOperationButtons() {
    for index in 0 ..< 3 {
        let operationBtn = IWCustomButton()
        operationButtons.append(operationBtn)
        operationBtn.setImage(UIImage(named: operationImageNames[index]), for: .normal)
        operationBtn.setImage(UIImage(named: operationImageNames[index]), for: .highlighted)
        operationBtn.setTitle(operationTitls[index], for: .normal)
        operationBtn.tag = 100 + index
        operationBtn.addTarget(self, action: #selector(operationButtonClickedAction(operBtn:)), for: .touchUpInside)
        addSubview(operationBtn)
    }
}

///  操作按钮点击事件
@objc fileprivate func operationButtonClickedAction(operBtn: IWCustomButton) {
    switch operBtn.tag {
    case 100:
        delegate?.iwCustomTabBarView(customTabBarView: self, .customRecordingVideo)
    case 101:
        delegate?.iwCustomTabBarView(customTabBarView: self, .customTakePhoto)
    case 102:
        delegate?.iwCustomTabBarView(customTabBarView: self, .customMakeTape)
    default:
        break
    }
}

//  保证按钮的状态正常显示
fileprivate var lastCustomButton = IWCustomButton()

///  tabbar 管理下按钮的点击事件
@objc fileprivate func customButtonClickedAction(customBtn: IWCustomButton) {
    delegate?.iwCustomTabBarView(customTabBarView: self, customBtn.tag)

    lastCustomButton.isSelected = false
    customBtn.isSelected = true
    lastCustomButton = customBtn
}
}

在 IWCustomTabBarController 文件的 setChildViewControllerItem() 方法中，修改遍历子页面的代码，获取当前的 UITabBarItem ：

// 遍历子页面 for (index, singleVC) in containViewControllers.enumerated() { 
singleVC.tabBarItem.image = UIImage(named: tabBarImageNames[index]) 
singleVC.tabBarItem.selectedImage = UIImage(named: tabBarImageNames[index] + "_selected") 
singleVC.tabBarItem.title = tabBarTitles[index]
//  添加相对应的自定义按钮
        customTabBarView.addCustomTabBarButton(by: singleVC.tabBarItem)
}

运行后，看到效果好像乱乱的，暂时不用在意，在后面的代码中会慢慢整理出理想的效果。

简单分析上面的代码：这里我在中间加入了三个自定义的按钮。这样的话，最下面应该是有5个按钮的。当然也可以加入一个或者两个等，只需要修改上面对应的数值就可以了。这里面比较主要的就是自定义协议 IWCustomTabBarViewDelegate 和布局方法 layoutSubviews，布局方法里如果能理解两个 for 循环和对应数组中的数据来源、作用，那么问题就简单很多了。

这里要说一个属性 lastCustomButton ，这个属性会让我们避免不必要的遍历按钮，有些时候多个按钮只能有一个被选中时，有种常见的方法就是遍历按钮数组，令其中一个 isSelected = true ，其他按钮的 isSelected = false ，而这个属性就能取代遍历。

其实存在的问题也很明显，就是这么写的话很难去扩展，譬如如果上面的代码已经完成了，但是临时需要减少一个自定义按钮，那么就需要改动多个地方。这里只是提供一种自定义的思路，只是说还有很多可以优化的地方。

关于自定义的 UIButotn ，是个很有意思的地方。因为视觉上的改变都是在这里发生，先使用默认的设置：

import UIKit
class IWCustomButton: UIButton {

override init(frame: CGRect) {
    super.init(frame: frame)
    titleLabel?.textAlignment = .center
    setTitleColor(UIColor.gray, for: .normal)
    setTitleColor(UIColor.red, for: .selected)
    titleLabel?.font = UIFont.italicSystemFont(ofSize: 12)
}

required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    print("⚠️⚠️⚠️ init(coder:) 方法没有实现")
}

/// 根据传入的 UITabBarItem 设置数据显示
///
/// - parameter tabBarItem: 数据来源
func setTabBarItem(tabBarItem: UITabBarItem) {
    setTitle(tabBarItem.title, for: .normal)
    setImage(tabBarItem.image, for: .normal)
    setImage(tabBarItem.selectedImage, for: .highlighted)
    setImage(tabBarItem.selectedImage, for: .selected)
}
}

修改 IWCustomTabBarView 文件的 addCustomTabBarButton(by: ) 方法：

//  MARK: - Public Methods
/// 根据原始的 TabBarItem 设置自定义Button
///
/// - parameter originalTabBarItem: 原始数据
func addCustomTabBarButton(by originalTabBarItem: UITabBarItem) {
    //  添加初始按钮
    let customButton = IWCustomButton()
    customButtons.append(customButton)
    addSubview(customButton)

    //  传值
    customButton.setTabBarItem(tabBarItem: originalTabBarItem)

    //  添加点击事件
    customButton.addTarget(self, action: #selector(customButtonClickedAction(customBtn:)), for: .touchUpInside)

    //  默认展示第一个页面
    if customButtons.count == 1 {
        customButtonClickedAction(customBtn: customButton)
    }
}

看看运行结果：

首先，我们发现了乱的原因，就是自定义的按钮和原本的 UITabBarItem 的显示起了冲突。那么先修改这个问题：在 IWCustomTabBarController 方法中页面即将出现时添加方法：

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)

    //  移除原生的 TabBarItem ，否则会出现覆盖现象
    tabBar.subviews.forEach { (subView) in
        if subView is UIControl {
            subView.removeFromSuperview()
        }
    }
}

那么上面重复显示的原生项此时就移除了。下一个问题：发现自定义按钮图像的大小不一致。其实中间图片本身的大小就是比两边的大的。以 2x.png 为例，中间的图标是 70x70，而两边的是 48x48。如果在没有文字显示的情况下，在按钮的初始化方法中添加 imageView?.contentMode = .center ，图片居中展示，自定义按钮到这个地方就可以结束了（可以尝试不要 title ，查看运行效果）。甚至可以在自定义按钮的初始化方法里使用仿射变换来放大、缩小图片。

这里为了控制图片、文字的位置，重写 UIButton 的两个方法：

/// 重写 UIButton 的 UIImageView 位置
///
/// - parameter contentRect: 始位置
///
/// - returns: 修改后
override func imageRect(forContentRect contentRect: CGRect) -> CGRect {
    let imageWidth = contentRect.size.height * 4 / 9
    let imageHeight = contentRect.size.height
    return CGRect(x: bounds.width / 2 - imageWidth / 2, y: imageHeight / 9, width: imageWidth, height: imageWidth)
}

/// 重写 UIButton 的 TitleLabel 的位置
///
/// - parameter contentRect: 原始位置
///
/// - returns: 修改后
override func titleRect(forContentRect contentRect: CGRect) -> CGRect {
    let titleWidth = contentRect.size.width
    let titleHeight = contentRect.size.height / 3
    return CGRect(x: bounds.width / 2 - titleWidth / 2, y: bounds.height - titleHeight, width: titleWidth, height: titleHeight)
}

对上面代码做简单地说明，首先说方法中 contentRect 这个变量，它的 size 是这个 UIButton 的大小，而不是单独的 UIImageView ，或者 titleLabel 的大小。上面的一些具体数值，譬如 4 / 9 等这种奇葩的比例数值，仅仅是我根据自己的审美观随便写入的一些数值，至于到具体的开发中，可以固定大小，也可以使用更加细致的比例，因为 tabBar 默认的高度是 49 ，那么很多数据就可以使用了。现在看看效果：

在 IWCustomTabBarController 文件中实现 IWCustomTabBarView 文件中的协议方法，首先添加协议，然后实现方法，别忘了令 customTabBarView.delegate = self ：

//  MARK: - IWCustomTabBarViewDelegate
///  点击 tabbar 管理下的按钮
func iwCustomTabBarView(customTabBarView: IWCustomTabBarView, _ didSelectedButtonTag: Int) {
    selectedIndex = didSelectedButtonTag
}

///  点击自定义添加的的按钮
func iwCustomTabBarView(customTabBarView: IWCustomTabBarView, _ didSelectedOpertaionButtonType: IWCustomButtonOperation) {
    switch didSelectedOpertaionButtonType {
    case .customRecordingVideo:
        print("摄像")
        let vc = UIViewController()
        vc.view.backgroundColor = UIColor.orange
        addBackButton(on: vc.view)
        present(vc, animated: true, completion: nil)
    case .customTakePhoto:
        print("拍照")
        let vc = UIViewController()
        vc.view.backgroundColor = UIColor.green
        addBackButton(on: vc.view)
        present(vc, animated: true, completion: nil)
    case .customMakeTape:
        print("录音")
        let vc = UIViewController()
        vc.view.backgroundColor = UIColor.cyan
        addBackButton(on: vc.view)
        present(vc, animated: true, completion: nil)
    }
}

fileprivate func addBackButton(on superView: UIView) {
    let btn = UIButton()
    btn.frame = CGRect(x: 100, y: 100, width: 100, height: 50)
    btn.backgroundColor = UIColor.blue
    btn.setTitle("返回", for: .normal)
    btn.setTitleColor(UIColor.white, for: .normal)
    btn.addTarget(self, action: #selector(dismissAction), for: .touchUpInside)
    superView.addSubview(btn)
}
@objc func dismissAction() {
    dismiss(animated: true, completion: nil)
}

上面的代码，只单独说一点，就是协议方法 iwCustomTabBarView(customTabBarView : , _ didSelectedButtonTag) 中， selectedIndex 这个属性并非我们自己定义的变量，而是系统设置的，所以这时候 didSelectedButtonTag 所代表值就显得很有意思了，它正是我们在 UITabBar 管理下 ViewController 是下标值。看看这时候的效果吧：

最后再说一点，有时候我们需要给自定义的 IWCustomTabBarView 添加背景图片，那么这时候会出现一个问题，就是原本的 TabBar 的浅灰色背景始终会有一条线，此时在 IWCustomTabBarController 文件的 viewDidLoad() 方法中添加下面的代码即可。

//  去除 TabBar 阴影
    let originalTabBar = UITabBar.appearance()
    originalTabBar.shadowImage = UIImage()
    originalTabBar.backgroundImage = UIImage()

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。