1

I have a custom tab bar item image that is also the profile picture of the user. The image is coming out blurry and I know it is because of the device I am using. I am not sure how to set an image that the user uploads to 2x and 3x because the image is not in the assets folder. Here is how I set up the custom tab bar item: 

    override func awakeFromNib() {
        super.awakeFromNib()

        self.tabBarItem.title = "MY ACCOUNT"
        self.tabBarItem.image = UIImage(named: "MySpace Filled-50")

        if self.loggedInUserUid != nil {

            let imageRef = FIRStorage.storage().reference().child((loggedInUserUid)!+"/profile_pic.jpg")

            imageRef.data(withMaxSize: 1 * 1024 * 1024, completion: { (data, error) -> Void in
                if error != nil {
                    print(error!)
                    return
                }

                DispatchQueue.main.async(execute: {
                    let image = UIImage(data: data!)
                    let imaged = self.resizeImage(image: (image?.withRenderingMode(.alwaysOriginal))!, newWidth: 30)
                    let imaggged = self.maskRoundedImage(image: imaged!, radius: 15)

                    self.tabBarItem.image = imaggged.withRenderingMode(.alwaysOriginal)
                    self.tabBarItem.selectedImage = imaggged.withRenderingMode(.alwaysOriginal)

                })

            }).resume()
} }
juelizabeth
  • 485
  • 1
  • 8
  • 31
  • I think your approach is right. You just need to increase the image size. 30x30 is 1x, so you need to set 60x60 and 90x90 for bigger screen size. For getting screen scale, you can use `UIScreen.main.scale` – t4nhpt Jun 13 '17 at 03:24
  • `let scale = UIScreen.main.scale let imaged = self.resizeImage(image: (image?.withRenderingMode(.alwaysOriginal))!, newWidth: scale)` I am doing this but it's still coming out blurry @t4nhpt – juelizabeth Jun 13 '17 at 03:45
  • No, `scale` is not `width`. You have to debug and see the value of `scale`. It will be 1, 2 and 3, corresponding to 1x, 2x, and 3x. You have to check, if the scale is 1, then image size is 30x30, then 2 is 60x60... – t4nhpt Jun 13 '17 at 04:07
  • @t4nhpt im sorry but I need more help, I debugged it and found that the value of scale is 2, how will I change it to three and where do I place it so it is applied to the image – juelizabeth Jun 13 '17 at 04:32
  • The `scale` belongs to screen size. The big screen size, such as iPhone 6+ or iPhone 7+... will give you the scale is 3. You can see this link: https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions. You can add a `if statement`, check if scale == 1, width = 30, else if scale ==2, width = 60, etc... – t4nhpt Jun 13 '17 at 04:43
  • @t4nhpt when I do this, the image becomes bigger. so for example of I do this: `if UIScreen.main.scale == 2 {self.resizeImage(image: (image?.withRenderingMode(.alwaysOriginal))!, newWidth: 60)}` Then the image becomes too big for my tabbar and it doesn't make the image more clear. – juelizabeth Jun 17 '17 at 04:26

0 Answers0