title: Custom Tab Bar, with central button which will be hide by pressed index
body: <p>How I can create Custom tab bar with 4 items and one FAB in center BUT Fab button show only when i press on index 3, for index 0 .. 3 fab.isHidden = true. I am don't need animation that button if shift, but in fill be plus), only show / hide. For creating custom tab bat I am use this guide <a href="https://medium.com/better-programming/draw-a-custom-ios-tabbar-shape-27d298a7f4fa" rel="nofollow noreferrer">https://medium.com/better-programming/draw-a-custom-ios-tabbar-shape-27d298a7f4fa</a>, I am need create tab bar like this , I am try ma<a href="https://i.stack.imgur.com/meBUH.png" rel="nofollow noreferrer">enter image description here</a>ny other way but can't solved problem.</p>
  <p><a href="https://i.stack.imgur.com/HUWTw.png" rel="nofollow noreferrer">Custom tab bar which needed</a></p>
  <p>I am try this way</p>
  <pre><code>import UIKit
  
  @IBDesignable
  class CustomizedTabBar: UITabBar {
  
     
      private var shapeLayer: CALayer?
  
      private func addShape() {
          let shapeLayer = CAShapeLayer()
          shapeLayer.path = createPath()
          shapeLayer.strokeColor = UIColor.red.cgColor
          shapeLayer.fillColor = UIColor.white.cgColor
          shapeLayer.lineWidth = 1.0
  
          if let oldShapeLayer = self.shapeLayer {
              self.layer.replaceSublayer(oldShapeLayer, with: shapeLayer)
          } else {
              self.layer.insertSublayer(shapeLayer, at: 0)
          }
  
          self.shapeLayer = shapeLayer
      }
  
      override func draw(_ rect: CGRect) {
          self.addShape()
      }
  
      func createPath() -&gt; CGPath {
  
          let height: CGFloat = 37.0
          let path = UIBezierPath()
          let centerWidth = self.frame.width / 2
  
          path.move(to: CGPoint(x: 0, y: 0)) // start top left
          path.addLine(to: CGPoint(x: (centerWidth - height * 2), y: 0)) // the beginning of the trough
  
  ////        // first curve down
  //      path.addCurve(to: CGPoint(x: centerWidth, y: height), controlPoint1: CGPoint(x: (centerWidth - 25), y: 0), controlPoint2: CGPoint(x: centerWidth - 35, y: height))
  //
  ////        // second curve up
  //        path.addCurve(to: CGPoint(x: (centerWidth + height * 1.0), y: 0),
  //                    controlPoint1: CGPoint(x: centerWidth + 25, y: height), controlPoint2: CGPoint(x: (centerWidth + 30), y: 0))
          
          // cirle inside tab bar
          path.addArc(withCenter: CGPoint(x: centerWidth, y: 0), radius: height, startAngle: CGFloat(180).degreesToRadians, endAngle: CGFloat(0).degreesToRadians, clockwise: false)
          
  
          // complete the rect
  
          path.addLine(to: CGPoint(x: self.frame.width, y: 0))
          path.addLine(to: CGPoint(x: self.frame.width, y: self.frame.height))
          path.addLine(to: CGPoint(x: 0, y: self.frame.height))
          path.close()
  
          return path.cgPath
      }
  
      override func point(inside point: CGPoint, with event: UIEvent?) -&gt; Bool {
          let buttonRadius: CGFloat = 35
          return abs(self.center.x - point.x) &gt; buttonRadius || abs(point.y) &gt; buttonRadius
      }
  
      func createPathCircle() -&gt; CGPath {
  
          let radius: CGFloat = 37.0
          let path = UIBezierPath()
          let centerWidth = self.frame.width / 2
  
          path.move(to: CGPoint(x: 0, y: 0))
          path.addLine(to: CGPoint(x: (centerWidth - radius * 2), y: 0))
          path.addArc(withCenter: CGPoint(x: centerWidth, y: 0), radius: radius, startAngle: CGFloat(180).degreesToRadians, endAngle: CGFloat(0).degreesToRadians, clockwise: false)
          path.addLine(to: CGPoint(x: self.frame.width, y: 0))
          path.addLine(to: CGPoint(x: self.frame.width, y: self.frame.height))
          path.addLine(to: CGPoint(x: 0, y: self.frame.height))
          path.close()
          return path.cgPath
      }
  }
  
  extension CGFloat {
      var degreesToRadians: CGFloat { return self * .pi / 180 }
      var radiansToDegrees: CGFloat { return self * 180 / .pi }
  }
  </code></pre>
  <p>And second way</p>
  <pre><code>import UIKit
  
  class MainTabBar: UITabBar {
  
      var checkState: Bool = true
      
     public var middleButton = UIButton()
  
      override func awakeFromNib() {
          super.awakeFromNib()
          
          guard let tabItems = items else { return }
          tabItems[1].titlePositionAdjustment = UIOffset(horizontal: -10, vertical: 0)
          tabItems[2].titlePositionAdjustment = UIOffset(horizontal: 10, vertical: 0)
  
   setupMiddleButton()
          
     
    
      }
      
      override func hitTest(_ point: CGPoint, with event: UIEvent?) -&gt; UIView? {
          if self.isHidden {
              return super.hitTest(point, with: event)
          }
          
          let from = point
          let to = middleButton.center
          
  
          return sqrt((from.x - to.x) * (from.x - to.x) + (from.y - to.y) * (from.y - to.y)) &lt;= 39 ? middleButton : super.hitTest(point, with: event)
      }
      
      override func layoutSubviews() {
          super.layoutSubviews()
          middleButton.center = CGPoint(x: UIScreen.main.bounds.width / 2, y: 5)
      }
  
      func setupMiddleButton() {
  
          middleButton.frame.size = CGSize(width: 70, height: 70)
          middleButton.layer.cornerRadius = 35
          middleButton.layer.masksToBounds = true
          middleButton.layer.borderWidth = 8
          middleButton.layer.borderColor = #colorLiteral(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0)
          middleButton.backgroundColor = #colorLiteral(red: 0.2447069331, green: 0.850134835, blue: 0.1531122658, alpha: 1)
          middleButton.setImage(UIImage(named: &quot;plus.png&quot;), for: .normal)
          middleButton.center = CGPoint(x: UIScreen.main.bounds.width / 2, y: 0)
          middleButton.addTarget(self, action: #selector(test), for: .touchUpInside)
         
          addSubview(middleButton)
          
      }
  
      @objc func test() {
          print(&quot;my name is jeff&quot;)
      }
      
        
  
  }
  </code></pre>
  <p>and I am try this way from article
  <a href="https://equaleyes.com/blog/2017/09/04/the-common-raised-center-button-problems-in-tabbar/" rel="nofollow noreferrer">https://equaleyes.com/blog/2017/09/04/the-common-raised-center-button-problems-in-tabbar/</a><br />
  but it's not working for me, also I am read too many info from WWW and don't get answer(</p>