I need to design a Tabbar Like This:
Well, For this design I am using a custom Class for getting the shape and arc with shadow. And For Centre button I am adding a button in the middle programmatically. Here is the class used for Tabbar shape:
@IBDesignable
class DesignerTab: UITabBar {
private var shapeLayer: CALayer?
private func addShape() {
let shapeLayer = CAShapeLayer()
shapeLayer.path = createPath()
shapeLayer.strokeColor = UIColor.lightGray.cgColor
shapeLayer.fillColor = UIColor.white.cgColor
shapeLayer.lineWidth = 1.0
//The below 4 lines are for shadow above the bar. you can skip them if you do not want a shadow
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
}
override func draw(_ rect: CGRect) {
self.isTranslucent = true
self.backgroundColor = .clear
self.tintColor = .clear
self.addShape()
}
func createPath() -> CGPath {
let height: CGFloat = 27
let path = UIBezierPath()
let centerWidth = self.frame.width
path.move(to: CGPoint(x: 0, y: 0))
path.addLine(to: CGPoint(x: (centerWidth - (height * 2)+10), y: 0))
path.addCurve(to: CGPoint(x: centerWidth, y: height),
controlPoint1: CGPoint(x: (centerWidth - 30), y: 0), controlPoint2: CGPoint(x: centerWidth - 25, y: height-0))
path.addCurve(to: CGPoint(x: (centerWidth + (height * 2)-10), y: 0),
controlPoint1: CGPoint(x: centerWidth + 25, y: height-0), controlPoint2: CGPoint(x: (centerWidth + 30), y: 0))
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 hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
guard !clipsToBounds && !isHidden && alpha > 0 else { return nil }
for member in subviews.reversed() {
let subPoint = member.convert(point, from: self)
guard let result = member.hitTest(subPoint, with: event) else { continue }
return result
}
return nil
}
}
The problem is that I want Centre button's background to be clear, There should not be any tabbar showing in background.Here is what I need :
and here is what I got :
We can clearly see there is white color shown in background. To resolve it I tried:
UITabBar.appearance().isTranslucent = true
UITabBar.appearance().backgroundColor = .clear
UITabBar.appearance().tintColor = .clear
self.tabBarController?.tabBar.backgroundColor = .clear
self.tabBarController?.tabBar.tintColor = .clear
self.tabBar.backgroundColor = .clear
self.tabBar.tintColor = .clear
but it didn't work for me. Anybody Plz tell me how can I get this tabbar background clear? Thanks.
View Hierarchy in Debugger:
