How to make UItabbar image rounded in swift programmatically - swift

Question

I want to create something like image as below
could you help me any code how to make it rounded
thanks for your help!

Answer 1

I think you need to
(Optional) Resize the image if image is bigger than standard bar button image size)
Make the image round
before using it as UItabBarItem image. Below is an extension for UIImage with these two functions:
extension UIImage{
var roundedImage: UIImage {
let rect = CGRect(origin:CGPoint(x: 0, y: 0), size: self.size)
UIGraphicsBeginImageContextWithOptions(self.size, false, 1)
UIBezierPath(
roundedRect: rect,
cornerRadius: self.size.height
).addClip()
self.draw(in: rect)
return UIGraphicsGetImageFromCurrentImageContext()!
}
func resizedImage(newWidth: CGFloat) -> UIImage {
let scale = newWidth / self.size.width
let newHeight = self.size.height * scale
UIGraphicsBeginImageContext(CGSize(width: newWidth, height: newHeight))
self.draw(in: CGRect(x: 0, y: 0, width: newWidth, height: newHeight))
let newImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return newImage!
}
}
Example usage:
let barImage: UIImage = UIImage(named: "avatar_copy.png")!.resizedImage(newWidth: 40).roundedImage.withRenderingMode(.alwaysOriginal)
let roundTabBar = UITabBarItem(title: nil, image: barImage.withRenderingMode(.alwaysOriginal), selectedImage: barImage)
self.bottomTabbar.items = [roundTabBar]

Answer 2

I changed and added a new function to #firstinq answer. And this way works for me.
extension UIImage{
var roundMyImage: UIImage {
let rect = CGRect(origin:CGPoint(x: 0, y: 0), size: self.size)
UIGraphicsBeginImageContextWithOptions(self.size, false, 1)
UIBezierPath(
roundedRect: rect,
cornerRadius: self.size.height
).addClip()
self.draw(in: rect)
return UIGraphicsGetImageFromCurrentImageContext()!
}
func resizeMyImage(newWidth: CGFloat) -> UIImage {
let scale = newWidth / self.size.width
let newHeight = self.size.height * scale
UIGraphicsBeginImageContext(CGSize(width: newWidth, height: newHeight))
self.draw(in: CGRect(x: 0, y: 0, width: newWidth, height: newHeight))
let newImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return newImage!
}
func squareMyImage() -> UIImage {
UIGraphicsBeginImageContext(CGSize(width: self.size.width, height: self.size.width))
self.draw(in: CGRect(x: 0, y: 0, width: self.size.width, height: self.size.width))
let newImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return newImage!
}
}
In TabBarController I changed it to:
let barImage: UIImage = UIImage(named: "landingpage_image2")!.squareMyImage().resizeMyImage(newWidth: 40).roundMyImage.withRenderingMode(.alwaysOriginal)
self.tabBar.items?[1].image = barImage

Answer 3

let profileImg : UIImageView = {
let iv = UIImageView()
iv.translatesAutoresizingMaskIntoConstraints = false
iv.contentMode = .scaleAspectFill
iv.image = #imageLiteral(resourceName: "user")
iv.clipsToBounds = true
iv.layer.cornerRadius = 25
return iv
}()
// add constraint
override func viewDidLoad() {
super.viewDidLoad()
profileImg.leftAnchor.constraint(equalTo: view.leftAnchor, constant : 8).isActive = true
profileImg.topAnchor.constraint(equalTo: view.topAnchor , constant : 8).isActive = true
profileImg.widthAnchor.constraint(equalToConstant: 50).isActive = true
profileImg.heightAnchor.constraint(equalToConstant: 50).isActive = true
}