自定义 UItababbar swift答案

【问题标题】：Customising UItababbar swift自定义 UItababbar swift
【发布时间】：2020-12-30 15:12:01
【问题描述】：

谁能指出我如何在 UITabbar 中实现这样的设计。我尝试添加背景图像，但这看起来不像设计。这里的曲线超出了UITabbar的框架，不知道如何在活动标签栏的顶部添加这个视图。

【问题讨论】：

【解决方案1】：

从UITabBarController 创建一个自定义的TabBar 可以解决这个问题。不要将直接图像添加到选项卡栏，而是使用动态图像，使用UIGraphicsBeginImageContext 表示selectedTabBackgroundImage。

创建图像。
将图像的顶部剪成圆形

这是代码示例。

import UIKit

class CustomTabBarViewController: UITabBarController {
    
    var topClipSize: CGFloat = 24.5 //Adjust based on the number of tabbar
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        let singleTabWidth: CGFloat = self.tabBar.frame.size.width / CGFloat((self.tabBar.items?.count)!)
        let singleTabSize = CGSize(width:singleTabWidth , height: self.tabBar.frame.size.height)
        // Create the backgound image
        let selectedTabBackgroundImage: UIImage = self.imageWithColor(color: .blue, size: singleTabSize)
        // Clip the top
        self.tabBar.selectionIndicatorImage = selectedTabBackgroundImage.roundTopImage(topClipSize: topClipSize)
    }
    
    func imageWithColor(color: UIColor, size: CGSize) -> UIImage {
        if size.height > 55 {
            topClipSize = 30.0  // iPhone 8 tabbar height is 53 and iPnone X is 83 - We need more space on top.
        }
        let rect = CGRect(x: 0, y: 0, width: size.width, height: size.height + topClipSize)
        UIGraphicsBeginImageContext(rect.size)
        let context = UIGraphicsGetCurrentContext()
        context!.setFillColor(color.cgColor)
        context!.fill(rect)
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        
        return image!
    }
}

extension UIImage {
    func roundTopImage(topClipSize: CGFloat) -> UIImage {
    let rect = CGRect(origin:CGPoint(x: 0, y: 0), size: self.size)
    let rectBounds: CGRect = CGRect(x: rect.origin.x, y: rect.origin.y + (topClipSize * 2), width: rect.size.width, height: rect.size.height - (topClipSize * 2))
    let ovalBounds: CGRect = CGRect(x: rect.origin.x - topClipSize, y: rect.origin.y, width: rect.size.width + (topClipSize * 2), height: rect.size.height)
    UIGraphicsBeginImageContextWithOptions(self.size, false, 1)
    let rectPath = UIBezierPath(rect: rectBounds)
    let ovalPath = UIBezierPath(ovalIn: ovalBounds)
    rectPath.append(ovalPath)
    rectPath.addClip()
    self.draw(in: rect)
    return UIGraphicsGetImageFromCurrentImageContext()!
}
}

这是输出：

【讨论】：

【解决方案2】：

要优雅地改变原生 UITabBar 的外观到那种程度是不可能的。您的选择是创建一个类似于 UITabBarController 的自定义容器视图控制器，或者只是隐藏默认选项卡栏并在该空间中实现您自己的视图。

尽管它不那么优雅，因为您只是在默认选项卡栏顶部放置一个视图，但我实际上喜欢这种方法，因为您保留了本机 UITabBarController 的好处（从其视图控制器调用 self.tabBarController?，它已经调整了布局边距等）。

为此，在您的 UITabBarController 子类中隐藏 tabBar：

self.tabBar.isHidden = true
self.tabBar.alpha = 0

然后在实现自定义视图之后，只需在 viewDidLayoutSubviews 中将自定义视图的框架设置为 self.tabBar.frame。

要更改 viewController，请在用户点击您的自定义选项卡之一时调用：

self.selectedIndex = newIndex

【讨论】：