How to make UItabbar image rounded in swift programmatically

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!

https://stackoverflow.com/questions/29585943/how-do-i-successfully-set-a-maskview-to-a-uiview — Pochi, Jul 21 '17 at 03:15

score 11 · Accepted Answer · answered Jul 21 '17 at 06:59

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]

I got an error " Directly modifying a tab bar managed by a tab bar controller is not allowed." @firstinq — WoShiNiBaBa, Aug 02 '17 at 15:02
This is Working perfectly . thanks for this. i have one issue after reducing the size my image is pixelating. is there any solution for that? — Ansal Antony, Feb 12 '18 at 07:24
@AnsalAntony you see https://stackoverflow.com/questions/18030323/better-quality-image-from-uigraphicsgetimagefromcurrentimagecontext and replace UIGraphicsBeginImageContextWithOptions(self.size, false, 1) by UIGraphicsBeginImageContextWithOptions(self.size, false, 0) — David Fabreguette, Oct 30 '18 at 13:07
@AnsalAntony, Just replace 'UIGraphicsBeginImageContext(CGSize(width: newWidth, height: newHeight))' in resizedImage function, with this 'UIGraphicsBeginImageContextWithOptions(CGSize(width: newWidth, height: newHeight), false, 0) — iHarshil, Feb 12 '19 at 11:46

score 4 · Answer 2 · answered Aug 02 '17 at 15:18

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

score 0 · Answer 3 · answered Apr 29 '18 at 12:26

    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
   }

How to make UItabbar image rounded in swift programmatically

3 Answers3

Linked