private let middleButtonDiameter: CGFloat = 42
private let redColor: UIColor = UIColor(red: 254.0 / 255.0, green: 116.0 / 255.0, blue: 96.0 / 255.0, alpha: 1.0)
private let greenColor: UIColor = UIColor(red: 102.0 / 255.0, green: 166.0 / 255.0, blue: 54.0 / 255.0, alpha: 1.0)
private lazy var middleButton: UIButton = {
  let middleButton = UIButton()
  middleButton.layer.cornerRadius = middleButtonDiameter / 2
  middleButton.backgroundColor = redColor
  middleButton.translatesAutoresizingMaskIntoConstraints = false
  return middleButton
}()

private lazy var heartImageView: UIImageView = {
  let heartImageView = UIImageView()
  heartImageView.image = UIImage(systemName: "heart.fill")
  heartImageView.tintColor = .white
  heartImageView.translatesAutoresizingMaskIntoConstraints = false
  return heartImageView
}()

private func makeUI() {
  // 1
  tabBar.addSubview(middleButton)
  middleButton.addSubview(heartImageView)
  // 2
  NSLayoutConstraint.activate([
    // 2.1
    middleButton.heightAnchor.constraint(equalToConstant: middleButtonDiameter),
    middleButton.widthAnchor.constraint(equalToConstant: middleButtonDiameter),
    // 2.2
    middleButton.centerXAnchor.constraint(equalTo: tabBar.centerXAnchor),
    middleButton.topAnchor.constraint(equalTo: tabBar.topAnchor, constant: -10)
  ])
  // 3
  NSLayoutConstraint.activate([
    // 3.1
    heartImageView.heightAnchor.constraint(equalToConstant: 15),
    heartImageView.widthAnchor.constraint(equalToConstant: 18),
    // 3.2
    heartImageView.centerXAnchor.constraint(equalTo: middleButton.centerXAnchor),
    heartImageView.centerYAnchor.constraint(equalTo: middleButton.centerYAnchor)
  ])
}

override func viewDidLoad() {
  super.viewDidLoad()
  makeUI()
}

import UIKit
final class CustomTabBar: UITabBar {
}

private var tabBarWidth: CGFloat { self.bounds.width }
private var tabBarHeight: CGFloat { self.bounds.height }
private var centerWidth: CGFloat { self.bounds.width / 2 }
private let circleRadius: CGFloat = 27

private func shapePath() -> CGPath {
  let path = UIBezierPath() // 1
  path.move(to: CGPoint(x: 0, y: 0)) // 2
  path.addLine(to: CGPoint(x: tabBarWidth, y: 0)) // 3
  path.addLine(to: CGPoint(x: tabBarWidth, y: tabBarHeight)) // 4
  path.addLine(to: CGPoint(x: 0, y: tabBarHeight)) // 5
  path.close() // 6
  return path.cgPath // 7
}

private func circlePath() -> CGPath {
  let path = UIBezierPath() // 1
  path.addArc(withCenter: CGPoint(x: centerWidth, y: 12), // 2
        radius: circleRadius, // 3
        startAngle: 180 * .pi / 180, // 4
        endAngle: 0 * 180 / .pi, // 5
        clockwise: true) // 6
  return path.cgPath // 7
}

private var shapeLayer: CALayer?
private var circleLayer: CALayer?

private func drawTabBar() {
  // 1
  let shapeLayer = CAShapeLayer()
  shapeLayer.path = shapePath()
  shapeLayer.strokeColor = UIColor.lightGray.cgColor
  shapeLayer.fillColor = UIColor.white.cgColor
  shapeLayer.lineWidth = 1.0
  // 2
  let circleLayer = CAShapeLayer()
  circleLayer.path = circlePath()
  circleLayer.strokeColor = UIColor.lightGray.cgColor
  circleLayer.fillColor = UIColor.white.cgColor
  circleLayer.lineWidth = 1.0
  // 3
  if let oldShapeLayer = self.shapeLayer {
    self.layer.replaceSublayer(oldShapeLayer, with: shapeLayer)
  } else if let oldShapeLayer = self.circleLayer {
    self.layer.replaceSublayer(oldShapeLayer, with: circleLayer)
  } else {
    self.layer.insertSublayer(shapeLayer, at: 0)
    self.layer.insertSublayer(circleLayer, at: 1)
  }
  // 4
  self.shapeLayer = shapeLayer
  self.circleLayer = circleLayer
}

override func draw(_ rect: CGRect) {
  drawTabBar()
}

// 1
let firstVC = UIViewController()
firstVC.view.backgroundColor = .yellow
firstVC.tabBarItem.title = "First VC"
firstVC.tabBarItem.image = UIImage(systemName: "1.circle")
// 2
let middleVC = UIViewController()
middleVC.view.backgroundColor = .green
middleVC.tabBarItem.title = "Middle VC"
// 3
let secondVC = UIViewController()
secondVC.view.backgroundColor = .blue
secondVC.tabBarItem.title = "Second VC"
secondVC.tabBarItem.image = UIImage(systemName: "2.circle")
// 4
viewControllers = [firstVC, middleVC, secondVC]

extension MainTabBarController: UITabBarControllerDelegate {
    override func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem) {
        let selectedIndex = self.tabBar.items?.firstIndex(of: item) // 1
        if selectedIndex != 1 { // 2
            middleButton.backgroundColor = redColor // 3
        } else {
            middleButton.backgroundColor = greenColor // 4
        }
    }
}

override func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
  let pointIsInside = super.point(inside: point, with: event) // 1
  if pointIsInside == false { // 2
    for subview in subviews { // 2.1
      let pointInSubview = subview.convert(point, from: self) // 2.2
      if subview.point(inside: pointInSubview, with: event) { // 2.3
        return true // 2.3.1
      }
    }
  }
  return pointIsInside // 3
}

middleButton.addTarget(self, action: #selector(didPressMiddleButton), for: .touchUpInside)

@objc
private func didPressMiddleButton() {
  selectedIndex = 1
  middleButton.backgroundColor = greenColor
}