Add Top border to selected TabBar - ios

Question

How to add border to the TOP of selected TabBar.
Below method I have used to add it at bottom but I want
extension UIImage {
func createSelectionIndicator(color: UIColor, size: CGSize, lineWidth: CGFloat) -> UIImage {
UIGraphicsBeginImageContextWithOptions(size, false, 0)
color.setFill()
UIRectFill(CGRect(x: 0, y: size.height - lineWidth, width: size.width, height: lineWidth))
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return image!
}
}
tabBar.selectionIndicatorImage = UIImage().createSelectionIndicator(color: BLUE, size: CGSize(width: tabBar.frame.width/CGFloat(tabBar.items!.count), height: tabBar.frame.height), lineWidth: 2.0)

Answer 1

You can use the function to create borders on any side -
enum Side: String {
case top, left, right, bottom
}
extension UIImage {
func createSelectionIndicator(color: UIColor, size: CGSize, lineThickness: CGFloat, side: Side) -> UIImage {
var xPosition = 0.0
var yPosition = 0.0
var imgWidth = 2.0
var imgHeight = 2.0
switch side {
case .top:
xPosition = 0.0
yPosition = 0.0
imgWidth = size.width
imgHeight = lineThickness
case .bottom:
xPosition = 0.0
yPosition = size.height - lineThickness
imgWidth = size.width
imgHeight = lineThickness
case .left:
xPosition = 0.0
yPosition = 0.0
imgWidth = lineThickness
imgHeight = size.height
case .right:
xPosition = size.width - lineThickness
yPosition = 0.0
imgWidth = lineThickness
imgHeight = size.height
}
UIGraphicsBeginImageContextWithOptions(size, false, 0)
color.setFill()
UIRectFill(CGRect(x: xPosition, y: yPosition, width: imgWidth, height: imgHeight))
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return image!
}
}
tabBar.selectionIndicatorImage = UIImage().createSelectionIndicator(color: BLUE, size: CGSize(width: tabBar.frame.width/CGFloat(tabBar.items!.count), height: tabBar.frame.height), lineThickness: 2.0, side: .top)
Let me know if this was useful or you need any other help.
Happy Coding :)

Answer 2

import UIKit
class MyViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
tabBarController?.tabBar.addBorder(.top, color: .red, thickness: 2.0)
}
}
extension UITabBar {
func addBorder(_ edge: UIRectEdge, color: UIColor, thickness: CGFloat) {
let subview = UIView()
subview.translatesAutoresizingMaskIntoConstraints = false
subview.backgroundColor = color
self.addSubview(subview)
switch edge {
case .top, .bottom:
subview.leftAnchor.constraint(equalTo: self.leftAnchor, constant: 0).isActive = true
subview.rightAnchor.constraint(equalTo: self.rightAnchor, constant: 0).isActive = true
subview.heightAnchor.constraint(equalToConstant: thickness).isActive = true
if edge == .top {
subview.topAnchor.constraint(equalTo: self.topAnchor, constant: 0).isActive = true
} else {
subview.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: 0).isActive = true
}
case .left, .right:
subview.topAnchor.constraint(equalTo: self.topAnchor, constant: 0).isActive = true
subview.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: 0).isActive = true
subview.widthAnchor.constraint(equalToConstant: thickness).isActive = true
if edge == .left {
subview.leftAnchor.constraint(equalTo: self.leftAnchor, constant: 0).isActive = true
} else {
subview.rightAnchor.constraint(equalTo: self.rightAnchor, constant: 0).isActive = true
}
default:
break
}
}
}
tabBarController?.tabBar.addBorder(.top, color: .orange, thickness: 5.0)