how to set custom UIImage to tabbar item

Question

what im trying to achieve is to have custom profile IMG on a tabbar item

First: I have tried to add the IMG to the tabbar directly

let ProfileImg: UIImageView = {
    let Img = UIImageView(image: UIImage(named: "PlaseHolder"))
        Img.layer.cornerRadius = 20
        Img.contentMode = .scaleAspectFit
        Img.clipsToBounds = true
        Img.layer.masksToBounds = true
        Img.translatesAutoresizingMaskIntoConstraints = false
    return Img
    }()

override func viewDidLoad() {
        super.viewDidLoad()

        fetchUser()

        }

       func fetchUser() {
        
        guard let uid = Auth.auth().currentUser?.uid else {return}
        let userRef = Database.database().reference(withPath: "users").child(uid)
        
        userRef.observeSingleEvent(of: .value, with: { (snapshot) in
            print(snapshot.value ?? "")
            
            let value = snapshot.value as? NSDictionary

            guard let profileImageUrl = value?["profileImageUrl"] as? String else {return}
            guard let url = URL(string: profileImageUrl) else { return }

            URLSession.shared.dataTask(with: url) { (data, response, err) in
                if let err = err {
                    print("unable to get profile image", err)
                }

                guard let data = data else {return}
                let image = UIImage(data: data)
                DispatchQueue.main.async {
                    self.tabBarItem.image = image?.withRenderingMode(.alwaysOriginal)
                    self.tabBarItem.selectedImage = image?.withRenderingMode(.alwaysOriginal)
                    
                }
                
            }.resume()
            
          }) { (err) in
              print("fail to fetch user", err)
          }
        
        }

and this was the result :
iphone simulator image the image is too big for a tabbar item image

but then I found another method I couldn't dead it or get it, it did add the image but I couldn't make it fit inside the tabbar + the corner radius is not working

extension UITabBarController {
    
    func addSubviewToLastTabItem(_ imageName: UIImage) {
        if let lastTabBarButton = self.tabBar.subviews.last, let tabItemImageView = lastTabBarButton.subviews.last {
            if let accountTabBarItem = self.tabBar.items?.first {
                accountTabBarItem.selectedImage = nil
                accountTabBarItem.image = nil
            }
            let imgView = UIImageView()
            imgView.frame = tabItemImageView.frame
            imgView.layer.cornerRadius = tabItemImageView.frame.height/2
            imgView.layer.masksToBounds = true
            imgView.contentMode = .scaleAspectFill
            imgView.clipsToBounds = true
            imgView.image = imageName
            self.tabBar.subviews.last?.addSubview(imgView)
        }
    }
}

and this is how to call it

 self.tabBarController?.addSubviewToLastTabItem(image!)

Result : iphone simulator image

please any idea to accomplish this

Answer 1

use this extintion to resize your image

extension UIImage {

    func resize(targetSize: CGSize) -> UIImage {
        return UIGraphicsImageRenderer(size:targetSize).image { _ in
            self.draw(in: CGRect(origin: .zero, size: targetSize))
        }
    }
}

here is how to use it in dispatch method

DispatchQueue.main.async { [weak self] in
     guard let data = data else {return}
     self?.ProfileImg.image = UIImage(data: data)?.resize(targetSize: CGSize(width: 33, height: 33)).roundMyImage.withRenderingMode(.alwaysOriginal)
     self?.tabBar.items?[0].selectedImage = self?.ProfileImg.image
     self?.tabBar.items?[0].image = self?.ProfileImg.image               
      }
   }.resume()