iOS：带有动画 UITabBarItem 的 Curverd AppTabBar

Question

我正在开发 iOS 应用程序，该应用程序需要 UITabBarItem 下的曲线显示

我遵循了一些教程，我能够获得这段代码，使我的 UITabBar 弯曲，

import Foundation
import  UIKit
class AppTabBar: UITabBar {
    var curvePos : CGFloat =  0
    private var shapeLayer: CALayer?
    override func draw(_ rect: CGRect) {
        curvePos = rect.width / 2
        self.addShape(rect: rect)
    }
    
    private func addShape(rect: CGRect) {
        let shapeLayer = CAShapeLayer()
        shapeLayer.path = createPath(in: rect)
        shapeLayer.strokeColor = UIColor.lightGray.cgColor
        shapeLayer.fillColor = #colorLiteral(red: 0.9782002568, green: 0.9782230258, blue: 0.9782107472, alpha: 1)
        shapeLayer.lineWidth = 0.5
        shapeLayer.shadowOffset = CGSize(width:0, height:0)
        shapeLayer.shadowRadius = 10
        shapeLayer.shadowColor = UIColor.gray.cgColor
        shapeLayer.shadowOpacity = 0.3
        if let oldShapeLayer = self.shapeLayer {
            self.layer.replaceSublayer(oldShapeLayer, with: shapeLayer)
        } else {
            self.layer.insertSublayer(shapeLayer, at: 0)
        }
        self.shapeLayer = shapeLayer
    }

    func createPath(in rect: CGRect) -> CGPath {
        let path = UIBezierPath()
        path.move(to: CGPoint(x: 0, y: 0))
        path.addLine(to: CGPoint(x: 0, y: rect.height))
        path.addLine(to: CGPoint(x: rect.width, y: rect.height))
        path.addLine(to: CGPoint(x: rect.width, y: 0))
        // adding Curve...
        path.move(to: CGPoint(x: curvePos + 40, y: 0))
        path.addQuadCurve(to: CGPoint(x: curvePos - 40, y: 0), controlPoint: CGPoint(x: curvePos, y: 70))
        return path.cgPath
    }
}

我现在需要的是： 1-点击 UITabBar 的每个项目以在所选项目下制作曲线时如何更改 curvePos 值。 2- 我如何为 UITabBarItem 或 UITabBarItem 图像设置动画以使其如上图所示。任何帮助将不胜感激。

Answer 1

enter image description here

import UIKit

class MainViewController: UIViewController, UITabBarDelegate {
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem) {
        
        
        switch item.title! {
        case "Home":
            //let oldShapeLayer = CAShapeLayer()
            //let shapeLayer = CAShapeLayer()
            //tabBar.layer.replaceSublayer(oldShapeLayer, with: shapeLayer)
            break
            
        case "Gallery" :
            
            break
            
        case "Settings" :
            
            break
            
        default: break
            
        }
        
    }
    
}

Answer 2

经过多次尝试，我得到了我想做的事情：下面是我的 AppTabBar 的修改代码：

class AppTabBar: UITabBar {
    var curvePos : CGFloat =  0
    private var shapeLayer: CALayer?
    override func draw(_ rect: CGRect) {
        let itemIndex = CGFloat(self.items!.firstIndex(of: selectedItem!)!)
        let itemWidth = self.frame.width / CGFloat(self.items!.count)
        curvePos = (itemWidth / 2) + (itemWidth * itemIndex)
        self.addShape(rect: rect)
    }

    private func addShape(rect: CGRect) {
        let shapeLayer = CAShapeLayer()
        shapeLayer.path = createPath(in: rect)
        shapeLayer.strokeColor = UIColor.lightGray.cgColor
        shapeLayer.fillColor = #colorLiteral(red: 0.9782002568, green: 0.9782230258, blue: 0.9782107472, alpha: 1)
        shapeLayer.lineWidth = 0.5
        shapeLayer.shadowOffset = CGSize(width:0, height:0)
        shapeLayer.shadowRadius = 10
        shapeLayer.shadowColor = UIColor.gray.cgColor
        shapeLayer.shadowOpacity = 0.3

        if let oldShapeLayer = self.shapeLayer {
            self.layer.replaceSublayer(oldShapeLayer, with: shapeLayer)
        } else {
            self.layer.insertSublayer(shapeLayer, at: 0)
        }
        self.shapeLayer = shapeLayer
    }

    func createPath(in rect: CGRect) -> CGPath {
        let path = UIBezierPath()
        path.move(to: CGPoint(x: 0, y: 0))
        path.addLine(to: CGPoint(x: 0, y: rect.height))
        path.addLine(to: CGPoint(x: rect.width, y: rect.height))
        path.addLine(to: CGPoint(x: rect.width, y: 0))
        
        // adding Curve...
        path.move(to: CGPoint(x: curvePos + 40, y: 0))
        
        path.addQuadCurve(to: CGPoint(x: curvePos - 40, y: 0), controlPoint: CGPoint(x: curvePos, y: 70))
        return path.cgPath
    }
}

并为 UITabBarController 创建另一个 class，如下所示：

class CustomTabBarController:  UITabBarController, UITabBarControllerDelegate    {
    override func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem) {
       print("sssss")
        tabBar.setNeedsDisplay()
    }
}

为TabBarController设置CustomTabBarController，为UITabBar设置AppTabBar

iOS：带有动画 UITabBarItem 的 Curverd AppTabBar

iOS: Curverd AppTabBar with animated UITabBarItem

xcode

storyboard

tabbar

ios

swift5